/* =============================================================================
   Primaria (1.° a 6.°) · /primaria/ · «Primaria en claro»: cada pregunta tiene un número y un botón, en un cuaderno rojo
   Se suma a base.css. Motivos: la cuadrícula del cuaderno, el sello «10» (siempre con sus palabras al lado), la regla de
   10 bloques de 40 minutos, las cifras grandes, las pestañas de grado con espiral, las bandas de la gigantografía
   «50 aniversario» (detrás de la foto del hero), la cinta inicial → primaria → HJ PRE (el único azul de la página) y el
   hilo rojo que termina en un corazón junto al último botón. Contrastes (WCAG): los de la spec, calculados con la
   fórmula de luminancia relativa.
   Celular primero (320–430 px). Desde 900 px, computadora; entre 900 y 1 199 px (tablet horizontal, laptop chica) las
   piezas anchas se acomodan en dos columnas, y desde 1 200 px va la composición de la spec (1 280 px).
   ============================================================================= */

body.t-pri {
  --fondo: #FFFFFF;
  --fondo-2: #FFF0EB;          /* rosado crema: hero, dudas, grado y visita */
  --fondo-hero: #FFF0EB;
  --crema: #FDF3E1;            /* «Y en todos los grados» y la tarjeta de la pensión */
  --tinta: #3D1413;            /* 16,06:1 sobre blanco; 14,46:1 sobre #FFF0EB */
  --titulo: #3D1413;
  --suave: #6B4740;            /* 8,08:1 sobre blanco; 7,27:1 sobre #FFF0EB */
  --marca: #E7313A;            /* rojo HJ: solo superficies, cifras grandes y la regla (4,29:1, texto grande) */
  --marca-boton: #C81F2A;      /* sello, enlaces, grado elegido (blanco encima: 5,70:1) */
  --marca-osc: #55121B;        /* granate: recuadro de la casa, pie y foco (14,11:1) */
  --acento: #F2BC21;           /* solo detrás de granate o sobre granate */
  --borde: #F3D3CB;
  --foco: #55121B;
  --foco-osc: #F2BC21;
  --sobre-osc-suave: #E7DEDF;  /* blanco al 86 % sobre granate: 10,69:1 */
  --pie-fondo: #55121B;
  --cabecera-fondo: rgba(255, 255, 255, .97);
  --cuadricula: linear-gradient(rgba(231, 49, 58, .07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(231, 49, 58, .07) 1px, transparent 1px);
  --cuadricula-suave: linear-gradient(rgba(231, 49, 58, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(231, 49, 58, .045) 1px, transparent 1px);
  /* el margen rojo de 4 px del cuaderno, pintado con el fondo (el radio de la tarjeta lo recorta en recto) */
  --margen-rojo: linear-gradient(90deg, var(--marca) 0 4px, transparent 4px);
  --sombra-tarjeta: 0 14px 30px -26px rgba(85, 18, 27, .55);
}
.t-pri p, .t-pri li, .t-pri figcaption { text-wrap: pretty; }
/* títulos, preguntas y botones de dos líneas: que la última no quede con una palabra sola */
.t-pri h2, .t-pri h3, .duda__q, .t-pri .faq summary, .t-pri .selector__nota, .t-pri .cierre__compartir,
.t-pri .pie__firma-marca, .t-pri .btn, .preocupa__wa, .t-pri .celebra li, .t-pri .seccion__intro, .t-pri .duda li,
.t-pri .todos__filas p { text-wrap: balance; }
/* los enlaces del hero y «Agende su visita ↓» cortan después del signo de pregunta: su final va en un span.nw */
.t-pri .hero-pri__enlaces a, .t-pri .todos__enlace a { text-wrap: wrap; }
.t-pri .seccion { padding-block: 32px; }
.t-pri .seccion h2 { font-size: clamp(24px, 6.4vw, 36px); line-height: 1.15; letter-spacing: -.018em; margin: 8px 0 8px; }
.t-pri .seccion__intro { font-size: 16px; line-height: 1.55; color: var(--suave); }
.t-pri .seccion__cabeza { margin-bottom: 18px; }
.nw { white-space: nowrap; }
@media (min-width: 900px) {
  /* márgenes de 32 px a los lados en computadora (con 16 px, entre 900 y 1 100 px la página iba pegada al borde) */
  .t-pri .envoltura {
    max-width: calc(var(--ancho) + 64px);
    padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
  .t-pri .seccion { padding-block: 84px; }
  .t-pri .seccion__intro { font-size: 17px; }
  .t-pri .seccion__cabeza { margin-bottom: 32px; }
}
.ic-lleno { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- cabecera: blanca, 64 px, logo de 44 px */
.t-pri .cabecera__fila { min-height: 64px; }
.marca--pri { flex: none; }
.marca--pri img { height: 44px; width: auto; }
.t-pri .cabecera .btn { min-height: 44px; }
.t-pri .cabecera__menu a { color: var(--tinta); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .t-pri .cabecera__fila { min-height: 72px; }
  .marca--pri img { height: 50px; }
}

/* ---------------------------------------------------------------- 1. hero: el sello «10» y el selector de grado */
.hero-pri {
  position: relative; overflow: hidden;
  background-color: var(--fondo-2); background-image: var(--cuadricula); background-size: 22px 22px;
  background-position: -1px -1px;
  padding-block: 26px 30px;
}
.hero-pri__texto, .hero-pri__foto { position: relative; z-index: 1; min-width: 0; }

.titulo10 { display: flex; align-items: center; gap: 15px; margin: 12px 0 14px; }
.sello10 {
  flex: none; position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-boton); color: var(--blanco); transform: rotate(-6deg);
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px rgba(200, 31, 42, .25), 0 14px 22px -12px rgba(85, 18, 27, .75);
  animation: sellado .35s cubic-bezier(.2, .9, .3, 1.25) both;
}
/* doble aro blanco: el borde de afuera y uno fino por dentro, como un sello de tinta */
.sello10::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .92);
}
.sello10__n {
  font: 800 46px/1 var(--fuente); letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin: 3px 2px 0 0;
}
@keyframes sellado {
  from { transform: scale(.85) rotate(-12deg); opacity: .35; }
  to { transform: scale(1) rotate(-6deg); opacity: 1; }
}
.titulo10__txt { font: 800 clamp(22px, 6.15vw, 24px)/1.15 var(--fuente); color: var(--titulo); letter-spacing: -.015em; min-width: 0; }
.hero-pri__bajada { font-size: 16.5px; line-height: 1.5; color: var(--suave); max-width: 46ch; }

.selector { margin-top: 18px; }
.selector__titulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 700 17px/1.3 var(--fuente); color: var(--titulo);
}
.selector__titulo .ic { width: 22px; height: 22px; color: #1FA855; flex: none; }
@media (max-width: 380px) { .selector__titulo { font-size: 15.5px; gap: 7px; } }
.selector__lista { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.selector__lista > li { display: grid; min-width: 0; }
.selector__mas { grid-column: span 2; }
.selector .grado {
  position: relative; min-height: 52px; font-size: 18px; color: #2A211D; border-radius: 14px;
  box-shadow: 0 6px 14px -12px rgba(10, 90, 45, .7);
}
.selector .grado--mas { font-size: 16px; }
.selector .grado.es-elegido { border-color: var(--marca-osc); box-shadow: 0 0 0 1px var(--marca-osc); background: var(--blanco); }
.selector .grado.es-elegido::after {
  content: ""; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--marca-osc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 2px var(--fondo-2);
}
.t-pri .selector__nota { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--suave); }

.hero-pri__enlaces { list-style: none; display: grid; margin-top: 6px; }
.hero-pri__enlaces a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding-block: 3px;
  font: 600 15px/1.35 var(--fuente); color: var(--marca-boton);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.hero-pri__enlaces .ic { width: 20px; height: 20px; flex: none; }

.hero-pri__foto { margin: 24px 0 0; }
.hero-pri__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); background: #F6DCD3;
  box-shadow: 0 18px 34px -24px rgba(85, 18, 27, .8);
}
/* bandas diagonales amarilla y roja, como en la gigantografía «50 aniversario»: van detrás de la foto (z-index -1
   dentro de la figura) y la roja sale por la derecha. En el celular asoman 24 px sobre la foto y por el borde derecho;
   en computadora bajan de arriba abajo del hero, que las recorta. */
