/* ===========================================================================
   METODOLOGÍA BARRILETE · Organización Barrilete S.A.S. — hoja única
   Loseta de estilo: cálido · artesanal · profesional · esperanzado · claro
   Los ocho ejes llevan color propio (los listones del barrilete). Solo
   aparecen cuando identifican su eje: ocho colores compitiendo a la vez
   convierten el sitio en un parque de diversiones.
   Todo el movimiento respeta `prefers-reduced-motion`.
   =========================================================================== */

@import url('fuentes.css?v=20260824154020');

/* --- 1. Fichas de diseño ------------------------------------------------- */
:root{
  /* Color base */
  --tinta:      #1B1B2E;
  --tinta-80:   rgba(27,27,46,.8);
  --tinta-2:    #262640;
  --papel:      #FCF8F1;
  --papel-2:    #F3ECE0;
  --papel-3:    #E7DDCC;
  --blanco:     #FFFFFC;
  --gris:       #6B6759;
  --gris-claro: #9A9484;

  /* Los ocho listones */
  --liston-1: #D4553A;  /* Bienestar */
  --liston-2: #E29A2E;  /* Actitud */
  --liston-3: #C9A227;  /* Resiliencia */
  --liston-4: #5C9E7A;  /* Individuo */
  --liston-5: #2E8A8A;  /* Logros */
  --liston-6: #3D6EA8;  /* Entornos */
  --liston-7: #6B5B95;  /* Transformación social */
  --liston-8: #A64D79;  /* Educabilidad */

  --acento:      var(--liston-1);
  --acento-osc:  #A93E27;

  /* Tipografía */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto:   'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala — dentro de clamp(), + y - SIEMPRE con espacio a los lados */
  --t-xs: .78rem;  --t-sm: .93rem;  --t-base: 1.06rem; --t-lg: 1.2rem;
  --t-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --t-2xl: clamp(2rem, 1.55rem + 2.1vw, 3rem);
  --t-3xl: clamp(2.5rem, 1.8rem + 3.3vw, 4.2rem);
  --t-4xl: clamp(2.7rem, 1.9rem + 4.3vw, 5.1rem);

  /* Ritmo */
  --ancho: 1180px;
  --ancho-estrecho: 740px;
  --r-sec: clamp(4rem, 3rem + 4.5vw, 7.5rem);
  --radio: 6px;
  --radio-g: 14px;

  /* Sombra y movimiento */
  --sombra: 0 1px 2px rgba(27,27,46,.04), 0 10px 30px rgba(27,27,46,.07);
  --sombra-alta: 0 2px 8px rgba(27,27,46,.06), 0 26px 60px rgba(27,27,46,.14);
  --curva: cubic-bezier(.22,.61,.36,1);
  --curva-suave: cubic-bezier(.4,0,.2,1);
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:var(--t-base); font-weight:400;
  line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.14; margin:0 0 .5em; letter-spacing:-.012em; }
h1{ font-size:var(--t-3xl); } h2{ font-size:var(--t-2xl); } h3{ font-size:var(--t-xl); } h4{ font-size:var(--t-lg); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }
::selection{ background:var(--acento); color:var(--blanco); }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:var(--radio); }

.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.estrecho{ max-width:var(--ancho-estrecho); }
.seccion{ padding-block:var(--r-sec); position:relative; }
.seccion-fina{ padding-block:clamp(2.5rem, 2rem + 2vw, 4rem); }
.saltar{ position:absolute; left:-9999px; top:0; background:var(--tinta); color:var(--papel); padding:.8rem 1.2rem; z-index:200; }
.saltar:focus{ left:1rem; top:1rem; }

