/* ============================================================
   COMUNICAR MEJOR — sitio multisección (premium / blanco)
   Sistema tipográfico heredado del one-page:
   · Display geométrico  -> Plus Jakarta Sans
   · Acentos en cursiva   -> Arimo italic
   · Naranja de marca      -> #ff6b47
   Cambios: paleta más blanca y premium, mucho aire lateral,
   tipografías "gritadas" que paran el scroll.
   ============================================================ */

:root{
  /* Tinta y neutros cálidos */
  --ink:        #242124;
  --ink-2:      #4f4d4e;
  --muted:      #8d8a88;
  --paper:      #f6f5f2;   /* base, blanco cálido */
  --paper-2:    #efedea;   /* panel apenas más oscuro */
  --white:      #ffffff;
  --naranja:    #ff6b47;
  --naranja-deep:#e2532f;
  --line:       rgba(36,33,36,0.13);
  --line-soft:  rgba(36,33,36,0.07);
  --on-dark:    #f3f1ee;
  --on-dark-mut:rgba(243,241,238,0.55);

  /* Aire lateral generoso */
  --gutter: clamp(22px, 6.5vw, 150px);
  --maxw: 1560px;

  /* Escala tipográfica fluida (grande, "gritada") */
  --fs-hero:      clamp(32px, 4.9vw, 74px);
  --fs-statement: clamp(30px, 4.5vw, 66px);
  --fs-h2:        clamp(28px, 4vw, 60px);
  --fs-h3:        clamp(22px, 2.9vw, 40px);
  --fs-lead:      clamp(16px, 1.5vw, 21px);
  --fs-body:      clamp(16px, 1.15vw, 19px);
  --fs-stat:      clamp(38px, 5.6vw, 88px);
  --fs-eyebrow:   12px;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: clip;
}
em, i, .it{ font-family:'Arimo', Georgia, serif; font-style:italic; }
a{ color:inherit; }
/* Sin JS: mostrar todo el contenido (evita quedarse en blanco) */
html:not(.cm-js) .li,
html:not(.cm-js) .rv{ opacity:1 !important; transform:none !important; }
html:not(.cm-js) .ink-word svg path{ stroke-dashoffset:0 !important; }
img{ display:block; max-width:100%; }
::selection{ background: var(--naranja); color:#fff; }

/* Contenedor con aire */
.shell{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.measure{ max-width: 60ch; }
.measure-wide{ max-width: 78ch; }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 120;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s, border-color .3s;
}
.site-header .shell{
  height: 76px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand img{ height: 30px; width:auto; }
.brand .tag{
  font-size: 12px; color: var(--muted); font-weight:500; letter-spacing:.01em;
  padding-left:14px; border-left:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap: clamp(20px, 2.4vw, 44px); }
.nav a.nav-link{
  font-size: 13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-2); text-decoration:none; position:relative; padding:6px 0;
  transition: color .2s;
}
.nav a.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background: var(--naranja); transition: width .28s ease;
}
.nav a.nav-link:hover{ color: var(--ink); }
.nav a.nav-link.active{ color: var(--ink); }
.nav a.nav-link.active::after{ width:100%; }
.nav .cta-pill{
  background: var(--ink); color: var(--on-dark);
  padding: 12px 24px; border-radius: 999px; border:1px solid var(--ink);
  font-size: 13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition: background .2s, color .2s, transform .2s;
}
.nav .cta-pill:hover{ background: var(--naranja); border-color: var(--naranja); color:#fff; transform: translateY(-1px); }

/* Hamburguesa (mobile) */
.burger{
  display:none; width:40px; height:40px; flex-direction:column; justify-content:center;
  gap:6px; background:none; border:none; cursor:pointer; padding:8px;
}
.burger span{ display:block; width:24px; height:1.6px; background:var(--ink); transition: all .3s; }
.burger.open span:nth-child(1){ transform: translateY(7.6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7.6px) rotate(-45deg); }

/* Menú móvil */
.mobile-nav{
  position: fixed; inset: 76px 0 0 0; z-index: 110; background: var(--ink);
  display:flex; flex-direction:column; padding: 40px var(--gutter);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.32,.72,0,1);
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav a{
  font-size: 30px; font-weight:600; color: var(--on-dark-mut); text-decoration:none;
  padding: 18px 0; border-bottom:1px solid rgba(243,241,238,.1); transition: color .2s;
}
.mobile-nav a:hover, .mobile-nav a.active{ color: var(--on-dark); }
.mobile-nav a.mc{ color: var(--naranja); border:none; margin-top:24px; }

/* ===========================================================
   ROUTER / VISTAS
   =========================================================== */
main{ padding-top: 76px; }
.view{ display:none; }
.view.active{ display:block; animation: viewIn .5s ease both; }
@keyframes viewIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

/* Bloques de sección */
.block{ padding: clamp(72px, 11vh, 150px) 0; border-bottom: 1px solid var(--line-soft); }
.block.tight{ padding: clamp(56px, 8vh, 110px) 0; }
.block.dark{ background: var(--ink); color: var(--on-dark); border-color: rgba(243,241,238,.08); }
.block.panel{ background: var(--paper-2); }

/* Eyebrow / kicker */
.eyebrow{
  font-size: var(--fs-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--naranja); display:inline-flex; align-items:center; gap:12px; margin-bottom: 30px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background: var(--naranja); }
.dark .eyebrow{ color: var(--naranja); }
.eyebrow.plain::before{ display:none; }

/* Titulares */
h1, h2, h3, h4{ font-weight:700; letter-spacing:-0.025em; line-height:1.04; }
.hero-title{ font-size: var(--fs-hero); font-weight:800; letter-spacing:-0.035em; line-height:1.0; }
.h2{ font-size: var(--fs-h2); }
.h3{ font-size: var(--fs-h3); font-weight:700; }
.lead{ font-size: var(--fs-lead); line-height:1.45; font-weight:400; color: var(--ink-2); }
.dark .lead{ color: var(--on-dark-mut); }
.accent{ color: var(--naranja); }

/* Statement gritado que para el scroll */
.statement{
  font-size: var(--fs-statement); font-weight:800; letter-spacing:-0.035em; line-height:1.02;
  max-width: 20ch;
}
.statement .it, .statement em{ font-weight:700; letter-spacing:-0.02em; }
.statement.center{ margin-inline:auto; text-align:center; max-width: 24ch; }

/* ===========================================================
   ANIMACIONES (heredadas)
   =========================================================== */
.lw{ overflow:hidden; display:block; }
.li{ display:block; transform: translateY(112%); opacity:0;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .55s ease; }
.li.v{ transform: translateY(0); opacity:1; }

.rv{ opacity:0; transform: translateY(30px);
  transition: opacity .8s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.rv.v{ opacity:1; transform:none; }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }
.d4{ transition-delay:.32s } .d5{ transition-delay:.40s } .d6{ transition-delay:.48s }

/* Subrayado dibujado a mano */
.ink-word{ position:relative; display:inline-block; padding-bottom:.04em; }
.ink-word svg{ position:absolute; left:-2%; bottom:-.14em; width:104%; height:.42em; pointer-events:none; overflow:visible; }
.ink-word svg path{
  fill:none; stroke: var(--naranja); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: var(--len,1000); stroke-dashoffset: var(--len,1000);
}
.ink-word.draw svg path{ animation: inkDraw 1.1s cubic-bezier(.65,.05,.35,1) forwards; }
@keyframes inkDraw{ to{ stroke-dashoffset:0; } }

/* ===========================================================
   BOTONES
   =========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding: 18px 26px; border-radius:0; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition: background .22s, color .22s, border-color .22s, transform .22s;
}
.btn .meta{ font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; opacity:.65; }
.btn-dark{ background: var(--ink); color: var(--on-dark); }
.btn-dark:hover{ background: var(--naranja); color:#fff; }
.btn-dark .meta{ color: rgba(243,241,238,.55); }
.btn-light{ background: var(--white); color: var(--ink); }
.btn-light:hover{ background: var(--naranja); color:#fff; }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-ghost-dark{ background: transparent; color: var(--ink); border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; gap:10px; }
.btn-ghost-dark:hover{ color: var(--naranja); border-color: var(--naranja); }
.dark .btn-outline{ color: var(--on-dark); border-color: rgba(243,241,238,.22); }
.dark .btn-outline:hover{ border-color: rgba(243,241,238,.6); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  min-height: calc(100svh - 76px); display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
  padding: clamp(40px,6vh,90px) 0;
}
.hero .eyebrow{ margin-bottom: 32px; }
.hero-title{ margin: 0 auto clamp(26px,4vh,40px); max-width: 20ch; }
.hero-sub{ max-width: 50ch; margin: 0 auto clamp(30px,5vh,48px); }
.hero .btn-row{ justify-content:center; }
.hero-foot{ margin-top:auto; padding-top: clamp(34px,6vh,64px); display:flex; align-items:center; justify-content:center; gap:14px; color: var(--muted); }
.hero-foot .line{ width:1px; height:40px; background: var(--line); }
.hero-foot .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.support-note{ font-size:13px; color: var(--naranja); font-weight:500; margin-top:18px; }

/* ===========================================================
   SÍNTOMAS (lista numerada)
   =========================================================== */
.sym-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.sym{ display:grid; grid-template-columns: auto 1fr; gap:16px; align-items:start;
  padding: 28px 30px; border:1px solid var(--naranja); border-radius:14px; background: var(--paper);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.sym:hover{ background: var(--naranja); color:#fff; transform: translateY(-3px); box-shadow: 0 18px 42px rgba(255,107,71,.24); }
.sym .n{ font-size:13px; font-weight:600; color: var(--naranja); letter-spacing:.06em; padding-top:4px; transition: color .25s; }
.sym:hover .n{ color:#fff; }
.sym h4{ font-family:'Arimo', Georgia, serif; font-style:italic; font-weight:700; color: var(--ink); font-size: clamp(19px,1.6vw,24px); line-height:1.3; margin-bottom:10px; transition: color .25s; }
.sym h4 em{ text-decoration:none; font-style:italic; }
.sym:hover h4{ color:#fff; }
.sym p{ font-size:15px; color: var(--muted); line-height:1.6; transition: color .25s; }
.sym:hover p{ color: rgba(255,255,255,.92); }

/* ===========================================================
   FORMAS DE EMPEZAR (3 planes)
   =========================================================== */
.plans{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); margin-top: 16px; border:1px solid var(--line); }
.plan{ background: var(--paper); padding: clamp(30px,2.6vw,44px); display:flex; flex-direction:column; position:relative;
  transition: background .25s; }
.plan:hover{ background: var(--white); }
.plan.feat{ background: var(--ink); color: var(--on-dark); }
.plan.feat:hover{ background:#2c292c; }
.plan .ptag{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-bottom: 26px; }
.plan.feat .ptag{ color: var(--naranja); }
.plan .ptag.g{ color: var(--naranja); }
.plan h3{ font-size: clamp(26px,2.4vw,36px); font-weight:800; letter-spacing:-0.02em; line-height:1.05; margin-bottom:14px; }
.plan h3 em{ color: var(--naranja); }
.plan .pdesc{ font-size:16px; color: var(--ink-2); line-height:1.6; margin-bottom:24px; }
.plan.feat .pdesc{ color: rgba(243,241,238,.82); }
.plan .blabel{ border-top:1px solid var(--line); padding-top:22px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--naranja); margin-bottom:12px; }
.plan.feat .blabel{ border-color: rgba(243,241,238,.14); }
.plan ul{ list-style:none; margin-bottom:30px; flex:1; }
.plan.feat ul{ border-color: rgba(243,241,238,.14); }
.plan ul li{ font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--line-soft); display:flex; gap:12px; align-items:flex-start; line-height:1.4; }
.plan.feat ul li{ border-color: rgba(243,241,238,.08); }
.plan ul li::before{ content:"→"; color: var(--naranja); font-size:13px; flex-shrink:0; }
.plan .pfoot{ display:flex; flex-direction:column; align-items:stretch; gap:16px; padding-top:22px; border-top:1px solid var(--line); }
.plan.feat .pfoot{ border-color: rgba(243,241,238,.14); }
.plan .pfoot .btn{ width:100%; justify-content:center; padding:16px 22px; }
.plan .price{ font-size: clamp(20px,1.9vw,26px); font-weight:800; letter-spacing:-0.02em; }
.plan .price.g{ color: var(--naranja); }

/* ===========================================================
   LOGOS / TRAYECTORIA
   =========================================================== */
.logos-track{ position:relative; overflow:hidden; width:100%; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos-track .row{ display:flex; gap: clamp(40px,5vw,80px); align-items:center; width:max-content; animation: marquee 64s linear infinite; }
.logos-track .row img{ height: clamp(56px,5vw,84px); width:auto; filter: grayscale(1); opacity:.5; transition: opacity .3s, filter .3s; }
.logos-track:hover .row{ animation-play-state: paused; }
.logos-track .row img:hover{ filter:none; opacity:1; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* Cifras grandes (estilo Lumena) */
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); margin-top: 20px; }
.stat{ background: var(--paper); padding: clamp(28px,2.6vw,44px); }
.stat .v{ font-family:'Arimo', serif; font-style:italic; font-weight:700; color: var(--naranja);
  font-size: var(--fs-stat); line-height:1; letter-spacing:-0.02em; margin-bottom:14px; }
.stat .k{ font-size:14px; color: var(--muted); line-height:1.5; max-width: 26ch; }
.dark .stats{ background: rgba(243,241,238,.1); border-color: rgba(243,241,238,.1); }
.dark .stat{ background: var(--ink); }

/* ===========================================================
   GENÉRICOS de contenido
   =========================================================== */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,90px); align-items:start; }
.pull{ font-family:'Arimo',serif; font-style:italic; font-weight:600; font-size: clamp(20px,2.6vw,34px);
  line-height:1.4; letter-spacing:-0.01em; }
.pull .accent{ color: var(--naranja); }
.callout{ background: var(--ink); color: var(--on-dark); padding: clamp(30px,3vw,48px); }
.callout .cl{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--naranja); margin-bottom:16px; display:block; }
.callout p{ font-family:'Arimo',serif; font-style:italic; font-size: clamp(18px,2vw,24px); line-height:1.55; color: var(--on-dark); }

