/* ==========================================================================
   agenciacolores.cl · styles.css · design system «Muestrario» v1.0.1
   Se carga DESPUÉS de tokens.css (copia del design system que hace build.py).
   Aquí solo va la composición de la web: grilla, secciones y componentes de página.
   Colores, fuentes, tamaños, radios y curvas salen SIEMPRE de var(--…) de tokens.css.
   Pesos: Archivo 900 + 700 y Atkinson Hyperlegible Next 400 + 600 (02 §1).
   ========================================================================== */

/* ---------- Fuentes alojadas en el servidor (OFL; las genera build.py --media) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fuentes/archivo-latin.woff2") format("woff2");
  font-weight: 700 900; font-stretch: 62.5% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fuentes/atkinson-next-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; overflow-x: clip; }
body { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; -webkit-user-drag: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: var(--peso-texto-semibold); }
a { color: inherit; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--espacio-2); top: -100px; z-index: 100; }
.saltar:focus { top: var(--espacio-2); background: var(--col-fondo-inverso); color: var(--col-texto-inverso); padding: var(--espacio-1) var(--espacio-2); }
.fondo-inverso :focus-visible { outline-color: var(--col-texto-inverso); }

/* Espacio entre palabras en Archivo condensado (critica_plantillas.md §2.1): separa palabras, no letras */
.titular, .cifra, .ficha__precio, .ficha__nombre { word-spacing: 0.06em; }
.titular .dato, .titular .precio { font: inherit; letter-spacing: inherit; }
.subtitulo, .ficha__item { text-wrap: balance; }
.texto { text-wrap: pretty; }

/* ---------- Contenedor y grilla (04 §0: 1312 px, 12 columnas, margen fluido) ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--grilla-web-contenido-max) + 2 * var(--grilla-web-margen));
  margin-inline: auto;
  padding-inline: var(--grilla-web-margen);
}
.grilla-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-4); }

/* ---------- Botones (03 §3) ---------- */
.boton { justify-content: center; text-align: center; cursor: pointer; }
.boton:focus-visible, .boton-marco:focus-visible { outline-offset: 3px; }
.boton--grande { min-height: 64px; padding: 0 var(--espacio-4); font-size: 1.25rem; }
.boton-marco {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 0 var(--espacio-3);
  font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold); font-size: 1.125rem; line-height: 1.2;
  background: var(--col-fondo); color: var(--col-texto); border: 2px solid var(--col-linea); border-radius: var(--radio-0);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--duracion-rapida) var(--curva-estandar), color var(--duracion-rapida) var(--curva-estandar);
}
.boton-marco:hover { background: var(--col-fondo-inverso); color: var(--col-texto-inverso); }
.boton-marco:disabled { cursor: default; color: var(--col-texto-suave); border-color: var(--col-texto-suave); background: var(--col-fondo); }
.fondo-inverso .boton { background: var(--col-fondo); color: var(--col-texto); border-color: var(--col-fondo); }
.fondo-inverso .boton:hover { background: var(--col-fondo-inverso); color: var(--col-texto-inverso); border-color: var(--col-linea-inversa); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-4); }
.acciones .enlace { font-weight: var(--peso-texto-semibold); font-size: 1.125rem; }
.enlace:hover { text-decoration-thickness: 3px; }

/* ---------- Encabezado ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--col-fondo); border-bottom: 2px solid var(--col-linea); }
.cabecera__fila { display: flex; align-items: center; gap: var(--espacio-4); min-height: 88px; }
.marca { display: block; flex: none; }
.marca img { height: 46px; width: auto; }   /* 234 px de ancho: sobre los 220 px que pide logo/LEEME.md */
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--espacio-4); }
.nav__lista { display: flex; gap: 20px; list-style: none; }
.nav__lista a {
  display: block; padding: var(--espacio-1) 0;
  font-weight: var(--peso-texto-semibold); font-size: 1.125rem; text-decoration: none; white-space: nowrap;
}
.nav__lista a:hover, .nav__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-boton { display: none; margin-left: auto; }
@media (max-width: 1279px) {
  .nav-boton { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--espacio-3);
    padding: var(--espacio-2) var(--grilla-web-margen) var(--espacio-4);
    background: var(--col-fondo); border-bottom: 2px solid var(--col-linea);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav.esta-abierto { display: flex; }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__lista li { border-bottom: 2px solid var(--col-linea); }
  .nav__lista a { padding: var(--espacio-2) 0; font-size: 1.375rem; }
  .nav__accion { width: 100%; }
}
@media (max-width: 639px) {
  .cabecera__fila { min-height: 64px; gap: var(--espacio-2); }
  .marca img { height: 28px; }
  html { scroll-padding-top: 80px; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--espacio-12); }
.seccion--filete { border-top: 2px solid var(--col-linea); }
.seccion--ajustada { padding-block: var(--espacio-8); }
.seccion__cabeza { display: grid; gap: var(--espacio-3); max-width: 980px; margin-bottom: var(--espacio-6); }
.seccion__cabeza .texto { max-width: 68ch; }
.seccion__pie { margin-top: var(--espacio-5); }
@media (max-width: 639px) {
  .seccion { padding-block: var(--espacio-8); }
  .seccion__cabeza { margin-bottom: var(--espacio-4); }
}