/* --- 3. Piezas tipográficas --------------------------------------------- */
.antetitulo{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.19em;
  font-weight:700; color:var(--acento); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.antetitulo::before{ content:''; width:1.8rem; height:2px; background:currentColor; flex:none; border-radius:2px; }
.antetitulo.centro{ justify-content:center; }
.antetitulo.sin-linea::before{ display:none; }
.entradilla{ font-size:var(--t-lg); color:var(--gris); max-width:58ch; line-height:1.62; }
.cursiva{ font-family:var(--display); font-style:italic; }
.acento{ color:var(--acento); }
.numeral{ font-family:var(--display); font-size:var(--t-2xl); color:var(--acento); line-height:1; font-weight:500; }
.mini{ font-size:var(--t-sm); color:var(--gris); }
.micro{ font-size:var(--t-xs); color:var(--gris-claro); line-height:1.55; }
.cifra{ font-variant-numeric:tabular-nums; }
.fuente{ font-size:var(--t-xs); color:var(--gris-claro); }

.cita{
  font-family:var(--display); font-size:var(--t-xl); line-height:1.42; font-style:italic;
  border-left:3px solid var(--acento); padding:.2rem 0 .2rem 1.5rem;
  margin:2.2rem 0; max-width:54ch;
}
.cita cite{ display:block; font-family:var(--texto); font-style:normal;
  font-size:var(--t-sm); color:var(--gris); margin-top:.9rem; }
.destacado-bloque{
  background:var(--papel-2); border-radius:var(--radio-g); padding:1.7rem 1.9rem; margin:2rem 0;
}

/* --- 4. Botones ---------------------------------------------------------- */
.btn{
  --bg:var(--acento); --fg:var(--blanco); --bd:var(--acento);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.8rem; border:2px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.02em;
  border-radius:100px; cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), background .3s, color .3s, border-color .3s;
}
.btn::after{
  content:''; position:absolute; inset:0; background:var(--tinta);
  transform:translateY(101%); transition:transform .42s var(--curva); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(27,27,46,.18); color:var(--blanco); border-color:var(--tinta); }
.btn:active{ transform:translateY(0); }
.btn-linea{ --bg:transparent; --fg:var(--tinta); --bd:rgba(27,27,46,.25); }
.btn-claro{ --bg:transparent; --fg:var(--papel); --bd:rgba(252,248,241,.45); }
.btn-claro::after{ background:var(--papel); }
.btn-claro:hover{ color:var(--tinta); border-color:var(--papel); }
.btn-peq{ padding:.6rem 1.2rem; font-size:var(--t-xs); }
.btn[disabled]{ opacity:.42; pointer-events:none; }

.enlace-sub{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm);
  font-weight:600; color:var(--acento); padding-bottom:.25rem;
  border-bottom:2px solid rgba(212,85,58,.3); transition:gap .3s var(--curva), border-color .3s;
}
.enlace-sub:hover{ gap:.9rem; border-color:var(--acento); }
.enlace-sub .flecha{ transition:transform .3s var(--curva); }
.enlace-sub:hover .flecha{ transform:translateX(3px); }
.enlace-texto{ color:var(--acento); border-bottom:1px solid rgba(212,85,58,.35); }
.enlace-texto:hover{ border-color:var(--acento); }

/* --- 5. Barra de navegación --------------------------------------------- */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:100; padding:1.1rem 0; color:var(--papel);
  transition:background .4s var(--curva-suave), padding .4s var(--curva-suave),
             box-shadow .4s var(--curva-suave), color .4s var(--curva-suave);
}
.barra.compacta{ background:rgba(252,248,241,.96); backdrop-filter:blur(10px);
  padding:.65rem 0; box-shadow:0 2px 18px rgba(27,27,46,.08); color:var(--tinta); }