/* Entregables / pasos numerados */
.steps{ display:grid; gap: 2px; margin-top: 20px; }
.step-row{ display:grid; grid-template-columns: 96px 1fr; gap:0; border:1px solid var(--line); background: var(--paper); transition: background .25s; }
.step-row:hover{ background: var(--white); }
.step-row .sn{ background: var(--ink); color: var(--naranja); font-family:'Arimo',serif; font-style:italic; font-weight:700;
  font-size: clamp(24px,2.4vw,34px); display:flex; align-items:flex-start; justify-content:center; padding-top: 30px; }
.step-row .sb{ padding: clamp(26px,2.4vw,38px); }
.step-row .sb h3{ font-size: clamp(19px,1.6vw,24px); font-weight:700; margin-bottom:10px; }
.step-row .sb p{ font-size:15px; color: var(--muted); line-height:1.65; max-width: 60ch; }
.step-row .sb .gain{ margin-top:18px; border-left:2px solid var(--naranja); background: color-mix(in srgb, var(--naranja) 8%, transparent);
  padding: 12px 16px; }
.step-row .sb .gain .gl{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--naranja-deep); display:block; margin-bottom:4px; }
.step-row .sb .gain p{ font-size:14px; font-weight:500; color: var(--ink); }

/* Tarjetas simples (modalidades/formas/frases) */
.cards3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 20px; }
.cards2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2px; margin-top: 20px; }
.minicard{ border:1px solid var(--line); background: var(--paper); padding: clamp(26px,2.4vw,38px); transition: background .25s, border-color .25s; }
.minicard:hover{ background: var(--white); border-color: var(--ink); }
.minicard .mhn{ font-family:'Arimo',serif; font-style:italic; font-weight:700; color: var(--naranja); font-size:22px; margin-bottom:16px; display:block; }
.minicard h4{ font-size: clamp(18px,1.5vw,22px); font-weight:700; margin-bottom:10px; }
.minicard p{ font-size:15px; color: var(--muted); line-height:1.65; }
.minicard .fm{ margin-top:14px; font-size:14px; font-weight:600; color: var(--naranja); display:flex; gap:8px; }
.minicard .fm::before{ content:"→"; }