.hero-pri__foto::before, .hero-pri__foto::after {
  content: ""; position: absolute; z-index: -1; top: -24px; bottom: 30%; pointer-events: none; transform: skewX(-20deg);
}
.hero-pri__foto::after { right: -48px; width: 45%; background: var(--marca); }
.hero-pri__foto::before { right: calc(45% - 48px); width: 44px; background: var(--acento); }
/* sello «50.° aniversario» en #C81F2A con blanco (5,70:1) */
.sello50 {
  position: absolute; left: -4px; top: -16px; width: 94px; height: 94px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  background: var(--marca-boton); color: var(--blanco); border: 3px solid var(--blanco); transform: rotate(-8deg);
  box-shadow: 0 12px 22px -12px rgba(85, 18, 27, .85);
}
.sello50 b { font: 800 28px/.95 var(--fuente); letter-spacing: -.03em; }
.sello50 span { font: 700 11px/1.1 var(--fuente); letter-spacing: .01em; text-transform: uppercase; }

@media (min-width: 900px) {
  .hero-pri { padding-block: 40px 54px; }
  .hero-pri__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
  .titulo10 { gap: 22px; margin: 14px 0 16px; }
  .sello10 { width: 120px; height: 120px; box-shadow: 0 0 0 4px var(--blanco), 0 0 0 5px rgba(200, 31, 42, .25), 0 18px 30px -14px rgba(85, 18, 27, .75); }
  .sello10::before { inset: 7px; border-width: 2px; }
  .sello10__n { font-size: 66px; }
  /* 44 px a 1 280 px (spec); entre 900 y 1 199 px, menos, para que siga en 3 líneas */
  .titulo10__txt { font-size: clamp(34px, 3.44vw, 44px); line-height: 1.07; letter-spacing: -.022em; }
  .hero-pri__bajada { font-size: 17.5px; }
  .selector { margin-top: 22px; }
  .selector__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .selector .grado { min-height: 56px; }
  .selector__mas { grid-column: 1 / -1; }
  .hero-pri__enlaces { grid-auto-flow: row; margin-top: 8px; }
  /* la foto a la altura del H1, sobre las bandas que bajan de arriba abajo del hero */
  .hero-pri__foto { margin: 56px 0 0; }
  .hero-pri__foto::before, .hero-pri__foto::after { top: -320px; bottom: -320px; }
  .hero-pri__foto::after { right: -64px; }
  .hero-pri__foto::before { right: calc(45% - 64px); }
  .sello50 { width: 104px; height: 104px; left: -28px; top: -28px; border-width: 4px; }
  .sello50 b { font-size: 32px; }
  .sello50 span { font-size: 12px; }
}

/* ---------------------------------------------------------------- 2. «Antes de elegir colegio, pregunte esto» */
.compare { background: var(--fondo); }
.compare__cabeza { display: grid; gap: 4px; margin-bottom: 16px; }
.compare__cabeza .seccion__cabeza { margin-bottom: 0; }
.franja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.franja__foto { margin: 0; min-width: 0; }
.franja__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: #F6DCD3; }
.franja__foto figcaption { margin-top: 8px; display: grid; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--suave); }
.franja__foto figcaption b { font-size: 14.5px; color: var(--titulo); }