.barra .fila{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.marca{ display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-size:1.24rem; font-weight:600; white-space:nowrap; letter-spacing:-.01em; }
.marca .cometa{ width:19px; height:19px; flex:none; transform:rotate(45deg); border-radius:3px;
  background:linear-gradient(135deg, var(--liston-2) 0 50%, var(--liston-1) 50% 100%); }
.marca small{ font-family:var(--texto); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; opacity:.6; align-self:flex-end; padding-bottom:.3rem; }
.nav{ display:flex; gap:1.7rem; align-items:center; }
.nav a{ font-size:var(--t-sm); font-weight:500; position:relative; padding:.25rem 0; }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--acento); border-radius:2px; transition:right .35s var(--curva); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--acento); }
.barra .btn{ padding:.6rem 1.2rem; font-size:var(--t-xs); }
.barra:not(.compacta) .btn{ --bg:transparent; --fg:var(--papel); --bd:rgba(252,248,241,.45); }
.barra:not(.compacta) .btn::after{ background:var(--papel); }
.barra:not(.compacta) .btn:hover{ color:var(--tinta); }

.progreso{ position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg, var(--liston-1), var(--liston-2), var(--liston-4), var(--liston-6)); }
.hamburguesa{ display:none; width:42px; height:42px; border:2px solid currentColor; background:none;
  cursor:pointer; align-items:center; justify-content:center; border-radius:100px; flex-direction:column; gap:4px; opacity:.7; }
.hamburguesa span{ display:block; width:15px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s, opacity .3s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu-movil{
  position:fixed; inset:0; z-index:99; background:var(--tinta); color:var(--papel);
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:5rem 2rem 2rem; transform:translateY(-100%); transition:transform .55s var(--curva); overflow-y:auto;
}
.menu-movil.abierto{ transform:translateY(0); }
.menu-movil a{ font-family:var(--display); font-size:clamp(1.7rem, 1.2rem + 3vw, 2.5rem);
  padding:.3rem 0; border-bottom:1px solid rgba(252,248,241,.13); }
.menu-movil a:last-of-type{ border-bottom:0; }

/* --- 6. Portada ---------------------------------------------------------- */
.portada{
  position:relative; min-height:min(100svh, 850px); display:flex; align-items:flex-end;
  background:var(--tinta); color:var(--papel); overflow:hidden; padding-block:8rem 4rem;
}
.portada-fondo{ position:absolute; inset:0; z-index:0; }
.portada-fondo img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.portada-fondo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,27,46,.78) 0%, rgba(27,27,46,.42) 40%, rgba(27,27,46,.93) 100%); }
/* El degradado de `.portada-fondo::after` va en z-index 0. Sin esta línea,
   la portada INTERIOR pinta el degradado encima del titular y el texto sale
   gris sobre la foto. Pasó, y no se ve como un fallo de CSS: se ve como una
   animación a medias. */
.portada .contenedor,
.portada-interior .contenedor{ position:relative; z-index:1; }
.portada h1{ font-size:var(--t-4xl); max-width:15ch; margin-bottom:1.3rem; }
.portada .entradilla{ color:rgba(252,248,241,.82); max-width:50ch; }
.portada-acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.3rem; }
.portada-pie{ margin-top:3.4rem; padding-top:1.6rem; border-top:1px solid rgba(252,248,241,.18);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); gap:1.6rem; }
.portada-dato strong{ display:block; font-family:var(--display); font-size:var(--t-xl); font-weight:600;
  color:var(--blanco); line-height:1.1; margin-bottom:.28rem; }
.portada-dato > span{ font-size:var(--t-xs); color:rgba(252,248,241,.62); line-height:1.5; display:block; }

.portada-interior{ background:var(--tinta); color:var(--papel); padding-block:9rem 4.5rem; position:relative; overflow:hidden; }
.portada-interior h1{ max-width:19ch; }
.portada-interior .entradilla{ color:rgba(252,248,241,.8); }
.portada-interior .antetitulo{ color:var(--liston-2); }
.portada-interior .portada-fondo img{ opacity:.22; }
.miga{ font-size:var(--t-xs); color:rgba(252,248,241,.55); letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; margin-bottom:1.3rem; }
.miga a:hover{ color:var(--liston-2); }