.frase{ border-left:2px solid var(--line); padding: 26px 28px; transition: border-color .25s; }
.frase:hover{ border-color: var(--naranja); }
.frase p{ font-family:'Arimo',serif; font-style:italic; font-weight:600; font-size: clamp(20px,2.4vw,30px); line-height:1.3; }

/* Inversión (precios) */
.price-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 20px; }
.price-card{ border:1px solid var(--line); background: var(--paper); padding: clamp(30px,2.8vw,48px); display:flex; flex-direction:column; gap:18px; transition: background .25s; }
.price-card:hover{ background: var(--white); }
.price-card.top{ background: var(--ink); color: var(--on-dark); }
.price-card .pt{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.price-card.top .pt{ color: var(--naranja); }
.price-card .pv{ font-size: clamp(28px,3.4vw,48px); font-weight:800; letter-spacing:-0.03em; line-height:1; }
.price-card ul{ list-style:none; border-top:1px solid var(--line); padding-top:18px; }
.price-card.top ul{ border-color: rgba(243,241,238,.16); }
.price-card ul li{ font-size:15px; padding:10px 0; border-bottom:1px solid var(--line-soft); display:flex; gap:10px; }
.price-card.top ul li{ border-color: rgba(243,241,238,.08); color: var(--on-dark); }
.price-card ul li::before{ content:"→"; color: var(--naranja); }
.price-card .pn{ font-size:13px; color: var(--muted); font-style:italic; }
.price-card .pct{ font-size: clamp(22px,2vw,30px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-top:-4px; }
.price-card .pdsc{ font-size:15px; color: var(--ink-2); line-height:1.55; }
.price-card.top .pdsc{ color: rgba(243,241,238,.82); }
.price-card .pcta{ margin-top:auto; justify-content:center; width:100%; padding:16px 22px; }

/* ===========================================================
   CASOS — sub-nav + historia editorial
   =========================================================== */
.casos-subnav{
  position: sticky; top: 76px; z-index: 90; background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line); }
.casos-subnav .shell{ display:flex; justify-content:center; gap: clamp(6px,1.4vw,28px); overflow-x:auto; scrollbar-width:none; padding-block:0; }
.casos-subnav .shell::-webkit-scrollbar{ display:none; }
.case-tab{ flex:0 0 auto; background:none; border:none; cursor:pointer; font-family:inherit;
  padding: 22px 4px; display:flex; align-items:baseline; gap:10px; color: var(--muted);
  border-bottom:2px solid transparent; transition: color .2s, border-color .2s; white-space:nowrap; }
.case-tab .tn{ font-size:12px; font-weight:600; }
.case-tab .tl{ font-size:14px; font-weight:600; letter-spacing:.01em; }
.case-tab:hover{ color: var(--ink); }
.case-tab.active{ color: var(--ink); border-color: var(--naranja); }

.case{ display:none; }
.case.active{ display:block; animation: viewIn .45s ease both; }

.case-hero{ padding: clamp(40px,5vh,72px) 0 clamp(26px,4vh,48px); }
.case-cat{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--naranja);
  display:inline-flex; gap:12px; align-items:center; margin-bottom: 20px; }
