@charset "UTF-8";
/* ============================================================================
   CONECTA CON PROPÓSITO · componentes del frente · v1.1
   ----------------------------------------------------------------------------
   Hereda entero el sistema «Piedra y noche profunda» de Conecta Comunidad:
   mismos colores, mismas tipografías (Archivo y Literata), misma escala, mismas
   bandas. Aquí vive solo lo que este frente necesita y el sitio madre no tiene.

   Dos colores nuevos, y no son decorativos: son los mismos con que se rotulan
   los vídeos del canal, para que una tarjeta del carrusel se reconozca como lo
   que es.
     --cian  #4AD2FF  segunda línea del rótulo en pantalla
     --oro   #FFD24A  la pregunta dorada

   Regla de la casa que se respeta aquí: el contenido se ve sin JavaScript. El
   carrusel es scroll nativo, los peldaños nacen abiertos y las barras del
   gráfico llevan su valor escrito. El script solo añade comodidad.
   ========================================================================== */

:root{
  --cian:#4AD2FF;
  --oro:#FFD24A;
  --clip-alto: clamp(380px, 52vw, 460px);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:40; background:rgba(10,26,47,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--filete-oscuro);
}
.cabecera__in{ display:flex; align-items:center; gap:var(--e-md); min-height:var(--alto-nav); padding-block:.55rem }
.cabecera__marca{ display:flex; flex-direction:column; gap:.08rem; text-decoration:none; min-width:0 }
.cabecera__nombre{ font-family:var(--sans); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:var(--papel); line-height:1.1 }
.cabecera__endoso{ font-family:var(--sans); font-size:.72rem; color:var(--suave) }
.cabecera__nav{ margin-inline:auto }
.cabecera__lista{ display:flex; gap:var(--e-md); list-style:none; margin:0; padding:0 }
.cabecera__lista a{
  font-family:var(--sans); font-size:.86rem; font-weight:500; text-decoration:none;
  color:rgba(244,242,238,.8); padding-block:.35rem; border-bottom:1px solid transparent;
}
.cabecera__lista a:hover{ color:var(--papel) }
.cabecera__lista a[aria-current="true"]{ color:var(--piedra); border-bottom-color:var(--piedra) }
.cabecera__cta{ flex:0 0 auto }
.cta-corta{ display:none }
@media (max-width:1040px){ .cabecera__nav{ display:none } .cabecera__cta{ margin-left:auto } }
@media (max-width:560px){
  .cabecera__nombre{ font-size:.95rem; white-space:nowrap }
  .cabecera__endoso{ display:none }
  .cabecera__in{ gap:var(--e-sm) }
  .cabecera__cta{ padding-inline:.9rem; font-size:.82rem }
}
@media (max-width:420px){
  .cta-larga{ display:none } .cta-corta{ display:inline }
  .cabecera__nombre{ font-size:.9rem }
}

/* ── Portada ──────────────────────────────────────────────────────────────── */
.portada{ position:relative; background:var(--noche); padding-block:clamp(3.5rem,9vw,7rem); overflow:hidden }
/* el sistema declara picture{display:contents}: sin recuperar la caja, el
   posicionado se ignora y la foto empuja el texto en lugar de quedar detrás */
.portada__foto{ display:block; position:absolute; inset:0; z-index:0 }
.portada__foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 40%; opacity:.26;
}
.portada::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(104deg, var(--noche) 0 38%, rgba(10,26,47,.82) 62%, rgba(10,26,47,.55) 100%);
}
.portada__in{ position:relative; z-index:2; display:flex; flex-direction:column; gap:var(--e-md); align-items:flex-start }
.portada__t{
  font-family:var(--sans); font-weight:600; letter-spacing:-.025em; line-height:1.03;
  font-size:clamp(2.1rem,1.35rem + 3.1vw,4.1rem); color:var(--papel); margin:0; text-wrap:balance;
}
.portada__lede{ max-width:46ch }
.portada .acciones{ margin-top:var(--e-2xs) }

.marcador{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:var(--e-md) var(--e-lg); margin:var(--e-lg) 0 0; padding-top:var(--e-md);
  border-top:1px solid var(--filete-piedra); width:100%;
}
.marcador div{ min-width:0 }
.marcador dt{
  font-family:var(--sans); font-weight:600; font-size:clamp(1.35rem,1.1rem + .7vw,1.7rem);
  letter-spacing:-.02em; color:var(--piedra); font-variant-numeric:tabular-nums; line-height:1.1;
}
.marcador dd{ margin:.2rem 0 0; font-family:var(--sans); font-size:.85rem; line-height:1.35; color:var(--suave) }

