/* La página principal de Reverde (reverde.cl/). Hoja propia: los paneles usan
   estilos.css, y 404.html y punto.html siguen con sitio.css.

   Lo que manda es la impresión de seriedad: la van a mirar el municipio y las instituciones.
   Sobriedad antes que simpatía, orden antes que energía. Blanco, fondo claro y verde profundo;
   el lima y el dorado solo como acento, en la moneda, el trazo y la hojita.

   Base: docs/marca/biblioteca.md. Las fotos pasan todas por el mismo tratamiento
   (herramientas/fotos/LEEME.md) y tienen dos proporciones: 3:2 y 4:5. Sin degradados.

   Movimiento: 140 a 180 ms, ease-out, solo cuando responde a algo que hizo la persona.
   Nada entra al hacer scroll. Todo funciona sin JavaScript. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fuentes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/poppins-700.woff2") format("woff2"); }

:root {
  --verde: #127A3E;
  --verde-oscuro: #0B4D28;
  --lima: #63C33E;
  --ambar: #E08A1E;
  --terracota: #C2694A;
  --dorado: #FFC21A;
  --fondo: #EEF6E9;
  --tarjeta-alterna: #F4FAEF;
  --borde: #D6E8CB;
  --texto: #0E2A17;
  --secundario: #5B7661;
  --blanco: #FFFFFF;
  --radio: 28px;
  --radio-chico: 22px;
  --margen: clamp(20px, 4vw, 56px);
  --seccion: clamp(56px, 6.5vw, 104px);
  --curva: ease-out;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: "Poppins", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

h1, h2 { font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(30px, 8vw, 36px); line-height: 1.1; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.en-verde :focus-visible { outline-color: var(--dorado); }

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

.saltar {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--blanco);
  color: var(--texto);
  font-weight: 600;
}

.saltar:focus { top: 12px; }

.en-verde { background: var(--verde-oscuro); color: var(--blanco); }

.bajada { margin-top: 14px; max-width: 58ch; }

/* El trazo de plumón: bajo una sola palabra, y solo en el título de la portada */
.trazo {
  background: url("../img/marca/trazo.svg") left bottom / 100% 0.16em no-repeat;
  padding-bottom: 0.02em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Botones y enlaces. Al presionar, scale(0.97): responde al dedo.     */
/* ------------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 140ms var(--curva), background-color 160ms var(--curva);
}

.boton:active { transform: scale(0.97); }
.boton svg { width: 18px; height: 18px; flex: none; transition: transform 180ms var(--curva); }

.boton--oscuro { background: var(--verde-oscuro); color: var(--blanco); }

@media (hover: hover) {
  .boton--oscuro:hover { background: var(--verde); }
  .boton:hover svg.flecha { transform: translateX(3px); }
}

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  transition: transform 140ms var(--curva), opacity 160ms var(--curva);
}

.enlace:active { transform: scale(0.97); }

@media (hover: hover) {
  .enlace:hover { opacity: 0.72; }
}

/* ------------------------------------------------------------------ */
/* Logotipo: la misma definición que .rv-marca de estilos.css y que    */
/* docs/marca/pack-logotipo/reverde-marca.css. Es texto, no imagen.    */
/* ------------------------------------------------------------------ */
.rv-marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: 0.36em;
  font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.rv-marca__icono { width: 1.45em; height: 1.45em; flex: none; }
.rv-marca__texto b { font-weight: 700; color: var(--fondo); }
.rv-marca__texto i { font-weight: 500; font-style: normal; color: var(--lima); }

/* ------------------------------------------------------------------ */
/* Barra                                                               */
/* ------------------------------------------------------------------ */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--verde-oscuro);
  color: var(--blanco);
}

.barra .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.barra .rv-marca { font-size: 23px; }

.menu-principal { display: none; }

.menu-principal a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 160ms var(--curva);
}

@media (hover: hover) {
  .menu-principal a:not(.boton):hover { opacity: 0.72; }
}

/* Menú del teléfono: un <details>, funciona sin JavaScript. Crece desde el
   botón que lo abrió, para que se entienda de dónde sale. */
.menu-movil { position: relative; }

.menu-movil summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  list-style: none;
  transition: transform 140ms var(--curva);
}

.menu-movil summary:active { transform: scale(0.97); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 26px; height: 26px; }
.menu-movil .cerrar { display: none; }
.menu-movil[open] .abrir { display: none; }
.menu-movil[open] .cerrar { display: block; }

.menu-movil nav {
  position: absolute;
  right: 0;
  top: 58px;
  width: min(320px, calc(100vw - 2 * var(--margen)));
  padding: 10px;
  background: var(--blanco);
  color: var(--texto);
  border-radius: var(--radio-chico);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
  transform-origin: top right;
  animation: menu-entra 170ms var(--curva);
}