/* --- 7. Cinta que corre --------------------------------------------------- */
.cinta{ background:var(--acento); color:var(--blanco); padding:.85rem 0; overflow:hidden; white-space:nowrap; }
.cinta-pista{ display:inline-flex; gap:3rem; align-items:center; animation:correr 34s linear infinite; }
.cinta span{ font-family:var(--display); font-size:var(--t-lg); font-style:italic; }
.cinta span::after{ content:'◆'; margin-left:3rem; font-size:.55em; vertical-align:middle; opacity:.7; font-style:normal; }
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --- 8. Revelado al hacer scroll ----------------------------------------
   El estado oculto vive detrás de `html.animar`, que SOLO pone el JavaScript.
   Sin JS no hay nada invisible. */
.animar .revelar{ opacity:0; transform:translateY(20px); }
.revelar{ transition:opacity .8s var(--curva), transform .8s var(--curva); }
.revelar.visible{ opacity:1; transform:none; }
.animar .revelar-linea{ opacity:0; transform:translateY(11px); }
.revelar-linea{ transition:opacity .7s var(--curva), transform .7s var(--curva); }
.revelar-linea.visible{ opacity:1; transform:none; }

/* --- 9. Retículas y tarjetas -------------------------------------------- */
.rejilla{ display:grid; gap:clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.rejilla-2{ grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); }
.rejilla-3{ grid-template-columns:repeat(auto-fit, minmax(272px, 1fr)); }
.rejilla-4{ grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); }
.rejilla-partida{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items:center; }

.tarjeta{
  background:var(--blanco); padding:2rem 1.9rem; border-radius:var(--radio-g);
  box-shadow:0 1px 2px rgba(27,27,46,.04); position:relative;
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.tarjeta h3{ margin-bottom:.55rem; }
.tarjeta-oscura{ background:var(--tinta-2); color:var(--papel); }
.tarjeta-oscura .mini, .tarjeta-oscura .micro{ color:rgba(252,248,241,.68); }

.figura{ margin:0; }
.figura img{ width:100%; border-radius:var(--radio-g); }
.figura figcaption{ font-size:var(--t-xs); color:var(--gris-claro); margin-top:.7rem; line-height:1.55; }
.ratio-4-3{ aspect-ratio:4/3; object-fit:cover; }
.ratio-3-2{ aspect-ratio:3/2; object-fit:cover; }
.ratio-16-9{ aspect-ratio:16/9; object-fit:cover; }
.ratio-1-1{ aspect-ratio:1/1; object-fit:cover; }
.ratio-alto{ aspect-ratio:3/4; object-fit:cover; }

.banda-oscura{ background:var(--tinta); color:var(--papel); }
.banda-oscura .entradilla, .banda-oscura .mini{ color:rgba(252,248,241,.7); }
.banda-oscura .micro{ color:rgba(252,248,241,.52); }
.banda-oscura h2, .banda-oscura h3{ color:var(--blanco); }
.banda-oscura .antetitulo{ color:var(--liston-2); }
.banda-oscura .cita{ border-color:var(--liston-2); }
.banda-alterna{ background:var(--papel-2); }

/* --- 10. Los ocho ejes --------------------------------------------------- */
.ejes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.2rem; }
.eje{
  --c:var(--acento);
  background:var(--blanco); border-radius:var(--radio-g); padding:1.7rem 1.6rem 1.6rem;
  border-top:5px solid var(--c); position:relative;
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
}
.eje:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.eje .letra{
  font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:1;
  color:var(--c); display:block; margin-bottom:.5rem;
}
.eje h3{ font-size:var(--t-lg); margin-bottom:.4rem; }
.eje p{ font-size:var(--t-sm); color:var(--gris); margin:0; }
.eje-1{ --c:var(--liston-1); } .eje-2{ --c:var(--liston-2); }
.eje-3{ --c:var(--liston-3); } .eje-4{ --c:var(--liston-4); }
.eje-5{ --c:var(--liston-5); } .eje-6{ --c:var(--liston-6); }
.eje-7{ --c:var(--liston-7); } .eje-8{ --c:var(--liston-8); }

