/* ==========================================================================
   boca.css — hoja única del sitio 2.0 de bocalab.cl
   --------------------------------------------------------------------------
   Reemplaza webflow.css, correcciones.css, interacciones.css, lightbox.css
   y proyecto.css. Los valores salen de docs-2.0/ESPECIFICACION.md (medidas
   de la referencia adaptadas a la marca). Nada fuera de la sección 1 lleva
   valores sueltos de color, radio, línea, sombra o duración: todo pasa por
   tokens.

    1. Tokens
    2. Fuentes
    3. Base
    4. Tipografía
    5. Layout: contenedor, secciones, grilla con rótulo
    6. Botones
    7. Header
    8. Footer y WhatsApp
    9. Componentes compartidos: medios, lista con punto, banda CTA, mensaje
   10. Home
   11. Portafolio: tabs y tarjetas
   12. Lightbox
   13. Página de proyecto
   14. Contacto
   15. Nosotros: equipo
   16. Legales
   16a. Novedades: etiqueta lateral y lightbox
   16b. Móvil centrado
   17. Movimiento reducido
   18. Blog: índice y artículos
   19. Landings de anuncios (/lp/<slug>)
   20. Propuestas (/propuesta/<cliente>)

   Breakpoints (en em, para respetar el zoom de texto):
     móvil      < 48em  (768 px)
     tableta    48em–63.99em
     escritorio ≥ 64em  (1024 px). La grilla de 3 columnas y el header
                completo empiezan acá.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* ---- Paleta. Mapa de uso y contrastes: docs-2.0/INFORME-2.0.md ---- */
  --crema: #f2ede9;
  --menta: #d8e9e5;
  --menta-claro: #f5f9f8;
  --texto: #333333;
  --texto-suave: #5c5c5c;          /* ≥ 5,3:1 sobre todos los fondos claros */
  --acento: #ff452c;               /* solo texto ≥ 24 px sobre menta claro / blanco / oscuro, y fondos */
  --acento-aa: #bf2f14;            /* variante AA: texto pequeño naranja (≥ 4,6:1 en fondos claros) */
  --oscuro: #1a1a1a;
  --blanco: #ffffff;

  /* ---- Roles. Las secciones de tema oscuro los redefinen (sección 5) ---- */
  --fondo: var(--menta-claro);
  --color-texto: var(--texto);
  --color-texto-suave: var(--texto-suave);
  --color-titulo: var(--oscuro);
  --invertido-fondo: var(--oscuro);   /* hover de botones: se invierte */
  --invertido-texto: var(--blanco);
  --foco: var(--acento-aa);

  /* ---- Líneas ---- */
  --linea: 1px;
  --linea-color: rgb(26 26 26 / 0.28);      /* 2.1: línea fina, no negra */
  --linea-color-suave: rgb(26 26 26 / 0.12);
  --linea-color-invertida: rgb(255 255 255 / 0.28);

  /* ---- Radios ---- */
  --radio-boton: 6px;              /* botones y tabs (el de la 2.0) */
  --radio-s: 12px;                 /* campos de formulario */
  --radio-m: 20px;                 /* imágenes, tarjetas, paneles */
  --radio-redondo: 999px;          /* íconos, chips */

  /* ---- Sombras: solo para lo que flota ---- */
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px -8px rgb(0 0 0 / 0.18);
  --sombra-2: 0 24px 64px -16px rgb(0 0 0 / 0.35);

  /* ---- Movimiento ---- */
  --dur-rapida: 150ms;
  --dur-media: 220ms;
  --dur-lenta: 300ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Espaciado (gaps medidos en la referencia) ---- */
  --esp-1: 0.25rem;   /*   4 */
  --esp-2: 0.5rem;    /*   8 */
  --esp-3: 0.75rem;   /*  12 */
  --esp-4: 1rem;      /*  16 */
  --esp-5: 1.5rem;    /*  24 */
  --esp-6: 2rem;      /*  32 */
  --esp-7: 3rem;      /*  48 */
  --esp-8: 4rem;      /*  64 */
  --esp-9: 6rem;      /*  96 */
  --esp-10: 8rem;     /* 128 */

  /* ---- Contenedor y ritmo vertical: fluidos entre 390 y 1440 px ---- */
  --contenedor-max: 1800px;
  --margen: clamp(1.5rem, 0.6rem + 3.7vw, 4rem);
  --seccion-pad: clamp(3.5rem, 2.2rem + 5.3vw, 7rem);
  --col-gap: clamp(1.5rem, 0.6rem + 3.8vw, 4rem);
  --header-alto: clamp(4rem, 3.6rem + 1.5vw, 5rem);

  /* ---- Familias ---- */
  --familia-texto: "Inter", "Inter reserva", system-ui, sans-serif;
  --familia-titulos: "Outfit", "Outfit reserva", system-ui, sans-serif;

  /* ---- Escala tipográfica (tabla en ESPECIFICACION.md §2.2) ---- */
  /* 2.1: un escalón más contenida que la 2.0, para un registro editorial. */
  --fs-display: clamp(2.25rem, 1.67rem + 2.38vw, 3.5rem);      /* 36 → 56 */
  --fs-titulo-1: clamp(2rem, 1.54rem + 1.9vw, 3rem);           /* 32 → 48 */
  --fs-titulo-2: clamp(1.625rem, 1.36rem + 1.07vw, 2.25rem);   /* 26 → 36 */
  --fs-titulo-3: clamp(1.25rem, 1.13rem + 0.48vw, 1.5rem);     /* 20 → 24 */
  --fs-titulo-4: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);  /* 17 → 20 */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);      /* 17 → 20 */
  --fs-cuerpo: clamp(0.9375rem, 0.89rem + 0.19vw, 1.0625rem);  /* 15 → 17 */
  --fs-etiqueta: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);   /* 12 → 13 */

  --lh-display: 1.08;
  --lh-titulo-1: 1.1;
  --lh-titulo: 1.15;
  --lh-texto: 1.65;
  --lh-lead: 1.55;

  --tracking-display: -0.025em;
  --tracking-titulo: -0.02em;
  --tracking-rotulo: 0.14em;
}


/* ==========================================================================
   2. Fuentes
   --------------------------------------------------------------------------
   Auto-hospedadas (OFL). Outfit, tipografía de marca (archivos de Tomás),
   para títulos, rótulos y botones; Inter para el texto. swap + reservas con
   métricas ajustadas: si la fuente llega tarde, el texto ya ocupa casi el
   mismo espacio y no salta (CLS).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter reserva";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Outfit reserva";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}


/* ==========================================================================
   3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-alto);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fondo);
  color: var(--color-texto);
  font-family: var(--familia-texto);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-texto);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Con el menú móvil abierto, la página de atrás no se desplaza. */
html[data-menu-abierto] body {
  overflow: hidden;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: var(--linea);
  text-underline-offset: 0.2em;
  transition: color var(--dur-rapida) var(--curva), text-decoration-color var(--dur-rapida) var(--curva);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Foco visible, uno solo para todo el sitio. Sin foco al hacer clic. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--acento);
  color: var(--oscuro);
}

/* Oculto a la vista, disponible para lectores de pantalla. */
.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Saltar al contenido": aparece solo al recibir foco con teclado. */
.saltar {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-s);
  background-color: var(--oscuro);
  color: var(--blanco);
  font-weight: 500;
  transform: translateY(-200%);
}

.saltar:focus-visible {
  transform: none;
}


/* ==========================================================================
   4. Tipografía
   ========================================================================== */

/* Todos los títulos en Outfit. Pesos bajos y tracking apenas negativo:
   registro editorial, no de cartel. */
.t-display,
.t-titulo-1,
.t-titulo-2,
.t-titulo-3,
.t-titulo-4 {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.t-titulo-1 {
  font-size: var(--fs-titulo-1);
  font-weight: 400;
  line-height: var(--lh-titulo-1);
  letter-spacing: var(--tracking-titulo);
}

.t-titulo-2 {
  font-size: var(--fs-titulo-2);
  font-weight: 400;
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
}

.t-titulo-3 {
  font-size: var(--fs-titulo-3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-titulo-4 {
  font-size: var(--fs-titulo-4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.t-lead {
  color: var(--color-texto-suave);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

/* Rótulo: la etiqueta de sección (la mono de la referencia → Outfit en
   mayúsculas pequeñas y espaciadas). */
.rotulo {
  color: var(--color-texto-suave);
  font-family: var(--familia-titulos);
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

/* Palabras destacadas en naranja. Solo en texto ≥ 24 px y sobre menta
   claro, blanco u oscuro (≥ 3:1, AA texto grande). Sobre crema o menta no
   llega: ahí no se usa. */
.acento {
  color: var(--acento);
}

/* Texto corrido largo (legales, bajadas). */
.prosa {
  max-width: 68ch;
}

.prosa > * + * {
  margin-top: 1em;
}

.prosa h2 {
  margin-top: 2em;
}

.prosa ul {
  padding-left: 1.25em;
}

.prosa li + li {
  margin-top: 0.5em;
}

.prosa li::marker {
  color: var(--acento-aa);
}

.prosa a {
  color: var(--acento-aa);
}

.prosa a:hover {
  text-decoration-thickness: 2px;
}


/* ==========================================================================
   5. Layout
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Sección con línea divisoria superior, del ancho del contenido (como en
   la referencia: la línea no llega a los bordes de la ventana). La primera
   sección de la página y la que sigue a una banda de color no la llevan. */
.seccion > .contenedor {
  position: relative;
  padding-block: var(--seccion-pad);
}

.seccion > .contenedor::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--margen);
  border-top: var(--linea) solid var(--linea-color);
}

.banda + .seccion > .contenedor::before,
main > .seccion:first-child > .contenedor::before {
  content: none;
}

/* Bandas de color, a todo el ancho y sin línea propia. */
.banda > .contenedor {
  padding-block: var(--seccion-pad);
}

.banda--crema { background-color: var(--crema); }
.banda--menta { background-color: var(--menta); }

.tema-oscuro {
  --color-texto: rgb(255 255 255 / 0.86);
  --color-texto-suave: rgb(255 255 255 / 0.72);
  --color-titulo: var(--blanco);
  --linea-color: var(--linea-color-invertida);
  --invertido-fondo: var(--blanco);
  --invertido-texto: var(--oscuro);
  --foco: var(--acento);
  background-color: var(--oscuro);
  color: var(--color-texto);
}

/* Grilla de la referencia: un tercio para el rótulo (y a veces el título),
   dos tercios para el contenido, con una línea vertical entre los dos. */
.grilla-rotulo {
  display: grid;
  gap: var(--esp-6);
}

.grilla-rotulo__cabeza {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}

@media (min-width: 64em) {
  .grilla-rotulo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
  }

  .grilla-rotulo__cabeza {
    padding-right: var(--col-gap);
  }

  .grilla-rotulo__contenido {
    padding-left: var(--col-gap);
    border-left: var(--linea) solid var(--linea-color);
  }

  /* La cabecera queda fija mientras se recorre un contenido largo. */
  .grilla-rotulo__cabeza--fija {
    position: sticky;
    top: var(--esp-6);
    align-self: start;
  }
}


/* ==========================================================================
   6. Botones
   --------------------------------------------------------------------------
   Un sistema: .boton + variante (--primario, --secundario, --enlace) +
   tamaño (--s, --m por defecto, --l). Radio de 6 px, Outfit 600 en
   mayúsculas espaciadas (el botón de la 2.0, con la tipografía de marca en
   vez de Barlow) y los mismos estados en todos. Alto mínimo de 44 px en el
   tamaño más chico (objetivo táctil).

   Primario: naranja de marca con texto oscuro (5,1:1). El blanco sobre
   #FF452C da 3,4:1 y no cumple AA en texto de botón: esta es la variante
   AA del botón (ver INFORME-2.0.md).
   Hover de las tres variantes: se invierte a oscuro (o a blanco sobre tema
   oscuro). Active: se hunde 1 px.
   ========================================================================== */

.boton {
  --boton-alto: 3rem;
  --boton-pad: 1.375rem;
  --boton-fs: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--boton-alto);
  padding: 0 var(--boton-pad);
  border: var(--linea) solid transparent;
  border-radius: var(--radio-boton);
  background-color: transparent;
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--boton-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-rapida) var(--curva),
    border-color var(--dur-rapida) var(--curva),
    color var(--dur-rapida) var(--curva),
    transform var(--dur-rapida) var(--curva);
}

.boton--s { --boton-alto: 2.75rem; --boton-pad: 1rem; --boton-fs: 0.8125rem; }
.boton--l { --boton-alto: 3.5rem; --boton-pad: 1.875rem; --boton-fs: 1rem; }

.boton--primario {
  background-color: var(--acento);
  border-color: var(--acento);
  color: var(--oscuro);
}

.boton--secundario {
  border-color: currentColor;
}

.boton--primario:hover,
.boton--secundario:hover {
  background-color: var(--invertido-fondo);
  border-color: var(--invertido-fondo);
  color: var(--invertido-texto);
}

.boton:active {
  transform: translateY(1px);
}

.boton--enlace {
  --boton-pad: 0;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: var(--linea);
  text-underline-offset: 0.3em;
}

.boton--enlace:hover {
  color: var(--acento-aa);
  text-decoration-thickness: 2px;
}

.tema-oscuro .boton--enlace:hover {
  color: var(--acento);
}

.boton[disabled],
.boton[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}

/* Flecha decorativa al final del texto (→), en enlaces que llevan a otra
   página. */
.boton__flecha {
  transition: transform var(--dur-rapida) var(--curva);
}

.boton:hover .boton__flecha {
  transform: translateX(3px);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-5);
}


/* ==========================================================================
   7. Header
   --------------------------------------------------------------------------
   Uno solo, responsivo y fijo arriba en todos los tamaños: se esconde al
   bajar y vuelve al subir (assets/js/sitio.js). < 64em: logo + botón de
   menú. ≥ 64em: enlaces, botón y redes en línea.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--fondo);
  transition: transform var(--dur-lenta) var(--curva);
}

.header.is-oculto {
  transform: translateY(-100%);
}

.header__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  min-height: var(--header-alto);
  position: relative;
}

/* La línea bajo el header, del ancho del contenido. Suave: el header ya
   se separa del contenido por estar fijo. */
.header__fila::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: var(--margen);
  border-bottom: var(--linea) solid var(--linea-color-suave);
}