.preguntas { list-style: none; display: grid; gap: 10px; }
.pregunta {
  min-width: 0; padding: 14px 14px 15px 16px; border-radius: 18px; border: 1px solid var(--borde);
  border-left-color: transparent; background: var(--margen-rojo) border-box, var(--blanco);
  box-shadow: var(--sombra-tarjeta);
}
.t-pri .pregunta__q { font: 800 15px/1.35 var(--fuente); color: var(--marca-boton); letter-spacing: .005em; }
/* en el celular, la cifra va como letra capital: ocupa las dos primeras líneas y la respuesta sigue a todo el ancho */
.pregunta__r { display: flow-root; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--tinta); }
.pregunta__n {
  float: left; min-width: 34px; margin: 1px 12px 0 0;
  font: 800 44px/1 var(--fuente); color: var(--marca); letter-spacing: -.04em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pregunta__n--sello {
  width: 46px; height: 46px; margin: 0 12px 0 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-boton); color: var(--blanco); font-size: 23px; letter-spacing: -.05em; padding: 0;
  transform: rotate(-6deg); position: relative; box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px rgba(200, 31, 42, .3);
}
.pregunta__n--sello::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.2px solid rgba(255, 255, 255, .9); }
.pregunta__n--sello span { margin: 2px 1px 0 0; }
.pregunta__n--ic { display: grid; justify-items: center; margin-top: 2px; }
.pregunta__n--ic .ic { width: 40px; height: 40px; color: var(--marca); stroke-width: 2.1; }
.pregunta__texto { min-width: 0; }

/* la regla del 10: 10 bloques de 40 minutos (2 filas de 5 en el celular, una fila en computadora) */
.regla { margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--borde); }
.regla__bloques { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.regla__bloques li { display: grid; gap: 3px; justify-items: stretch; min-width: 0; }
.regla__b { display: block; height: 22px; border-radius: 7px; background: var(--marca); }
.regla__t { font-size: 12px; line-height: 1.15; color: var(--suave); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regla__t b { font-weight: 700; color: var(--tinta); }
.regla__total { margin-top: 10px; font: 800 18px/1.3 var(--fuente); color: var(--titulo); font-variant-numeric: tabular-nums; }
.con-js .regla .regla__b {
  background: rgba(231, 49, 58, .1); box-shadow: inset 0 0 0 1.5px rgba(231, 49, 58, .4);
  transition: background-color .16s ease calc(var(--i) * 40ms), box-shadow .16s ease calc(var(--i) * 40ms);
}
.con-js .regla.regla--llena .regla__b { background: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }

/* maqueta del reporte de 2027 (solo con el visto de Franz: CONFIRMADO["reporte_2027"]) */
.reporte { margin-top: 14px; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; }
.reporte p { font-size: 14.5px; line-height: 1.45; color: var(--tinta); }
.reporte__globo {
  position: relative; display: grid; gap: 6px; padding: 10px 10px 12px; border-radius: 4px 14px 14px 14px;
  background: var(--wa-suave); font-size: 11.5px; line-height: 1.2; color: var(--sobre-wa);
}
.reporte__ejemplo { justify-self: start; padding: 2px 6px; border-radius: 6px; background: var(--blanco); font-size: 10.5px; font-weight: 700; }
.reporte__globo i { display: block; height: 6px; border-radius: 3px; background: #B7C9BE; }
.reporte__globo i:nth-of-type(2) { width: 80%; }
.reporte__globo i:nth-of-type(3) { width: 58%; }

/* «Para conversarlo en casa» */
.en-casa-pri {
  position: relative; overflow: hidden; display: grid; gap: 14px; margin-top: 16px; padding: 20px 18px 18px;
  border-radius: var(--radio); background-color: var(--marca-osc); color: var(--blanco);
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.en-casa-pri .etiqueta { color: var(--acento); }
.t-pri .en-casa-pri h3 { margin: 8px 0; font: 800 22px/1.25 var(--fuente); color: var(--blanco); }
.en-casa-pri p { color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; }
.en-casa-pri__acciones { display: grid; gap: 10px; }
.en-casa-pri .btn { min-height: 48px; width: 100%; padding: 4px 16px; line-height: 1.25; text-align: center; }
.btn-reenviar { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn-reenviar:hover { background: rgba(255, 255, 255, .1); }
.en-casa-pri :focus-visible { outline-color: var(--foco-osc); }

@media (min-width: 900px) {
  .compare__cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: end; margin-bottom: 36px; }
  .compare .franja { margin-top: 0; }
  /* hasta 1 199 px, dos columnas: la tarjeta 1 (con la regla en una fila) y la 6 van a lo ancho */
  .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  /* las preguntas de una fila comparten alto (subgrid): las cifras quedan a la misma altura */
  .pregunta {
    display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; align-content: start;
    padding: 22px 24px 24px;
    /* el espacio que sobra se ve como hoja de cuaderno */
    background-image: var(--margen-rojo), var(--cuadricula-suave);
    background-size: 100% 100%, 22px 22px, 22px 22px; background-position: 0 0, -1px -1px, -1px -1px;
    background-repeat: no-repeat, repeat, repeat; background-origin: border-box, padding-box, padding-box;
  }
  .pregunta__cuerpo { min-width: 0; }
  /* la cifra arriba y la respuesta debajo, a todo el ancho */
  .pregunta__r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 0; }
  .pregunta__n { float: none; justify-self: start; min-width: 0; margin: 0; text-align: left; }
  .pregunta__n--sello { width: 60px; height: 60px; font-size: 30px; }
  .pregunta__n--ic { justify-items: start; }
  .pregunta__n--ic .ic { width: 44px; height: 44px; }
  .pregunta--1, .pregunta--6 { grid-column: 1 / -1; }
  .pregunta--1 .pregunta__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, 1.4fr); gap: 0 32px; align-items: start; }
  .pregunta--1 .regla { margin: 0; padding: 4px 0 0 32px; border-top: 0; border-left: 1.5px dashed var(--borde); }
  .regla__bloques { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px 4px; }
  .regla__b { height: 30px; border-radius: 6px; }
  .en-casa-pri { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 34px 40px; margin-top: 26px; }
  .t-pri .en-casa-pri h3 { font-size: 26px; }
  .en-casa-pri .btn { min-height: 52px; padding: 6px 18px; }
}
@media (min-width: 1200px) {
  /* 3 columnas por 2 filas (spec); la primera, más ancha, para que la regla entre en una fila con «40 min» entero */
  .preguntas { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pregunta--1, .pregunta--6 { grid-column: auto; }
  .pregunta--1 .pregunta__cuerpo { display: block; }
  .pregunta--1 .regla { margin-top: 14px; padding: 14px 0 0; border-left: 0; border-top: 1.5px dashed var(--borde); }
}

/* ---------------------------------------------------------------- 3. dudas: acordeón de tres tarjetas */
.dudas__lista { display: grid; gap: 10px; }
.duda { border-radius: 18px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra-tarjeta); }
.duda > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 11px 14px 11px 12px;
  border-radius: 18px;
}
.duda > summary::-webkit-details-marker { display: none; }
.duda__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--blanco); }
.duda__ic .ic { width: 22px; height: 22px; }
.duda__q { flex: 1; min-width: 0; font: 700 17px/1.3 var(--fuente); color: var(--titulo); }
.duda__flecha { color: var(--marca-boton); transition: transform .2s ease; }
.duda[open] .duda__flecha { transform: rotate(180deg); }
.duda__cuerpo { display: grid; gap: 14px; padding: 0 16px 18px; }
/* la de la pensión, con otro estilo: crema y el margen granate de 4 px pintado con el fondo */
.duda--pension {
  border-color: #F0DFC0; border-left-color: transparent;
  background: linear-gradient(90deg, var(--marca-osc) 0 4px, transparent 4px) border-box, var(--crema);
}
.duda--pension > summary { padding-left: 14px; }
.duda--pension .duda__ic { background: var(--marca-osc); }