/* El acróstico: la palabra BARRILETE con cada letra en su color */
.acrostico{ display:flex; flex-wrap:wrap; gap:.35rem; font-family:var(--display);
  font-weight:600; font-size:clamp(2.2rem, 1.6rem + 3vw, 4rem); line-height:1; }
.acrostico span{ display:inline-block; }

/* --- 11. Los ocho talleres ----------------------------------------------- */
.talleres{ counter-reset:taller; display:grid; gap:0; }
.taller{
  counter-increment:taller; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:1.3rem; align-items:center; padding:1.4rem .2rem; border-bottom:1px solid var(--papel-3);
}
.taller:first-child{ border-top:1px solid var(--papel-3); }
.taller::before{
  content:counter(taller, decimal-leading-zero); font-family:var(--display); font-weight:600;
  font-size:var(--t-lg); color:var(--acento); width:2.2rem;
}
.taller h3{ font-size:var(--t-lg); margin:0; }
.taller .etiqueta{ font-size:var(--t-xs); color:var(--gris-claro); white-space:nowrap; }
.banda-oscura .taller{ border-bottom-color:rgba(252,248,241,.15); }
.banda-oscura .taller:first-child{ border-top-color:rgba(252,248,241,.15); }

/* --- 12. Entregables ----------------------------------------------------- */
.entregables{ display:grid; gap:.1rem; }
.entregable{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem;
  align-items:baseline; padding:.95rem 0; border-bottom:1px solid var(--papel-3); }
.entregable:last-child{ border-bottom:0; }
.entregable .marca-check{ width:1.15rem; height:1.15rem; border-radius:50%; flex:none;
  background:var(--liston-4); position:relative; transform:translateY(.2rem); }
.entregable .marca-check::after{ content:''; position:absolute; left:.34rem; top:.2rem;
  width:.3rem; height:.55rem; border:solid var(--blanco); border-width:0 2px 2px 0; transform:rotate(45deg); }
.entregable strong{ display:block; }
.entregable span{ font-size:var(--t-sm); color:var(--gris); }
.banda-oscura .entregable{ border-bottom-color:rgba(252,248,241,.15); }
.banda-oscura .entregable span{ color:rgba(252,248,241,.68); }

/* --- 13. Precio ---------------------------------------------------------- */
.precio{ background:var(--blanco); border-radius:var(--radio-g); padding:2.2rem 2rem;
  box-shadow:var(--sombra); border-top:5px solid var(--acento); }
.precio .valor{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem, 1.6rem + 2.2vw, 3rem);
  line-height:1; color:var(--tinta); display:block; margin:.5rem 0 .3rem; }
.precio .unidad{ font-size:var(--t-sm); color:var(--gris); }
.precio.a-cotizar{ border-top-color:var(--papel-3); }
.precio.a-cotizar .valor{ font-size:var(--t-xl); color:var(--gris); }

/* --- 14. Simulador de programa ------------------------------------------- */
.simulador{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.8rem, 1.4rem + 2.5vw, 3.2rem); align-items:start; }
.sim-panel{ position:sticky; top:6.5rem; background:var(--tinta); color:var(--papel);
  padding:2rem 1.9rem; border-radius:var(--radio-g); }
.sim-panel h3{ color:var(--blanco); }
.sim-total{ font-family:var(--display); font-weight:600; font-size:2.5rem; line-height:1.05;
  color:var(--blanco); margin:.4rem 0 .2rem; }
.sim-desglose{ display:grid; gap:.5rem; margin:1.4rem 0; padding-top:1.2rem;
  border-top:1px solid rgba(252,248,241,.18); font-size:var(--t-sm); }
.sim-linea{ display:flex; justify-content:space-between; gap:1rem; color:rgba(252,248,241,.75); }
.sim-linea.suma{ border-top:1px solid rgba(252,248,241,.18); padding-top:.6rem; margin-top:.3rem;
  color:var(--blanco); font-weight:600; }