.header__logo {
  --logo-alto: 2.75rem;
  display: block;
  flex-shrink: 0;
  border-radius: var(--radio-s);
}

/* Los SVG del logo traen ~25 % de aire arriba y abajo y ~11 px a la izquierda
   a este tamaño. El margen negativo (proporcional al alto) alinea la tinta
   con el margen del contenido. Móvil y tableta: solo BOCA; escritorio:
   BOCA | Marketing Studio en horizontal. */
.header__logo img {
  width: auto;
  height: var(--logo-alto);
  margin-left: calc(var(--logo-alto) * -0.255);
}

.header__logo-escritorio {
  display: none;
}

.header__boton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radio-s);
  background: none;
  color: var(--oscuro);
}

/* Ícono de dos líneas que pasa a ✕ al abrir. */
.header__icono-menu {
  position: relative;
  width: 1.625rem;
  height: 0.75rem;
}

.header__icono-menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--dur-media) var(--curva), top var(--dur-media) var(--curva);
}

.header__icono-menu span:first-child { top: 0; }
.header__icono-menu span:last-child { top: calc(100% - 2px); }

.header__boton-menu[aria-expanded="true"] .header__icono-menu span {
  top: calc(50% - 1px);
}

.header__boton-menu[aria-expanded="true"] .header__icono-menu span:first-child { transform: rotate(45deg); }
.header__boton-menu[aria-expanded="true"] .header__icono-menu span:last-child { transform: rotate(-45deg); }

.header__enlaces {
  display: flex;
  gap: var(--esp-2) var(--esp-6);
}

.header__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--oscuro);
  font-family: var(--familia-titulos);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.header__enlace:hover {
  text-decoration-color: currentColor;
}

.header__enlace[aria-current] {
  text-decoration-color: var(--acento);
}

/* Íconos de redes: glifos SVG en línea (currentColor) dentro de un
   círculo de línea fina; al pasar el puntero, el círculo se rellena. */
.redes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--linea) solid var(--linea-color-suave);
  border-radius: var(--radio-redondo);
  color: var(--oscuro);
  transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.redes a:hover {
  background-color: var(--oscuro);
  border-color: var(--oscuro);
  color: var(--blanco);
}

.redes svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---- Móvil y tableta: menú desplegable a pantalla completa ---- */
@media (max-width: 63.99em) {
  .header__nav {
    position: fixed;
    inset: var(--header-alto) 0 0;
    z-index: 39;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-6);
    padding: var(--esp-6) var(--margen) var(--esp-7);
    overflow-y: auto;
    background-color: var(--fondo);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-media) var(--curva),
      transform var(--dur-media) var(--curva),
      visibility 0s linear var(--dur-media);
  }

  .header__nav.is-abierto {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-media) var(--curva),
      transform var(--dur-media) var(--curva);
  }

  .header__enlaces {
    flex-direction: column;
    width: 100%;
  }

  .header__enlaces li {
    border-bottom: var(--linea) solid var(--linea-color);
  }

  .header__enlaces li {
    border-bottom-color: var(--linea-color-suave);
  }

  .header__enlace {
    width: 100%;
    min-height: 4.5rem;
    font-size: var(--fs-titulo-1);
    font-weight: 400;
    letter-spacing: var(--tracking-titulo);
  }
}

/* ---- Escritorio ---- */
@media (min-width: 64em) {
  /* El horizontal lleva la bajada "Marketing Studio": un poco más grande para
     que se lea. */
  .header__logo {
    --logo-alto: 3.25rem;
  }

  .header__logo-movil {
    display: none;
  }

  .header__logo-escritorio {
    display: block;
  }

  .header__boton-menu {
    display: none;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--esp-6);
  }

  .header__nav .redes {
    padding-left: var(--esp-5);
    border-left: var(--linea) solid var(--linea-color-suave);
  }
}


/* ==========================================================================
   8. Footer y WhatsApp
   --------------------------------------------------------------------------
   Orden de la referencia: marca (logo, bajada, redes y WhatsApp) | grupos
   de enlaces; línea; barra inferior con crédito y legales.
   ========================================================================== */

.footer {
  background-color: var(--crema);
  padding-top: var(--seccion-pad);
}

.footer__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
}

.footer__logo {
  display: block;
  border-radius: var(--radio-s);
}

/* Logo con la bajada "Marketing Studio": acá sí se lee. Mismo ajuste del aire
   interno que en el header (el de este SVG es ~8,5 % del ancho). */
.footer__logo {
  --logo-alto: 6.75rem;   /* 4,5 rem + 50 % */
}

.footer__logo img {
  width: auto;
  height: var(--logo-alto);
  margin-left: calc(var(--logo-alto) * -0.183);
}

.footer__dato {
  max-width: 34ch;
  color: var(--color-texto-suave);
  font-size: var(--fs-cuerpo);
  line-height: 1.55;
}

.footer__dato a {
  text-decoration-color: var(--linea-color-suave);
}

.footer__dato a:hover {
  color: var(--acento-aa);
  text-decoration-color: currentColor;
}

.footer__grupos {
  display: grid;
  gap: 0;
}

.footer__grupo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
  padding-block: var(--esp-6);
  border-top: var(--linea) solid var(--linea-color-suave);
}

.footer__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.footer__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-family: var(--familia-titulos);
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer__enlace:hover,
.footer__legal:hover {
  color: var(--acento-aa);
}

.footer__enlace[aria-current],
.footer__legal[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--acento-aa);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.footer__barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--seccion-pad);
  padding-block: var(--esp-5);
  border-top: var(--linea) solid var(--linea-color-suave);
  color: var(--color-texto-suave);
  font-size: 0.8125rem;
  text-align: center;
}

.footer__barra ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-1) var(--esp-5);
}

.footer__legal {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  text-decoration: none;
}

@media (min-width: 48em) {
  .footer__grupos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--col-gap);
  }

  .footer__barra {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (min-width: 64em) {
  .footer__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .footer__marca {
    padding-right: var(--col-gap);
  }

  .footer__grupos {
    padding-left: var(--col-gap);
    border-left: var(--linea) solid var(--linea-color-suave);
  }

  .footer__grupo {
    padding-block: 0;
    border-top: 0;
  }
}

@media (max-width: 47.99em) {
  .footer__marca {
    padding-bottom: var(--esp-6);
  }
}

/* Botón flotante de WhatsApp: el ícono que entregó Tomás (círculo verde con
   el logo), local. */
.whatsapp {
  position: fixed;
  right: var(--esp-5);
  bottom: var(--esp-5);
  z-index: 30;
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radio-redondo);
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-rapida) var(--curva);
}

.whatsapp:hover {
  transform: scale(1.06);
}

.whatsapp img {
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   9. Componentes compartidos
   ========================================================================== */

/* Imagen o video con proporción fija, recorte y radio. La proporción va en
   --proporcion (por defecto 16:9). */
.medio {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-m);
  background-color: var(--crema);
  aspect-ratio: var(--proporcion, 16 / 9);
}

.medio > img,
.medio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lista de 2×2 con punto naranja (ADN y valores). Punto = el de la marca. */
.lista-punto {
  display: grid;
  gap: 0;
}

.lista-punto__item {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding-block: var(--esp-6);
  border-top: var(--linea) solid var(--linea-color-suave);
}

.lista-punto__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.lista-punto__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
}

.lista-punto__titulo::before {
  content: "";
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--radio-redondo);
  background-color: var(--acento);
  transform: translateY(0.05em);
}

@media (min-width: 48em) {
  .lista-punto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .lista-punto__item:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }
}

/* Banda de cierre con llamado a la acción (home, proyecto, nosotros). */
.cta__grilla {
  display: grid;
  gap: var(--esp-7);
  align-items: center;
}