/* ---------- Hero (04 §8) ---------- */
.hero { padding-block: var(--espacio-10) var(--espacio-12); }
.hero__grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-4); row-gap: var(--espacio-6); align-items: start; }
.hero__titular { grid-column: 1 / span 8; font-size: var(--t-titular-l); }
.hero__texto { grid-column: 9 / span 4; display: grid; gap: var(--espacio-4); align-content: start; padding-top: var(--espacio-1); }
.hero__medio { grid-column: 1 / span 8; position: relative; }
/* La ficha se superpone 56 px (un quinto de su ancho, 03 §1.5) al borde derecho del video, 48 px sobre su base */
.hero__ficha { position: absolute; left: calc(100% - 56px); bottom: calc(48px + 2.25rem); z-index: 2; }
/* Hero con video vertical (maestra TPL_WEB_hero_1440): video en las columnas 1–4, texto en las 7–12 */
.hero--vertical .hero__grilla { align-items: start; grid-template-rows: auto 1fr; }
.hero--vertical .hero__medio { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.hero--vertical .hero__titular { grid-column: 7 / span 6; grid-row: 1; padding-top: var(--espacio-6); }
.hero--vertical .hero__texto { grid-column: 7 / span 6; grid-row: 2; align-content: start; }
.hero--vertical .hero__ficha { bottom: calc(72px + 2.25rem); }
/* Hero sin video */
.hero--simple .hero__titular { grid-column: 1 / span 9; }
.hero--simple .hero__texto { grid-column: 1 / span 7; align-content: start; }
.hero--simple .hero__ficha { position: static; grid-column: 10 / span 3; grid-row: 1 / span 2; justify-self: end; align-self: end; }
.hero--simple .hero__grilla { align-items: start; }
/* Prueba social en el hero (fondos): la cifra en Archivo 900, la frase en Atkinson, separadas por un filete */
.hero__dato { display: grid; gap: 4px; border-top: 2px solid var(--col-linea); padding-top: var(--espacio-2); font-size: var(--t-texto); line-height: 1.35; }
.hero__dato .dato { font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado); font-size: var(--t-titular-m); line-height: 0.95; word-spacing: 0.06em; }
@media (max-width: 1279px) {
  /* Entre 1024 y 1279 px el video es más bajo que la ficha: la ficha va bajo el video, sin superponerse */
  .hero__ficha, .hero--vertical .hero__ficha { position: static; margin-top: var(--espacio-3); }
}
@media (max-width: 1023px) {
  .hero { padding-block: var(--espacio-6) var(--espacio-8); }
  .hero__grilla { display: flex; flex-direction: column; align-items: stretch; gap: var(--espacio-4); }
  .hero--vertical .hero__titular { padding-top: 0; }
  .hero__titular { order: 1; }
  .hero__medio { order: 2; display: flex; flex-direction: column; }
  .hero--vertical .hero__medio { max-width: 420px; }
  /* Corrección de la maestra (critica §3.15): en pantallas chicas la ficha va bajo el video, sin taparlo */
  .hero__ficha, .hero--vertical .hero__ficha { position: static; margin-top: var(--espacio-3); }
  .hero__texto { order: 3; }
  .hero--simple .hero__ficha { order: 4; margin-top: 0; }
}
@media (max-width: 639px) {
  .hero__ficha, .hero--simple .hero__ficha {
    --ficha-ancho: 220px; --ficha-relleno: 16px; --ficha-nombre: 44px; --ficha-item: 16px; --ficha-precio: 22px; --ficha-plazo: 16px;
  }
  .hero__texto .acciones .boton { width: 100%; }
}

/* ---------- Reproductor con póster: el video se descarga solo al apretar «Reproducir» ---------- */
.reproductor { margin: 0; }
.reproductor__marco { position: relative; overflow: hidden; background: var(--col-fondo-inverso); border: 2px solid var(--col-linea); }
.reproductor__poster, .reproductor__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reproductor__boton { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: var(--espacio-2); background: transparent; border: 0; cursor: pointer; }
.reproductor__boton > span { font-size: 1.125rem; }
.reproductor__boton .reproductor__accion, .reproductor__boton .dato {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--espacio-2);
  background: var(--col-fondo-inverso); color: var(--col-texto-inverso); font-weight: var(--peso-texto-semibold);
}
.reproductor__boton .dato { font-weight: var(--peso-display-bold); border-left: 2px solid var(--col-texto-inverso); }
.reproductor__boton:hover .reproductor__accion { background: var(--col-fondo); color: var(--col-texto); }
.reproductor__boton:focus-visible { outline: 3px solid var(--col-fondo); outline-offset: -6px; }
.reproductor .pie-registro { max-width: none; margin-top: var(--espacio-1); font-size: var(--escala-web-nota); }
.reproductor--vertical { max-width: 416px; }

