/* ═══════════════════════════════════════════════════════════════
   TORRES · PINEDO — propuesta de rediseño · v4
   Cuatro páginas: Inicio · Soluciones · Criterio · Contacto

   LA MEZCLA
   De v3 (editorial):  la serif Newsreader para todo lo que se lee,
                       la línea vertical tomada de la firma, los
                       filetes, la ficha, la escala de cinco cuerpos.
   De v2 (moderno):    Instrument Sans para lo que se opera, la
                       cabecera translúcida, los planos de radio
                       suave y el ritmo amplio entre bloques.

   LA REGLA DE TIPOGRAFÍA — dos familias, un papel cada una:
     SERIF  = voz.        Titulares, texto corrido, citas.
     SANS   = instrumento. Rótulos, navegación, botones,
                           formularios, datos.
   Nunca compiten. Y siguen siendo cinco cuerpos en total: todo el
   texto corrido del sitio usa el mismo, sin excepción.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:      #FFFFFF;
  --surface:    #F5F7FA;   /* planos suaves, herencia de v2 */
  --ink:        #14171C;
  --navy:       #16283F;
  --rule:       #DFE2E7;
  --rule-faint: #EDEFF3;

  /* la escala completa — cinco pasos */
  --t-display: clamp(2.3rem, 5.2vw, 3.9rem);
  --t-title:   clamp(1.62rem, 3.4vw, 2.5rem);
  --t-lead:    clamp(1.16rem, 1.85vw, 1.38rem);
  --t-body:    1.0625rem;
  --t-label:   0.72rem;

  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;

  --spine: clamp(18px, 4.2vw, 64px);
  --pad:   clamp(20px, 5vw, 56px);
  --maxw:  1180px;
  --r:     18px;

  color-scheme: light;
}
:root[data-theme="dark"]{ color-scheme: light; }

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

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--t-body); font-weight:400;
  line-height:1.72; font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,dl,dd,dt,blockquote,figure,figcaption{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:1px solid var(--navy); outline-offset:4px; }

/* ── los cinco cuerpos ─────────────────────────────────────────
   SERIF: voz                                                    */
.display{ font-size:var(--t-display); font-weight:200; line-height:1.05; letter-spacing:-.018em; color:var(--navy); text-wrap:balance; }
.display em{ font-style:italic; font-weight:300; }
.title{ font-size:var(--t-title); font-weight:250; line-height:1.16; letter-spacing:-.012em; color:var(--navy); text-wrap:balance; }
.title em{ font-style:italic; }
.lead{ font-size:var(--t-lead); font-weight:250; line-height:1.46; letter-spacing:-.008em; color:var(--navy); }
.lead em{ font-style:italic; }
.lead strong{ font-weight:600; }
/* var(--t-body) lo hereda todo el texto corrido del body */

/* SANS: instrumento */
/* cifra destacada: crece solo el dato, no la frase que lo acompaña.
   La cola de la oración se queda en el cuerpo de las demás filas. */
.figure{ font-size:var(--t-lead); font-weight:600; color:var(--navy); letter-spacing:-.01em; }