.cta__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
}

.cta__medio {
  --proporcion: 3 / 2;
}

@media (min-width: 64em) {
  .cta__grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--col-gap);
  }
}

/* Página de mensaje (404 y gracias): texto y el punto de la marca. */
.mensaje {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
  max-width: 48rem;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
}

.mensaje__punto {
  width: clamp(8rem, 4rem + 14vw, 22rem);
  height: auto;
  justify-self: center;
}


/* ==========================================================================
   10. Home
   ========================================================================== */

/* ---- Heros ------------------------------------------------------------
   Home y book caben enteros en la primera pantalla (titular, bajada, medio
   y botón, sin desplazarse): el titular compacto se escala con el ancho y
   también con el alto de la ventana, y el medio tiene un alto máximo. Lo
   verifica scripts/probar-pliegue.mjs. Nosotros usa el titular grande
   (manifiesto), sin medio. */
.hero > .contenedor {
  --hero-pad: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  padding-block: var(--hero-pad);
}

/* Nosotros: el hero manifiesto es una banda y conserva el ritmo de sección. */
.banda.hero > .contenedor {
  padding-block: var(--seccion-pad);
}

/* Alto disponible para el medio: la ventana menos el header y el padding. */
.hero__medio,
.hero-book__foto {
  max-height: calc(100svh - var(--header-alto) - 2 * var(--hero-pad));
}

.hero__medio {
  --proporcion: 16 / 9;
}

.hero__titulo {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5.5rem);            /* 40 → 88 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__titulo .acento {
  display: block;
}

/* Compacto: el menor entre un valor por ancho y uno por alto, para que en
   una laptop de 720 px de alto el bloque siga entrando. */
.hero__titulo--compacto {
  font-size: clamp(2rem, min(3.6vw, 6.2vh), 3.5rem);           /* 32 → 56 */
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Home: texto en un tercio, video 16:9 en dos tercios. */
.hero-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* sin esto, un botón largo ensancha la columna y corre todo a la derecha */
  gap: var(--esp-5);
}

.hero-video__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-5);
}

.hero-video__cierre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
}

/* Book: foto a la izquierda, texto a la derecha con el índice de
   categorías (los mismos deep links de las tabs). */
.hero-book {
  display: grid;
  gap: var(--esp-5);
}

.hero-book__foto {
  --proporcion: 3 / 2;
}

.hero-book__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-6);
}

.hero-book__cabeza {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}

.hero-book__indice {
  display: none;
}

.hero-book__indice a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.75rem;
  border-top: var(--linea) solid var(--linea-color);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva), padding var(--dur-rapida) var(--curva);
}

.hero-book__indice li:last-child a {
  border-bottom: var(--linea) solid var(--linea-color);
}

.hero-book__indice a:hover {
  padding-inline: var(--esp-2);
  color: var(--acento-aa);
}

@media (min-width: 48em) {
  .hero-book__indice {
    display: block;
  }
}

@media (min-width: 64em) {
  .hero-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--col-gap);
    align-items: stretch;
  }

  .hero-video .hero__medio {
    align-self: start;
  }

  .hero-book {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--col-gap);
  }

  .hero-book__foto {
    --proporcion: 4 / 3;
    align-self: start;
  }
}

/* Nosotros: titular grande con la parte naranja corrida a la columna de
   contenido; rótulo, bajada y botón debajo. */
.hero__pie {
  display: grid;
  gap: var(--esp-5);
  margin-top: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}

.hero__bajada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-5) var(--esp-7);
}

.hero__bajada .t-lead {
  max-width: 38ch;
}

@media (min-width: 64em) {
  .hero__titulo:not(.hero__titulo--compacto) .acento {
    padding-left: calc(100% / 3 + var(--col-gap));
  }

  .hero__pie {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
    align-items: end;
  }

  .hero__bajada {
    padding-left: var(--col-gap);
  }
}

/* ---- Clientes: marquee de logos ---- */
/* Banda más baja que una sección: es una franja de prueba social. */
.clientes > .contenedor {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.clientes__grilla {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__pista {
  display: flex;
  width: max-content;
  /* 37 s por vuelta: 30 % más rápido que los 48 s anteriores (48 / 1,3). */
  animation: marquee 37s linear infinite;
}

.marquee:hover .marquee__pista {
  animation-play-state: paused;
}

/* La separación de la costura entre las dos copias va en margin, no en
   padding: la regla base `ul[role="list"] { padding: 0 }` anulaba el
   padding-right y el último logo (Mynu) quedaba pegado al primero
   (Agrosuper). El margen cuenta en el ancho de la pista, así que el -50 % de
   la animación sigue cayendo justo en el inicio de la segunda copia. */
.marquee__grupo {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  margin-right: clamp(2rem, 1rem + 4vw, 4rem);
}

.marquee__grupo img {
  width: clamp(3.5rem, 3.1rem + 1.6vw, 4.5rem);
  height: auto;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (min-width: 64em) {
  .clientes__grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
  }

  .clientes .marquee {
    padding-left: var(--col-gap);
    border-left: var(--linea) solid var(--linea-color);
  }
}

/* ---- Servicios: 2×2 con líneas, como "What we do" ---- */
.servicios {
  display: grid;
}

.servicio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  padding-block: var(--esp-6);
  border-top: var(--linea) solid var(--linea-color-suave);
}

.servicio:first-child {
  padding-top: 0;
  border-top: 0;
}

.servicio__icono {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--esp-2);
}

.servicio__lema {
  font-size: var(--fs-lead);
  line-height: 1.4;
}

.servicio__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) 0;
  color: var(--color-texto-suave);
}

.servicio__items li:not(:last-child)::after {
  content: "·";
  padding-inline: 0.5em;
}

@media (min-width: 48em) {
  .servicios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .servicio:nth-child(odd) {
    padding-right: var(--col-gap);
  }

  .servicio:nth-child(even) {
    padding-left: var(--col-gap);
    border-left: var(--linea) solid var(--linea-color-suave);
  }

  .servicio:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---- Book: una tarjeta grande y dos chicas ---- */
.book-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6) clamp(0.75rem, 0.3rem + 1.8vw, 1.5rem);
}

.book-home__item:first-child {
  grid-column: 1 / -1;
}

.book-home__item .medio {
  --proporcion: 4 / 5;
}

.book-home__item:first-child .medio {
  --proporcion: 16 / 9;
}

/* Enlace con imagen y pie: el pie recibe el subrayado y la imagen, un zoom
   leve. Mismo comportamiento en la home y en el portafolio. */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  text-decoration: none;
  border-radius: var(--radio-m);
}

.tarjeta .medio img {
  transition: transform var(--dur-lenta) var(--curva);
}

.tarjeta:hover .medio img {
  transform: scale(1.03);
}

.tarjeta__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-4);
}

.tarjeta__titulo {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--linea);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-rapida) var(--curva);
}

.tarjeta:hover .tarjeta__titulo {
  text-decoration-color: currentColor;
}


/* ==========================================================================
   11. Portafolio: tabs y tarjetas
   ========================================================================== */

.tabs__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding-bottom: var(--seccion-pad);
}

.tabs__tab {
  min-height: 2.75rem;
}

.tabs__tab[aria-selected="true"] {
  background-color: var(--oscuro);
  border-color: var(--oscuro);
  color: var(--blanco);
}

/* Sin JS no hay tabs: los cuatro paneles quedan visibles, uno tras otro.
   tabs.js pone [hidden] en los inactivos. */
.tabs__panel + .tabs__panel {
  margin-top: var(--seccion-pad);
}

.tabs__panel[hidden] {
  display: none;
}

.js-tabs .tabs__panel + .tabs__panel {
  margin-top: 0;
}

.proyectos-grid {
  display: grid;
  gap: var(--esp-7) var(--esp-5);
}

@media (min-width: 40em) {
  .proyectos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.proyecto-card .medio {
  --proporcion: 4 / 3;
}

/* El tipo puede ser largo ("Construcción y aplicación de marca"): se
   parte en líneas, alineado a la derecha, en vez de empujar el pie. */
.proyecto-card__tipo {
  min-width: 0;
  max-width: 50%;
  color: var(--acento-aa);
  text-align: right;
}


/* ==========================================================================
   12. Lightbox
   --------------------------------------------------------------------------
   <dialog> que hace de fondo; el panel adentro. El contenido usa el mismo
   marcado que la página de proyecto (sección 13).
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--esp-5);
  border: 0;
  overflow: hidden;
  background-color: rgb(26 26 26 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox-panel {
  position: relative;
  width: min(100%, 75rem);
  height: min(100%, 56rem);
  overflow: hidden;
  border-radius: var(--radio-m);
  background-color: var(--fondo);
  box-shadow: var(--sombra-2);
  animation: lightbox-entrada var(--dur-lenta) var(--curva);
}

.lightbox-contenido {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lightbox-contenido:focus-visible {
  outline-offset: -3px;
}

.lightbox-cerrar {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--linea) solid var(--oscuro);
  border-radius: var(--radio-redondo);
  background-color: var(--fondo);
  color: var(--oscuro);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.lightbox-cerrar:hover {
  background-color: var(--oscuro);
  color: var(--blanco);
}

/* Solo reciben foco para redirigirlo (trampa de foco). */
.lightbox-centinela {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@keyframes lightbox-entrada {
  from { opacity: 0; transform: translateY(1rem); }
}

@media (max-width: 47.99em) {
  .lightbox {
    padding: 0;
  }

  .lightbox-panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .lightbox-cerrar {
    position: fixed;
  }
}


/* ==========================================================================
   13. Página de proyecto (y contenido del lightbox)
   ========================================================================== */

.proyecto-encabezado {
  display: grid;
  gap: var(--esp-5);
  padding-block: var(--seccion-pad);
}

.proyecto-tag {
  color: var(--acento-aa);
}

.proyecto-encabezado__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.proyecto-bajada {
  max-width: 52ch;
  color: var(--color-texto);
}

.proyecto-media {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding-bottom: var(--seccion-pad);
}

.proyecto-imagen {
  width: 100%;
  border-radius: var(--radio-m);
  background-color: var(--crema);
}

.proyecto-video {
  overflow: hidden;
  border-radius: var(--radio-m);
  background-color: var(--oscuro);
  aspect-ratio: 16 / 9;
}

.proyecto-video iframe,
.proyecto-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video propio (mp4): la proporción llega en línea (aspect-ratio) porque no
   todos son 16:9; en una fila de verticales cada uno mide un tercio. */
.proyecto-video--archivo video {
  object-fit: cover;
}

/* Filas de la composición (assets/js/composicion.js): cuadradas de a 2 y
   verticales de a 3. grid-template-columns llega en línea, con un peso por
   imagen proporcional a su ancho/alto: así todas las de una fila miden la misma
   altura, sin recortes y sin huecos. */
.proyecto-fila {
  display: grid;
  gap: var(--esp-4);
  align-items: start;
}

/* Las imágenes mantienen su proporción natural (width/height del HTML), así
   reservan su alto antes de cargar (sin saltos de layout). Con anchos
   proporcionales a ancho/alto, todas las de la fila quedan de la misma
   altura sin forzarlo con height: 100%. */

/* Sobrantes (una cuadrada impar; una o dos verticales fuera de un trío): al
   final, centrados, con el ancho de una celda de su grilla (--columnas). */
.proyecto-fila--final {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.proyecto-fila--final > .proyecto-imagen {
  flex: 0 0 calc((100% - (var(--columnas) - 1) * var(--esp-4)) / var(--columnas));
  width: auto;
  height: auto;
}

/* Compartir: botón y opciones (assets/js/compartir.js). El botón queda al
   lado de las opciones; sin JS solo está el enlace de WhatsApp del <noscript>. */
.compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  /* Reserva el alto del botón (44 px) antes de que compartir.js lo cree: sin
     esto, al aparecer empujaba hacia abajo todo el proyecto (CLS 0,03). */
  min-height: 2.75rem;
}

.compartir__boton svg {
  flex-shrink: 0;
}

/* Una sola fila, siempre: en pantallas chicas las opciones son solo ícono. */
.compartir__lista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--esp-2);
}