.case-cat::before{ content:""; width:24px; height:1px; background: var(--naranja); }
.case-index{ font-family:'Arimo',serif; font-style:italic; font-weight:800; font-size: clamp(64px,9vw,140px);
  line-height:.78; color: var(--paper-2); letter-spacing:-0.05em; display:block; margin-bottom: 4px; }
.case-title{ font-size: clamp(24px,3vw,42px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; max-width: 30ch; }
/* Intro de Casos: centrada y al tamaño de los demás heroes */
.casos-intro .shell{ text-align:center; }
.casos-intro .eyebrow{ justify-content:center; }
.casos-intro .hero-title{ font-size: var(--fs-hero); max-width: 18ch; margin-inline:auto; }
.casos-intro .hero-sub{ margin-inline:auto; }

/* Cita-concepto: panel gris contenido (no de lado a lado) */
.concept-band{ background: transparent; padding: clamp(20px,4vh,44px) 0; }
.concept-inner{ background:#e8e5e0; color: var(--ink); border-radius:6px;
  padding: clamp(30px,3.4vw,52px) clamp(28px,3.2vw,50px); max-width: 880px; }
.concept-band .cl{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); margin-bottom:16px; display:block; }
.concept-band p{ font-family:'Arimo',serif; font-style:italic; font-weight:700; font-size: clamp(22px,2.6vw,38px);
  line-height:1.1; letter-spacing:-0.02em; max-width: 22ch; }