/* ---------- Ficha: ajustes de la web ---------- */
.ficha span { display: block; }
.ficha .sin-corte { display: inline; }
.ficha .ficha__desde { display: inline; font-weight: var(--peso-display-bold); font-stretch: var(--ancho-normal); font-size: var(--ficha-plazo); }
.ficha--mini { --ficha-ancho: 64px; --ficha-relleno: 8px; --ficha-nombre: 16px; flex: none; }
a.ficha { text-decoration: none; }
a.ficha:hover { outline: 4px solid var(--prim-tinta); outline-offset: 4px; }
.fondo-inverso a.ficha:hover { outline-color: var(--prim-papel); }

/* ---------- Menú de servicios: las cuatro fichas (orden del muestrario) ---------- */
.servicios { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-4); }
.servicio { display: grid; gap: var(--espacio-3); align-content: start; }
.servicio__ficha { --ficha-ancho: 100%; }
.servicio__texto { font-size: var(--escala-web-texto); }
.servicio__enlaces { list-style: none; display: grid; gap: var(--espacio-1); font-weight: var(--peso-texto-semibold); }
@media (max-width: 1179px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio__ficha { --ficha-ancho: min(100%, 360px); }
}
@media (max-width: 639px) {
  /* En el celular las fichas se deslizan de lado, una tras otra */
  .servicios {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    gap: var(--espacio-2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--grilla-web-margen)); padding-inline: var(--grilla-web-margen);
    scroll-padding-inline: var(--grilla-web-margen); padding-bottom: var(--espacio-2); scrollbar-width: thin;
  }
  .servicio { scroll-snap-align: start; }
  .servicio__ficha { --ficha-relleno: 16px; }
}

/* ---------- Cifras (prueba social) ---------- */
.cifras { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-4); }
.cifras__item { border-top: 2px solid var(--col-linea); padding-top: var(--espacio-3); display: grid; gap: var(--espacio-2); align-content: start; }
.cifras .texto { max-width: 32ch; }
.cifras__nota { margin-top: var(--espacio-5); max-width: 80ch; }
@media (max-width: 799px) { .cifras { grid-template-columns: 1fr; } }

/* ---------- Muestras de nuestro trabajo: carrusel ---------- */
.muestras { --alto: clamp(320px, 54vh, 500px); --margen-pista: max(var(--grilla-web-margen), calc((100% - var(--grilla-web-contenido-max)) / 2)); }
.muestras__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-2) var(--espacio-4); margin-bottom: var(--espacio-3); }
.muestras__contador { font-size: var(--t-subtitulo); }
.muestras__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-1); }
.muestras__pista {
  position: relative; list-style: none; display: flex; align-items: flex-start; gap: var(--espacio-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px var(--margen-pista) var(--espacio-1); scroll-padding-inline: var(--margen-pista);
  scrollbar-width: none; cursor: grab;
}
.muestras__pista::-webkit-scrollbar { display: none; }
.muestras__pista:focus-visible { outline: 3px solid var(--col-linea); outline-offset: -3px; }
.muestras__pista.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.muestras__pista.arrastrando * { pointer-events: none; }
.muestra { flex: none; scroll-snap-align: start; }
.muestra--vertical { width: calc(var(--alto) * 9 / 16); }
.muestra--horizontal { width: min(calc(var(--alto) * 16 / 9), 84vw); }
.muestra__medio { position: relative; overflow: hidden; background: var(--col-fondo-inverso); aspect-ratio: 9 / 16; border: 2px solid var(--col-linea); }
.muestra--horizontal .muestra__medio { aspect-ratio: 16 / 9; }
.muestra__poster, .muestra__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.muestra__video { visibility: hidden; }                 /* aparece por corte cuando empieza (05 §10) */
.muestra.reproduciendo .muestra__video { visibility: visible; }
.muestra__controles { position: absolute; left: var(--espacio-1); right: var(--espacio-1); bottom: var(--espacio-1); display: flex; flex-wrap: wrap; gap: var(--espacio-1); }
.muestra__control {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold); font-size: var(--escala-web-nota); line-height: 1;
  background: var(--col-fondo-inverso); color: var(--col-texto-inverso); border: 2px solid var(--col-fondo-inverso);
  border-radius: var(--radio-0); cursor: pointer; text-decoration: none;
}
.muestra__control:hover { background: var(--col-fondo); color: var(--col-texto); }
.muestra__control:focus-visible { outline: 3px solid var(--col-fondo); outline-offset: 2px; }
.muestra__texto { display: grid; gap: 6px; padding-top: 12px; }
.muestra__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1) 12px; }
.muestra__meta .dato { font-size: var(--escala-web-nota); }
.muestra__titulo {
  font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-stretch: var(--ancho-normal);
  font-size: var(--escala-web-texto); line-height: 1.2; text-wrap: balance;
}
.muestra__nota, .muestra__precio { font-size: var(--escala-web-nota); line-height: 1.35; }
.muestra__nota { color: var(--col-texto-suave); }
.muestras__progreso { position: relative; height: 2px; margin-top: var(--espacio-3); background: var(--col-linea); }
.muestras__progreso span { position: absolute; top: -3px; left: 0; height: 8px; width: 10%; background: var(--col-linea); }
@media (max-width: 639px) {
  /* En el celular todas las muestras miden lo mismo: marco 3:4 (el recorte del perfil de Instagram, 03 §10);
     los videos horizontales van enteros dentro del marco Tinta */
  .muestra--vertical, .muestra--horizontal { width: 78vw; }
  .muestra__medio, .muestra--horizontal .muestra__medio { aspect-ratio: 3 / 4; }
  .muestra--horizontal .muestra__poster, .muestra--horizontal .muestra__video { object-fit: contain; }
  .muestras__contador { font-size: var(--escala-web-texto); }
  .muestras__botones [data-pausa] { order: 3; }
}