/* ── Encabezado de sección ────────────────────────────────────────────────── */
.enc{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--e-lg) var(--e-xl); align-items:end; margin-bottom:var(--e-xl);
}
.enc__nota{
  font-family:var(--sans); font-size:.95rem; line-height:1.55; color:var(--t3);
  max-width:40ch; margin:0; padding-bottom:.3rem;
}
.banda .titular{ margin:.35rem 0 0 }
.medida{ max-width:var(--medida) }
.medida .cuerpo + .cuerpo,.canal__texto .cuerpo + .cuerpo{ margin-top:var(--e-sm) }
@media (max-width:860px){ .enc{ grid-template-columns:1fr; align-items:start; gap:var(--e-sm); margin-bottom:var(--e-lg) } }

/* ── Carrusel de escenas ──────────────────────────────────────────────────── */
.carrusel{ margin-top:var(--e-lg) }
.carrusel__via{
  display:flex; gap:var(--e-sm); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.4rem var(--canal) var(--e-sm);
  scrollbar-width:thin; scrollbar-color:var(--filete-firme) transparent;
}
.carrusel__via:focus-visible{ outline:2px solid var(--foco); outline-offset:-4px }
.carrusel__via::-webkit-scrollbar{ height:6px }
.carrusel__via::-webkit-scrollbar-thumb{ background:var(--filete-firme); border-radius:3px }

.clip{
  flex:0 0 auto; width:clamp(232px,26vw,268px); height:var(--clip-alto);
  scroll-snap-align:start; background:var(--noche); color:var(--papel);
  padding:var(--e-md) var(--e-sm) var(--e-sm); display:flex; flex-direction:column;
  border:1px solid rgba(216,203,179,.16);
  background-image:linear-gradient(170deg, #11253F 0%, #0A1A2F 55%, #06111F 100%);
  transition:transform .35s var(--curva), border-color .35s var(--curva);
}
.clip:hover{ transform:translateY(-4px); border-color:var(--filete-piedra) }
@media (prefers-reduced-motion:reduce){ .clip{ transition:none } .clip:hover{ transform:none } }
.clip__sello{
  font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,242,238,.55); margin:0 0 auto; text-align:center;
}
.clip__t1{
  font-family:var(--sans); font-weight:600; font-size:1.12rem; line-height:1.18;
  letter-spacing:-.015em; color:#fff; margin:0; text-align:center; text-wrap:balance;
}
.clip__t2{
  font-family:var(--sans); font-weight:600; font-size:1.02rem; line-height:1.2;
  letter-spacing:-.01em; color:var(--cian); margin:.3rem 0 0; text-align:center; text-wrap:balance;
}
.clip__preg{
  font-family:var(--sans); font-weight:600; font-size:.88rem; color:var(--oro);
  margin:var(--e-md) 0 auto; text-align:center; line-height:1.3;
}
.clip__pie{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  border-top:1px solid rgba(216,203,179,.18); padding-top:.6rem; margin-top:var(--e-sm);
  font-family:var(--sans); font-size:.74rem; color:rgba(244,242,238,.72);
}
.clip__dur{ font-variant-numeric:tabular-nums; color:var(--suave) }

.carrusel__mandos{ display:flex; align-items:center; gap:var(--e-md); margin-top:var(--e-xs) }
.carrusel__botones{ display:flex; gap:.5rem }
.rueda{
  width:2.6rem; height:2.6rem; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--t1); border:1px solid var(--filete-firme);
  transition:background .25s var(--curva), color .25s var(--curva);
}
.rueda:hover{ background:var(--tinta); color:var(--papel) }
.rueda svg{ width:1.15rem; height:1.15rem }
.rueda[disabled]{ opacity:.3; cursor:default }
.rueda[disabled]:hover{ background:transparent; color:var(--t1) }
.carrusel__pista{ font-family:var(--sans); font-size:.82rem; color:var(--t3); margin:0 }