.case-body{ padding: clamp(56px,8vh,110px) 0; display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,96px); align-items:start; }
.case-col .blk{ padding: 26px 0; border-top:1px solid var(--line); }
.case-col .blk:first-child{ border-top:none; padding-top:0; }
.case-col .blk .bl{ font-family:'Arimo',serif; font-style:italic; font-weight:700; font-size:18px; color: var(--muted); display:block; margin-bottom:14px; }
.case-col .blk p{ font-size: clamp(17px,1.4vw,21px); color: var(--ink); line-height:1.5; }
.case-col .blk ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.case-col .blk ul li{ position:relative; padding-left:30px; font-size: clamp(16px,1.3vw,19px); line-height:1.5; }
.case-col .blk ul li::before{ content:""; position:absolute; left:0; top:.5em; width:14px; height:8px;
  border-left:2px solid var(--naranja); border-bottom:2px solid var(--naranja); transform: rotate(-45deg); }
.case-col .insight, .case-foot .insight{ background: var(--ink); color: var(--on-dark); padding: clamp(26px,2.6vw,40px); }
.case-col .insight .il, .case-foot .insight .il{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--naranja); display:block; margin-bottom:16px; }
.case-col .insight p, .case-foot .insight p{ font-family:'Arimo',serif; font-style:italic; font-weight:600; font-size: clamp(19px,1.8vw,26px); line-height:1.45; color: var(--on-dark); }

/* Galería de imágenes del caso */
.case-gallery{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.case-shot{ background: var(--paper-2) center/cover no-repeat; border-radius:4px; aspect-ratio: 4/5; }
.case-shot.wide{ grid-column: span 2; aspect-ratio: 16/10; }
/* Placeholder rayado (caso sin foto) */
.shot-ph{ aspect-ratio: 4/5; border-radius:4px; border:1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, var(--paper-2) 0 11px, var(--paper) 11px 22px);
  display:flex; align-items:flex-end; padding:16px; }
.shot-ph.wide{ grid-column: span 2; aspect-ratio:16/10; }
.shot-ph span{ font-family: ui-monospace, monospace; font-size:11px; color: var(--muted); letter-spacing:.02em; }

/* Resultados del caso (cifras grandes) */
.case-results{ padding: clamp(50px,7vh,96px) 0; }
.result-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); margin-top: 28px; }
.result{ background: var(--paper); padding: clamp(28px,2.8vw,44px); }
.result .rv2{ font-family:'Arimo',serif; font-style:italic; font-weight:700; color: var(--naranja); font-size: clamp(24px,2.6vw,38px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:12px; }
.result .rd{ font-size:14px; color: var(--muted); line-height:1.5; }
.case-learn{ margin-top: 40px; border-left:3px solid var(--naranja); padding: 8px 0 8px 28px; }
.case-learn .ll{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--naranja); display:block; margin-bottom:10px; }
.case-learn p{ font-family:'Arimo',serif; font-style:italic; font-weight:600; font-size: clamp(22px,2.6vw,34px); line-height:1.3; }