/* Etiqueta de formato en el color de su servicio (Archivo 700: sobre Potrero, nada bajo 700, 01 §4.1) */
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px;
  font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-stretch: var(--ancho-normal);
  font-size: var(--escala-web-nota); line-height: 1.1;
  background: var(--col-acento); color: var(--col-sobre-acento); border: 2px solid var(--prim-tinta);
}
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-3); }
.leyenda li { display: flex; align-items: center; gap: var(--espacio-1); }

/* ---------- Planes (inicio y /planes/) ---------- */
.planes-inicio { display: grid; grid-template-columns: minmax(0, 1fr) var(--ficha-web-ancho); gap: var(--espacio-8); align-items: start; }
.planes-inicio__texto { display: grid; gap: var(--espacio-4); }
@media (max-width: 1023px) { .planes-inicio { grid-template-columns: 1fr; } }
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espacio-6); padding-block: var(--espacio-6); border-top: 2px solid var(--col-linea); }
.plan:last-child { border-bottom: 2px solid var(--col-linea); }
.plan__cabeza { display: grid; gap: var(--espacio-3); align-content: start; justify-items: start; }
.plan__cuerpo { display: grid; gap: var(--espacio-3); align-content: start; }
@media (max-width: 1023px) { .plan { grid-template-columns: 1fr; gap: var(--espacio-4); } }

/* ---------- Boleta: neto, IVA y total ---------- */
.boleta { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); }
.boleta div { display: grid; gap: 2px; }
.boleta dt { font-weight: var(--peso-texto-semibold); font-size: var(--escala-web-nota); color: var(--col-texto-suave); }
.boleta dd {
  font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado);
  font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-subtitulo); line-height: 1.1; word-spacing: 0.06em;
}
.boleta .boleta__total dd { font-size: var(--t-titular-s); }
.boleta--mayor dd { font-size: var(--t-titular-s); }
.boleta--mayor .boleta__total dd { font-size: var(--t-titular-m); }

/* ---------- Tablas de precios (03 §4) ---------- */
.tabla-marco { overflow-x: auto; container-type: inline-size; }
.tabla-precios { font-size: var(--t-texto); }
.tabla-precios th[scope="row"] { font-weight: var(--peso-texto-regular); }
.tabla-precios .num { text-align: right; white-space: nowrap; }
.tabla-precios td.precio { font-size: var(--t-subtitulo); }
.tabla-precios td.dato:not(.num) { min-width: 9em; }
.tabla-precios td.precio:not(:last-child), .tabla-precios th.num:not(:last-child), .tabla-precios td.num:not(:last-child) { padding-right: var(--espacio-3); }
.tabla-precios td:last-child, .tabla-precios th:last-child { padding-right: 0; }
.tabla-precios .sub { display: block; font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-size: var(--escala-web-nota); font-stretch: var(--ancho-normal); }
/* La tabla se apila cuando su columna es angosta (celular o columna lateral de 1024 px) */
@container (max-width: 760px) {
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable th, .tabla-apilable td { display: block; width: 100%; }
  .tabla-apilable tr { border-bottom: 2px solid var(--col-linea); padding-block: var(--espacio-2); }
  .tabla-apilable th, .tabla-apilable td { border: 0; padding: 4px 0; text-align: left; }
  .tabla-apilable th[scope="row"] { font-weight: var(--peso-texto-semibold); padding-bottom: var(--espacio-1); }
  .tabla-apilable td, .tabla-apilable td.num, .tabla-apilable td.dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-2); white-space: normal; }
  .tabla-apilable td::before { flex: none; max-width: 45%; }
  .tabla-apilable td > .celda { text-align: right; }
  .tabla-apilable td::before { content: attr(data-label); font-family: var(--fuente-texto); font-weight: var(--peso-texto-regular); font-stretch: normal; font-size: var(--escala-web-nota); color: var(--col-texto-suave); text-align: left; }
  .tabla-apilable td.num { text-align: right; }
  .tabla-apilable .sub { display: inline; margin-left: 6px; }
}