/* ── La escalera ──────────────────────────────────────────────────────────── */
.escalera{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete) }
.peldano{ border-bottom:1px solid var(--filete) }
.peldano__cab{
  width:100%; display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto 1.4rem;
  align-items:center; gap:var(--e-sm); padding:var(--e-md) 0; cursor:pointer;
  background:transparent; border:0; text-align:left; color:inherit; font:inherit;
}
.peldano__n{
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.08em;
  color:var(--petroleo); font-variant-numeric:tabular-nums;
}
.peldano__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.05rem,.95rem + .45vw,1.35rem); letter-spacing:-.01em; color:var(--tinta) }
.peldano__q{ font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
.peldano__f{ width:1.4rem; height:1.4rem; color:var(--mudo); transition:transform .3s var(--curva) }
.peldano[data-abierto] .peldano__f{ transform:rotate(180deg) }
.peldano__cuerpo{ padding:0 0 var(--e-md) 3.2rem; max-width:64ch }
.peldano__cuerpo p{ margin:0 0 var(--e-xs) }
.peldano__cuerpo p:last-child{ margin-bottom:0 }
.peldano__cab:hover .peldano__t{ color:var(--petroleo) }
@media (max-width:720px){
  .peldano__cab{ grid-template-columns:2.4rem minmax(0,1fr) 1.2rem; row-gap:.2rem }
  .peldano__q{ grid-column:2 / 4; font-size:.82rem }
  .peldano__cuerpo{ padding-left:2.4rem }
}

/* ── Alcance y gráfico ────────────────────────────────────────────────────── */
.alcance{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-xl); align-items:start }
.alcance__texto .cuerpo{ max-width:48ch }
.grafico{ margin:0; border:1px solid var(--filete-piedra); padding:var(--e-lg) }
.grafico__t{
  font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--piedra); margin-bottom:var(--e-md);
}
.barras{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem }
.barras li{
  display:grid; grid-template-columns:5.6rem minmax(0,1fr) 3.4rem; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.86rem;
}
.barras__k{ color:var(--suave-claro) }
.barras__b{ height:.55rem; background:rgba(216,203,179,.14); position:relative; display:block }
.barras__b i{
  position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 100% / 22); background:var(--piedra);
  transform-origin:left center; transform:scaleX(var(--e,1));
}
[data-grafico].anima .barras__b i{ animation:crece .9s var(--curva) both; animation-delay:calc(var(--i,0) * 70ms) }
@keyframes crece{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){ [data-grafico].anima .barras__b i{ animation:none } }
.barras__v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--papel) }
.grafico__pie{ font-family:var(--sans); font-size:.76rem; color:var(--suave); margin:var(--e-md) 0 0 }
@media (max-width:900px){ .alcance{ grid-template-columns:1fr; gap:var(--e-lg) } }

/* ── El canal ─────────────────────────────────────────────────────────────── */
.canal{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--e-xl); align-items:start }
.canal__texto .cuerpo{ max-width:52ch }
.lista-dia{ list-style:none; margin:var(--e-md) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--e-xs) }
.lista-dia li{ position:relative; padding-left:1.35rem; font-family:var(--sans); font-size:1rem; line-height:1.5; color:var(--t2); max-width:52ch }
.lista-dia li::before{ content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--piedra) }
.lista-dia strong{ color:var(--papel); font-weight:600 }
.canal__accion{
  background:rgba(216,203,179,.08); border:1px solid var(--filete-piedra);
  padding:var(--e-lg); display:flex; flex-direction:column; gap:var(--e-2xs); align-items:flex-start;
}
.canal__k{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--piedra); margin:0 0 .3rem;
}
.canal__sep{ border:0; border-top:1px solid var(--filete-piedra); width:100%; margin:var(--e-md) 0 var(--e-sm) }
.boton--grande{ font-size:1.02rem; padding:.95rem 1.6rem }
@media (max-width:900px){ .canal{ grid-template-columns:1fr; gap:var(--e-lg) } .canal__accion{ width:100% } }

/* ── Conferencias y formulario ────────────────────────────────────────────── */
.conf{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:var(--e-xl); align-items:start }
.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-sm) var(--e-md) }
.campo{ display:flex; flex-direction:column; gap:.35rem; grid-column:1 / -1; min-width:0 }
.campo--mitad{ grid-column:span 1 }
.campo label,.consen span{ font-family:var(--sans); font-size:.86rem; font-weight:500; color:var(--tinta-2) }
.campo input,.campo select,.campo textarea{
  font-family:var(--sans); font-size:1rem; color:var(--tinta); background:var(--blanco);
  border:1px solid var(--filete-firme); padding:.7rem .8rem; width:100%; border-radius:0;
}
.campo textarea{ resize:vertical; min-height:6.5rem; font-family:var(--lee); line-height:1.5 }
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--petroleo); outline-offset:1px; border-color:var(--petroleo);
}
.campo__ayuda{ font-family:var(--sans); font-size:.78rem; color:var(--mudo); margin:0 }
.campo.mal input,.campo.mal select,.campo.mal textarea{ border-color:#9A3B2B }
.consen{ grid-column:1 / -1; display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; align-items:start }
.consen span{ font-size:.8rem; line-height:1.45; color:var(--mudo) }
.consen input{ margin-top:.25rem; accent-color:var(--petroleo); width:1.1rem; height:1.1rem }
.form__pie{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--e-md); flex-wrap:wrap }
.form__estado{ font-family:var(--sans); font-size:.86rem; margin:0; color:var(--petroleo) }
.form__estado[data-mal]{ color:#9A3B2B }
@media (max-width:620px){ .form{ grid-template-columns:1fr } .campo--mitad{ grid-column:1 / -1 } }

.ficha{ background:var(--blanco); border:1px solid var(--filete); padding:var(--e-lg); display:flex; flex-direction:column; gap:.15rem }
.ficha__k{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--mudo); margin:var(--e-sm) 0 0 }
.ficha__k:first-child{ margin-top:0 }
.ficha__v{ font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--tinta); margin:0 }
.ficha__foto{ margin:var(--e-md) 0 0 }
.ficha__foto img{ width:100%; height:auto; display:block }
@media (max-width:900px){ .conf{ grid-template-columns:1fr; gap:var(--e-lg) } }