.opciones{ display:grid; gap:.7rem; }
.opcion{ position:relative; }
.opcion input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opcion .caja{
  display:grid; grid-template-columns:1.3rem minmax(0,1fr) auto; gap:.9rem; align-items:center;
  background:var(--blanco); border:2px solid var(--papel-3); border-radius:var(--radio);
  padding:1rem 1.2rem; transition:border-color .25s, transform .25s var(--curva);
}
.opcion .caja .punto{ width:1.15rem; height:1.15rem; border:2px solid var(--papel-3); border-radius:50%; position:relative; transition:border-color .25s; }
.opcion input:checked + .caja{ border-color:var(--acento); }
.opcion input:checked + .caja .punto{ border-color:var(--acento); }
.opcion input:checked + .caja .punto::after{ content:''; position:absolute; inset:3px; background:var(--acento); border-radius:50%; }
.opcion input:focus-visible + .caja{ outline:2px solid var(--acento); outline-offset:2px; }
.opcion .caja strong{ display:block; font-size:var(--t-sm); }
.opcion .caja em{ display:block; font-style:normal; font-size:var(--t-xs); color:var(--gris); margin-top:.1rem; }
.opcion .caja .cifra{ font-size:var(--t-sm); color:var(--gris); white-space:nowrap; }
.bloque-sim{ margin-bottom:1.9rem; }
.bloque-sim > h4{ font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.11em;
  font-family:var(--texto); font-weight:700; color:var(--gris); margin-bottom:.8rem; }


/* --- 14 bis. Agenda del planificador ------------------------------------- */
.plan-agenda{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:0; }
.plan-fila{
  display:grid; grid-template-columns:13.5rem minmax(0,1fr); gap:1rem;
  padding:.85rem 0; border-bottom:1px solid rgba(252,248,241,.16); align-items:baseline;
}
.plan-fila:last-child{ border-bottom:0; }
.plan-fecha{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:var(--liston-2); font-variant-numeric:tabular-nums; }
.plan-que{ font-size:var(--t-sm); color:rgba(252,248,241,.86); }
.plan-fila.plan-hito .plan-que{ color:var(--blanco); font-weight:600; }
.plan-fila.plan-hito .plan-fecha{ color:var(--liston-4); }
@media (max-width: 620px){
  .plan-fila{ grid-template-columns:1fr; gap:.2rem; }
}

/* --- 15. Formulario por pasos -------------------------------------------- */
.pasos{ display:flex; gap:.5rem; margin-bottom:1.8rem; }
.paso-guia{ flex:1; height:4px; background:var(--papel-3); border-radius:2px; overflow:hidden; }
.paso-guia.activo{ background:var(--acento); }
.paso-guia.hecho{ background:var(--liston-4); }
.paso{ display:none; }
.paso.activo{ display:block; animation:aparece .4s var(--curva); }
@keyframes aparece{ from{ opacity:0; transform:translateX(10px); } }
.paso-acciones{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.paso-rotulo{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.11em;
  font-weight:700; color:var(--gris-claro); margin-bottom:.4rem; }

/* --- 16. Formularios ----------------------------------------------------- */
.campo{ display:grid; gap:.4rem; margin-bottom:1.15rem; }
.campo label{ font-size:var(--t-sm); font-weight:600; }
.campo input, .campo select, .campo textarea{
  padding:.85rem 1rem; border:2px solid var(--papel-3); background:var(--blanco);
  border-radius:var(--radio); transition:border-color .25s, box-shadow .25s; width:100%; font-size:var(--t-sm);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:0; border-color:var(--acento); box-shadow:0 0 0 3px rgba(212,85,58,.14); }
.campo textarea{ min-height:6.5rem; resize:vertical; }
.campo .aviso{ font-size:var(--t-xs); color:var(--gris-claro); }
.campo.error input, .campo.error select, .campo.error textarea{ border-color:var(--acento-osc); }
.campo.error .aviso{ color:var(--acento-osc); }
.campos-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:0 1.2rem; }
.nota-forma{ font-size:var(--t-xs); color:var(--gris-claro); margin-top:.9rem; line-height:1.6; }
.acuse{ background:var(--papel-2); border-radius:var(--radio-g); padding:1.6rem 1.7rem; }
.acuse .codigo{ font-family:var(--display); font-weight:600; font-size:var(--t-xl); color:var(--acento); }