/* ---------- Paquetes (fondos, startups, drone) ---------- */
.paquetes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-4); }
.paquete { display: grid; gap: var(--espacio-2); align-content: start; padding: var(--espacio-4); border: 2px solid var(--col-linea); background: var(--col-fondo); }
.paquete__cabeza { display: grid; gap: var(--espacio-1); }
.paquete .boleta { margin-block: var(--espacio-1); }
.paquete .boton { justify-self: start; margin-top: var(--espacio-1); }
@media (max-width: 899px) { .paquetes { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .paquete { padding: var(--espacio-3) var(--espacio-2); } .paquete .boton { width: 100%; } }

/* ---------- Listas, notas y datos ---------- */
.lista { list-style: none; display: grid; gap: var(--espacio-1); }
.lista li { position: relative; padding-left: 24px; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: currentColor; }
.lista--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-4); }
@media (max-width: 639px) { .lista--2col { grid-template-columns: 1fr; } }
.ideal { font-size: var(--escala-web-nota); }
.ideal .etiqueta { margin-right: 6px; }
.linea-dato { display: flex; flex-wrap: wrap; gap: 4px var(--espacio-1); align-items: baseline; }
.linea-dato .etiqueta { color: var(--col-texto-suave); }
.fondo-inverso .linea-dato .etiqueta { color: var(--col-texto-inverso); }
.noinc summary { cursor: pointer; font-weight: var(--peso-texto-semibold); }
.noinc .lista { margin-top: var(--espacio-1); }
.nota strong { color: var(--col-texto); }
.aviso { border: 2px solid var(--col-linea); padding: var(--espacio-3); margin-block: var(--espacio-3); background: var(--col-superficie); }
.dato-grande { font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado); font-size: var(--t-titular-s); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Cómo trabajamos: pasos ---------- */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espacio-4); }
.paso { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--col-linea); padding-top: var(--espacio-3); }
.paso .cifra { font-size: var(--t-titular-m); }
.paso__recibes { font-size: var(--escala-web-nota); }
.paso__recibes .etiqueta { display: block; color: var(--col-texto-suave); }
@media (max-width: 1023px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pasos { grid-template-columns: 1fr; gap: var(--espacio-3); } .paso { grid-template-columns: 64px 1fr; column-gap: var(--espacio-2); } .paso > :not(.cifra) { grid-column: 2; } .paso .cifra { grid-row: 1 / span 3; } }

/* ---------- Equipo ---------- */
.equipo { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-6) var(--espacio-4); }
.persona { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--espacio-3); align-items: start; }
.persona > div:not(.ficha) { display: grid; gap: var(--espacio-1); }
.avatar { --ficha-ancho: 128px; --ficha-relleno: 12px; --ficha-nombre: 80px; }
.avatar .ficha__nombre { margin-bottom: 0 !important; line-height: 0.8; }
.persona__lugar { color: var(--col-texto-suave); font-size: var(--escala-web-nota); }
@media (max-width: 1023px) { .equipo { grid-template-columns: 1fr; max-width: 640px; } }
@media (max-width: 639px) { .persona { grid-template-columns: 96px minmax(0, 1fr); } .avatar { --ficha-ancho: 96px; --ficha-nombre: 64px; } }

/* ---------- Testimonios ---------- */
.testimonios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6); }
.testimonio { display: grid; gap: var(--espacio-3); align-content: start; border-top: 2px solid var(--col-linea); padding-top: var(--espacio-3); }
.testimonio blockquote { font-size: var(--t-subtitulo); line-height: 1.4; }
.testimonio figcaption { display: grid; gap: 2px; }
.testimonio figcaption .dato { font-size: var(--t-texto); }
@media (max-width: 899px) { .testimonios { grid-template-columns: 1fr; } }

/* ---------- Lo que no hacemos ---------- */
.no-hacemos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espacio-8); align-items: start; }
.no-hacemos__lista { list-style: none; }
.no-hacemos__lista li { border-top: 2px solid var(--col-linea); padding-block: var(--espacio-2); }
.no-hacemos__lista li:last-child { border-bottom: 2px solid var(--col-linea); }
@media (max-width: 1023px) { .no-hacemos { grid-template-columns: 1fr; gap: var(--espacio-4); } }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 920px; }
.faq__item { border-top: 2px solid var(--col-linea); }
.faq__item:last-child { border-bottom: 2px solid var(--col-linea); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 56px 20px 0;
  font-weight: var(--peso-texto-semibold); font-size: var(--escala-web-texto); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-size: 2.25rem; line-height: 1;
}
.faq__item[open] summary::after { content: "–"; }
.faq__respuesta { padding-bottom: var(--espacio-3); max-width: 68ch; }