.label{
  font-family:var(--sans); font-size:var(--t-label); font-weight:500;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
.muted{ color:var(--navy); opacity:.6; }

/* ── contenedor y línea vertical ───────────────────────────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.spine{ border-left:1px solid var(--rule); padding-left:var(--spine); }

.sec{ position:relative; padding-block:clamp(52px,7.5vw,96px); }
/* la cabecera es fija: los destinos de enlace se detienen por debajo */
.sec[id], .unit[id]{ scroll-margin-top:clamp(96px,13vh,132px); }
.sec + .sec{ border-top:1px solid var(--rule-faint); }
.sec > .label{ position:relative; display:block; margin-bottom:clamp(24px,3.2vw,38px); }
.sec > .label::before{
  content:""; position:absolute; top:.62em;
  left:calc(-1 * var(--spine) - 1px); width:calc(var(--spine) * .4);
  height:1px; background:var(--navy);
}

/* ── botones y enlaces ─────────────────────────────────────── */
/* Llamadas a la acción.
   La versalita espaciada y dos cajas del mismo peso resultaban duras.
   Ahora: una sola pieza sólida, en serif y caja baja —sin mayúsculas,
   sin tracking— y a su lado un enlace sin caja. El contraste entre
   una y otro hace la jerarquía; antes competían. */
.cta{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family:var(--serif); font-size:var(--t-body); font-weight:400;
  letter-spacing:.005em; line-height:1;
  background:transparent; color:var(--navy); border:1px solid var(--navy);
  padding:16px 32px; border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.cta::after{ content:"→"; transition:transform .25s ease; }
.cta:hover{ background:var(--navy); color:var(--paper); }
.cta:hover::after{ transform:translateX(4px); }

.cta--text{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--serif); font-size:var(--t-body); font-weight:400;
  color:var(--navy); background:transparent; border:0; cursor:pointer;
  padding:16px 4px; position:relative;
}
.cta--text::before{
  content:""; position:absolute; left:4px; right:4px; bottom:14px;
  height:1px; background:var(--navy); opacity:.28; transition:opacity .25s ease;
}
.cta--text:hover::before{ opacity:1; }
.cta--text::after{ content:"→"; transition:transform .25s ease; }
.cta--text:hover::after{ transform:translateX(4px); }

.actions{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }

.a-line{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color .2s ease; }
.a-line:hover{ border-bottom-color:var(--navy); }

.a-next{
  font-family:var(--sans); font-size:var(--t-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.a-next::after{ content:"→"; transition:transform .2s ease; }
.a-next:hover::after{ transform:translateX(4px); }

/* ═══ cinta ═══ */
.ribbon{ border-bottom:1px solid var(--rule-faint); }
.ribbon .wrap{ display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; padding-block:11px; }

/* ═══ cabecera translúcida ═══ */
.head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rule);
}
.head .wrap{ display:flex; align-items:center; gap:clamp(18px,4vw,44px); padding-block:13px; }
.brand{ display:flex; align-items:center; gap:18px; text-decoration:none; margin-right:auto; }
.brand-logo{ display:block; height:50px; width:auto; flex:none; }
.brand-tag{ padding-left:18px; border-left:1px solid var(--rule); }

.nav{ display:flex; gap:clamp(14px,2.4vw,30px); align-items:center; }
.nav a{
  font-family:var(--sans); font-size:var(--t-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); opacity:.58; padding-block:4px;
  border-bottom:1px solid transparent; transition:opacity .2s ease, border-color .2s ease;
}
.nav a:hover{ opacity:1; }
.nav a[aria-current="page"]{ opacity:1; border-bottom-color:var(--navy); }

.social{ display:flex; gap:15px; }
.social a{ color:var(--navy); opacity:.45; display:grid; place-items:center; transition:opacity .2s ease; }
.social a:hover{ opacity:1; }
.social svg{ width:15px; height:15px; display:block; fill:currentColor; }

/* el bloque de marca —logotipo, barra, descriptor— se mantiene entero
   hasta pantallas de teléfono; antes desaparecía por debajo de 1040px,
   que es el ancho de una ventana de portátil cualquiera */
@media (max-width:980px){
  .head .wrap{ flex-wrap:wrap; row-gap:12px; }
  .nav{ order:3; width:100%; overflow-x:auto; padding-bottom:4px; }
}
@media (max-width:700px){ .brand-tag{ display:none; } .brand-logo{ height:42px; } }

/* ═══ páginas ═══ */
.page[hidden]{ display:none; }

/* encabezado de página interior */
.phead{ padding-block:clamp(44px,6vw,80px) clamp(30px,4vw,52px); border-bottom:1px solid var(--rule-faint); }
.phead .label{ display:block; margin-bottom:18px; }
.phead .display{ max-width:17ch; }
.phead .lead{ margin-top:clamp(20px,2.6vw,30px); max-width:46ch; }

/* ═══ portada ═══ */
/* el retrato ocupa exactamente el alto de la columna de texto:
   stretch en lugar de end, y sin aspect-ratio que lo encoja */
.hero{ display:grid; grid-template-columns:minmax(0,1fr) clamp(210px,25vw,320px); gap:clamp(30px,5vw,68px); align-items:stretch; }
@media (max-width:880px){ .hero{ grid-template-columns:1fr; } }
.hero-thesis{ max-width:19ch; }
.hero-sub{ margin-top:clamp(22px,2.8vw,32px); max-width:44ch; }

/* franja de práctica: lo primero que se lee, antes del titular.
   Tres designaciones separadas por filetes, en el cuerpo de rótulo
   para que informen sin competir con la tesis. */
.practice{
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; row-gap:8px;
  margin-bottom:clamp(22px,3vw,34px);
}
.practice span{ letter-spacing:.13em; }
.practice span + span{ padding-left:26px; border-left:1px solid var(--rule); }
/* en ventanas medianas los tres términos no caben con el tracking
   ancho: se aprieta el espaciado antes de permitir que se rompan */
@media (max-width:1280px){
  .practice span{ letter-spacing:.07em; }
  .practice span + span{ padding-left:18px; }
}
/* y por debajo de ese punto se deja de justificar a los bordes: los
   términos fluyen desde la izquierda y los filetes desaparecen, para
   que ninguno quede con una raya suelta al principio de su línea */
@media (max-width:900px){
  .practice{ justify-content:flex-start; column-gap:24px; }
  .practice span + span{ padding-left:0; border-left:0; }
}
.sec > .practice::before{
  content:""; position:absolute; top:.62em;
  left:calc(-1 * var(--spine) - 1px); width:calc(var(--spine) * .4);
  height:1px; background:var(--navy);
}
@media (max-width:620px){
  .practice span{ border-right:0; padding-right:0; margin-right:14px; }
}
.hero .actions{ margin-top:clamp(26px,3.2vw,38px); }

.portrait{
  position:relative; border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden; min-height:100%;
  background:linear-gradient(176deg,#FAFBFD 0%, var(--surface) 100%);
}
@media (max-width:880px){ .portrait{ aspect-ratio:4/5; min-height:0; } }
.portrait .label{ position:absolute; left:18px; bottom:16px; opacity:.5; }

/* ═══ ficha ═══ */
.ficha{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); }
.ficha dt{
  padding-block:16px; border-top:1px solid var(--rule-faint);
  font-family:var(--sans); font-size:var(--t-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  opacity:.65; line-height:2.3;
}
.ficha dd{ padding-block:16px; border-top:1px solid var(--rule-faint); }
.ficha dt:first-of-type, .ficha dt:first-of-type + dd{ border-top:0; }
@media (max-width:620px){
  .ficha{ grid-template-columns:1fr; }
  .ficha dd{ border-top:0; padding-top:0; padding-bottom:20px; }
  .ficha dt{ line-height:1.6; padding-bottom:4px; }
}

/* ═══ filas ═══ */
.rows{ border-top:1px solid var(--rule-faint); }
.row{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(16px,3vw,52px);
  padding-block:clamp(20px,2.6vw,28px); border-bottom:1px solid var(--rule-faint);
}
@media (max-width:760px){ .row{ grid-template-columns:1fr; gap:6px; } }
.row h3{ font-weight:500; color:var(--navy); line-height:1.6; }
.row p{ max-width:58ch; }

/* ═══ planos suaves (v2) ═══ */
.panels{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,20px); }
@media (max-width:820px){ .panels{ grid-template-columns:1fr; } }
.panel{
  background:var(--surface); border:1px solid var(--rule-faint);
  border-radius:var(--r); padding:clamp(24px,3vw,38px);
  display:flex; flex-direction:column; gap:14px;
  transition:background .2s ease, border-color .2s ease;
}
.panel:hover{ background:var(--paper); border-color:var(--rule); }
.panel .label{ opacity:.6; }
.panel p{ max-width:44ch; }
.panel .a-next{ margin-top:auto; padding-top:8px; }

/* bloque desplegado de una solución */
.unit{ padding-block:clamp(34px,4.4vw,58px); border-top:1px solid var(--rule-faint); }
.unit:first-of-type{ border-top:0; padding-top:0; }
.unit-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); }
@media (max-width:880px){ .unit-grid{ grid-template-columns:1fr; gap:24px; } }
.unit .title{ max-width:15ch; margin-bottom:14px; }
.unit-aside{
  background:var(--surface); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px); align-self:start;
}
.unit-aside .label{ display:block; margin-bottom:12px; opacity:.6; }
.ticks li{ padding-block:9px; border-top:1px solid var(--rule); }
.ticks li:first-child{ border-top:0; padding-top:0; }
.who{ margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); }