.compartir__lista[hidden] {
  display: none;
}

.compartir__opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.75rem;
  padding: 0 var(--esp-4);
  border: var(--linea) solid var(--linea-color);
  border-radius: var(--radio-boton);
  background-color: transparent;
  color: var(--oscuro);
  font-family: var(--familia-titulos);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}

.compartir__opcion svg {
  flex-shrink: 0;
}

.compartir__opcion:hover {
  border-color: var(--oscuro);
  background-color: var(--oscuro);
  color: var(--blanco);
}

/* Abierto: el botón queda invertido, a propósito (también en pantallas
   táctiles, donde el :hover se queda pegado después del toque). */
.compartir__boton[aria-expanded="true"] {
  border-color: var(--oscuro);
  background-color: var(--oscuro);
  color: var(--blanco);
}

@media (max-width: 47.99em) {
  /* El contenedor y las opciones se centran como bloque (el .compartir es un
     flex que hereda align-items del encabezado y quedaba a la izquierda). */
  .compartir {
    justify-content: center;
    width: 100%;
  }

  .compartir__lista {
    justify-content: center;
    width: 100%;
  }

  .compartir__opcion {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
  }

  /* Texto solo para lectores de pantalla. */
  .compartir__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.proyecto-encabezado__texto .compartir {
  margin-top: var(--esp-3);
}

/* Cierre del proyecto: "Comparte este proyecto" y el botón. */
.proyecto-compartir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  padding-bottom: var(--seccion-pad);
}

@media (min-width: 64em) {
  .proyecto-encabezado {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
  }

  .proyecto-encabezado__texto {
    padding-left: var(--col-gap);
    border-left: var(--linea) solid var(--linea-color);
  }
}

/* En el lightbox el contenido lleva su propio margen interno y el título
   deja lugar al botón de cierre. */
.lightbox .proyecto {
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}

.lightbox .proyecto-encabezado {
  padding-top: clamp(4.5rem, 3.5rem + 3vw, 5rem);
}

.lightbox .proyecto-encabezado__texto {
  padding-right: var(--esp-7);
}


/* ==========================================================================
   14. Contacto
   ========================================================================== */

.contacto__grilla {
  display: grid;
  gap: var(--esp-7);
}

/* Orden en móvil: título, formulario y datos. En escritorio, el
   formulario ocupa la columna derecha a lo alto. */
.contacto__intro,
.contacto__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
}

.contacto__datos {
  display: grid;
  gap: var(--esp-4);
  width: 100%;
  padding-top: var(--esp-5);
  border-top: var(--linea) solid var(--linea-color);
}

.contacto__dato {
  display: grid;
  gap: var(--esp-1);
}

.contacto__dato dd a {
  text-decoration-color: var(--linea-color-suave);
}

.contacto__dato dd a:hover {
  color: var(--acento-aa);
  text-decoration-color: currentColor;
}

.contacto__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-4);
}

@media (min-width: 30em) {
  .contacto__dato {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--esp-4);
    align-items: baseline;
  }
}

@media (min-width: 64em) {
  .contacto__grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    gap: var(--esp-6) var(--col-gap);
    align-items: start;
  }

  .contacto__grilla .formulario {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---- Formulario ---- */
.formulario {
  padding: clamp(1.5rem, 0.8rem + 2.8vw, 3rem);
  border-radius: var(--radio-m);
  background-color: var(--menta);
}

.formulario__titulo {
  margin-bottom: var(--esp-6);
}

.formulario__campos {
  display: grid;
  gap: var(--esp-5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.campo__etiqueta {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  color: var(--oscuro);
  font-size: 0.9375rem;
  font-weight: 500;
}

.campo__control {
  width: 100%;
  min-height: 3rem;
  padding: var(--esp-3) var(--esp-4);
  border: var(--linea) solid var(--texto);
  border-radius: var(--radio-s);
  background-color: var(--blanco);
  color: var(--oscuro);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}

.campo__control:hover {
  border-color: var(--oscuro);
}

.campo__control:focus-visible {
  outline: none;
  border-color: var(--oscuro);
  box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--foco);
}

textarea.campo__control {
  min-height: 10rem;
  resize: vertical;
}

.campo__control[aria-invalid="true"] {
  border-color: var(--acento-aa);
  box-shadow: inset 0 0 0 1px var(--acento-aa);
}

.campo__error {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--acento-aa);
  font-size: 0.9375rem;
  font-weight: 500;
}

.campo__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radio-redondo);
  background-color: var(--acento-aa);
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: 600;
}

.campo__error[hidden] {
  display: none;
}

/* Honeypot: fuera de pantalla, fuera del orden de tabulación y del árbol de
   accesibilidad (aria-hidden en el contenedor). */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}

.formulario__nota {
  color: var(--color-texto-suave);
  font-size: 0.9375rem;
}

/* Mensajes de estado: ocultos hasta que formulario.js los muestra. */
.formulario__estado {
  display: none;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
  padding: var(--esp-4);
  border-radius: var(--radio-s);
  background-color: var(--blanco);
  font-weight: 500;
}

.formulario__estado.is-visible {
  display: flex;
}

.formulario__estado--error {
  border-left: 4px solid var(--acento-aa);
  color: var(--acento-aa);
}

.formulario__estado--exito {
  border-left: 4px solid var(--oscuro);
  color: var(--oscuro);
}

/* Indicador de envío dentro del botón. */
.boton__cargando {
  display: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-redondo);
  animation: girar 0.8s linear infinite;
}

.boton[aria-busy="true"] .boton__cargando {
  display: inline-block;
}

@keyframes girar {
  to { transform: rotate(1turn); }
}

@media (min-width: 40em) {
  .formulario__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo--ancho {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   15. Nosotros
   ========================================================================== */

/* Equipo: 6 perfiles en una fila (3 × 2 por debajo de 64em). La sección
   entera cabe en una pantalla. Los retratos son una maqueta generada con IA
   hasta tener fotos reales (docs-2.0/ASSETS-PENDIENTES.md). */
.equipo-seccion > .contenedor {
  padding-block: clamp(2.5rem, 1.8rem + 2.8vw, 4.5rem);
}

.equipo-seccion__cabeza {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.equipo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-5) clamp(0.625rem, 0.3rem + 1.3vw, 1.25rem);
}

.perfil {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.perfil .medio {
  --proporcion: 4 / 5;
  margin-bottom: var(--esp-2);
}

.perfil__cargo {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: clamp(0.875rem, 0.82rem + 0.24vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.25;
}

@media (min-width: 64em) {
  .equipo {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* ==========================================================================
   16. Legales
   ========================================================================== */

.legal h2 {
  scroll-margin-top: var(--header-alto);
}


/* ==========================================================================
   16a. Novedades
   --------------------------------------------------------------------------
   Etiqueta lateral calipso (--menta) que late apenas, y un <dialog> con las
   últimas novedades en tarjetas. Lo maneja assets/js/novedades.js. Sin JS la
   etiqueta no se muestra (nace con [hidden]).
   ========================================================================== */

.novedades-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 30;
  /* Texto vertical de abajo hacia arriba: vertical-rl + 180°. Al girar, los
     lados se invierten: el borde "izquierdo" del elemento es el que toca la
     ventana. */
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  width: 2rem;
  padding: var(--esp-4) 0;
  border: var(--linea) solid var(--linea-color);
  border-left: 0;
  border-radius: 0 var(--radio-m) var(--radio-m) 0;
  background-color: var(--menta);
  color: var(--oscuro);
  box-shadow: var(--sombra-1);
  font-family: var(--familia-titulos);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.novedades-tab[hidden] {
  display: none;
}

/* El latido: un aro calipso que se abre y se desvanece, y un parpadeo leve
   del fondo. Suave y lento (2,8 s); se pausa al apuntarlo. */
.novedades-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: novedades-latido 2.8s ease-out infinite;
}

.novedades-tab:hover,
.novedades-tab:focus-visible {
  background-color: var(--oscuro);
  color: var(--blanco);
}

.novedades-tab:hover::after,
.novedades-tab:focus-visible::after {
  animation-play-state: paused;
}

@keyframes novedades-latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--menta), var(--oscuro) 30%); opacity: 1; }
  70%  { box-shadow: 0 0 0 0.75rem transparent; opacity: 1; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

@media (min-width: 64em) {
  .novedades-tab {
    width: 2.75rem;
    font-size: 0.875rem;
  }
}

/* Con el menú abierto o el lightbox abierto no estorba. */
html[data-menu-abierto] .novedades-tab {
  visibility: hidden;
}

html[data-novedades-abierto] body {
  overflow: hidden;
}

.novedades {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--esp-5);
  border: 0;
  overflow: hidden;
  background-color: rgb(26 26 26 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
}

.novedades[open] {
  display: grid;
  place-items: center;
}

.novedades::backdrop {
  background: transparent;
}

.novedades__panel {
  width: min(100%, 64rem);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  border-radius: var(--radio-m);
  background-color: var(--fondo);
  box-shadow: var(--sombra-2);
  animation: lightbox-entrada var(--dur-lenta) var(--curva);
}

.novedades__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-6);
}

.novedades__cerrar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--linea) solid var(--oscuro);
  border-radius: var(--radio-redondo);
  background-color: var(--fondo);
  color: var(--oscuro);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.novedades__cerrar:hover {
  background-color: var(--oscuro);
  color: var(--blanco);
}

/* ---- Carrusel -------------------------------------------------------- */
.novedades__carrusel {
  display: grid;
  gap: var(--esp-4);
}

/* La pista desliza con scroll-snap: funciona con el dedo y el trackpad sin
   JS. novedades.js agrega flechas, puntos y teclado. */