/* ---------- Contacto y formulario ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espacio-8); align-items: start; }
@media (max-width: 1023px) { .contacto { grid-template-columns: 1fr; gap: var(--espacio-6); } }
.canales { list-style: none; display: grid; }
.canal { display: grid; gap: 4px; padding-block: var(--espacio-2); border-top: 2px solid var(--col-linea); }
.canal:last-child { border-bottom: 2px solid var(--col-linea); }
.canal a { font-weight: var(--peso-texto-semibold); }
.canal a .dato { font-size: var(--t-subtitulo); }
.datos-spa { font-size: var(--escala-web-nota); color: var(--col-texto-suave); margin-top: var(--espacio-3); }
.form { display: grid; gap: var(--espacio-3); }
.form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
@media (max-width: 639px) { .form__fila { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label { font-weight: var(--peso-texto-semibold); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font-family: var(--fuente-texto); font-size: 1.125rem; color: var(--col-texto);
  background: var(--col-superficie); border: 2px solid var(--col-linea); border-radius: var(--radio-0);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--col-linea); outline-offset: 2px; }
.campo__ayuda { font-size: var(--escala-web-nota); color: var(--col-texto-suave); }
.campo--check { grid-template-columns: 28px 1fr; align-items: start; }
.campo--check input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--prim-tinta); }
.campo--check label { font-weight: var(--peso-texto-regular); }
.req { font-weight: var(--peso-texto-semibold); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__alerta { border: 2px solid var(--col-linea); background: var(--col-superficie); padding: var(--espacio-2); font-weight: var(--peso-texto-semibold); }
.form__pie { display: grid; gap: var(--espacio-1); justify-items: start; }

/* ---------- Pie con el muestrario oficial (03 §7) ---------- */
.pie { padding-block: var(--espacio-10) var(--espacio-8); }
.pie__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-4); row-gap: var(--espacio-6); align-items: start; }
.pie__marca { grid-column: 1 / span 7; grid-row: 1 / span 2; display: grid; gap: var(--espacio-4); justify-items: start; align-content: start; }
/* logo_horizontal_negativo.svg trae su propio margen Tinta: a 71,2 px el logo visible mide 56 px (03 §11) */
.pie__logo { height: 71.2px; width: auto; margin: -7.6px 0 0 -7.6px; }
.pie__contacto { grid-column: 8 / span 5; grid-row: 1; display: grid; gap: var(--espacio-2); }
.pie__paginas { grid-column: 8 / span 5; grid-row: 2; display: grid; gap: var(--espacio-2); }
.pie__titulo { font-size: var(--escala-web-nota); }
.pie__lista, .pie__redes { list-style: none; display: grid; gap: var(--espacio-1); }
.pie__ia { grid-column: 1 / span 8; font-size: var(--escala-web-nota); }
.pie__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-4); border-top: 2px solid var(--col-linea-inversa); padding-top: var(--espacio-3); font-size: var(--escala-web-nota); }
@media (max-width: 1023px) {
  .pie__marca { grid-column: 1 / -1; grid-row: auto; }
  .pie__contacto { grid-column: 1 / span 6; grid-row: auto; }
  .pie__paginas { grid-column: 7 / span 6; grid-row: auto; }
  .pie__ia { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .pie__contacto, .pie__paginas { grid-column: 1 / -1; }
  .pie__logo { height: 56px; margin: -6px 0 0 -6px; }
  .muestrario { width: 100%; }
}

/* ---------- Botón flotante de WhatsApp (solo cuando el encabezado no muestra el suyo) ---------- */
.wa-flotante { position: fixed; right: var(--espacio-2); bottom: var(--espacio-2); z-index: 40; border-color: var(--col-fondo); }
@media (min-width: 1280px) { .wa-flotante { display: none; } }
/* Se ve por defecto (también sobre párrafos y tablas); main.js lo esconde solo mientras un enlace, botón, campo,
   el formulario, una pregunta frecuente, un video, el carrusel, una ficha, los canales, el teléfono grande o el
   calendario pasa por su esquina de la pantalla */
@media (max-width: 1279px) {
  /* Al final de la página, el pie deja libre el espacio del flotante (su margen + su alto) y 32 px de aire */
  .pie { padding-bottom: calc(var(--espacio-2) + var(--espacio-6) + var(--espacio-4)); }
}
.wa-flotante { transition: opacity var(--duracion-rapida) var(--curva-estandar), visibility var(--duracion-rapida) var(--curva-estandar); }
.wa-flotante.esta-oculto { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-flotante { transition: none; } }

/* ---------- Calendario de fondos (gantt simple, un solo color: Potrero) ---------- */
.calendario { display: grid; }
.calendario__meses, .calendario__fila { display: grid; grid-template-columns: minmax(180px, 3fr) repeat(8, minmax(0, 1fr)); align-items: center; column-gap: 4px; }
.calendario__meses span { font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-size: var(--escala-web-nota); padding-bottom: var(--espacio-1); }
.calendario__fila { border-top: 2px solid var(--col-linea); min-height: 72px; }
.calendario__fila:last-child { border-bottom: 2px solid var(--col-linea); }
.calendario__nombre { grid-column: 1; display: grid; padding-block: var(--espacio-1); }
.calendario__nombre .dato { font-size: var(--escala-web-nota); color: var(--col-texto-suave); }
.calendario__barra { grid-row: 1; height: 32px; background: var(--servicio-fondos-acento); border: 2px solid var(--prim-tinta); }
@media (max-width: 639px) {
  /* La columna «Fondo» queda con ancho 0 (no se quita): las barras usan grid-column 2–9 igual que en escritorio,
     así cada barra cae bajo sus meses. Si se quitara la columna, todas se correrían un mes a la derecha. */
  .calendario__meses, .calendario__fila { grid-template-columns: 0 repeat(8, minmax(0, 1fr)); }
  .calendario__meses::before { content: none; }
  .calendario__meses span:first-child { visibility: hidden; overflow: hidden; }
  .calendario__nombre { grid-column: 1 / -1; grid-row: 1; }
  .calendario__barra { grid-row: 2; margin-bottom: var(--espacio-2); }
}

/* ---------- Páginas legales ---------- */
.legal { max-width: 72ch; display: grid; gap: var(--espacio-2); }
.legal h2 { font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-size: var(--t-subtitulo); line-height: 1.15; margin-top: var(--espacio-5); }
.legal h3 { font-weight: var(--peso-texto-semibold); font-size: var(--escala-web-texto); margin-top: var(--espacio-2); }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; }
.legal .pendiente { border-bottom: 2px solid var(--col-linea); font-weight: var(--peso-texto-semibold); }

