/* ============================================================
   Nina labs — hoja de estilos única
   Paleta, tipografía y componentes. Sin dependencias ni build.
   ============================================================ */

:root{
  /* Escala neutra. Sin saturación a propósito: el color lo ponen los dos
     acentos de producto, no el fondo. */
  --papel:      #FAFAFA;
  --papel-2:    #F2F2F2;
  --papel-3:    #E8E8E8;
  --tinta:      #171717;
  --tinta-2:    #3A3A3A;
  --gris:       #737373;
  --gris-claro: #A3A3A3;
  --linea:      #E4E4E4;
  --linea-2:    #D0D0D0;
  --acento:     #575757;

  /* Acentos de cada producto (tomados de sus interfaces reales) */
  --co:         #E3120B;
  --co-oscuro:  #A70D08;
  --co-suave:   #FCEBEA;
  --pedro:      #004E4B;
  --pedro-2:    #0A6E69;
  --pedro-suave:#E7F0EE;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cond: "Barlow Condensed", "Inter", sans-serif;

  --env: 1180px;
  --radio: 14px;
  --sombra: 0 40px 80px -44px rgba(23, 23, 23,.45), 0 2px 8px rgba(23, 23, 23,.05);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100% }
a{ color:inherit }

::selection{ background:#171717; color:#FAFAFA }

.env{ width:100%; max-width:var(--env); margin-inline:auto; padding-inline:26px }

/* ---------- Tipografía ---------- */

h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.08; margin:0 }
h1{ font-size:clamp(2.6rem, 6.2vw, 4.5rem); font-variation-settings:"SOFT" 20,"WONK" 1 }
h2{ font-size:clamp(2rem, 4.2vw, 3rem) }
h3{ font-size:clamp(1.25rem, 2.2vw, 1.5rem); line-height:1.25 }
p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }

.eyebrow{
  font-family:var(--sans);
  font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::after{ content:""; flex:0 0 auto; width:46px; height:1px; background:var(--linea-2) }
@media (max-width:560px){ .eyebrow{ flex-wrap:wrap } .eyebrow::after{ display:none } }

.bajada{ font-size:clamp(1.05rem,1.55vw,1.22rem); color:var(--tinta-2); max-width:62ch }
.chico{ font-size:.94rem; color:var(--gris) }

/* ---------- Botones ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:500; letter-spacing:.005em;
  padding:.82rem 1.5rem;
  border-radius:100px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-solido{ background:var(--tinta); color:var(--papel) }
.btn-solido:hover{ background:#000 }
.btn-linea{ border-color:var(--linea-2); color:var(--tinta) }
.btn-linea:hover{ border-color:var(--tinta); background:rgba(23, 23, 23,.03) }
.btn .fl{ transition:transform .25s }
.btn:hover .fl{ transform:translateX(3px) }

.enlace{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:500; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:gap .25s, opacity .25s;
}
.enlace:hover{ gap:.85rem }

/* ---------- Encabezado ---------- */

.cabezal{
  position:sticky; top:0; z-index:50;
  background:rgba(250, 250, 250,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.cabezal.pegado{ border-bottom-color:var(--linea) }
.cabezal .env{ display:flex; align-items:center; gap:1.5rem; height:74px }

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto }
.marca img{ width:60px; height:auto; display:block }
.marca b{ font-family:var(--display); font-weight:600; font-size:1.22rem; letter-spacing:-.02em }

.menu{ display:flex; align-items:center; gap:1.6rem }
.menu a{
  font-size:.93rem; text-decoration:none; color:var(--tinta-2);
  padding-bottom:3px; border-bottom:1px solid transparent; transition:.25s;
}
.menu a:hover,.menu a[aria-current="page"]{ color:var(--tinta); border-bottom-color:var(--tinta) }

.idioma{
  display:inline-flex; align-items:center;
  border:1px solid var(--linea-2); border-radius:100px;
  padding:3px; background:var(--papel);
}
.idioma button{
  font:inherit; font-size:.76rem; font-weight:600; letter-spacing:.06em;
  border:0; background:none; color:var(--gris);
  padding:.28rem .68rem; border-radius:100px; cursor:pointer; transition:.22s;
}
.idioma button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel) }