/* ═══ etapas: una secuencia real ═══ */
.stage{
  display:grid; grid-template-columns:3.5rem minmax(0,13rem) minmax(0,1fr);
  gap:clamp(14px,3vw,40px);
  padding-block:clamp(18px,2.4vw,26px); border-bottom:1px solid var(--rule-faint);
}
.stage:first-child{ border-top:1px solid var(--rule-faint); }
@media (max-width:760px){
  .stage{ grid-template-columns:3rem minmax(0,1fr); }
  .stage p{ grid-column:2; }
}
.stage .n{ font-family:var(--sans); font-size:var(--t-label); font-weight:500; letter-spacing:.14em; color:var(--navy); opacity:.45; line-height:2.2; }
.stage h3{ font-weight:500; color:var(--navy); line-height:1.6; }
.stage p{ max-width:52ch; }

/* ═══ cita ═══ */
.quote-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,68px); }
@media (max-width:880px){ .quote-grid{ grid-template-columns:1fr; } }
.quote{ max-width:34ch; }
.quote p{ font-size:var(--t-lead); font-weight:250; font-style:italic; line-height:1.5; color:var(--navy); letter-spacing:-.008em; }
.quote figcaption{ margin-top:24px; }

/* ═══ formulario ═══ */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,68px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{ background:var(--surface); border-radius:var(--r); padding:clamp(24px,3.2vw,40px); }
form{ display:grid; gap:24px; }
.field{ display:grid; gap:9px; }
.field label{ font-family:var(--sans); font-size:var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); opacity:.65; }
.field input, .field textarea, .field select{
  font-family:var(--serif); font-size:var(--t-body); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:9px 0; width:100%; line-height:1.6; border-radius:0;
  transition:border-color .2s ease;
}
.field select{ appearance:none; cursor:pointer; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-bottom-color:var(--navy); }
.field textarea{ resize:vertical; min-height:76px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:560px){ .two{ grid-template-columns:1fr; } }
.form-msg{ color:var(--navy); font-style:italic; }
/* autorización de tratamiento de datos: en Colombia el formulario no
   puede recoger datos personales sin ella (Ley 1581 de 2012) */