.novedades__pista {
  position: relative;   /* offsetParent de las tarjetas, para calcular el desplazamiento */
  display: flex;
  gap: var(--esp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.novedades__pista::-webkit-scrollbar {
  display: none;
}

.noticia {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radio-m);
  background-color: var(--blanco);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.noticia__medio {
  overflow: hidden;   /* sin esto, las imágenes estiran el alto y se pierde la proporción */
  aspect-ratio: 16 / 9;
  background-color: var(--oscuro);
}

.noticia__medio img,
.noticia__medio video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mosaico de tres imágenes: una grande a la izquierda y dos a la derecha. */
.noticia__medio--mosaico {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  background-color: var(--crema);
}

.noticia__medio--mosaico img:first-child {
  grid-row: 1 / span 2;
}

.noticia__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--esp-3);
  padding: clamp(1.25rem, 0.9rem + 1.3vw, 2rem);
}

.noticia__cuerpo > p:not(.rotulo) {
  color: var(--color-texto-suave);
}

.noticia__tag {
  color: var(--acento-aa);
}

.noticia__boton {
  margin-top: var(--esp-2);
}

/* Escritorio: imagen o video a la izquierda y el texto a la derecha. */
@media (min-width: 48em) {
  .noticia {
    flex-direction: row;
  }

  /* La imagen o el video rellenan el alto de la tarjeta (la de mayor
     alto manda); object-fit: cover recorta lo que sobre. */
  .noticia__medio {
    flex: 0 0 62%;
  }

  .noticia__cuerpo {
    padding-inline: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }
}

/* Flechas y puntos */
.novedades__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
}

.novedades__flecha {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--linea) solid var(--oscuro);
  border-radius: var(--radio-redondo);
  background-color: transparent;
  color: var(--oscuro);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.novedades__flecha:hover {
  background-color: var(--oscuro);
  color: var(--blanco);
}

.novedades__puntos {
  display: flex;
  align-items: center;
}

.novedades__punto {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
}

.novedades__punto::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border: var(--linea) solid var(--oscuro);
  border-radius: var(--radio-redondo);
  transition: background-color var(--dur-rapida) var(--curva), width var(--dur-rapida) var(--curva);
}

.novedades__punto[aria-current="true"]::before {
  width: 1.5rem;
  background-color: var(--oscuro);
}

@media (max-width: 47.99em) {
  .novedades {
    padding: 0;
  }

  /* Pantalla completa: título arriba y el carrusel centrado en el resto. */
  .novedades__panel {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .novedades__carrusel {
    margin-block: auto;
  }
}


/* ==========================================================================
   16b. Móvil centrado
   --------------------------------------------------------------------------
   Por debajo de 48em todo el contenido va centrado (pedido de Tomás, 2.1).
   El header no: logo a la izquierda y menú a la derecha. Lo que se escribe
   en los campos del formulario sigue alineado a la izquierda.
   ========================================================================== */

@media (max-width: 47.99em) {
  main,
  .footer,
  .novedades,
  .lightbox {
    text-align: center;
  }

  .hero-video__texto,
  .hero-video__cierre,
  .hero-book__cabeza,
  .grilla-rotulo__cabeza,
  .servicio,
  .cta__texto,
  .mensaje,
  .contacto__intro,
  .contacto__extra,
  .footer__marca,
  .footer__grupo,
  .footer__lista,
  .equipo-seccion__cabeza,
  .noticia__cuerpo,
  .proyecto-compartir,
  .perfil,
  .proyecto-encabezado__texto,
  .lista-punto__item,
  .header__nav {
    align-items: center;
  }

  .hero__pie,
  .proyecto-encabezado,
  .cta__grilla,
  .contacto__dato {
    justify-items: center;
  }

  .acciones,
  .compartir,
  .hero__bajada,
  .servicio__items,
  .tabs__lista,
  .contacto__redes,
  .lista-punto__titulo,
  .campo__etiqueta,
  .formulario__pie,
  .header__enlace {
    justify-content: center;
  }

  .tarjeta__pie {
    flex-direction: column;
    align-items: center;
    gap: var(--esp-1);
  }

  .proyecto-card__tipo {
    max-width: none;
    text-align: center;
  }

  .prosa,
  .proyecto-bajada,
  .footer__dato,
  .hero__bajada .t-lead {
    margin-inline: auto;
  }

  .prosa ul {
    padding-left: 0;
    list-style-position: inside;
  }

  .contacto__dato {
    grid-template-columns: none;
  }

  .campo__control {
    text-align: left;
  }

  /* Lightbox de proyectos: el relleno derecho que en escritorio deja sitio a la
     ✕ descentraba el título y los botones 24 px. En móvil la ✕ va fija arriba
     y el encabezado ya baja para no tocarla. */
  .lightbox .proyecto-encabezado__texto {
    padding-right: 0;
  }

  /* Footer: el logo va centrado, sin la compensación del aire izquierdo que lo
     alinea al margen en escritorio. */
  .footer__logo img {
    margin-left: 0;
  }

  /* Novedades: título centrado y la ✕ a un costado. */
  .novedades__cabeza {
    position: relative;
    justify-content: center;
    padding-inline: 3.25rem;
  }

  .novedades__cerrar {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}


/* ==========================================================================
   17. Movimiento reducido
   --------------------------------------------------------------------------
   Sin transiciones ni animaciones. El marquee se detiene y muestra todos los
   logos en una grilla; el video del hero no arranca solo (sitio.js).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__pista {
    width: auto;
  }

  .marquee__grupo {
    flex-wrap: wrap;
    margin-right: 0;
  }

  .marquee__grupo[aria-hidden="true"] {
    display: none;
  }

  .tarjeta:hover .medio img,
  .blog-tarjeta__enlace:hover .blog-tarjeta__portada img,
  .redes a:hover img,
  .whatsapp:hover {
    transform: none;
  }
}


/* ==========================================================================
   18. Blog: índice (/blog) y artículos (/blog/<slug>)
   --------------------------------------------------------------------------
   El artículo llegó con su propia hoja (crema y beige). Acá se pasa a la
   paleta 2.0: fondo blanco, recuadros de lectura en menta, líneas grises
   neutras y los paneles negros con datos destacados tal como estaban. La
   estructura (clases y HTML) no cambia. Todo va bajo .blog para no chocar
   con clases del sitio (.hero, .tag, .card…).

   En móvil el texto del artículo va alineado a la izquierda: es lectura
   larga, con tablas y listas, y no se centra como el resto (16b).
   ========================================================================== */

/* ---- Índice ---- */

.blog-lista {
  display: grid;
  gap: var(--esp-6);
  list-style: none;
  padding: 0;
}

.blog-tarjeta__enlace {
  display: grid;
  gap: var(--esp-5);
  color: inherit;
  text-decoration: none;
}

@media (min-width: 48em) {
  .blog-tarjeta__enlace {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: var(--esp-6);
  }
}

.blog-tarjeta__portada {
  --proporcion: 4 / 3;   /* la de la ilustración (400 × 300): sin recorte */
  background-color: var(--oscuro);
}

.blog-tarjeta__portada img {
  transition: transform var(--dur-media) var(--curva);
}

.blog-tarjeta__enlace:hover .blog-tarjeta__portada img {
  transform: scale(1.03);
}

.blog-tarjeta__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}

.blog-tarjeta__titulo {
  color: var(--color-titulo);
  text-wrap: balance;
}

.blog-tarjeta__enlace:hover .blog-tarjeta__titulo {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.blog-tarjeta__descripcion {
  color: var(--color-texto-suave);
}

@media (max-width: 47.99em) {
  .blog-tarjeta__texto {
    align-items: center;
  }
}

/* ---- Artículo ---- */

body.pagina-articulo {
  background-color: var(--blanco);
}

/* Mientras se lee un artículo no hay etiqueta lateral de novedades. El
   botón de WhatsApp se queda. */
body.pagina-articulo .novedades-tab {
  display: none;
}

.blog {
  --on-dark: var(--blanco);
  --on-dark-muted: rgb(255 255 255 / 0.72);
  --regla: rgb(26 26 26 / 0.18);
  --regla-oscura: rgb(255 255 255 / 0.2);
  --gris-barra: rgb(255 255 255 / 0.45);
  --ancho-texto: min(100% - 2.5rem, 46rem);
  --ancho-ancho: min(100% - 2.5rem, 72rem);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: left;
}

.blog h1,
.blog h2,
.blog h3,
.blog h4 {
  font-family: var(--familia-titulos);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--oscuro);
}

.blog p {
  margin: 0 0 1.1rem;
}

.blog a {
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.blog a:hover {
  background-color: var(--menta);
  text-decoration-color: transparent;
}

.blog .wrap {
  width: var(--ancho-texto);
  margin-inline: auto;
}

.blog .wide {
  width: var(--ancho-ancho);
  margin-inline: auto;
}

/* Portada: bloque oscuro con el titular */
.blog .hero {
  background-color: var(--oscuro);
  color: var(--on-dark);
  padding: clamp(2.5rem, 7vw, 5.5rem) 0;
}

.blog .hero h1,
.blog .hero h2,
.blog .hero h3 {
  color: var(--blanco);
}

.blog .hero .wide {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60em) {
  .blog .hero .wide {
    grid-template-columns: 1.5fr 0.8fr;
    align-items: end;
  }
}

.blog .issue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .issue strong {
  font-family: var(--familia-titulos);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-dark);
}

.blog .issue span,
.blog .issue time {
  padding-left: 1.25rem;
  border-left: 1px solid var(--regla-oscura);
}

.blog .hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  line-height: 1.04;
  max-width: 20ch;
}

.blog .hero .bajada {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: 1.15rem;
  color: var(--on-dark-muted);
}

.blog .cover {
  margin: 0;
}

.blog .cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-boton);
}

/* Lo esencial */
.blog .esencial {
  padding: 3rem 0 1rem;
}

.blog .esencial h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.blog .esencial ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--regla);
}

.blog .esencial li {
  border-bottom: 1px solid var(--regla);
}

.blog .esencial a {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
}

.blog .esencial a:hover {
  background-color: var(--menta-claro);
}

.blog .esencial b {
  font-weight: 600;
}

/* Temas colapsables: <details name="temas">, uno abierto a la vez
   (assets/js/blog.js). Cerrados son una lista de títulos. */
.blog .story {
  border-top: 1px solid var(--regla);
  scroll-margin-top: calc(var(--header-alto) + 1rem);
}

.blog .story:first-of-type {
  margin-top: 3rem;
  border-top: 2px solid var(--oscuro);
}

.blog .story:last-of-type {
  border-bottom: 1px solid var(--regla);
}

.blog .story__tema > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}

.blog .story__tema > summary::-webkit-details-marker {
  display: none;
}

.blog .story__tema > summary:hover .story__titulos h2 {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.blog .story__tema > summary:focus-visible {
  outline-offset: 4px;
}

.blog .cat {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--acento);   /* el naranja de marca, a pedido de Tomás */
}

.blog .story h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  margin: 0;
}

/* Más / menos: dos barras; la vertical se esconde al abrir. */
.blog .story__mas {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--menta);
}

.blog .story__mas::before,
.blog .story__mas::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1rem;
  height: 2px;
  background-color: var(--oscuro);
  transform: translate(-50%, -50%);
}

.blog .story__mas::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.blog .story__tema[open] > summary .story__mas::after {
  opacity: 0;
}