/* ---------- Secciones ---------- */

section{ position:relative }
.bloque{ padding-block:clamp(64px,8vw,112px) }
.bloque-fino{ padding-block:clamp(44px,5vw,68px) }
.bloque-fino.sin-abajo{ padding-bottom:0 }
.linea-arriba{ border-top:1px solid var(--linea) }

/* ---------- Portada ---------- */

.portada{ padding-block:clamp(64px,11vw,132px) clamp(56px,8vw,104px); overflow:hidden }
.portada::before{
  content:""; position:absolute; inset:-30% 0 auto 50%;
  width:1100px; height:1100px; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 40%, rgba(23, 23, 23, .045), transparent 62%);
  pointer-events:none;
}
.portada .env{ position:relative }
.portada h1{ max-width:16ch; margin-bottom:1.6rem }
.portada .bajada{ max-width:56ch }
.acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem }

.nina-fondo{
  position:absolute; right:-7%; bottom:-16%;
  width:min(58vw,760px);
  opacity:.05; pointer-events:none; z-index:0; user-select:none;
}

/* ---------- Valores ---------- */

/* Las separaciones son bordes, no huecos sobre un fondo gris: mientras la
   animación de entrada está pendiente las tarjetas no pintan nada, y un fondo
   de contenedor se vería como un bloque gris macizo. */
.valores{ display:grid; background:var(--papel); border-block:1px solid var(--linea) }
.valor{ padding:clamp(28px,3.4vw,44px); border-top:1px solid var(--linea) }
.valor:first-child{ border-top:0 }
@media (min-width:820px){
  .valores{ grid-template-columns:repeat(3,1fr) }
  .valor{ border-top:0; border-left:1px solid var(--linea) }
  .valor:first-child{ border-left:0 }
}
.valor .num{
  font-family:var(--display); font-size:.9rem; color:var(--gris-claro);
  letter-spacing:.1em; margin-bottom:1.1rem; display:block;
}
.valor h3{ margin-bottom:.7rem }
.valor p{ color:var(--gris); font-size:.98rem }

/* ---------- Productos ---------- */

.producto{ padding-block:clamp(52px,6vw,84px) }
.producto + .producto{ border-top:1px solid var(--linea) }
.producto .env{ display:grid; gap:clamp(36px,5vw,72px); align-items:center }
@media (min-width:900px){
  .producto .env{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) }
  /* invertida: la maqueta pasa a la izquierda y se queda con la columna ancha */
  .producto.invertido .env{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) }
  .producto.invertido .texto{ order:2 }
}

.producto .kicker{
  font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.producto .kicker::before{ content:""; width:9px; height:9px; border-radius:2px; background:currentColor }
.producto .nombre{ font-size:clamp(2.2rem,4.4vw,3.1rem); margin-bottom:.5rem }
.producto .tagline{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--tinta-2); margin-bottom:1.1rem; max-width:34ch }
.producto p.desc{ color:var(--gris); max-width:52ch; margin-bottom:1.9rem }
.enlaces{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.9rem }
.enlaces .enlace.tenue{ border-bottom-color:var(--linea-2); color:var(--gris) }
.enlaces .enlace.tenue:hover{ color:var(--tinta); border-bottom-color:var(--tinta) }
.co-color{ color:var(--co) }
.pedro-color{ color:var(--pedro) }

/* ---------- Maqueta de interfaz ---------- */

/* Las pantallas son maquetas con datos inventados, no capturas de clientes.
   La nota lo dice de frente en vez de dejarlo a la interpretación. */
.mock-marco{ display:flex; flex-direction:column; gap:.75rem; min-width:0 }
.mock-nota{
  margin:0; text-align:right;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-claro);
}