/* ---------- Público mayor (/fondos/): letra más grande y botones grandes ---------- */
.pagina-mayor { --t-texto: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); }
.pagina-mayor main .boton { min-height: 64px; padding: 0 var(--espacio-4); font-size: 1.25rem; }
.pagina-mayor .faq__item summary { font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); padding-block: 24px; }
.pagina-mayor .lista, .pagina-mayor .paquete, .pagina-mayor .paso .texto { font-size: var(--t-texto); }
.pagina-mayor .nota, .pagina-mayor .ideal, .pagina-mayor .boleta dt, .pagina-mayor .paso__recibes { font-size: 1.125rem; }
.telefono-grande { font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado); font-size: var(--t-titular-m); line-height: 1; text-decoration: none; word-spacing: 0.06em; font-variant-numeric: tabular-nums lining-nums; }
.telefono-grande:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }

/* ---------- Columnas de texto genéricas ---------- */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espacio-8); align-items: start; }
.dos-columnas > div { display: grid; gap: var(--espacio-3); align-content: start; }
@media (max-width: 1023px) { .dos-columnas { grid-template-columns: 1fr; gap: var(--espacio-4); } }
.hechos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-4); }
.hechos li { border-top: 2px solid var(--col-linea); padding-top: var(--espacio-3); display: grid; gap: var(--espacio-2); align-content: start; }
@media (max-width: 899px) { .hechos { grid-template-columns: 1fr; } }
.formula { border: 2px solid var(--col-linea); padding: var(--espacio-4); display: grid; gap: var(--espacio-2); background: var(--col-fondo); }
.formula .formula__cuenta { font-size: var(--t-subtitulo); }
.centrado-404 { display: grid; gap: var(--espacio-4); justify-items: start; }

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .wa-flotante, .muestras__barra, .muestra__controles, .nav-boton { display: none !important; }
  .muestras__pista { overflow: visible; flex-wrap: wrap; }
}

/* Sobre Potrero todo texto va en Archivo 700 o más (01 §4.1): también el botón del servicio */
[data-servicio="fondos"] .boton--servicio { font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-stretch: var(--ancho-normal); }

/* Catálogo completo: un grupo por servicio, con su ficha compacta */
.catalogo__grupo { margin-top: var(--espacio-10); }
.catalogo__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-1) var(--espacio-3); margin-bottom: var(--espacio-2); }
.catalogo__cabeza .nota { margin-left: auto; }
.seccion__cabeza .muestrario { margin-top: var(--espacio-2); }

/* En escritorio la ficha del hero se superpone al borde derecho del video: el botón «Reproducir» va arriba a la izquierda */
@media (min-width: 1280px) {
  .hero .reproductor__boton { align-items: flex-start; justify-content: flex-start; }
}

/* Menú de servicios: bajo cada ficha, a qué servicio corresponde el precio «desde» */
.servicio__desde { font-size: var(--escala-web-nota); line-height: 1.35; }
.servicio__desde .etiqueta { margin-right: 6px; }

/* ---------- Pack Estreno: las 3 versiones en una tarjeta, con el Pack marcado (tanda 10, /planes/#estreno) ----------
   Un solo color de servicio (Tejuela, redes): la etiqueta «Recomendado» y el botón del Pack. Filetes Tinta de 2 px, radio 0,
   sin sombras. En escritorio las 9 filas de cada versión se alinean entre tarjetas (subgrid); en celular se apilan. */