.blog .story__tema > summary:hover .story__mas {
  background-color: var(--acento);
}

.blog .story__cuerpo {
  padding: 0.5rem 0 3rem;
}

.blog .story h3 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.5rem;
}

.blog .lead {
  font-size: 1.2rem;
  line-height: 1.55;
}

.blog .lectura {
  background-color: var(--menta);
  border-radius: var(--radio-boton);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}

.blog .lectura b {
  display: block;
  font-family: var(--familia-titulos);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.blog .lectura p:last-child {
  margin-bottom: 0;
}

.blog .fuentes {
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin: 1.25rem 0 0;
}

.blog .fuentes b {
  color: var(--oscuro);
}

/* Paneles negros con datos destacados */
.blog .panel {
  background-color: var(--oscuro);
  color: var(--on-dark);
  border-radius: var(--radio-boton);
  padding: 1.5rem;
  margin: 1.75rem 0;
}

.blog .panel h3 {
  font-size: 1.05rem;
  margin: 0 0 1rem;
  color: var(--on-dark);
}

.blog .panel small {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}

.blog .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .blog .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.blog .steps li {
  border-top: 2px solid var(--regla-oscura);
  padding-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .steps li.hoy {
  border-top-color: var(--acento);
}

.blog .steps b {
  display: block;
  font-family: var(--familia-titulos);
  font-size: 1.15rem;
  color: var(--on-dark);
}

.blog .steps li.hoy b {
  color: var(--acento);
}

.blog .dates {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .blog .dates {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog .dates div,
.blog .stats div,
.blog .cols2 div {
  border-top: 2px solid var(--regla-oscura);
  padding-top: 0.75rem;
}

.blog .dates div {
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .dates b {
  display: block;
  font-family: var(--familia-titulos);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--acento);
}

.blog .dates span {
  display: block;
  color: var(--on-dark);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.blog .vs {
  display: grid;
  gap: 1.25rem;
}

.blog .vs div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.blog .vs b {
  font-family: var(--familia-titulos);
  font-size: 1.6rem;
  line-height: 1.1;
}

.blog .vs .bar {
  height: 10px;
  border-radius: 5px;
  background-color: rgb(255 255 255 / 0.14);
  overflow: hidden;
}

.blog .vs .bar i {
  display: block;
  height: 100%;
  background-color: var(--acento);
}

.blog .vs .bar i.alt {
  background-color: var(--gris-barra);
}

.blog .vs p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .stats {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40em) {
  .blog .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog .stats b {
  display: block;
  font-family: var(--familia-titulos);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--acento);
}

.blog .stats span {
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .cols2 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40em) {
  .blog .cols2 {
    grid-template-columns: 1fr 1fr;
  }
}

.blog .cols2 div {
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.blog .cols2 b {
  display: block;
  font-family: var(--familia-titulos);
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--acento);
  margin-bottom: 0.2rem;
}

/* Listas y tabla */
.blog .num {
  padding-left: 1.25rem;
}

.blog .num li {
  margin-bottom: 0.8rem;
  padding-left: 0.25rem;
}

.blog .num li::marker {
  font-family: var(--familia-titulos);
  font-weight: 700;
}

.blog .scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.blog table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.97rem;
}

.blog caption {
  text-align: left;
  font-family: var(--familia-titulos);
  font-weight: 700;
  font-size: 1.05rem;
  padding-bottom: 0.6rem;
}

.blog th,
.blog td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid var(--regla);
}

.blog th {
  font-weight: 600;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.blog td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

/* Cierre: bloque oscuro con la invitación a contactar */
.blog .cierre {
  background-color: var(--oscuro);
  color: var(--on-dark);
  margin-top: 5rem;
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.blog .cierre h2 {
  color: var(--blanco);
}

.blog .cierre p {
  max-width: 44ch;
}

.blog .cierre a:hover {
  color: var(--oscuro);
}

.blog .cierre .tag {
  font-family: var(--familia-titulos);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  color: var(--acento);
  margin: 1.75rem 0 0;
}

.blog .btn {
  display: inline-block;
  background-color: var(--acento);
  color: var(--oscuro);
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radio-boton);
  margin: 0.25rem 0.75rem 0.25rem 0;
}

.blog .btn:hover {
  background-color: var(--blanco);
  color: var(--oscuro);
}

.blog .btn--sec {
  background-color: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--blanco);
}

.blog .btn--sec:hover {
  background-color: var(--blanco);
  color: var(--oscuro);
}

.blog .cierre :focus-visible {
  outline-color: var(--acento);
}

/* Fotos del artículo: se ven enteras (son piezas con texto), sin recorte. */
.blog .foto {
  margin: 1.75rem 0;
}

.blog .foto img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-boton);
  background-color: var(--menta-claro);
}

/* Par cuadrada + horizontal: misma altura (1 : 16/9). En móvil, una bajo otra. */
.blog .fotos {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0;
}

.blog .fotos .foto {
  margin: 0;
}

@media (min-width: 40em) {
  .blog .fotos {
    grid-template-columns: 1fr 1.7778fr;
    align-items: start;
  }

  /* Tres piezas: la cuadrada ocupa el alto de las dos horizontales apiladas. */
  .blog .fotos--tres {
    grid-template-columns: 388fr 331fr;
  }

  .blog .fotos--tres .foto:first-child {
    grid-row: span 2;
  }
}
/* Figuras y tarjetas */
.blog .cards {
  display: grid;
  gap: 1.25rem;
  margin: 1.25rem 0 1.75rem;
}

@media (min-width: 48em) {
  .blog .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog .card {
  border-top: 2px solid var(--oscuro);
  padding-top: 0.9rem;
}

.blog .card h4 {
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0 0 0.35rem;
}

.blog .card p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.blog .card .tag {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Aviso legal al pie del artículo */
.blog .articulo-pie {
  padding: 2rem 0 3rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.blog .articulo-pie p {
  margin: 0 0 0.6rem;
}


/* ==========================================================================
   19. Landings de anuncios (/lp/<slug>)
   20. Propuestas (/propuesta/<cliente>)
   --------------------------------------------------------------------------
   Las genera scripts/landings.mjs. Reutilizan los componentes de la home
   (hero con medio, servicios, ADN) y de contacto (formulario); solo suman el
   header sin menú, la galería de piezas y el pie reducido.
   ========================================================================== */

/* Header sin menú: logo a la izquierda, llamados a la acción a la derecha. */
.lp-header__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.lp-header__wa,
.lp-header__largo {
  display: none;
}

/* Móvil: "Let's talk" (el botón de la marca). "Agenda una asesoría" en una
   sola línea no cabe junto al logo en pantallas de 360 px o menos y ensancha
   toda la página. */
@media (min-width: 48em) {
  .lp-header__wa {
    display: inline-flex;
  }

  .lp-header__corto {
    display: none;
  }

  .lp-header__largo {
    display: inline;
  }
}

/* Móvil: los dos botones del hero a todo el ancho, iguales. */
@media (max-width: 47.99em) {
  .pagina-landing .hero-video__cierre,
  .pagina-landing .hero-video__cierre .acciones {
    width: 100%;
  }

  .pagina-landing .hero-video__cierre .acciones {
    flex-direction: column;
    align-items: stretch;
  }

  /* El texto puede pasar a dos líneas: en pantallas de ~360 px "Agenda una
     asesoría gratuita" en una sola línea es más ancho que la columna. */
  .pagina-landing .hero-video__cierre .acciones .boton {
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    padding-block: 0.75rem;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.25;
  }
}

/* Servicios sobre fondo negro: las líneas de la lista pasan a claras y los
   nombres de cada servicio van en naranja de marca. */
.tema-oscuro .servicio {
  border-color: var(--linea-color-invertida);
}

.tema-oscuro .servicio > h3 {
  color: var(--acento);
}

/* Anclas (#contacto): el header fijo no debe tapar el destino. */
.pagina-landing [id] {
  scroll-margin-top: calc(var(--header-alto) + var(--esp-4));
}

/* Piezas del portafolio: una ancha y dos al lado. Son tarjetas del portafolio:
   abren el proyecto en el lightbox (lightbox.js). */
.lp-galeria {
  display: grid;
  gap: var(--esp-6) clamp(0.75rem, 0.3rem + 1.8vw, 1.5rem);
}

.lp-galeria__item .medio {
  --proporcion: 4 / 3;
}

.lp-galeria__item--ancho .medio {
  --proporcion: 16 / 9;
}

@media (min-width: 48em) {
  .lp-galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-galeria__item--ancho {
    grid-column: 1 / -1;
  }
}

/* Pie: solo la barra legal. */
.lp-footer {
  padding-top: 0;
}

.lp-footer .footer__barra {
  margin-top: 0;
}


/* ==========================================================================
   20. Propuestas (/propuesta/<cliente>)
   --------------------------------------------------------------------------
   Páginas privadas para presentar una propuesta a un cliente: noindex, sin
   sitemap y sin enlaces desde el sitio. Reusan header, grilla con rótulo,
   botones y bandas; acá solo lo propio: portada, menú-índice, barra inferior
   estilo app, línea de tiempo, tarjetas colapsables (<details>), cifras, la
   foto de la plataforma, precios y los diálogos (video, detalle y agenda).
   En móvil y tableta (< 64em) todo el contenido va centrado.
   ========================================================================== */

.pagina-propuesta {
  padding-bottom: 5rem;
}

.pagina-propuesta [id] {
  scroll-margin-top: calc(var(--header-alto) + var(--esp-4));
}

/* Contexto, Servicios y Precio y condiciones son vistas separadas: con JS
   (clase js-vistas) se ve una a la vez; sin JS, todas seguidas. */
.js-vistas .prop-vista:not(.is-activa) {
  display: none;
}

.prop-vista.is-activa {
  animation: prop-entra var(--dur-media) var(--curva);
}

.prop-vista > .seccion:first-child > .contenedor::before {
  content: none;
}

@media (max-width: 63.99em) {
  .pagina-propuesta main,
  .pagina-propuesta .prop-pie {
    text-align: center;
  }
}

/* ---- Header: avance de lectura, botón de menú y panel con el índice ---- */
.prop-avance {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background-color: var(--acento);
  transform: scaleX(var(--avance, 0));
  transform-origin: 0 50%;
}

.pagina-propuesta .header__boton-menu {
  display: inline-flex;
  gap: var(--esp-3);
  width: auto;
  padding-inline: var(--esp-2);
  font-family: var(--familia-titulos);
}

.prop-menu-texto {
  display: none;
  font-size: 0.9375rem;
}

@media (min-width: 64em) {
  .prop-menu-texto { display: inline; }
}

.prop-menu {
  position: fixed;
  inset: var(--header-alto) 0 0;
  z-index: 39;
  overflow-y: auto;
  background-color: var(--fondo);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--dur-media) var(--curva),
    transform var(--dur-media) var(--curva),
    visibility 0s linear var(--dur-media);
}

.prop-menu.is-abierto {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-media) var(--curva),
    transform var(--dur-media) var(--curva);
}

html.prop-menu-abierto {
  overflow: hidden;
}

.prop-menu__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-5);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--esp-6) var(--margen) var(--esp-8);
}