.menu-movil nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
}

.menu-movil nav a:active { background: var(--fondo); }

@keyframes menu-entra {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Portada: el teléfono es el protagonista, sobre el fondo de la marca */
/* ------------------------------------------------------------------ */
.portada {
  position: relative;
  overflow: hidden;
  padding-top: clamp(22px, 6vw, 64px);
  background: var(--fondo);
  color: var(--verde-oscuro);
  text-align: center;
}

.portada-grilla { display: grid; gap: clamp(18px, 5vw, 48px); }

.portada h1 {
  font-size: clamp(25px, 8vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.portada-bajada {
  max-width: 44ch;
  margin: 10px auto 0;
  color: var(--texto);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 14px;
}

/* En el teléfono, el estado espera al cierre y el enlace se acorta: arriba manda la app */
.portada-estado { display: none; margin-top: 10px; color: var(--secundario); font-size: 15px; }
.solo-ancho { display: none; }
.portada .datos--portada { display: none; }

.portada-telefono {
  position: relative;
  width: min(360px, 88vw);
  margin-inline: auto;
}

/* La luz: un círculo plano detrás del teléfono */
.portada-telefono::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: 180%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blanco);
  transform: translateX(-50%);
}

.portada-telefono .telefono {
  position: relative;
  box-shadow: 0 30px 60px -24px rgba(11, 77, 40, 0.45);
}

/* ------------------------------------------------------------------ */
/* Teléfono con una pantalla real de la app                            */
/* ------------------------------------------------------------------ */
.telefono {
  width: 100%;
  padding: 7px;
  background: #081A0F;
  border-radius: 36px;
  outline: 1px solid rgba(255, 255, 255, 0.14);
}

.telefono img { width: 100%; height: auto; border-radius: 29px; }

/* Recortado por abajo: el teléfono sale del borde de su panel */
.telefono--recorte {
  aspect-ratio: 1 / 1.56;
  padding-bottom: 0;
  overflow: hidden;
  border-radius: 36px 36px 0 0;
}

.telefono--recorte img { height: 100%; object-fit: cover; object-position: top center; border-radius: 29px 29px 0 0; }

/* ------------------------------------------------------------------ */
/* Fotos: dos proporciones, y en todas la misma hojita en la esquina    */
/* ------------------------------------------------------------------ */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-chico);
  background: var(--borde);
}

.foto--apaisada { aspect-ratio: 3 / 2; }
.foto--vertical { aspect-ratio: 4 / 5; }
.foto > img { width: 100%; height: 100%; object-fit: cover; }

.foto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  border-radius: 0 16px 0 0;
  background: var(--verde-oscuro) url("../img/marca/hojita.svg") center / 18px no-repeat;
}

/* El sello de los puntos: derecho, y solo donde dice algo */
.sello {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--verde-oscuro);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.sello img { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ */
/* Qué es                                                              */
/* ------------------------------------------------------------------ */
.que-es { padding-block: var(--seccion); }

.que-es-grilla { display: grid; gap: 28px; align-items: center; }

.datos {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}

.datos li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }

.datos b {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.datos span { font-size: 16px; line-height: 1.35; }

.arbol {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.35;
}

.arbol img { width: 60px; height: auto; }

/* ------------------------------------------------------------------ */
/* Cómo funciona: cuatro pasos, cada uno con su pantalla               */
/* ------------------------------------------------------------------ */
.como { padding-bottom: var(--seccion); }

.como-cabeza { display: grid; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }

.pasos { display: grid; gap: 12px; }

.paso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 0;
  overflow: hidden;
  border-radius: var(--radio-chico);
  background: var(--fondo);
}

.paso-cabeza { display: flex; align-items: center; gap: 12px; }

.paso h3 { font-size: 21px; line-height: 1.15; }

.paso p { max-width: 38ch; margin-bottom: 16px; font-size: 16px; }

.paso .telefono { width: min(280px, 76%); margin: auto auto 0; }

/* El número va en la moneda real, como en los pasos del sticker */
.moneda {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding-bottom: 3px;
  background: url("../img/marca/moneda.svg") center / contain no-repeat;
  color: var(--verde-oscuro);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nota-pantallas { padding-top: 12px; font-size: 15px; color: var(--secundario); }

/* ------------------------------------------------------------------ */
/* Confianza                                                           */
/* ------------------------------------------------------------------ */
.confianza { padding-block: var(--seccion); }

.confianza-grilla { display: grid; gap: 32px; align-items: center; }

.confianza-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.confianza-visual img { width: 100%; height: auto; }

.pruebas { display: grid; gap: 20px 40px; margin-top: 24px; }
.pruebas h3 { display: flex; gap: 8px; align-items: flex-start; }
.pruebas h3::before { content: ""; flex: none; width: 14px; height: 18px; margin-top: 3px; background: url("../img/marca/hojita.svg") center / contain no-repeat; }
.pruebas p { margin-top: 4px; font-size: 16px; }

/* Los dos estados de los puntos, con los chips de la app */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 17px; color: var(--texto); font-size: 14px; font-weight: 700; }
.chip--espera { background: var(--ambar); }
.chip--saldo { background: var(--lima); }