/* ── Para colegios ────────────────────────────────────────────────────────── */
.colegios{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--e-xl); align-items:center }
.colegios__foto{ margin:0 }
.colegios__foto img{ width:100%; height:100%; max-height:30rem; object-fit:cover; display:block }
.colegios__texto .cuerpo{ max-width:46ch }
.marcas{ list-style:none; margin:var(--e-md) 0; padding:0; display:flex; flex-direction:column; gap:.1rem; border-top:1px solid var(--filete) }
.marcas li{ display:flex; justify-content:space-between; gap:var(--e-sm); padding:.7rem 0; border-bottom:1px solid var(--filete); font-family:var(--sans); flex-wrap:wrap }
.marcas strong{ font-size:.96rem; font-weight:600; color:var(--tinta) }
.marcas span{ font-size:.88rem; color:var(--mudo) }
@media (max-width:900px){ .colegios{ grid-template-columns:1fr; gap:var(--e-lg) } .colegios__foto{ order:2 } }

/* ── Gobiérnate ───────────────────────────────────────────────────────────── */
.gob{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--e-xl); align-items:start }
.gob__texto .cuerpo{ max-width:50ch }
.gob__piezas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--e-md); margin:var(--e-lg) 0 }
.gob__piezas article{ border-top:1px solid var(--filete-piedra); padding-top:var(--e-sm); min-width:0 }
.gob__k{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--piedra); margin:0 }
.gob__v{ font-family:var(--sans); font-size:1.02rem; font-weight:600; color:var(--papel); margin:.25rem 0 .35rem }
.gob__foto{ margin:0 }
.gob__foto img{ width:100%; height:auto; display:block }
.gob__foto figcaption{ font-family:var(--sans); font-size:.76rem; color:var(--suave); margin-top:.5rem }
@media (max-width:900px){ .gob{ grid-template-columns:1fr; gap:var(--e-lg) } }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie-p{ background:var(--noche-hondo); color:var(--suave); padding-block:var(--e-xl) var(--e-lg) }
.pie-p__in{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr); gap:var(--e-xl); align-items:start }
.pie-p__marca img{ width:160px; height:auto; display:block; margin-bottom:var(--e-sm) }
.pie-p__marca p{ font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--suave); max-width:36ch; margin:0 }
.pie-p__nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem }
.pie-p__nav a,.pie-p__datos a{ color:var(--piedra); text-decoration:none }
.pie-p__nav a:hover,.pie-p__datos a:hover{ text-decoration:underline }
.pie-p__nav li,.pie-p__datos p{ font-family:var(--sans); font-size:.88rem; line-height:1.6; margin:0 }
.pie-p__base{ margin-top:var(--e-lg); padding-top:var(--e-sm); border-top:1px solid var(--filete-oscuro) }
.pie-p__base .nota{ color:var(--suave); max-width:76ch; margin:0 }
@media (max-width:820px){ .pie-p__in{ grid-template-columns:1fr 1fr; gap:var(--e-lg) } .pie-p__marca{ grid-column:1 / -1 } }
@media (max-width:520px){ .pie-p__in{ grid-template-columns:1fr } }