.prop-menu__botones {
  display: grid;
  gap: var(--esp-3);
  width: 100%;
}

.prop-indice {
  width: 100%;
}

.prop-indice a {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: 4.5rem;
  border-bottom: var(--linea) solid var(--linea-color-suave);
  color: var(--oscuro);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-3);
  text-align: left;
  text-decoration: none;
  transition: padding-left var(--dur-media) var(--curva), color var(--dur-rapida) var(--curva);
}

.prop-indice a::after {
  content: "→";
  margin-left: auto;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}

.prop-indice a:hover,
.prop-indice a:focus-visible,
.prop-indice a[aria-current] {
  padding-left: var(--esp-2);
  color: var(--acento-aa);
}

.prop-indice a:hover::after,
.prop-indice a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.prop-indice__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.prop-indice small {
  margin-bottom: 0.125rem;
  color: var(--acento-aa);
  font-size: var(--fs-etiqueta);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.prop-num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio-redondo);
  background-color: var(--acento);
  color: var(--oscuro);
  font-family: var(--familia-titulos);
  font-size: 0.8125rem;
  line-height: 1;
}

.prop-num--menta {
  background-color: var(--menta);
}

/* ---- Barra inferior, estilo app ---- */
.prop-tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: flex;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-2) calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
  border-top: var(--linea) solid var(--linea-color-suave);
  background-color: var(--fondo);
}

.prop-tabbar a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 3.25rem;
  padding: var(--esp-1);
  border-radius: var(--radio-s);
  color: var(--texto-suave);
  font-family: var(--familia-titulos);
  font-size: 0.6875rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva), background-color var(--dur-rapida) var(--curva);
}

.prop-tabbar svg {
  width: 1.5rem;
  height: 1.5rem;
}

.prop-tabbar a:hover,
.prop-tabbar a[aria-current] {
  color: var(--acento-aa);
}

@media (min-width: 64em) {
  .prop-tabbar {
    inset: auto auto var(--esp-5) 50%;
    gap: var(--esp-1);
    padding: var(--esp-1);
    border: var(--linea) solid var(--linea-color);
    border-radius: var(--radio-redondo);
    box-shadow: var(--sombra-1);
    transform: translateX(-50%);
  }

  .prop-tabbar a {
    flex: none;
    flex-direction: row;
    gap: var(--esp-2);
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-5);
    border-radius: var(--radio-redondo);
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .prop-tabbar a[aria-current] {
    background-color: var(--oscuro);
    color: var(--blanco);
  }
}

/* ---- Servicios y Precio ----
   Escritorio: titular y bajada a la izquierda, contenido a la derecha (grilla
   con rótulo, sobre fondo claro). Móvil y tableta (< 64em): el titular y la
   bajada van en una banda negra de borde a borde sobre el contenido. */
@media (max-width: 63.99em) {
  .prop-sec > .contenedor {
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  }

  .prop-sec > .contenedor::before {
    content: none;
  }

  .prop-sec > .contenedor > .grilla-rotulo:first-child {
    gap: clamp(2rem, 1.2rem + 3vw, 3rem);
  }

  .prop-sec > .contenedor > .grilla-rotulo:first-child > .grilla-rotulo__cabeza {
    --color-texto: rgb(255 255 255 / 0.86);
    --color-texto-suave: rgb(255 255 255 / 0.72);
    --color-titulo: var(--blanco);
    --linea-color: var(--linea-color-invertida);
    align-items: center;
    margin-inline: calc(var(--margen) * -1);
    padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--margen);
    background-color: var(--oscuro);
    color: var(--color-texto);
  }

  .prop-sec > .contenedor > .grilla-rotulo:first-child > .grilla-rotulo__cabeza > p:not(.rotulo) {
    max-width: 46rem;
  }
}

.prop-carga {
  max-width: 52rem;
}

.prop-carga > .prop-subtitulo {
  margin-top: var(--seccion-pad);
}

/* ---- Banner de paso a la vista siguiente ---- */
.prop-siguiente > .prop-siguiente__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding-block: var(--esp-7);
}

.prop-siguiente__fila .boton {
  min-width: min(100%, 15rem);
}

/* Si sigue a otra banda negra (Plataforma), una línea fina las separa. */
.tema-oscuro + .prop-siguiente > .prop-siguiente__fila {
  position: relative;
}

.tema-oscuro + .prop-siguiente > .prop-siguiente__fila::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--margen);
  border-top: var(--linea) solid var(--linea-color-invertida);
}

.prop-flecha-izq {
  display: inline-block;
  transition: transform var(--dur-rapida) var(--curva);
}

.boton:hover .prop-flecha-izq {
  transform: translateX(-3px);
}

/* ---- Portada ---- */
.prop-hero__fila {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

/* Más específico que `.banda > .contenedor` (que le suma el relleno de sección). */
.prop-hero > .prop-hero__fila {
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) var(--esp-5);
}

.prop-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
}

.prop-hero__titulo {
  max-width: 18ch;
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.prop-hero__texto .t-lead {
  color: var(--color-texto);
}

.prop-hero__pie {
  display: flex;
  justify-content: center;
  gap: var(--esp-3);
  padding-top: var(--esp-4);
  border-top: var(--linea) solid var(--linea-color);
  text-align: center;
}

.prop-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

/* ---- Brief ---- */
.prop-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-4) var(--esp-4);
  margin-top: var(--esp-6);
}

.prop-datos > div {
  padding-top: var(--esp-3);
  border-top: var(--linea) solid var(--linea-color);
}

.prop-datos dd {
  margin-top: var(--esp-2);
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
  line-height: 1.25;
}

.prop-bloque {
  margin-top: var(--seccion-pad);
}

/* ---- Línea de tiempo: vertical en móvil, horizontal en escritorio ---- */
.prop-proceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  margin-top: var(--seccion-pad);
  text-align: center;
}

.prop-linea {
  display: grid;
  width: 100%;
  max-width: 26rem;
  margin-top: var(--esp-5);
}

.prop-paso {
  position: relative;
  padding-bottom: calc(var(--esp-6) + var(--esp-5));
}

/* Vertical: tramo hacia la etapa siguiente, debajo del texto (con la etapa abierta
   o cerrada) y separado de la punta de flecha. */
.prop-paso::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: var(--esp-6);
  background-color: var(--linea-color);
  transition: background-color var(--dur-lenta) var(--curva);
}

.prop-paso:last-child {
  padding-bottom: 0;
}

.prop-paso:last-child::after {
  content: none;
}

.prop-paso.is-hecho::after {
  background-color: var(--acento);
}

.prop-paso summary {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  list-style: none;
  cursor: pointer;
}

.prop-paso summary::-webkit-details-marker {
  display: none;
}

.prop-paso summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc(var(--esp-1) * -1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--texto-suave);
  transform: rotate(45deg);
  transition: transform var(--dur-media) var(--curva);
}

.prop-paso details[open] summary::after {
  transform: rotate(-135deg);
}

.prop-paso .prop-num {
  background-color: var(--menta);
  transition: transform var(--dur-lenta) var(--curva), background-color var(--dur-lenta) var(--curva), box-shadow var(--dur-lenta) var(--curva);
}

.prop-paso h4 {
  color: var(--color-texto-suave);
  transform-origin: 50% 0;
  transition: color var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}

.prop-paso.is-hecho .prop-num {
  background-color: var(--acento);
}

.prop-paso.is-hecho h4 {
  color: var(--color-titulo);
}

.prop-paso.is-activo .prop-num {
  background-color: var(--acento);
  box-shadow: 0 0 0 0.375rem rgb(255 69 44 / 0.2);
  transform: scale(1.3);
}

.prop-paso.is-activo h4 {
  color: var(--color-titulo);
  transform: scale(1.12);
}

.prop-paso summary:hover h4 {
  color: var(--acento-aa);
}

.prop-paso details p {
  max-width: 22rem;
  margin: var(--esp-3) auto 0;
  animation: prop-entra var(--dur-media) var(--curva);
}

@media (min-width: 64em) {
  .prop-linea {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    max-width: none;
  }

  .prop-paso {
    padding: 0 var(--esp-3);
  }

  /* Horizontal: la línea une los círculos, de centro a centro. */
  .prop-paso::after {
    top: 1.25rem;
    bottom: auto;
    left: 50%;
    width: 100%;
    height: 2px;
  }
}

/* ---- Tarjetas colapsables ---- */
.prop-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: start;
}

.prop-card {
  border-radius: var(--radio-m);
  background-color: var(--crema);
  outline: var(--linea) solid transparent;
  transition: outline-color var(--dur-rapida) var(--curva);
}

.prop-card:hover,
.prop-card[open] {
  outline-color: var(--linea-color);
}

.prop-card > summary {
  display: grid;
  grid-template-areas: "num" "titulo" "texto" "mas";
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-5);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radio-m);
}

.prop-card > summary::-webkit-details-marker,
.prop-cond > summary::-webkit-details-marker {
  display: none;
}

.prop-card > summary .prop-card__num { grid-area: num; }
.prop-card > summary h3 { grid-area: titulo; }
.prop-card > summary .prop-card__texto { grid-area: texto; }
.prop-card > summary .prop-mas { grid-area: mas; margin-top: var(--esp-2); }

.prop-card__num {
  color: var(--acento-aa);
  font-family: var(--familia-titulos);
  font-size: var(--fs-etiqueta);
  letter-spacing: var(--tracking-rotulo);
}

.prop-card__texto {
  color: var(--color-texto);
}

.prop-card__cuerpo {
  padding: 0 var(--esp-5) var(--esp-5);
}

.prop-card[open] .prop-card__cuerpo,
.prop-cond[open] > p {
  animation: prop-entra var(--dur-media) var(--curva);
}

@keyframes prop-entra {
  from { opacity: 0; transform: translateY(-0.375rem); }
}

/* Más / menos. */
.prop-mas {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: var(--linea) solid var(--linea-color);
  border-radius: var(--radio-redondo);
  transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}

.prop-mas::before,
.prop-mas::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.75rem;
  height: 2px;
  background-color: var(--oscuro);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-media) var(--curva);
}

.prop-mas::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

[open] > summary .prop-mas::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

summary:hover .prop-mas {
  background-color: var(--oscuro);
  border-color: var(--oscuro);
}

summary:hover .prop-mas::before,
summary:hover .prop-mas::after {
  background-color: var(--blanco);
}

/* Listas: en móvil, centradas y separadas por una línea fina; en escritorio,
   con viñetas. */
.prop-lista {
  padding: 0;
  list-style: none;
}

.prop-lista li {
  padding-block: var(--esp-2);
  border-top: var(--linea) solid var(--linea-color-suave);
}

.prop-lista li:first-child {
  border-top: 0;
}

@media (min-width: 64em) {
  .prop-lista {
    padding-left: 1.25em;
    list-style: disc;
  }

  .prop-lista li {
    padding-block: 0;
    border-top: 0;
  }

  .prop-lista li + li {
    margin-top: var(--esp-2);
  }

  .prop-lista li::marker {
    color: var(--acento-aa);
  }
}