.visto { list-style: none; display: grid; gap: 9px; }
.visto li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; color: var(--tinta); }
.visto .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--marca-osc); stroke-width: 2.8; }

/* botón de WhatsApp de cada duda: verde claro (#06331A sobre #E2F7EA: 12,52:1) */
.preocupa__wa {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 18px;
  border-radius: 999px; border: 1.5px solid var(--wa-claro-borde); background: var(--wa-suave); color: var(--sobre-wa);
  font: 700 15.5px/1.2 var(--fuente); text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.preocupa__wa:hover { background: #CDEFDA; border-color: var(--wa); }
.preocupa__wa .ic { width: 20px; height: 20px; color: #128C45; }

@media (min-width: 900px) {
  .dudas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .duda { display: flex; flex-direction: column; }
  .duda > summary { padding: 18px 20px 6px; align-items: flex-start; }
  .duda__q { font-size: 18px; padding-top: 7px; }
  .duda__cuerpo { flex: 1; align-content: space-between; padding: 12px 22px 24px; }
  .dudas--fijas .duda > summary { cursor: default; }
  .dudas--fijas .duda__flecha { display: none; }
  /* las tres abiertas y de la misma altura: el botón queda abajo y a todo el ancho en las tres */
  .dudas--fijas .duda::details-content { display: contents; }
  .duda .preocupa__wa { justify-self: stretch; justify-content: center; padding-inline: 14px; text-align: center; }
}

/* ---------------------------------------------------------------- 4. su grado: pestañas de cuaderno */
/* arriba, una fila de perforaciones: empieza la hoja (las dudas, encima, tienen el mismo rosado) */
.grado-sec {
  background-color: var(--fondo-2);
  background-image: radial-gradient(circle at 11px 11px, var(--borde) 3px, transparent 3.6px), var(--cuadricula);
  background-size: 22px 22px, 22px 22px, 22px 22px; background-repeat: repeat-x, repeat, repeat;
  box-shadow: inset 0 1px 0 var(--borde);
}
.archivador { position: relative; }
.pestanas__lista { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pestanas__lista > li { display: grid; min-width: 0; }
@media (max-width: 340px) { .pestanas__lista { gap: 4px; } }   /* a 320 px, cada pestaña sigue con 44 px de ancho */
.pestana {
  position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 2px;
  border: 2px solid var(--marca-boton); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--blanco); color: var(--marca-boton); font: 700 18px/1 var(--fuente); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pestana:hover { background: #FFE3DC; }
.pestana[aria-selected="true"], .pestana.es-pestana { background: var(--marca-boton); color: var(--blanco); }

.folios { position: relative; }
.folio {
  position: relative; padding: 18px 16px 20px 38px; border-top: 4px solid var(--marca-boton); border-radius: 0 0 18px 18px;
  background-color: var(--blanco);
  /* línea roja de margen a 18 px del borde y renglones rojos al 7 % */
  background-image: linear-gradient(90deg, transparent 18px, rgba(231, 49, 58, .45) 18px 20px, transparent 20px),
                    linear-gradient(rgba(231, 49, 58, .07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 26px; background-position: 0 0, 0 19px;
  box-shadow: 0 18px 32px -26px rgba(85, 18, 27, .7);
}
/* espiral: anillos que cruzan el borde izquierdo de la hoja */
.folio::before {
  content: ""; position: absolute; left: -8px; top: 14px; bottom: 14px; width: 18px; pointer-events: none;
  background:
    radial-gradient(circle at 9px 11px, transparent 3.6px, #A3918D 4.1px, #7E6C68 5.6px, transparent 6.1px) 0 0 / 18px 22px repeat-y;
}
.folio__titulo { font: 800 20px/1.3 var(--fuente); color: var(--titulo); outline-offset: 4px; }
.folio__para { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--suave); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.chips li {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo-2);
  font: 600 14px/1.25 var(--fuente); color: var(--tinta);
}
.folio__puntos .ic { color: var(--marca-boton); }
.folio__camino {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 14px 0 16px;
  padding: 11px 13px; border-radius: 14px; background: var(--crema); border: 1px solid #F0DFC0;
  font: 600 15px/1.45 var(--fuente); color: var(--tinta);
}
.folio__camino .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--marca-boton); }
.folio__camino a { white-space: nowrap; font-weight: 700; }
.folio__wa { width: 100%; min-height: 48px; padding-inline: 16px; }
.folio__wa .grado__nombre { display: inline-flex; align-items: center; gap: 10px; }
.folio--entra { animation: folio-entra .15s ease-out; }
@keyframes folio-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.grado-sec__nota {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px;
  font-size: 14.5px; line-height: 1.5; color: var(--suave);
}
.grado-sec__nota .ic { width: 20px; height: 20px; color: var(--marca-boton); margin-top: 1px; }

/* sin JavaScript: enlaces a #g1…#g6; :target muestra el elegido y, si no hay ninguno, se ven los 6 apilados */
body:not(.con-js) .folio + .folio { margin-top: 22px; border-radius: 18px; }
body:not(.con-js) .folios:has(.folio:target) .folio:not(:target) { display: none; }
body:not(.con-js) .folios:has(.folio:target) .folio:target { margin-top: 0; border-radius: 0 0 18px 18px; }
body:not(.con-js) .archivador:has(#g1:target) [href="#g1"], body:not(.con-js) .archivador:has(#g2:target) [href="#g2"],
body:not(.con-js) .archivador:has(#g3:target) [href="#g3"], body:not(.con-js) .archivador:has(#g4:target) [href="#g4"],
body:not(.con-js) .archivador:has(#g5:target) [href="#g5"], body:not(.con-js) .archivador:has(#g6:target) [href="#g6"] {
  background: var(--marca-boton); color: var(--blanco);
}

@media (min-width: 900px) {
  .grado-sec { background-size: 22px 22px, 22px 22px, 22px 22px; }
  /* los grados en una columna de 160 px, como el lomo de un archivador; la hoja a la derecha y la nota debajo de ella */
  .archivador { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 30px; align-items: start; }
  .grado-sec__nota { grid-column: 2; }
  .pestanas { position: sticky; top: 96px; }
  .pestanas__lista { grid-template-columns: 1fr; gap: 8px; padding: 12px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra-tarjeta); }
  .pestana { min-height: 52px; border-bottom: 2px solid var(--marca-boton); border-radius: 12px; justify-items: center; font-size: 19px; }
  .pestana[aria-selected="true"]::after, .pestana.es-pestana::after {
    content: ""; position: absolute; right: -22px; top: 50%; margin-top: -9px; border: 9px solid transparent;
    border-left-color: var(--marca-boton);
  }
  .folio { padding: 28px 34px 30px 52px; border-radius: 0 0 22px 22px; }
  .folio::before { left: -10px; }
  .folio__titulo { font-size: 24px; }
  .folio__para { font-size: 15px; }
  .folio__wa { width: auto; justify-self: start; }
  body:not(.con-js) .folio + .folio { margin-top: 26px; }
}
@media (min-width: 1200px) {
  /* desde 1 200 px, la hoja de 680 px y la nota a su derecha, como un papelito pegado con cinta */
  .archivador { grid-template-columns: 160px minmax(0, 680px) minmax(0, 1fr); }
  .grado-sec__nota {
    position: relative; grid-column: 3; grid-row: 1; margin: 46px 0 0; padding: 30px 20px 22px; transform: rotate(2.2deg);
    grid-template-columns: 1fr; gap: 10px; border-radius: 4px 4px 16px 4px;
    background: var(--acento); color: var(--titulo); font-size: 15px; font-weight: 600; line-height: 1.5;
    box-shadow: 0 16px 24px -18px rgba(85, 18, 27, .75);
  }
  .grado-sec__nota::before {
    content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 24px; margin-left: -42px;
    background: rgba(255, 255, 255, .62); box-shadow: 0 1px 2px rgba(85, 18, 27, .12); transform: rotate(-4deg);
  }
  .grado-sec__nota .ic { width: 24px; height: 24px; color: var(--marca-osc); margin: 0; }
}

/* ---------------------------------------------------------------- 5. y en todos los grados */
.todos { background: var(--crema); }
.t-pri .todos h2 { font-size: 28px; margin-top: 0; }
.todos__filas { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.todos__filas li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.todos__filas p { font-size: 16px; line-height: 1.5; color: var(--tinta); padding-top: 9px; }
.circulo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-boton); color: var(--blanco); flex: none; }
.circulo .ic { width: 22px; height: 22px; }
.circulo--marca { background: var(--marca); }
.franja--todos { margin-top: 18px; }
.franja--todos figcaption { margin-top: 6px; }
.franja--todos figcaption b { font-size: 14px; }
.t-pri .todos__sub { margin: 24px 0 12px; font: 800 20px/1.3 var(--fuente); color: var(--titulo); }
/* celebraciones: como en computadora (el ícono arriba y el texto centrado), en dos columnas y la última a lo ancho */
.celebra { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.celebra li {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 7px;
  padding: 12px 10px 11px; border-radius: 16px; background: var(--blanco); border: 1px solid #F0DFC0;
  font: 600 14px/1.3 var(--fuente); color: var(--tinta); text-align: center;
}
.celebra li:last-child { grid-column: 1 / -1; }
.celebra li:nth-child(-n+2) > span:last-child { white-space: nowrap; }
.celebra .circulo { width: 36px; height: 36px; }
.celebra .circulo .ic { width: 19px; height: 19px; }
.todos__enlace { margin-top: 12px; }
.todos__enlace a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--marca-boton); }

@media (min-width: 900px) {
  .t-pri .todos h2 { font-size: 34px; }
  .todos__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  /* de 900 a 1 199 px, las filas en una columna (en dos, cada texto quedaba de 6 a 8 líneas de 2 o 3 palabras) */
  .todos__filas { gap: 18px; margin-top: 24px; }
  .franja--todos { margin-top: 24px; }
  .celebra { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .celebra li { align-content: start; gap: 10px; padding: 18px 12px 17px; }
  .celebra li:last-child { grid-column: auto; }
  .celebra .circulo { width: 44px; height: 44px; }
  .celebra .circulo .ic { width: 22px; height: 22px; }
  .t-pri .todos__sub { margin-top: 44px; }
  .todos__enlace { margin-top: 14px; }
}
@media (min-width: 1200px) {
  .todos__filas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}

/* ---------------------------------------------------------------- 5b. la IA en primaria (Lucero, 23 oct): tres tramos */
.ia-pri { background: var(--fondo); }
.t-pri .ia-pri h2 { font-size: 28px; margin: 8px 0 10px; }
.ia-pri .etiqueta .ic { width: 16px; height: 16px; }
.ia-pri__intro { font-size: 16.5px; line-height: 1.55; color: var(--suave); max-width: 60ch; margin: 0 0 22px; }
.ia-pri__ej { font: 700 15px/1.4 var(--fuente); color: var(--titulo); margin: 0 0 10px; }
.ia-pri__por { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; }
.ia-pri__tramos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ia-pri__tramo { padding: 18px 18px 18px 22px; border-radius: 16px; background: var(--fondo-2) var(--margen-rojo); border: 1px solid var(--borde); box-shadow: var(--sombra-tarjeta); }
.ia-pri__grado { display: inline-block; margin: 0 0 6px; padding: 3px 12px; border-radius: 999px; background: var(--marca-boton); color: var(--blanco); font: 800 14px/1.4 var(--fuente); }
.t-pri .ia-pri__tramo h3 { font: 800 18.5px/1.3 var(--fuente); color: var(--titulo); margin: 4px 0 10px; }
.ia-pri__tramo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ia-pri__tramo ul li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.ia-pri__tramo ul li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--marca-boton); }
.ia-pri__pie { display: grid; gap: 10px; margin-top: 18px; }
.ia-pri__pie p { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--tinta); margin: 0; }
.ia-pri__pie .ic { width: 22px; height: 22px; color: var(--marca-boton); margin-top: 1px; }
.ia-pri__pie b { color: var(--titulo); }
@media (min-width: 900px) {
  .t-pri .ia-pri h2 { font-size: 34px; }
  .ia-pri__tramos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ia-pri__tramo { padding: 22px 22px 22px 26px; }
  .ia-pri__pie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
}

/* ---------------------------------------------------------------- 6. sigue en Heart of Jesus: la banda roja → azul */
.sigue-sec { background: var(--fondo); }
.sigue {
  display: grid; gap: 14px; grid-template-areas: "texto" "camino" "acciones"; padding: 22px 18px 18px;
  border-radius: var(--radio); color: var(--blanco);
  background: linear-gradient(100deg, #C81F2A 0%, #8E1D3A 46%, #2458AC 100%);
  box-shadow: 0 22px 40px -30px rgba(36, 30, 90, .9);
}
.sigue__texto { grid-area: texto; min-width: 0; }
.sigue .etiqueta { color: var(--blanco); }
.t-pri .sigue h2 { color: var(--blanco); margin: 8px 0 10px; }
.sigue p { color: var(--blanco); font-size: 16px; line-height: 1.5; }
.sigue .sigue__chica { margin-top: 8px; font-size: 15px; font-weight: 600; }
.sigue__acciones { grid-area: acciones; display: grid; gap: 10px; align-content: start; min-width: 0; }
.btn-blanco { background: var(--blanco); color: #14336B; }
.btn-blanco:hover { background: #EEF3FB; }
.sigue .btn-blanco { min-height: 48px; }
.sigue__tarjeta { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--blanco); color: var(--tinta); }
.sigue .sigue__tarjeta p { color: var(--titulo); font-weight: 700; }
.sigue__tarjeta .btn { min-height: 48px; padding: 4px 14px; font-size: 15.5px; line-height: 1.25; text-align: center; }
.sigue__inicial { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.sigue :focus-visible { outline-color: var(--blanco); }
.sigue .sigue__tarjeta :focus-visible { outline-color: var(--foco); }

/* la cinta del camino: vertical en el celular (por el borde izquierdo de la tira), horizontal en computadora.
   El tramo de primaria va en 6 partes iguales, una por grado (5 cortes), con el número de cada grado al lado. */
.camino {
  --paso: 16px;                /* alto de cada grado en la cinta vertical */
  grid-area: camino; position: relative; display: grid; padding: 14px 14px 14px 16px; border-radius: 14px;
  background: var(--blanco); color: #3D1413; min-width: 0;
}
.camino__tramo { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 14px; }
.camino__barra { position: relative; grid-row: 1 / span 2; width: 12px; border-radius: 6px; }
.camino__nombre { font: 700 14px/1.3 var(--fuente); padding: 1px 0 6px; }
.camino__tramo--ini .camino__barra { background: var(--acento); min-height: 26px; border-radius: 6px 6px 2px 2px; }
.camino__tramo--pri .camino__barra { background: var(--marca); min-height: calc(24px + 6 * var(--paso)); border-radius: 2px; }
.camino__tramo--pre .camino__barra { background: #2458AC; min-height: 44px; border-radius: 2px 2px 6px 6px; }
.camino__tramo--pre .camino__nombre { color: #14336B; }
.camino__tramo + .camino__tramo { margin-top: 3px; }
/* los 5 cortes entre grados (después de la línea del nombre) y el número de cada grado, al lado de la cinta (fuera de
   la barra, sobre el blanco de la tira) */
.camino__barra i {
  position: absolute; left: -3px; right: -3px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--blanco);
  top: calc(24px + var(--g) * var(--paso));
}
.camino__g {
  position: absolute; left: 22px; top: calc(24px + (var(--g) - .5) * var(--paso)); transform: translateY(-50%);
  font: 600 12px/1 var(--fuente); color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.camino__su {
  position: absolute; left: 52px; top: calc(24px + (var(--g-su, 1) - .5) * var(--paso)); transform: translateY(-50%);
  display: none; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--marca-osc); color: var(--blanco); font: 600 12.5px/1.3 var(--fuente);
  transition: top .3s ease;
}
.camino__su::before {
  content: ""; position: absolute; left: -7px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0;
  border-right: 7px solid var(--marca-osc);
}
.camino__su b { font-weight: 800; }
.camino[data-g] .camino__su { display: inline-flex; }
.camino[data-g] .camino__g { color: var(--titulo); }
.camino__anio {
  position: absolute; left: 22px; top: 6px; display: none; padding: 3px 10px; border-radius: 999px;
  background: #14336B; color: var(--blanco); font: 800 12.5px/1.3 var(--fuente); white-space: nowrap;
}
.camino[data-g] .camino__anio { display: inline-block; }
.camino[data-g] .camino__tramo--pre .camino__nombre { padding-top: 30px; }
.camino[data-g] .camino__tramo--pre .camino__barra { min-height: 64px; }
.camino__bandera { position: absolute; left: -5px; bottom: -21px; width: 22px; height: 22px; color: #14336B; stroke-width: 2; }
.camino__tramo--pre { margin-bottom: 16px; }

@media (min-width: 900px) {
  .sigue {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "texto acciones" "camino camino";
    gap: 30px 56px; padding: 40px 44px 36px;
  }
  .t-pri .sigue h2 { font-size: 38px; }
  .sigue p { font-size: 17px; }
  /* el botón, del mismo ancho que la tarjeta de 6.° */
  .sigue__acciones { align-self: center; gap: 14px; }
  .sigue__acciones > .btn-blanco { justify-self: stretch; }
  .sigue .btn-blanco, .sigue__tarjeta .btn { min-height: 52px; }
  .camino { grid-template-columns: 1fr 2.2fr 1.6fr; padding: 54px 34px 18px; gap: 0 4px; }
  .camino__tramo { grid-template-columns: 1fr; grid-template-rows: 14px auto; row-gap: 30px; }
  .camino__tramo + .camino__tramo { margin-top: 0; }
  .camino__barra { grid-row: 1; width: auto; height: 14px; min-height: 0 !important; }
  .camino__tramo--ini .camino__barra { border-radius: 7px 2px 2px 7px; }
  .camino__tramo--pre .camino__barra { border-radius: 2px 7px 7px 2px; }
  .camino__tramo--pre { margin-bottom: 0; }
  .camino__nombre { grid-row: 2; padding: 0; font-size: 14.5px; }
  .camino__barra i { top: -3px; bottom: -3px; left: calc(var(--g) / 6 * 100%); right: auto; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .camino__g { top: 22px; left: calc((var(--g) - .5) / 6 * 100%); transform: translateX(-50%); }
  .camino__su {
    left: calc((var(--g-su, 1) - .5) / 6 * 100%); top: -12px; transform: translate(-50%, -100%);
    transition: left .3s ease;
  }
  .camino__su::before { left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -5px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid var(--marca-osc); }
  .camino__anio { left: 0; top: -12px; transform: translateY(-100%); }
  .camino[data-g] .camino__tramo--pre .camino__nombre { padding-top: 0; }
  .camino__bandera { left: auto; right: -14px; bottom: auto; top: -22px; width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------- 7. la visita */
.cita-sec { position: relative; }
.ancla { position: absolute; top: 0; left: 0; }
.t-pri .cita { gap: 22px; }
.t-pri .cita__lado { gap: 14px; }
.t-pri .cita__lado .seccion__intro { margin-top: 2px; }
.t-pri .cita__lado .btn-grande { justify-self: stretch; }
/* los 3 pasos como una línea de tiempo: el número en su círculo y una línea que los une */
.t-pri .cita .pasos { gap: 0; margin-top: 4px; }
.t-pri .cita .pasos li { padding: 0 0 14px 52px; border: 0; border-radius: 0; background: none; }
.t-pri .cita .pasos li:last-child { padding-bottom: 0; }
.t-pri .cita .pasos li::before { left: 0; top: 0; width: 36px; height: 36px; font-size: 16px; background: var(--marca-boton); }
.t-pri .cita .pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px;
  background: rgba(200, 31, 42, .28);
}
.t-pri .cita .pasos h3 { font-size: 17px; padding-top: 6px; }
.t-pri .cita .pasos p { font-size: 15.5px; line-height: 1.5; margin-top: 2px; }
.t-pri .cita .lugar { margin-top: 0; gap: 2px 18px; }
.t-pri .cita .lugar > span { line-height: 1.5; }
.t-pri .cita .lugar > span > .ic { margin-top: 2px; flex: none; }
.cita__dura { font-size: 15.5px; color: var(--suave); }
.cita__tel { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--tinta); }
.cita__tel .ic { width: 22px; height: 22px; color: var(--marca-boton); }
.cita__form { min-width: 0; }
.t-pri .plegable__boton { color: var(--marca-osc); border-color: var(--marca-osc); }
.t-pri .plegable__boton .ic { width: 20px; height: 20px; }
.cita__datos { min-width: 0; outline: none; scroll-margin-top: 84px; }
@media (min-width: 900px) {
  .t-pri .cita { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
  .t-pri .cita__lado { gap: 20px; }
  .t-pri .cita__lado .btn-grande { justify-self: start; }
  .t-pri .cita .pasos { grid-template-columns: 1fr; margin-top: 8px; }
  .t-pri .cita .pasos li { padding-bottom: 22px; }
}

/* ---------------------------------------------------------------- 8. preguntas frecuentes y cierre */
.preguntas-sec { background: var(--fondo); }
.t-pri .preguntas-sec__caja { max-width: calc(760px + 32px); }
/* en el celular, el título a la izquierda como en las demás secciones; centrado desde 900 px */
.t-pri .preguntas-sec .seccion__cabeza--centro { text-align: left; }
.t-pri .faq { margin-inline: auto; gap: 8px; }
.t-pri .faq details { border-color: var(--borde); }
.t-pri .faq details[open] { box-shadow: var(--sombra-tarjeta); }
.t-pri .faq details > div { font-size: 16px; line-height: 1.55; }
.faq__wa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--marca-boton);
  text-decoration: underline; text-underline-offset: 3px;
}
.faq__wa .ic { width: 20px; height: 20px; color: #128C45; }
.faq__wa > span { text-wrap: balance; }
.faq__enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* el cierre: una tarjeta blanca de una columna; el hilo rojo entra de lado y termina en el corazón junto al botón */
.t-pri .cierre {
  gap: 18px; margin-top: 24px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde);
  box-shadow: 0 22px 44px -32px rgba(85, 18, 27, .8); padding: 20px 20px 22px;
}
.t-pri .cierre h2 { color: var(--titulo); font-size: clamp(24px, 6.2vw, 30px); margin-top: 0; }
.t-pri .cierre p { color: var(--suave); font-size: 16px; }
.t-pri .cierre__acciones { gap: 12px; }
.t-pri .cierre__compartir { color: var(--marca-boton); min-height: 44px; padding-block: 2px; }
.t-pri .cierre__compartir .ic { color: var(--marca-boton); }
.t-pri .cierre :focus-visible { outline-color: var(--foco); }
.cierre__fila { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.cierre__fila .btn { min-width: 0; padding-inline: 22px; }
.cierre__corazon { width: 24px; height: 24px; flex: none; color: var(--marca); }
@media (max-width: 380px) {
  /* a 360 px, «Escribir al 997 980 099» en una línea */
  .t-pri .cierre { padding-inline: 16px; }
  .cierre__fila { gap: 8px; }
  .cierre__fila .btn { padding-inline: 16px; font-size: 16px; white-space: nowrap; }
}
@media (max-width: 340px) {
  .cierre__fila .btn { padding-inline: 12px; gap: 8px; font-size: 15px; }
}
@media (min-width: 900px) {
  .t-pri .preguntas-sec__caja { max-width: calc(760px + 64px); }
  .t-pri .preguntas-sec .seccion__cabeza--centro { text-align: center; }
  .t-pri .faq { gap: 10px; }
  .t-pri .cierre { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding: 34px 38px; margin-top: 36px; }
  .t-pri .cierre p { max-width: 52ch; }
  .t-pri .cierre__acciones { justify-items: start; text-align: left; }
}

/* el hilo rojo de 2 px, como un hilo cosido (lo dibuja primaria.js; sin JavaScript no se ve y queda el corazón) */
.hilo-raiz { position: relative; }
.hilo { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.hilo.hilo--listo { display: block; }
.hilo__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.hilo__linea {
  fill: none; stroke: var(--marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8;
  stroke-dasharray: 7 5;
}

/* ---------------------------------------------------------------- pie, barra fija y botón flotante */
.pie__marca img { height: 60px; width: auto; }
.t-pri .pie__grid { gap: 22px; }
.t-pri .pie ul { gap: 2px; }
.t-pri .pie ul a { min-height: 44px; }
@media (min-width: 900px) { .t-pri .pie__grid { gap: 28px; } .pie__marca img { height: 64px; } }
.t-pri .pie { color: var(--sobre-osc-suave); }
.t-pri .barra-fija {
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97); border-top-color: var(--borde);
}
.barra__grado { color: var(--marca-osc); border-color: var(--marca-osc); }
@media (max-width: 380px) {
  /* «Preguntar por 6.°» en una línea */
  .t-pri .barra-fija .btn { white-space: nowrap; padding-inline: 10px; gap: 6px; }
}
@media (max-width: 340px) {
  .t-pri .barra-fija { gap: 8px; padding-inline: 10px; }
  .t-pri .barra-fija .btn { padding-inline: 8px; font-size: 14.5px; }
}
/* los 88 px libres para la barra van dentro del pie (granate), no como una franja blanca debajo */
body.t-pri.con-barra { padding-bottom: 0; }
body.t-pri .pie { padding-bottom: calc(36px + 88px + env(safe-area-inset-bottom, 0px)); }
/* con el cierre o el pie a la vista (body.en-final, primaria.js), la barra y el flotante se van */
body.t-pri.en-final .barra-fija { transform: translateY(110%); }
.wa-flotante {
  display: none; position: fixed; z-index: 35; width: 62px; height: 62px; border-radius: 50%; place-content: center;
  right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--wa); color: var(--sobre-wa); box-shadow: 0 12px 26px -10px rgba(10, 120, 60, .8);
  transition: transform .2s ease, opacity .2s ease, visibility .2s;
}
.wa-flotante .ic { width: 32px; height: 32px; }
.wa-flotante:hover { background: var(--wa-hover); }
.wa-flotante--escondida, body.t-pri.en-final .wa-flotante { transform: translateY(24px) scale(.9); opacity: 0; visibility: hidden; }
@media (min-width: 900px) {
  body.t-pri .pie { padding-bottom: 36px; }
  .wa-flotante { display: grid; }
}