/* ===========================================================
   PILARES "Soy Andrés" (en Dirección)
   =========================================================== */
.andres{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,5vw,90px); align-items:start; }
.andres .photo{ aspect-ratio: 4/5; background: var(--paper-2) center top/cover no-repeat; border-radius:4px; }
.andres .body p{ font-size: clamp(16px,1.25vw,19px); color: var(--ink-2); line-height:1.7; margin-bottom:18px; }
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,48px); margin-top: 50px; }
.pillar .pl{ font-size:13px; font-weight:700; letter-spacing:.04em; color: var(--naranja); margin-bottom:12px; display:flex; gap:8px; }
.pillar p{ font-size:15px; color: var(--ink-2); line-height:1.6; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background: var(--ink); color: var(--on-dark); }
.site-footer .top{ padding: clamp(56px,8vh,96px) 0; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px,4vw,60px); border-bottom:1px solid rgba(243,241,238,.1); }
.site-footer .fbrand{ font-size: clamp(26px,3vw,42px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.site-footer .fbrand span{ color: var(--naranja); }
.site-footer .fbrand-logo{ width: clamp(150px, 16vw, 240px); height:auto; display:block; }
.site-footer .ftag{ font-family:'Arimo',serif; font-style:italic; color: var(--on-dark-mut); margin-top:12px; font-size:16px; }
.site-footer h5{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--naranja); margin-bottom:18px; }
.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.site-footer a{ color: var(--on-dark-mut); text-decoration:none; font-size:15px; transition: color .2s; cursor:pointer; }
.site-footer a:hover{ color: var(--on-dark); }
.site-footer .bottom{ padding: 26px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color: rgba(243,241,238,.4); }

/* ===========================================================
   MODALES
   =========================================================== */
.overlay{ position:fixed; inset:0; z-index:300; background: rgba(20,18,20,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition: opacity .3s; }
@media(min-width:768px){ .overlay{ align-items:center; justify-content:center; padding:40px 20px; } }
.overlay.open{ opacity:1; pointer-events:auto; }
.sheet{ background: var(--paper); width:100%; max-width: 560px; border-radius: 18px 18px 0 0; padding: 36px 26px 44px;
  position:relative; transform: translateY(100%); transition: transform .42s cubic-bezier(.32,.72,0,1); max-height: 92svh; overflow-y:auto; }
@media(min-width:768px){ .sheet{ border-radius:18px; transform: translateY(20px) scale(.98); padding: 48px 48px 42px; } }
.overlay.open .sheet{ transform:none; }
.sheet .grab{ width:38px; height:4px; background: var(--line); border-radius:2px; margin:0 auto 24px; }
@media(min-width:768px){ .sheet .grab{ display:none; } }
.sheet .x{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:999px; background: var(--paper-2); border:none; cursor:pointer; font-size:16px; color: var(--ink); display:flex; align-items:center; justify-content:center; transition: background .2s; }
.sheet .x:hover{ background: var(--line); }
.sheet h3{ font-size: clamp(26px,4vw,34px); font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.sheet .ssub{ font-size:15px; color: var(--muted); line-height:1.55; margin-bottom:30px; }

.hbl{ display:flex; gap:16px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; color: var(--ink); transition: opacity .2s; }
.hbl:first-of-type{ border-top:1px solid var(--line); }
.hbl:hover{ opacity:.62; }
.hbl .ic{ width:46px; height:46px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.hbl .ic.mail{ background: var(--naranja); }
.hbl .ic.wa{ background:#25d366; }
.hbl .ic svg{ width:24px; height:24px; fill:#fff; }
.hbl h4{ font-size:16px; font-weight:700; margin-bottom:4px; }
.hbl p{ font-size:14px; color: var(--muted); line-height:1.5; margin-bottom:8px; }
.hbl .tgt{ font-size:14px; font-weight:600; color: var(--naranja); }

/* Formulario */
.fld{ margin-bottom:18px; }
.fld label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom:8px; }
.fld input, .fld textarea{ width:100%; padding:14px 16px; border:1px solid var(--line); background: var(--white); font-size:15px;
  font-family:inherit; color: var(--ink); outline:none; border-radius:8px; transition: border-color .18s; -webkit-appearance:none; }
.fld input:focus, .fld textarea:focus{ border-color: var(--ink); }
.fld textarea{ resize:vertical; min-height:82px; line-height:1.5; }
.fld .hint{ font-size:12px; color: var(--muted); margin-top:6px; line-height:1.5; }
.fsub{ width:100%; background: var(--ink); color: var(--on-dark); border:none; padding:18px; font-size:13px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; font-family:inherit; cursor:pointer; border-radius:8px; margin-top:6px; transition: background .2s; }
.fsub:hover{ background: var(--naranja); color:#fff; }
.fok{ display:none; text-align:center; padding:36px 0 8px; }
.fok.show{ display:block; }
.fok .okmark{ width:54px; height:54px; border-radius:999px; background: var(--naranja); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.fok .okmark svg{ width:28px; height:28px; fill:#fff; }
.fok h4{ font-size:24px; font-weight:800; margin-bottom:10px; }
.fok p{ font-size:15px; color: var(--muted); line-height:1.6; }
.fhidden{ display:none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px){
  .nav .nav-link{ display:none; }
  .nav .cta-pill{ display:none; }
  .burger{ display:flex; }
  .brand .tag{ display:none; }
  .grid-2, .andres{ grid-template-columns: 1fr; }
  .andres .photo{ max-width: 420px; aspect-ratio: 4/5; min-height: 0; align-self: start; }
  .pillars{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width: 860px){
  .sym-list{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .stats, .result-grid{ grid-template-columns:1fr; }
  .cards3{ grid-template-columns:1fr; }
  .cards2{ grid-template-columns:1fr; }
  .price-cards{ grid-template-columns:1fr; }
  .case-body{ grid-template-columns:1fr; }
  .case-gallery{ grid-template-columns:1fr 1fr; }
  .site-footer .top{ grid-template-columns:1fr; gap:36px; }
  .step-row{ grid-template-columns: 64px 1fr; }
}
@media (max-width: 520px){
  .case-gallery{ grid-template-columns:1fr; }
  .case-shot, .shot-ph{ aspect-ratio:16/10; }
  .btn{ width:100%; }
}

/* ===========================================================
   AJUSTES (feedback Ospi)
   =========================================================== */
/* Soy Andrés: foto completa al lado del texto + pilares debajo */
.andres .photo{ aspect-ratio: 4/5; }
/* En 2 columnas la foto se estira a la altura del texto; en responsive conserva su proporción */
@media (min-width: 1081px){
  .andres{ align-items: stretch; }
  .andres .photo{ aspect-ratio: auto; min-height: 100%; align-self: stretch; }
}
.andres-pillars{ margin-top: clamp(40px,5vh,72px); }
.andres-pillars .pillars{ margin-top:0; gap:12px; }
/* Pilares en recuadros grises, agrupados con poco espacio */
.andres-pillars .pillar{ background:#e8e5e0; border-radius:6px; padding: clamp(22px,2vw,30px) clamp(22px,2vw,28px); }

/* Insight + Concepto: fila inferior de igual alto, debajo del contenido */
.case-foot{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(40px,5vw,96px);
  align-items:stretch; margin-top: clamp(30px,4vh,52px); }
.concept-card{ background:#e8e5e0; border-radius:6px;
  padding: clamp(26px,2.6vw,40px); }
.concept-card .cl{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted); display:block; margin-bottom:14px; }
.concept-card p{ font-family:'Arimo',serif; font-style:italic; font-weight:700;
  font-size: clamp(22px,2.2vw,34px); line-height:1.1; letter-spacing:-0.02em; }
@media (max-width: 860px){ .case-foot{ grid-template-columns:1fr; gap:18px; } }

/* Home hero: bloque centrado verticalmente (más aire bajo el header) */
.hero:has(.hero-foot) .hero-title{ margin-top:auto; }

/* Metodología: titulares más grandes */
.cards-metodo .minicard h4{ font-size: clamp(24px,2.2vw,34px); }
/* Modalidades: titulares en naranja */
.cards-modalidades .minicard h4{ color: var(--naranja); }
/* Formas de trabajar: titulares y contenido un poco más grandes */
.cards-trabajar .minicard h4{ font-size: clamp(22px,2vw,30px); }
.cards-trabajar .minicard p{ font-size: clamp(16px,1.25vw,18px); }
.cards-trabajar .minicard .fm{ font-size:15px; }

/* Subrayado dibujado a mano sobre texto en cursiva */
.uline{ text-decoration: underline; text-decoration-color: var(--naranja);
  text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ¿Qué es?: frase de lado a lado + recuadro negro debajo, más pequeño */
.qx-pull{ max-width: none; }
.qx-row{ display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px,4vw,64px); align-items:start; margin-top: clamp(30px,4vh,52px); }
.qx-row .qx-ctx{ color: var(--muted); font-size: clamp(16px,1.25vw,19px); line-height:1.7; }
.callout.small{ padding: clamp(22px,2.2vw,32px); }
.callout.small p{ font-size: clamp(16px,1.5vw,19px); line-height:1.5; }
.callout.small p.qc-title{ font-style:italic; font-weight:700; text-transform:lowercase; color: var(--naranja); font-size: clamp(19px,1.9vw,26px); line-height:1.25; letter-spacing:-0.01em; margin-bottom:16px; }
.callout.small p.qc-sub{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-style:normal; font-weight:400; color: var(--on-dark); font-size: clamp(14px,1.15vw,16px); line-height:1.6; }
@media (max-width: 1080px){ .qx-row{ grid-template-columns:1fr; } }

/* Entregables en acordeón */
.acc-list{ display:grid; gap:2px; margin-top:20px; border-top:1px solid var(--line); }
.acc-item{ border:1px solid var(--line); border-top:none; background: var(--paper); }
.acc-head{ width:100%; background:none; border:none; cursor:pointer; font-family:inherit; color:inherit;
  display:grid; grid-template-columns: 72px 1fr auto; align-items:center; gap:18px; text-align:left;
  padding: clamp(20px,2vw,28px) clamp(18px,2vw,28px); transition: background .2s; }
.acc-head:hover{ background: var(--white); }
.acc-head .sn{ font-family:'Arimo',serif; font-style:italic; font-weight:700; color: var(--naranja);
  font-size: clamp(22px,2.2vw,32px); }
.acc-head h3{ font-size: clamp(18px,1.6vw,24px); font-weight:700; letter-spacing:-0.01em; }
.acc-ico{ position:relative; width:18px; height:18px; flex-shrink:0; }
.acc-ico::before, .acc-ico::after{ content:""; position:absolute; background: var(--ink); transition: transform .28s ease, opacity .28s ease; }
.acc-ico::before{ top:8px; left:0; width:18px; height:2px; }
.acc-ico::after{ top:0; left:8px; width:2px; height:18px; }
.acc-item.open .acc-ico::after{ transform: scaleY(0); opacity:0; }
.acc-body{ overflow:hidden; max-height:0; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.acc-item.open .acc-body{ max-height: 560px; }
.acc-body-in{ padding: clamp(12px,1.4vw,20px) clamp(18px,2vw,28px) clamp(24px,2.4vw,34px) calc(72px + 18px + clamp(18px,2vw,28px)); }
.acc-body-in p{ font-size:15px; color: var(--ink-2); line-height:1.65; max-width:60ch; }
.acc-body-in .gain{ margin-top:18px; border-left:2px solid var(--naranja);
  background: color-mix(in srgb, var(--naranja) 8%, transparent); padding:12px 16px; }
.acc-body-in .gain .gl{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--naranja-deep); display:block; margin-bottom:4px; }
.acc-body-in .gain p{ font-size:14px; font-weight:500; color: var(--ink); }
@media (max-width:520px){
  .acc-head{ grid-template-columns: 44px 1fr auto; gap:12px; }
  .acc-body-in{ padding-left: clamp(18px,2vw,28px); }
}

/* ===========================================================
   MÓVIL — versión abreviada y compacta
   =========================================================== */
@media (max-width: 680px){
  :root{ --gutter: 20px; }

  /* Header y aire general más compactos */
  main{ padding-top: 62px; }
  .site-header .shell{ height: 62px; }
  .brand img{ height: 26px; }
  .brand .tag{ display:none; }
  .block{ padding: 52px 0; border-bottom:1px solid var(--line-soft); }
  .block.tight{ padding: 42px 0; }

  /* Hero más corto, sin “Desliza” */
  .hero{ min-height: auto; padding: 44px 0 36px; align-items:flex-start; text-align:left; }
  .hero .eyebrow, .hero-title, .hero-sub{ margin-left:0; margin-right:0; }
  .hero-title, .hero-sub{ max-width:none; }
  .hero:has(.hero-foot) .hero-title{ margin-top:0; }
  .hero-foot{ display:none; }
  .hero .btn-row{ justify-content:flex-start; width:100%; }
  .hero-sub{ margin-bottom: 26px; }

  /* Tipografía “gritada” a escala móvil */
  .hero-title{ font-size: clamp(30px,9vw,42px); }
  .statement{ font-size: clamp(27px,8.2vw,38px); max-width:none; }
  .case-title{ font-size: clamp(24px,7.2vw,34px); }
  .case-index{ font-size: clamp(52px,17vw,90px); }
  .pull{ font-size: clamp(21px,6vw,28px); }

  /* Abreviar: ocultar copy secundaria */
  .sm-hide{ display:none !important; }
  .sym{ padding:18px 20px; align-items:start; border-radius:12px; }
  .plan .pdesc{ display:none; }
  .eyebrow{ margin-bottom:20px; }

  /* Casos: sub-nav deslizable desde el inicio */
  .casos-subnav .shell{ justify-content:flex-start; gap:20px; }
  .case-tab{ padding:16px 2px; }
  .case-hero{ padding: 30px 0 22px; }

  /* Pilares y tarjetas con menos aire */
  .andres-pillars{ margin-top:30px; }
  .pillars{ gap:12px; }
  .andres .photo{ max-width:none; }

  /* Botones y modales */
  .btn{ width:100%; }
  .sheet{ padding: 30px 20px 36px; }
  .site-footer .top{ padding: 48px 0; }
}

@media (prefers-reduced-motion: reduce){
  .li, .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ink-word svg path{ stroke-dashoffset:0 !important; animation:none !important; }
  .logos-track .row{ animation:none !important; }
}