/* --- 17. Acordeón -------------------------------------------------------- */
.acordeon{ border-top:1px solid var(--papel-3); }
.acordeon-item{ border-bottom:1px solid var(--papel-3); }
.acordeon-cabeza{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.3rem 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--display); font-weight:500; font-size:var(--t-lg); color:inherit; line-height:1.35;
}
.acordeon-cabeza .signo{ flex:none; width:1.1rem; height:1.1rem; position:relative; margin-top:.4rem; }
.acordeon-cabeza .signo::before, .acordeon-cabeza .signo::after{
  content:''; position:absolute; background:var(--acento); border-radius:2px; transition:transform .35s var(--curva); }
.acordeon-cabeza .signo::before{ left:0; right:0; top:50%; height:2px; margin-top:-1px; }
.acordeon-cabeza .signo::after{ top:0; bottom:0; left:50%; width:2px; margin-left:-1px; }
.acordeon-cabeza[aria-expanded="true"] .signo::after{ transform:scaleY(0); }
.acordeon-cuerpo{ overflow:hidden; height:0; transition:height .4s var(--curva); }
.acordeon-cuerpo > div{ padding:0 0 1.4rem; color:var(--gris); max-width:70ch; font-size:var(--t-sm); }

/* --- 18. Resultados (los ocho) ------------------------------------------- */
.resultados{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1.1rem; }
.resultado{ background:var(--blanco); border-radius:var(--radio-g); padding:1.5rem 1.4rem;
  text-align:center; box-shadow:0 1px 2px rgba(27,27,46,.04); }
/* Mismo motivo que en el otro sitio: es un <span> suelto dentro de un <article>,
   no hijo de flex ni de grid, así que sin `display:block` no mide nada. */
.resultado .icono{ display:block; width:2.6rem; height:2.6rem; border-radius:50%; margin:0 auto .8rem;
  background:var(--c, var(--acento)); opacity:.16; }
.resultado h3{ font-size:var(--t-base); margin:0; }

/* --- 19. Cifras del problema --------------------------------------------- */
.cifra-tarjeta{ background:var(--blanco); border-radius:var(--radio-g); padding:1.9rem 1.7rem;
  box-shadow:0 1px 2px rgba(27,27,46,.04); }
.cifra-tarjeta .grande{ font-family:var(--display); font-weight:600; line-height:1;
  font-size:clamp(2.3rem, 1.8rem + 2.2vw, 3.4rem); color:var(--acento); display:block; margin-bottom:.6rem; }
.cifra-tarjeta p{ font-size:var(--t-sm); color:var(--gris); margin:0; }
.banda-oscura .cifra-tarjeta{ background:var(--tinta-2); }
.banda-oscura .cifra-tarjeta p{ color:rgba(252,248,241,.7); }
.banda-oscura .cifra-tarjeta .grande{ color:var(--liston-2); }

/* --- 20. Franja de llamada ---------------------------------------------- */
.franja{ background:var(--tinta); color:var(--papel); padding-block:clamp(3.5rem, 3rem + 3vw, 6rem);
  position:relative; overflow:hidden; }
.franja h2{ color:var(--blanco); max-width:19ch; }
.franja .entradilla{ color:rgba(252,248,241,.75); }
.franja-fondo{ position:absolute; inset:0; z-index:0; opacity:.2; }
.franja-fondo img{ width:100%; height:100%; object-fit:cover; }
.franja .contenedor{ position:relative; z-index:1; }