/* ── El territorio: galería en vía ────────────────────────────────────────── */
.galeria{ margin-top:var(--e-lg) }
.galeria__via{
  display:flex; gap:var(--e-sm); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.4rem var(--canal) var(--e-sm);
  scrollbar-width:thin; scrollbar-color:var(--filete-firme) transparent;
}
.galeria__via:focus-visible{ outline:2px solid var(--foco); outline-offset:-4px }
.galeria__via::-webkit-scrollbar{ height:6px }
.galeria__via::-webkit-scrollbar-thumb{ background:var(--filete-firme); border-radius:3px }
.placa{
  flex:0 0 auto; width:clamp(260px,46vw,440px); scroll-snap-align:start; margin:0;
  background:var(--blanco); border:1px solid var(--filete);
}
.placa img{ width:100%; aspect-ratio:3 / 2; object-fit:cover; display:block }
.placa figcaption{
  display:flex; flex-direction:column; gap:.1rem; padding:.8rem 1rem 1rem;
  font-family:var(--sans);
}
.placa figcaption strong{ font-size:.95rem; font-weight:600; color:var(--tinta) }
.placa figcaption span{ font-size:.82rem; color:var(--mudo) }

/* ── Créditos del pie ─────────────────────────────────────────────────────── */
.pie-p__det{ margin-bottom:var(--e-sm) }
.pie-p__det summary{
  font-family:var(--sans); font-size:.82rem; color:var(--piedra); cursor:pointer;
  list-style:none; padding:.35rem 0;
}
.pie-p__det summary::-webkit-details-marker{ display:none }
.pie-p__det summary::before{ content:"+ "; font-weight:600 }
.pie-p__det[open] summary::before{ content:"– " }
.pie-p__creditos{
  list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--sans); font-size:.78rem; line-height:1.5; color:var(--suave); max-width:76ch;
}

/* ── Menú en móvil ────────────────────────────────────────────────────────
   Hasta ahora el teléfono se quedaba sin navegación: solo veía la llamada al
   canal. Aquí entra el botón y el panel, con el mismo lenguaje de la casa. */
.hamburguesa{
  display:none; width:2.8rem; height:2.8rem; flex:0 0 auto; cursor:pointer;
  background:transparent; border:1px solid var(--filete-oscuro); padding:0;
  place-items:center; gap:4px; flex-direction:column;
}
.hamburguesa span{
  display:block; width:1.1rem; height:1.5px; background:var(--papel);
  transition:transform .3s var(--curva), opacity .2s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }
.menu-movil{ display:none; background:var(--noche-2); border-top:1px solid var(--filete-oscuro) }
.menu-movil ul{ list-style:none; margin:0; padding:var(--e-xs) var(--canal) var(--e-md) }
.menu-movil li{ border-bottom:1px solid var(--filete-oscuro) }
.menu-movil li:last-child{ border-bottom:0 }
.menu-movil a{
  display:block; padding:.85rem 0; font-family:var(--sans); font-size:1rem; font-weight:500;
  color:var(--papel); text-decoration:none;
}
.menu-movil a:hover{ color:var(--piedra) }
@media (max-width:1040px){
  .hamburguesa{ display:flex }
  .menu-movil[data-abierto]{ display:block }
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--filete) }
.faq .peldano__cab{
  grid-template-columns:minmax(0,1fr) 1.4rem; list-style:none; align-items:center;
}
.faq .peldano__cab::-webkit-details-marker{ display:none }
.faq .peldano__t{ font-size:clamp(1rem,.94rem + .3vw,1.18rem) }
.faq .peldano__cuerpo{ padding-left:0; max-width:68ch }
.faq details[open] .peldano__f{ transform:rotate(180deg) }

/* ── Detalles de oficio ───────────────────────────────────────────────────── */
.placa img{ transition:transform .6s var(--curva) }
.placa{ overflow:hidden }
.placa:hover img{ transform:scale(1.035) }
@media (prefers-reduced-motion:reduce){ .placa img,.placa:hover img{ transition:none; transform:none } }
.marcador dt{ transition:none }

/* ── De dónde vienes: el canal ────────────────────────────────────────────── */
.tk{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--e-xl); align-items:center }
.tk__texto .cuerpo{ max-width:46ch }
.tk__datos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-md);
  margin:0; padding:var(--e-lg); border:1px solid var(--filete-piedra);
}
.tk__datos div{ min-width:0 }
.tk__datos dt{
  font-family:var(--sans); font-weight:600; font-size:1.1rem; color:var(--piedra);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.tk__datos dd{ margin:.15rem 0 0; font-family:var(--sans); font-size:.82rem; color:var(--suave) }
@media (max-width:900px){ .tk{ grid-template-columns:1fr; gap:var(--e-lg) } }

/* la galería pasa a vertical: el formato en que la gente ve estos clips */
.placa{ width:clamp(190px,23vw,250px) }
.placa img{ aspect-ratio:9 / 16 }