.consent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.consent input{ width:16px; height:16px; margin-top:6px; accent-color:var(--navy); }
.consent label{
  font-family:var(--serif); font-size:var(--t-body); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink); opacity:1; line-height:1.6;
}

/* ═══ pie ═══ */
.foot{ border-top:1px solid var(--rule); }
/* tres zonas en una sola fila: logotipo · menú centrado · redes */
.foot .wrap{
  padding-block:clamp(36px,5vw,58px);
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(20px,3.5vw,44px); align-items:center;
}
.foot-logo{ display:block; height:130px; width:auto; }
.foot-links{ display:flex; flex-wrap:wrap; gap:12px 34px; justify-content:center; }
.social--foot{ justify-content:flex-end; }
.social--foot svg{ width:18px; height:18px; }
.social--foot a{ opacity:.55; }
@media (max-width:860px){
  .foot .wrap{ grid-template-columns:1fr; row-gap:26px; }
  .foot-links{ justify-content:flex-start; }
  .social--foot{ justify-content:flex-start; }
  .foot-logo{ height:104px; }
}
.foot-links a{ text-decoration:none; color:var(--navy); opacity:.6; }
.foot-links a:hover{ opacity:1; }
.foot-legal{ grid-column:1 / -1; padding-top:22px; border-top:1px solid var(--rule-faint); }

@media (prefers-reduced-motion: reduce){ *{ transition-duration:.001ms !important; } }