/* --- 21. Pie ------------------------------------------------------------- */
.pie{ background:var(--tinta-2); color:rgba(252,248,241,.72); padding-block:4rem 2rem; font-size:var(--t-sm); }
.pie h4{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em;
  color:var(--liston-2); margin-bottom:1rem; font-weight:700; font-family:var(--texto); }
.pie a:hover{ color:var(--blanco); }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.pie-fila{ display:grid; grid-template-columns:1.4fr repeat(auto-fit, minmax(150px, 1fr)); gap:2.5rem; }
.pie-legal{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(252,248,241,.13);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:var(--t-xs); color:rgba(252,248,241,.46); line-height:1.6; }

/* --- 22. Avisos flotantes ------------------------------------------------ */
.avisos{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:150; display:grid; gap:.6rem;
  max-width:min(24rem, calc(100vw - 2.4rem)); }
.avisos .aviso-caja{ background:var(--tinta); color:var(--papel); padding:.9rem 1.2rem;
  border-radius:var(--radio); box-shadow:var(--sombra-alta); font-size:var(--t-sm);
  border-left:4px solid var(--liston-4); animation:entra .35s var(--curva); }
.avisos .aviso-caja.error{ border-left-color:var(--acento); }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } }

/* --- 23. Utilidades ------------------------------------------------------ */
.centro{ text-align:center; } .centro .entradilla{ margin-inline:auto; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:.8rem; } .mt-2{ margin-top:1.6rem; }
.mt-3{ margin-top:2.4rem; } .mt-4{ margin-top:3.2rem; } .mt-5{ margin-top:4.5rem; }
.mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:1.6rem; } .mb-3{ margin-bottom:2.4rem; }
.solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sin-lista{ list-style:none; margin:0; padding:0; }
.lista-marcada{ margin:0; padding:0; list-style:none; display:grid; gap:.7rem; }
.lista-marcada li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem;
  font-size:var(--t-sm); color:var(--gris); }
.lista-marcada li::before{ content:''; width:7px; height:7px; background:var(--acento);
  border-radius:2px; transform:rotate(45deg); margin-top:.55rem; }
.banda-oscura .lista-marcada li{ color:rgba(252,248,241,.74); }
.regla{ border:0; border-top:1px solid var(--papel-3); margin:0; }
.banda-oscura .regla{ border-top-color:rgba(252,248,241,.16); }

/* --- 24. Adaptación a pantallas ----------------------------------------- */
@media (max-width: 980px){
  .rejilla-partida{ grid-template-columns:1fr; }
  .simulador{ grid-template-columns:1fr; }
  .sim-panel{ position:static; }
}
@media (max-width: 860px){
  .nav{ display:none; }
  .hamburguesa{ display:flex; }
  .barra .btn{ display:none; }
  .pie-fila{ grid-template-columns:1fr 1fr; gap:2rem; }
  .taller{ grid-template-columns:auto minmax(0,1fr); }
  .taller .etiqueta{ grid-column:2; }
}
@media (max-width: 560px){
  .contenedor{ width:min(100% - 1.8rem, var(--ancho)); }
  .pie-fila{ grid-template-columns:1fr; }
  .portada{ min-height:auto; padding-block:7rem 3rem; }
  .opcion .caja{ grid-template-columns:1.3rem minmax(0,1fr); }
  .opcion .caja .cifra{ grid-column:2; }
}

/* --- 25. Menos movimiento ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .animar .revelar, .animar .revelar-linea{ opacity:1 !important; transform:none !important; }
  .cinta-pista{ animation:none; }
}

/* --- 26. Impresión ------------------------------------------------------- */
@media print{
  .barra, .menu-movil, .hamburguesa, .avisos, .franja, .cinta, .portada-fondo{ display:none !important; }
  body{ background:#fff; color:#000; }
  .banda-oscura, .portada, .portada-interior, .sim-panel{ background:#fff !important; color:#000 !important; }
  .seccion{ padding-block:1.5rem; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.7em; color:#555; }
}