.prop-nota {
  margin-top: var(--esp-4);
}

.prop-nota .rotulo {
  margin-right: var(--esp-1);
  color: var(--acento-aa);
}

/* ---- Piezas (contenido y marketing) ---- */
.prop-pieza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border-radius: var(--radio-m);
  background-color: var(--menta);
  outline: var(--linea) solid transparent;
  transition: outline-color var(--dur-rapida) var(--curva);
}

.prop-pieza:hover {
  outline-color: var(--linea-color);
}

.prop-pieza--crema {
  background-color: var(--crema);
}

.prop-pieza__cab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
}

.prop-logo {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-s);
}

.prop-pieza .prop-lista {
  width: 100%;
}

.prop-meta {
  display: grid;
  gap: var(--esp-3);
  width: 100%;
  margin-top: var(--esp-2);
}

.prop-meta > div {
  padding-top: var(--esp-3);
  border-top: var(--linea) solid var(--linea-color);
}

.prop-meta dd {
  margin-top: var(--esp-1);
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
  line-height: 1.3;
}

.prop-pieza .boton {
  max-width: 100%;
  padding-block: var(--esp-3);
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* Contenido audiovisual: las tres tarjetas comparten filas (título, descripción,
   duración, producción, usos, ejemplo y detalles), así todo queda alineado. */
.prop-pieza--alineada {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: var(--esp-3);
  justify-items: center;
  align-content: start;
}

.prop-pieza--alineada > h3 { grid-row: 1; }
.prop-pieza--alineada > p { grid-row: 2; }

.prop-pieza--alineada > .prop-meta {
  display: grid;
  grid-row: 3 / span 3;
  grid-template-rows: subgrid;
  row-gap: var(--esp-3);
  justify-self: stretch;
  margin-top: 0;
}

.prop-pieza--alineada > [data-abrir="video"] { grid-row: 6; }
.prop-pieza--alineada > [data-abrir="detalle"] { grid-row: 7; }

@media (min-width: 64em) {
  .prop-pieza--alineada { justify-items: start; }
}

/* Objetivo de todo el marketing digital (fuera de las tarjetas). */
.prop-objetivo {
  margin-top: var(--esp-5);
  padding-top: var(--esp-3);
  border-top: var(--linea) solid var(--linea-color);
}

.prop-objetivo__texto {
  margin-top: var(--esp-1);
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-3);
  line-height: 1.25;
}

.prop-play {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-block: 0.3rem solid transparent;
  border-left: 0.5rem solid currentColor;
}

.prop-grupo--piezas {
  align-items: stretch;
}

/* ---- Cifras ---- */
.prop-subtitulo {
  margin-top: var(--seccion-pad);
  margin-bottom: var(--esp-3);
}

.prop-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.prop-cifra {
  padding: var(--esp-4) var(--esp-3);
  border-radius: var(--radio-m);
  background-color: var(--crema);
}

.prop-cifra:last-child {
  grid-column: 1 / -1;
}

.prop-cifra__pre {
  margin-top: var(--esp-3);
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
}

.prop-cifra__num {
  color: var(--acento);
  font-family: var(--familia-titulos);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.prop-cifra__texto {
  margin-top: var(--esp-2);
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
  line-height: 1.25;
}

/* ---- Plataforma ---- */
.prop-foto {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-m);
  background-color: var(--menta);
}

.prop-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prop-funciones {
  display: grid;
  gap: var(--esp-1) var(--esp-5);
  margin-top: var(--esp-5);
}

.prop-funciones li {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) 0;
  border-top: var(--linea) solid var(--linea-color);
  transition: border-color var(--dur-rapida) var(--curva);
}

.prop-funciones li:hover {
  border-color: var(--acento);
}

.prop-funciones .prop-card__num {
  color: var(--acento);
  font-size: var(--fs-titulo-3);
  letter-spacing: 0;
}

/* ---- Precio ---- */
.prop-precios {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.prop-precios th,
.prop-precios td {
  padding: var(--esp-3) var(--esp-2);
}

.prop-precios th[scope="row"] {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
  font-weight: 400;
}

.prop-precios tbody tr:not(.prop-precios__grupo) {
  border-bottom: var(--linea) solid var(--linea-color-suave);
  transition: background-color var(--dur-rapida) var(--curva);
}

.prop-precios tbody tr:not(.prop-precios__grupo):hover {
  background-color: var(--menta);
}

.prop-precios__grupo th {
  padding-top: var(--esp-6);
  color: var(--acento-aa);
}

.prop-precios td {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-variant-numeric: tabular-nums;
}

.prop-der {
  text-align: right;
}

.prop-mod {
  color: var(--color-texto-suave);
  font-family: var(--familia-texto);
  font-size: var(--fs-etiqueta);
}

.prop-aclaracion {
  margin-top: var(--esp-4);
  color: var(--color-texto-suave);
}

/* Móvil: cada servicio es una fila de dos lados (nombre y modalidad / valor);
   los títulos de grupo van centrados. */
@media (max-width: 63.99em) {
  .prop-precios thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .prop-precios tbody tr:not(.prop-precios__grupo) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--esp-4);
    padding-block: var(--esp-2);
    text-align: left;
  }

  .prop-precios tr > * {
    padding: var(--esp-1) var(--esp-2);
  }

  .prop-precios tr > th[scope="row"] { grid-column: 1; grid-row: 1; }
  .prop-precios .prop-mod { grid-column: 1; grid-row: 2; }
  .prop-precios .prop-der { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-titulo-3); }

  .prop-precios,
  .prop-precios tbody,
  .prop-precios__grupo,
  .prop-precios__grupo th {
    display: block;
    text-align: center;
  }
}

/* Descuento del pack: valores finales. */
.prop-descuento {
  display: grid;
  gap: var(--esp-5);
  margin-top: var(--esp-6);
  padding: var(--esp-5);
  border-radius: var(--radio-m);
  text-align: center;
}

.prop-descuento__num {
  margin: var(--esp-2) 0 var(--esp-3);
  color: var(--acento);
  font-family: var(--familia-titulos);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  line-height: 1;
}

.prop-pack {
  display: grid;
  gap: var(--esp-5);
  text-align: left;
}

.prop-pack__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  border-top: var(--linea) solid var(--linea-color);
}

.prop-pack__lista strong {
  flex-shrink: 0;
  color: var(--blanco);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.prop-pack .rotulo {
  margin-bottom: var(--esp-1);
  text-align: center;
}

@media (min-width: 64em) {
  .prop-descuento {
    text-align: left;
  }
}

/* ---- Condiciones ---- */
.prop-condiciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--esp-6);
  align-items: start;
}

.prop-cond {
  border-top: var(--linea) solid var(--linea-color);
}

.prop-cond > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 4rem;
  list-style: none;
  cursor: pointer;
}

/* Móvil: el título queda centrado de verdad (un espaciador del ancho del ícono). */
.prop-cond > summary::before {
  content: "";
  flex-shrink: 0;
  width: 2rem;
}

.prop-cond > summary h4 {
  flex: 1;
  font-size: var(--fs-titulo-3);
  font-weight: 400;
}

.prop-cond > p {
  padding-bottom: var(--esp-4);
}

@media (min-width: 64em) {
  .prop-cond > summary::before { content: none; }
  .prop-cond > summary h4 { text-align: left; }
}

/* ---- Cierre y pie ---- */
.prop-cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-5);
  text-align: center;
}

.prop-pie {
  padding-block: var(--esp-7);
  background-color: var(--crema);
}

.prop-pie__fila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
}

.prop-pie .header__logo {
  --logo-alto: 3.5rem;
}

.prop-pie .header__logo img {
  margin-left: 0;
  transform: translateX(calc(var(--logo-alto) * -0.014));
}

/* ---- Diálogos: video, detalle y agenda ---- */
.prop-modal {
  width: min(64rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: var(--esp-4);
  border: 0;
  border-radius: var(--radio-m);
  background-color: var(--fondo);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
  overflow: auto;
}

.prop-modal--video {
  --color-titulo: var(--blanco);
  background-color: var(--oscuro);
  color: var(--blanco);
}

.prop-modal--detalle {
  width: min(34rem, calc(100vw - 2rem));
  padding: var(--esp-5);
}

.prop-modal::backdrop {
  background-color: rgb(26 26 26 / 0.72);
}

html:has(dialog[open]) {
  overflow: hidden;
}

.prop-modal__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-3);
}

.prop-modal__cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--linea) solid currentColor;
  border-radius: var(--radio-redondo);
  background: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.prop-modal__cerrar:hover {
  background-color: var(--acento);
  border-color: var(--acento);
  color: var(--oscuro);
}

.prop-etapas > div {
  padding-block: var(--esp-3);
  border-top: var(--linea) solid var(--linea-color-suave);
}

.prop-etapas dt {
  color: var(--color-titulo);
  font-family: var(--familia-titulos);
  font-size: var(--fs-titulo-4);
}

.prop-etapas dd {
  margin-top: var(--esp-1);
}

.prop-etapas__no dd {
  color: var(--color-texto-suave);
}

@media (max-width: 47.99em) {
  .prop-etapas {
    text-align: center;
  }
}

.prop-agenda iframe {
  display: block;
  width: 100%;
  height: min(44rem, 72dvh);
  border: 0;
  border-radius: var(--radio-s);
  background-color: var(--blanco);
}

.prop-agenda__vacia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
  max-width: 36rem;
  padding: var(--esp-6) var(--esp-2) var(--esp-4);
}

.prop-agenda__aparte {
  display: inline-block;
  margin-top: var(--esp-3);
  color: var(--acento-aa);
}

@media (max-width: 47.99em) {
  .prop-modal--video,
  .prop-modal--agenda {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  /* Video: título y ✕ arriba; el video, en el centro de la pantalla. */
  .prop-modal--video[open] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .prop-modal--video .prop-modal__cabeza {
    position: absolute;
    inset: var(--esp-4) var(--esp-4) auto;
    margin: 0;
  }

  .prop-agenda iframe {
    height: calc(100dvh - 7rem);
  }
}

/* ---- Tableta y escritorio ---- */
@media (min-width: 48em) {
  .prop-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop-grupo--piezas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .prop-condiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop-funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
}

@media (min-width: 64em) {
  .prop-pieza { align-items: flex-start; }
  .prop-pieza__cab { justify-content: flex-start; }
  .prop-datos { gap: var(--esp-5) var(--esp-6); }
  .prop-datos dd { font-size: var(--fs-titulo-3); }
  .prop-card > summary {
    grid-template-areas: "num mas" "titulo titulo" "texto texto";
    grid-template-columns: 1fr auto;
    justify-items: start;
  }
  .prop-card > summary .prop-mas { margin-top: 0; }
  .prop-pack { grid-template-columns: 1.6fr 1fr; gap: var(--esp-6); }
}

@media (min-width: 80em) {
  .prop-grupo--piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prop-grupo--piezas > :last-child:nth-child(odd) { grid-column: auto; }
}