.mock{
  border:1px solid var(--linea-2); border-radius:var(--radio);
  background:#fff; box-shadow:var(--sombra); overflow:hidden;
  font-size:12px; line-height:1.45;
  transform:perspective(1600px) rotateY(-2.2deg) rotateX(1.4deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.producto.invertido .mock{ transform:perspective(1600px) rotateY(2.2deg) rotateX(1.4deg) }
.mock:hover{ transform:perspective(1600px) rotateY(0) rotateX(0) }
@media (prefers-reduced-motion: reduce){ .mock,.mock:hover{ transform:none } }

.mock-barra{
  display:flex; align-items:center; gap:6px;
  height:30px; padding-inline:12px;
  background:var(--papel-2); border-bottom:1px solid var(--linea);
}
.mock-barra i{ width:9px; height:9px; border-radius:50%; background:var(--linea-2) }
.mock-cuerpo{ padding:0 }

/* — maqueta ControlObra — */
.co-top{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--linea) }
.co-badge{ width:26px; height:26px; border-radius:4px; display:block }
.co-marca{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em }
.co-top .der{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--gris); font-size:10.5px }
.co-moneda{ display:flex; border:1px solid var(--linea-2); border-radius:4px; overflow:hidden }
.co-moneda span{ padding:2px 7px; font-size:10px; font-weight:600 }
.co-moneda span:first-child{ background:#1B2A55; color:#fff }
.co-nav{ display:flex; gap:16px; padding:8px 16px; border-bottom:1px solid var(--linea); color:var(--gris); font-size:11px }
.co-nav span.act{ color:var(--tinta); font-weight:600; border-bottom:2px solid #1B2A55; padding-bottom:5px; margin-bottom:-9px }
.co-panel{ padding:16px; background:var(--papel-2) }
.co-panel h4{ font-family:var(--display); font-size:19px; font-weight:600; margin:0 0 3px }
.co-panel .sub{ color:var(--gris); font-size:11px; margin-bottom:14px }
.co-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.co-kpi{ background:#fff; border:1px solid var(--linea); border-radius:6px; padding:11px 12px }
.co-kpi .rot{ font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gris) }
.co-kpi .val{ font-family:var(--display); font-size:21px; font-weight:600; margin-top:5px }
.co-kpi .val.ok{ color:#1D6B3F }
.co-kpi .val.ok::before{ content:"●"; font-size:9px; vertical-align:middle; margin-right:5px }
.co-curva{ background:#fff; border:1px solid var(--linea); border-radius:6px; padding:12px; margin-top:10px }
.co-curva .rot{ font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin-bottom:8px }
.co-curva svg{ display:block; width:100% }

/* — maqueta Pedro — */
.pe-cinta{ background:var(--pedro); color:#fff; text-align:center; font-family:var(--cond); font-size:10px; letter-spacing:.22em; padding:4px }
.pe-top{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--linea) }
.pe-badge{ width:28px; height:28px; border-radius:3px; display:block }
.pe-marca{ font-family:var(--cond); font-weight:600; font-size:20px; letter-spacing:.15em; color:var(--pedro) }
.pe-nav{ margin-left:auto; display:flex; gap:10px; font-family:var(--cond); font-size:10.5px; letter-spacing:.07em; color:var(--gris); white-space:nowrap }
.pe-nav .act{ color:var(--pedro); border-bottom:2px solid var(--pedro); padding-bottom:3px }
.pe-panel{ padding:16px }
.pe-panel h4{ font-family:var(--cond); font-size:20px; letter-spacing:.09em; margin:0 0 2px }
.pe-panel .sub{ color:var(--gris); font-size:11px; margin-bottom:13px }
.pe-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:11px }
.pe-kpi{ border:1px solid var(--linea); border-radius:5px; padding:9px 9px; min-width:0 }
.pe-kpi .rot{ font-family:var(--cond); font-size:9.5px; letter-spacing:.08em; color:var(--gris); white-space:nowrap }
.pe-kpi .val{ font-family:var(--cond); font-size:17px; font-weight:600; margin-top:3px; color:var(--pedro); white-space:nowrap }
.pe-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.pe-card{ border:1px solid var(--linea); border-radius:5px; overflow:hidden }
.pe-card .cab{ font-family:var(--cond); font-size:10.5px; letter-spacing:.1em; padding:7px 10px; border-bottom:1px solid var(--linea); color:var(--tinta-2) }
.pe-fila{ display:flex; justify-content:space-between; gap:8px; padding:6px 10px; font-size:10.5px; border-bottom:1px solid var(--papel-3) }
.pe-fila:last-child{ border-bottom:0 }
.pe-fila b{ font-weight:500; color:var(--pedro-2) }
.pe-fila span{ font-family:var(--cond); letter-spacing:.08em; color:var(--gris-claro); font-size:10px }
.pe-fila span.alerta{ color:var(--co) }

/* ---------- Nosotros ---------- */

.nosotros .env{ display:grid; gap:clamp(32px,5vw,72px) }
@media (min-width:900px){ .nosotros .env{ grid-template-columns:.85fr 1.15fr; align-items:start } }
.nosotros .cuerpo p{ font-size:1.06rem; color:var(--tinta-2); max-width:58ch }
.nosotros .cuerpo p:last-child{ color:var(--gris); font-style:italic; font-family:var(--display); font-size:1.14rem; line-height:1.5 }
.retrato{
  border:1px solid var(--linea); border-radius:var(--radio);
  background:linear-gradient(160deg,var(--papel-2),var(--papel-3));
  aspect-ratio:4/3; display:grid; place-items:center; padding:9% 12%;
}
.retrato img{ width:100% }

/* ---------- Contacto ---------- */

.contacto{ background:var(--tinta); color:var(--papel-2) }
.contacto .eyebrow{ color:rgba(250, 250, 250, .58) }
.contacto .eyebrow::after{ background:rgba(250, 250, 250,.22) }
.contacto h2{ color:var(--papel); max-width:14ch }
.contacto .bajada{ color:rgba(250, 250, 250,.62); margin-top:1.1rem }
.contacto .btn-solido{ background:var(--papel); color:var(--tinta) }
.contacto .btn-solido:hover{ background:#fff }
.contacto .btn-linea{ border-color:rgba(250, 250, 250,.28); color:var(--papel-2) }
.contacto .btn-linea:hover{ border-color:var(--papel); background:rgba(250, 250, 250,.07) }
.contacto .datos{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:2.2rem; font-size:.92rem; color:rgba(250, 250, 250,.5) }
.contacto .datos a{ color:var(--papel-2); text-decoration:none; border-bottom:1px solid rgba(250, 250, 250,.3) }

/* ---------- Pie ---------- */

.pie{ background:var(--tinta); color:rgba(250, 250, 250,.5); padding-block:clamp(40px,5vw,64px); border-top:1px solid rgba(250, 250, 250,.1) }
.pie .env{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem }
.pie .nina{ width:104px; filter:invert(1) brightness(1.6) }
.pie .txt{ font-size:.86rem }
.pie .txt b{ display:block; color:var(--papel-2); font-weight:500; font-family:var(--display); font-size:1.05rem; letter-spacing:-.01em; margin-bottom:1px }
.pie .der{ margin-left:auto; font-size:.84rem; font-style:italic }

/* ---------- Páginas de producto ---------- */

.portada-prod{ padding-block:clamp(48px,6vw,84px) clamp(32px,4vw,52px); position:relative; overflow:hidden }
.portada-prod::before{ content:""; position:absolute; inset:0 0 auto 0; height:100%; opacity:.5; pointer-events:none }
.portada-prod.co{ background:linear-gradient(180deg,var(--co-suave),var(--papel)) }
.portada-prod.pe{ background:linear-gradient(180deg,var(--pedro-suave),var(--papel)) }
.portada-prod .logo-prod{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.6rem }
.logo-prod .cuadro{ width:56px; height:56px; border-radius:10px; flex:0 0 auto; display:block; box-shadow:0 8px 20px -10px rgba(23, 23, 23,.5) }
.logo-prod .nom{ font-family:var(--display); font-size:clamp(2rem,3.6vw,2.7rem); font-weight:600; letter-spacing:-.02em }
.logo-prod .nom.pe{ font-family:var(--cond); letter-spacing:.13em; text-transform:uppercase; color:var(--pedro) }
.portada-prod h1{ font-size:clamp(1.9rem,4vw,2.9rem); max-width:22ch; margin-bottom:1.3rem }
.portada-prod .acciones{ margin-top:2rem }
.migas{ margin-bottom:2rem }
.migas a{ font-size:.86rem; color:var(--gris); text-decoration:none; display:inline-flex; gap:.5rem; align-items:center }
.migas a:hover{ color:var(--tinta) }

.dos-col{ display:grid; gap:clamp(28px,4vw,64px) }
@media (min-width:880px){ .dos-col{ grid-template-columns:.7fr 1.3fr; align-items:start } }
.dos-col h2{ font-size:clamp(1.5rem,2.6vw,2rem) }
.dos-col .cuerpo p{ font-size:1.05rem; color:var(--tinta-2) }

.pilares{ display:grid; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden }
.pilar{ padding:clamp(26px,3vw,38px); border-top:1px solid var(--linea) }
.pilar:first-child{ border-top:0 }
@media (min-width:880px){
  .pilares{ grid-template-columns:repeat(3,1fr) }
  .pilar{ border-top:0; border-left:1px solid var(--linea) }
  .pilar:first-child{ border-left:0 }
}
.pilar .n{ font-family:var(--display); font-size:2.4rem; line-height:1; opacity:.16; margin-bottom:1rem }
.pilar h3{ margin-bottom:.75rem; font-size:1.18rem }
.pilar p{ color:var(--gris); font-size:.97rem }
.pilares.co .pilar .n{ color:var(--co); opacity:.28 }
.pilares.pe .pilar .n{ color:var(--pedro); opacity:.3 }

.modulos{ list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden }
@media (min-width:640px){ .modulos{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px){ .modulos{ grid-template-columns:repeat(4,1fr) } }
.modulos li{ background:var(--papel); padding:1.1rem 1.2rem; font-size:.95rem; display:flex; gap:.7rem; align-items:flex-start }
.modulos li::before{ content:"—"; color:var(--gris-claro); flex:0 0 auto }

.noes{ border-left:2px solid var(--linea-2); padding-left:1.6rem; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.45; color:var(--tinta-2); max-width:46ch }
.noes.co{ border-left-color:var(--co) }
.noes.pe{ border-left-color:var(--pedro) }

/* ---------- Revelado al hacer scroll ---------- */

.rev{ opacity:0; transform:translateY(20px) }
.rev.visible{ opacity:1; transform:none; transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1) }
@media (prefers-reduced-motion: reduce){
  .rev{ opacity:1; transform:none }
}

/* ---------- Accesibilidad ---------- */

:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; border-radius:3px }
.contacto :focus-visible,
.pie :focus-visible{ outline-color:var(--papel) }
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinta); color:var(--papel); padding:.8rem 1.2rem; border-radius:0 0 8px 0;
}
.saltar:focus{ left:0 }

@media (max-width:640px){
  .cabezal .env{ height:auto; padding-block:12px; flex-wrap:wrap; gap:.8rem }
  .marca{ margin-right:auto }
  .menu{ order:3; width:100%; gap:1.2rem; padding-top:2px }
  .menu a{ font-size:.88rem }
  .mock{ font-size:10.5px }
  .co-kpis{ grid-template-columns:1fr 1fr }
  .pe-kpis{ grid-template-columns:1fr 1fr }
}