/* ------------------------------------------------------------------ */
/* Municipios e instituciones                                          */
/* ------------------------------------------------------------------ */
.instituciones { padding-block: var(--seccion); }

.instituciones-grilla { display: grid; gap: 24px; align-items: center; }

.instituciones .boton { margin-top: 22px; }

/* ------------------------------------------------------------------ */
/* Puntos verdes: las coordenadas reales, filtrables sin JavaScript    */
/* ------------------------------------------------------------------ */
.puntos { background: var(--fondo); padding-block: var(--seccion); }

.puntos-cabeza { display: grid; gap: 20px; margin-bottom: 24px; align-items: center; }
/* En el teléfono no va: entre el título y el mapa solo tiene que estar el filtro */
.puntos-cabeza .foto { display: none; }

.filtro { border: 0; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filtro legend { padding: 0; margin-bottom: 10px; font-weight: 600; }

.filtro input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.filtro label {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--borde);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 140ms var(--curva), background-color 160ms var(--curva), color 160ms var(--curva);
}

.filtro label:active { transform: scale(0.97); }
.filtro input:checked + label { background: var(--verde-oscuro); color: var(--blanco); }
.filtro input:focus-visible + label { outline: 3px solid var(--verde); outline-offset: 3px; }

@media (hover: hover) {
  .filtro input:not(:checked) + label:hover { background: #C8DFBA; }
}

.puntos-grilla { display: grid; gap: 24px; align-items: start; }

.mapa { overflow: hidden; border-radius: var(--radio-chico); background: var(--verde-oscuro); max-width: 600px; }
.mapa svg { width: 100%; height: auto; }

.mapa circle { fill: var(--dorado); transition: opacity 180ms var(--curva); }
.mapa text { fill: var(--fondo); font: 500 15px "Poppins", system-ui, sans-serif; }

.lista-puntos summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.lista-puntos summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--curva);
}

.lista-puntos[open] summary::after { transform: translateY(3px) rotate(225deg); }

.lista-puntos li { break-inside: avoid; }

.lista-puntos li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 6px 0;
  text-decoration: none;
  transition: transform 140ms var(--curva);
}