.estreno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espacio-4); align-items: stretch; }
.estreno__version {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  min-width: 0; padding: var(--espacio-4); border: 2px solid var(--col-linea); background: var(--col-fondo);
}
.estreno__version > * + * { border-top: 2px solid var(--col-linea); }
.estreno__version > .estreno__detalle, .estreno__version > .estreno__boton { border-top: 0; }
.estreno__version--destacada { border-width: 4px; background: var(--col-superficie); padding: calc(var(--espacio-4) - 2px); }
.estreno__cabeza { display: grid; gap: var(--espacio-1); align-content: start; padding-bottom: var(--espacio-3); }
.estreno__marca { min-height: 32px; display: flex; align-items: center; }
.estreno__nombre { font-size: var(--t-titular-s); }
.estreno__precio .precio { font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado);
  font-size: var(--t-titular-s); line-height: 1; word-spacing: 0.06em; }
.estreno__total, .estreno__pagos { font-size: var(--escala-web-nota); line-height: 1.35; }
.estreno__pagos { font-weight: var(--peso-texto-semibold); }
.estreno__bloque { display: grid; gap: 4px; align-content: start; padding-block: var(--espacio-2); }
.estreno__bloque .etiqueta { color: var(--col-texto-suave); }
.estreno__texto { font-size: var(--escala-web-texto); line-height: 1.4; text-wrap: pretty; }
.estreno__detalle { padding-top: var(--espacio-1); }
.estreno__detalle .lista { font-size: var(--escala-web-nota); }
.estreno__boton { align-self: end; justify-self: stretch; margin-top: var(--espacio-3); min-height: 56px; }
.estreno__condiciones { margin-top: var(--espacio-6); max-width: 980px; }

/* ---------- Tráiler (tanda 13): «¿Te queda grande?», junto a la tarjeta del Pack Estreno (/planes/#trailer) ----------
   Un filete Tinta de 2 px, sin sombra ni radio; el mismo color de servicio (Tejuela, redes) en la etiqueta. A la izquierda
   el titular con el «desde» y las condiciones; a la derecha las 2 versiones; abajo los agregados y el botón. */
.trailer {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espacio-3) var(--espacio-6);
  margin-top: var(--espacio-4); padding: var(--espacio-4); border: 2px solid var(--col-linea); background: var(--col-fondo);
}
.trailer__cabeza { display: grid; gap: var(--espacio-1); align-content: start; }
.trailer__titulo { font-size: var(--t-subtitulo); line-height: 1.2; text-wrap: balance; }
.trailer__titulo .precio { white-space: nowrap; }
.trailer__versiones { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
.trailer__version { display: grid; gap: 4px; align-content: start; padding-top: var(--espacio-2); border-top: 2px solid var(--col-linea); }
.trailer__nombre { font-family: var(--fuente-display); font-weight: var(--peso-display-bold); font-size: var(--t-subtitulo); line-height: 1.15; }
.trailer__precio .precio { font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado);
  font-size: var(--t-subtitulo); line-height: 1.1; }
.trailer__total, .trailer__plazo { font-size: var(--escala-web-nota); line-height: 1.35; }
.trailer__plazo .etiqueta { margin-right: 6px; color: var(--col-texto-suave); }
.trailer__texto { font-size: var(--escala-web-texto); line-height: 1.4; text-wrap: pretty; }
.trailer__pie { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-4);
  align-items: center; padding-top: var(--espacio-3); border-top: 2px solid var(--col-linea); }
.trailer__agregados { font-size: var(--escala-web-texto); line-height: 1.45; }
.trailer__pie .nota { grid-column: 1; }
.trailer__boton { grid-column: 2; grid-row: 1 / span 2; text-align: center; justify-content: center; }
@media (max-width: 1023px) {
  .trailer { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .trailer__pie { grid-template-columns: minmax(0, 1fr); }
  .trailer__boton { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 639px) {
  .trailer { padding: var(--espacio-3) var(--espacio-2); }
  .trailer__versiones { grid-template-columns: minmax(0, 1fr); }
  .trailer__boton { justify-self: stretch; }
}
/* «Desde el 1 de diciembre de 2026» bajo el nombre, en la lista de precios, mientras el ítem no se venda (tanda 13) */
.fila__desde { display: block; font-size: var(--escala-web-nota); color: var(--col-texto-suave); }
@supports not (grid-template-rows: subgrid) {
  .estreno__version { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 1023px) {
  .estreno { grid-template-columns: 1fr; row-gap: var(--espacio-4); max-width: 640px; }
  .estreno__version { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 639px) {
  .estreno__version { padding: var(--espacio-3) var(--espacio-2); }
  .estreno__version--destacada { padding: calc(var(--espacio-3) - 2px) calc(var(--espacio-2) - 2px); }
}

/* Tarjetas de /fondos/ sin precio (R34): «Se cotiza a medida» en el lugar de la boleta */
.paquete__medida { margin-block: var(--espacio-1); }

/* Tanda 14 (25-oct-2026): mientras el Tráiler a distancia espera al abogado («pendiente_legal» en el catálogo), su lugar en
   el bloque del Tráiler lo ocupa una línea «Pronto: versión en que grabas tú.», sin precio y en el color de texto suave */
.trailer__version--pronto { align-content: center; }
.trailer__pronto { font-size: var(--escala-web-texto); line-height: 1.4; color: var(--col-texto-suave); }