.lista-puntos li a:active { transform: scale(0.97); }
.lista-puntos li b { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.lista-puntos li span { font-size: 15px; }

/* El filtro: cada opción deja a la vista solo los puntos de ese contenedor */
.puntos:has(#m-integral:checked) .lista-puntos li:not([data-m~="INTEGRAL"]),
.puntos:has(#m-plasticos:checked) .lista-puntos li:not([data-m~="PLASTICOS"]),
.puntos:has(#m-papel:checked) .lista-puntos li:not([data-m~="TETRA_PAPEL_CARTON"]),
.puntos:has(#m-vidrio:checked) .lista-puntos li:not([data-m~="VIDRIO"]) { display: none; }

.puntos:has(#m-integral:checked) .mapa circle:not([data-m~="INTEGRAL"]),
.puntos:has(#m-plasticos:checked) .mapa circle:not([data-m~="PLASTICOS"]),
.puntos:has(#m-papel:checked) .mapa circle:not([data-m~="TETRA_PAPEL_CARTON"]),
.puntos:has(#m-vidrio:checked) .mapa circle:not([data-m~="VIDRIO"]) { opacity: 0.16; }

/* ------------------------------------------------------------------ */
/* Comercios                                                           */
/* ------------------------------------------------------------------ */
.comercios { padding-block: var(--seccion); }

.comercios-grilla { display: grid; gap: 28px; align-items: center; }

.comercios-visual { position: relative; width: min(100%, 460px); margin-inline: auto; }

.comercios-visual .telefono {
  position: absolute;
  right: -6px;
  bottom: -20px;
  width: 34%;
  padding: 4px;
  border-radius: 22px;
}

.comercios-visual .telefono img { border-radius: 18px; }

.pasos-comercio { display: grid; gap: 12px; margin-top: 20px; }
.pasos-comercio li { display: flex; gap: 10px; align-items: flex-start; }
.pasos-comercio .moneda { width: 40px; height: 40px; font-size: 16px; }
.pasos-comercio span:last-child { padding-top: 6px; }

.comercios .boton { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* Preguntas: compactas y todas a la vista                             */
/* ------------------------------------------------------------------ */
.preguntas-seccion { background: var(--fondo); padding-block: var(--seccion); }

.preguntas { display: grid; gap: 20px 40px; margin-top: 24px; }
.pregunta h3 { font-size: 18px; }
.pregunta p { margin-top: 4px; font-size: 16px; }
.pregunta a { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Cierre: en qué está el proyecto                                     */
/* ------------------------------------------------------------------ */
.cierre { padding-top: var(--seccion); overflow: hidden; }

.cierre-grilla { display: grid; gap: 28px; }

/* Se lee como un dato y no como botón, para que nadie lo toque esperando algo: todavía no
   hay nada que descargar. Al publicar en producción pasa a ser el enlace a Google Play. */
.muy-pronto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.muy-pronto img { width: 20px; height: 22px; }
.cierre-texto .enlace { margin-top: 4px; }

.cierre-visual { width: min(320px, 78%); margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* Instagram, antes del pie                                            */
/* ------------------------------------------------------------------ */
.instagram { padding-block: var(--seccion); }

.instagram-grilla { display: grid; gap: 24px; align-items: center; }

.instagram .boton { margin-top: 20px; }
.instagram .boton svg { width: 20px; height: 20px; }
.instagram .foto { width: min(100%, 300px); }

/* ------------------------------------------------------------------ */
/* Pie                                                                 */
/* ------------------------------------------------------------------ */
.pie { position: relative; padding-block: 28px 24px; background: #083D20; color: var(--blanco); }

.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }

.pie .rv-marca { font-size: 22px; }

.pie-correo { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }

.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 10px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; }

.pie-creditos { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.pie-creditos a { display: inline-block; padding-block: 6px; }

/* ================================================================== */
/* Tamaños                                                            */
/* ================================================================== */
@media (max-width: 719px) {
  .portada-acciones { column-gap: 12px; }
  .portada .boton { gap: 6px; min-height: 48px; padding: 0 16px; font-size: 16px; }
  .portada .enlace { font-size: 16px; }
}

@media (min-width: 560px) {
  .solo-ancho { display: inline; }
  .portada-estado { display: block; }
}

@media (min-width: 720px) {
  h2 { font-size: clamp(34px, 3.2vw, 46px); }
  .portada h1 { font-size: clamp(52px, 5vw, 64px); }
  .portada-telefono { width: 440px; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pruebas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instituciones-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .puntos-cabeza .foto { display: block; }
  .instagram-grilla { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .instagram .foto { width: 260px; }
}

@media (min-width: 1040px) {
  html { scroll-padding-top: 88px; }
  body { font-size: 18px; }

  .menu-principal { display: flex; align-items: center; gap: 28px; }
  .menu-movil { display: none; }

  /* El teléfono a la derecha, recortado por el borde de la sección: entra entero en la primera pantalla */
  .portada { padding-top: 56px; text-align: left; }
  .portada-grilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
    height: min(calc(100vh - 124px), 700px);
    min-height: 540px;
  }
  .portada h1 { font-size: clamp(50px, 4.4vw, 64px); }
  .portada h1, .portada-bajada { margin-inline: 0; }
  .portada-acciones { justify-content: flex-start; }
  .portada-texto { padding-bottom: 56px; }
  .portada-telefono { align-self: start; width: 460px; height: 100%; }
  .portada-telefono .telefono--recorte { aspect-ratio: auto; height: 100%; }
  .portada-telefono .telefono--recorte img { height: auto; }

  /* Las cifras suben a la portada: equilibran el lado del texto */
  .portada .datos--portada {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 560px;
    margin-top: 28px;
  }
  .datos--portada li { display: block; }
  .datos--portada b { display: block; font-size: 36px; }
  .datos--portada span { display: block; margin-top: 4px; color: var(--texto); font-size: 15px; }
  .que-es .datos { display: none; }

  .que-es-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }

  .como-cabeza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: end; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paso .telefono { width: 88%; }

  .confianza-grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }

  .puntos-cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 56px; }
  .puntos-grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .mapa { position: sticky; top: 84px; }
  .lista-puntos ul { columns: 3; column-gap: 28px; }
  .lista-puntos li a { min-height: 50px; padding: 4px 0; line-height: 1.35; }
  .lista-puntos summary { display: none; }

  .comercios-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }

  .preguntas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }

  .cierre-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: end; }
  .cierre-texto { align-self: center; padding-bottom: var(--seccion); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .boton:active, .enlace:active, .filtro label:active, .menu-movil summary:active, .lista-puntos li a:active { transform: none; }
}