/* El Lápiz Azul · v3 "La frase es la página"
   Para otro cliente: cambiar solo :root (colores y tamaños) y los textos. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* Hoja y esfero: papel blanco, tinta negra, azul de esfero solo en la acción */
  --bg: #ffffff;
  --surface: #f2f2f0;
  --ink: #111111;
  --muted: #5c5c5c;
  --accent: #1a4be0;
  --accent-hondo: #1238b0;
  --accent-ink: #ffffff;
  --campo: #111111;          /* fondo negro (visita y pie) */
  --campo-ink: #ffffff;
  --campo-suave: #c4c4c4;
  --azul-suave: #dce4ff;     /* texto secundario sobre el azul (5,3:1) */
  --whatsapp: #1f7a4d;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.1rem + 1.05vw, 2.25rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  --step-display: clamp(2.5rem, 0.6rem + 9.4vw, 9.5rem);

  --margen: clamp(16px, 2.3vw, 32px);
  --hueco: clamp(16px, 1.7vw, 24px);
  --seccion: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, dd { text-wrap: pretty; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; text-wrap: balance; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.saltar { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 50; }
.saltar:focus { top: 8px; }

/* Aviso de demo */
.aviso-demo { background: var(--ink); color: var(--bg); font-size: var(--step-small); padding: 8px var(--margen); }
.aviso-demo a { color: var(--bg); font-weight: 600; text-underline-offset: 3px; }

/* Botones: planos, de esquina recta, un solo relleno */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform 160ms var(--ease-out);
}
.boton:hover { background: var(--accent-hondo); }
.boton:active { transform: scale(0.97); }
.boton-chico { min-height: 44px; padding: 10px 18px; font-size: 1rem; }
.boton-claro { background: var(--bg); color: var(--ink); }
.boton-claro:hover { background: var(--azul-suave); }
.enlace { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset var(--t-hover) ease, color var(--t-hover) ease; }
.enlace:hover { text-underline-offset: 8px; color: var(--accent); }
.enlace-claro:hover { color: var(--azul-suave); }

/* Cabecera: marca, cuatro enlaces y una acción */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hueco);
  padding: 14px var(--margen);
  font-size: 1rem; font-weight: 600;
}
.marca { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.045em; text-decoration: none; }
.menu { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.menu a { text-decoration: none; padding: 10px 0; transition: color var(--t-hover) ease; }
.menu a:hover { color: var(--accent); }
.cabecera nav { margin-left: auto; }

/* ---------- Portada: la frase partida por la foto ---------- */
.portada {
  --marco: clamp(280px, 32vw, 520px);
  display: grid;
  grid-template-columns: 1fr var(--marco) 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--hueco);
  min-height: calc(100svh - 112px);
  padding: 24px var(--margen) 40px;
}
.portada-frase {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: 1fr var(--marco) 1fr; column-gap: var(--hueco);
  font-size: clamp(2.25rem, 0.2rem + 4.9vw, 5rem);
  line-height: 0.92; letter-spacing: -0.05em;
  align-items: end;
}
.mitad-a { grid-column: 1; }
.mitad-b { grid-column: 3; text-align: right; }
.portada-marco {
  grid-column: 2; grid-row: 1 / -1; align-self: center;
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface);
  border-radius: 4px;
}
.cuadro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-pie { grid-column: 1; grid-row: 3; padding-top: 36px; max-width: 30rem; }
.entrada { font-size: var(--step-body); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.portada-estado {
  grid-column: 3; grid-row: 3; align-self: start; justify-self: end; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 40px; max-width: 28rem;
}
.estado { font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.estado.abierto::before { background: #12804a; }
.estado-nota { color: var(--muted); }

/* ---------- Precios: titular y tabla empujada a la derecha ---------- */
.precios { padding: var(--seccion) var(--margen) 0; }
.titulo-grande { font-size: var(--step-head); line-height: 0.98; }
.titulo-grande span { display: block; }
.titulo-grande span:first-child { padding-left: 3vw; }
.precios-cuerpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  margin-top: clamp(48px, 6.6vw, 96px); align-items: start;
}
.precios-lado { grid-column: 1 / span 5; display: grid; gap: 48px; }
.precios-tabla { grid-column: 7 / -1; }

.calculadora { background: var(--surface); padding: clamp(20px, 2.4vw, 36px); display: grid; gap: 20px; }
.calculadora[hidden] { display: none; }
.calculadora h3 { font-size: var(--step-lead); letter-spacing: -0.035em; line-height: 1.05; }
.calc-fila { display: flex; align-items: center; gap: 16px; }
.calc-fila label { font-weight: 600; }
.calc-fila input {
  width: 7.5rem; min-height: 52px; padding: 8px 14px;
  font: inherit; font-size: 1.375rem; font-weight: 700; color: var(--ink);
  background: var(--bg); border: 0; border-bottom: 3px solid var(--ink);
}
.calc-tipo { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.calc-tipo legend { font-weight: 600; padding: 0; margin-bottom: 10px; }
.calc-tipo label { position: relative; }
.calc-tipo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-tipo span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  background: var(--bg); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.calc-tipo label:hover span { background: #e3e3e0; }
.calc-tipo input:checked + span { background: var(--ink); color: var(--bg); }
.calc-tipo input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.calc-total { color: var(--muted); }
.calc-total output { display: block; color: var(--ink); font-size: var(--step-head); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
.calc-total output.cambio { animation: cambio 320ms var(--ease-out); }
@keyframes cambio { from { opacity: 0.35; transform: translateY(6px); } }
.foto-vitrina { width: min(100%, 22vw + 120px); aspect-ratio: 4 / 5; object-fit: cover; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtros[hidden] { display: none; }
.filtro {
  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform 160ms var(--ease-out);
}
.filtro:hover { background: #e3e3e0; }
.filtro:active { transform: scale(0.97); }
.filtro[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.tarifas { width: 100%; border-collapse: collapse; }
.tarifas caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: var(--step-small); padding-top: 32px; }
.tarifas thead th { font-size: var(--step-small); font-weight: 600; color: var(--muted); text-align: left; padding: 0 0 12px; }
.tarifas thead th:last-child, .tarifas td.valor { text-align: right; }
.tarifas tbody th, .tarifas tbody td { padding: 13px 0; vertical-align: top; }
.tarifas tbody + tbody tr:first-child > * { padding-top: 44px; }
.tarifas tbody th { text-align: left; font-weight: 700; padding-right: 16px; }
.tarifas tbody td { color: var(--muted); white-space: nowrap; padding-right: 16px; }
.tarifas td.valor { color: var(--ink); font-weight: 800; font-size: var(--step-body); letter-spacing: -0.03em; padding-right: 0; }
.detalle { display: block; font-weight: 400; color: var(--muted); font-size: 1rem; }
.tarifas tbody.oculto { display: none; }
.tarifas tbody.entra tr { animation: entra 420ms var(--ease-out) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Escalera: el proceso escrito, no contado ---------- */
.escalera { padding: var(--seccion) var(--margen) 0; }
.escalones { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 56px; }
.escalon { grid-column: 1 / -1; }
.escalon:nth-child(2) { grid-column-start: 3; }
.escalon:nth-child(3) { grid-column-start: 5; }
.escalon:nth-child(4) { grid-column-start: 7; }
.escalon h2, .escalon h3 { font-size: var(--step-head); line-height: 1; }
.escalon p { margin-top: 14px; max-width: 34ch; }
.escalon-final h3 { color: var(--accent); }

/* ---------- Servicios: campo azul, título fijo, filas con foto al margen ---------- */
.servicios {
  margin-top: var(--seccion);
  background: var(--accent); color: var(--accent-ink);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding: var(--seccion) var(--margen);
}
.servicios-fijo { grid-column: 1 / span 4; align-self: start; position: sticky; top: 12vh; }
.servicios-fijo h2 { font-size: var(--step-head); }
.servicios-fijo p { margin-top: 24px; max-width: 26ch; color: var(--azul-suave); }
.servicios-filas { grid-column: 6 / -1; display: grid; gap: clamp(72px, 8vw, 120px); }
.servicio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hueco) clamp(24px, 3vw, 48px); align-items: start; }
.servicio h3 { font-size: var(--step-lead); letter-spacing: -0.035em; line-height: 1.05; }
.servicio-texto p { margin-top: 16px; max-width: 40ch; }
.servicio-dato { color: var(--azul-suave); }
.servicio-dato b { color: var(--accent-ink); }
.servicio-foto { object-fit: cover; }
.foto-alta { width: clamp(150px, 16vw, 240px); aspect-ratio: 4 / 5; }
.foto-ancha { width: clamp(180px, 22vw, 320px); aspect-ratio: 3 / 2; }
.foto-cuadrada { width: clamp(120px, 12.5vw, 180px); aspect-ratio: 1; }

/* ---------- Listas escolares: objeto delante del titular ---------- */
.listas { overflow-x: clip; position: relative; padding: var(--seccion) var(--margen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.listas-titulo { grid-column: 1 / -1; grid-row: 1; font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.055em; position: relative; z-index: 0; }
.listas-titulo span { display: block; }
.listas-foto {
  grid-column: 7 / -1; grid-row: 1 / span 2; justify-self: end; align-self: start;
  width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: 4vw;
  transform: rotate(-4deg); position: relative; z-index: 1;
}
.listas-datos { grid-column: 1 / span 5; grid-row: 2; margin-top: 56px; display: grid; gap: 20px; justify-items: start; }
.listas-lead { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }

/* ---------- Preguntas: preguntas grandes, respuestas al lado ---------- */
.preguntas { padding: var(--seccion) var(--margen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.preguntas-titulo { grid-column: 1 / span 6; font-size: var(--step-lead); color: var(--muted); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: clamp(48px, 5.5vw, 80px); }
.preguntas-tabla { grid-column: 1 / -1; display: grid; gap: clamp(48px, 5.5vw, 80px); }
.pregunta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: baseline; }
.pregunta dt { grid-column: 1 / span 6; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.pregunta dd { grid-column: 8 / -1; line-height: 1.55; max-width: 44ch; }

/* ---------- Visita: campo negro, foto del local, WhatsApp como letra grande ---------- */
.visita {
  margin-top: var(--seccion);
  background: var(--campo); color: var(--campo-ink);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding: var(--seccion) var(--margen) clamp(48px, 6vw, 88px);
}
.visita-foto { grid-column: 1 / span 7; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visita-datos { grid-column: 9 / -1; display: grid; gap: 20px; align-content: start; }
.visita-datos h2 { font-size: var(--step-head); }
.estado-grande { font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1.1; }
.visita .estado::before { background: var(--campo-suave); }
.visita .estado.abierto::before { background: #3ddc84; }
.horario { border-collapse: collapse; width: 100%; }
.horario caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.horario th, .horario td { text-align: left; padding: 8px 0; font-weight: 400; vertical-align: top; }
.horario td { text-align: right; font-weight: 700; white-space: nowrap; }
.horario th { color: var(--campo-suave); padding-right: 16px; }
.visita-grande {
  grid-column: 1 / -1; margin-top: clamp(104px, 9vw, 140px);
  display: flex; align-items: center; gap: 0.15em;
  font-size: clamp(2.5rem, 0.2rem + 6.6vw, 7.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95;
  text-decoration: none; transition: color var(--t-hover) ease;
}
.visita-grande svg { width: 0.62em; height: 0.62em; flex: none; transition: transform 240ms var(--ease-out); }
.visita-grande:hover { color: #8fa8ff; }
.visita-grande:hover svg { transform: translate(0.06em, -0.06em); }

/* ---------- Pedido ---------- */
.pedido {
  background: var(--surface);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding: var(--seccion) var(--margen);
}
.pedido-intro { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.pedido-intro h2 { font-size: var(--step-head); }
.pedido-intro p { max-width: 36ch; }
.pedido-foto { width: min(100%, 300px); aspect-ratio: 4 / 5; object-fit: cover; margin-top: 16px; }
.formulario { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--hueco); align-content: start; }
.ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 700; }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 0; border-bottom: 3px solid var(--ink);
  padding: 14px 14px; min-height: 52px;
  transition: border-color var(--t-hover) ease;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); } /* taste-skill-ignore: anillo de foco de un campo de formulario */
.campo textarea { resize: vertical; }
::placeholder { color: #707070; }
.ayuda { color: var(--muted); font-size: var(--step-small); margin-top: -8px; }
.casilla { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.casilla a { font-weight: 700; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: trampa anti-robots, invisible */

/* ---------- Pie: invitación sobre el nombre recortado ---------- */
.pie { background: var(--campo); color: var(--campo-ink); padding: clamp(80px, 10vw, 160px) var(--margen) 0; overflow: hidden; }
.pie-arriba { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 40px; }
.pie-invitacion { grid-column: 1 / span 7; display: grid; gap: 32px; justify-items: start; }
.pie-frase { font-size: var(--step-head); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.pie-enlaces { grid-column: 10 / -1; display: grid; gap: 10px; align-content: start; }
.pie-enlaces a { text-decoration: none; font-weight: 600; transition: color var(--t-hover) ease; }
.pie-enlaces a:hover { color: #8fa8ff; text-decoration: underline; text-underline-offset: 4px; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(80px, 9vw, 140px); font-size: 1rem; color: var(--campo-suave); }
.pie-legal a { color: var(--campo-ink); }
.pie-nombre {
  font-size: 17.4vw; font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap;
  color: #4d74ff; margin: 12px 0 0 -0.04em; transform: translateY(24%);
}

/* WhatsApp flotante */
.whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 18px;
  background: var(--whatsapp); color: #fff; font-weight: 700; text-decoration: none;

  transition: transform 180ms var(--ease-out), background-color var(--t-hover) ease;
}
.whatsapp.escondido { opacity: 0; transform: translateY(24px); pointer-events: none; }
.whatsapp { transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out), background-color var(--t-hover) ease; }
.whatsapp svg { width: 22px; height: 22px; }
.whatsapp:hover { background: #17633e; transform: translateY(-2px); }
.whatsapp:active { transform: scale(0.97); }

/* ---------- Páginas secundarias ---------- */
.simple { padding: clamp(48px, 7vw, 112px) var(--margen) var(--seccion); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 40px; }
.simple-texto { grid-column: 1 / span 6; display: grid; gap: 24px; align-content: start; justify-items: start; }
.simple-texto h1 { font-size: clamp(2.5rem, 0.6rem + 6vw, 6.5rem); line-height: 0.92; letter-spacing: -0.05em; }
.simple-texto p { max-width: 38ch; }
.simple-texto .lead { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; max-width: 24ch; }
.simple-foto { grid-column: 8 / -1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); padding: clamp(48px, 7vw, 112px) var(--margen) var(--seccion); }
.legal-cabeza { grid-column: 1 / -1; margin-bottom: clamp(48px, 6vw, 96px); }
.legal-cabeza h1 { font-size: clamp(2.5rem, 0.6rem + 6vw, 6.5rem); line-height: 0.92; letter-spacing: -0.05em; max-width: 14ch; }
.legal-cabeza p { margin-top: 24px; color: var(--muted); }
.legal-cuerpo { grid-column: 1 / -1; display: grid; gap: clamp(40px, 4vw, 64px); }
.legal-punto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.legal-punto h2 { grid-column: 1 / span 5; font-size: var(--step-lead); letter-spacing: -0.035em; line-height: 1.1; }
.legal-punto p { grid-column: 7 / -1; max-width: 60ch; }

.tira { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 32px; align-items: end; margin-top: clamp(64px, 8vw, 128px); }
.tira h2 { grid-column: 1 / -1; font-size: var(--step-lead); letter-spacing: -0.035em; line-height: 1.1; }
.tira-item { display: grid; gap: 12px; text-decoration: none; font-weight: 700; }
.tira-item img { width: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.tira-item span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset var(--t-hover) ease, color var(--t-hover) ease; }
.tira-item:hover span { color: var(--accent); text-underline-offset: 8px; }
.tira-item:hover img { transform: scale(0.985); }
.tira-item:active img { transform: scale(0.97); }
.tira-a { grid-column: 1 / span 5; } .tira-a img { aspect-ratio: 4 / 3; }
.tira-b { grid-column: 6 / span 4; } .tira-b img { aspect-ratio: 4 / 5; }
.tira-c { grid-column: 10 / span 3; } .tira-c img { aspect-ratio: 1; }

/* ---------- Movimiento (lo activa /js/movimiento.js; sin JS todo se ve) ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.revelar.visto { opacity: 1; transform: none; }
.listas-foto.revelar { opacity: 1; transform: translateY(48px) rotate(2deg); transition-duration: 900ms; }
.listas-foto.revelar.visto { transform: rotate(-4deg); }

@media (prefers-reduced-motion: no-preference) {
  .cuadro { animation: cuadro 15s linear infinite backwards; }
  .cuadro-1 { animation-name: cuadro-primero; }
  .cuadro-2 { animation-delay: 5s; }
  .cuadro-3 { animation-delay: 10s; }
}
@keyframes cuadro-primero {
  0% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; }
  36% { opacity: 0; transform: scale(1.06); }
  94% { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cuadro {
  0% { opacity: 0; transform: scale(1); }
  6% { opacity: 1; }
  36% { opacity: 1; }
  42% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cuadro-1 { z-index: 1; }
  .revelar, .revelar.visto { transition: opacity 300ms ease; transform: none; }
  .listas-foto.revelar, .listas-foto.revelar.visto { transform: rotate(-4deg); }
  .calc-total output.cambio, .tarifas tbody.entra tr { animation: none; }
  .servicios-fijo { position: static; }
}

/* ---------- Tableta ---------- */
@media (max-width: 1000px) {
  .precios-lado { grid-column: 1 / span 6; }
  .precios-tabla { grid-column: 7 / -1; }
  .servicios-fijo { grid-column: 1 / span 5; }
  .servicios-filas { grid-column: 6 / -1; }
  .servicio { grid-template-columns: 1fr; }
  .visita-foto { grid-column: 1 / -1; }
  .visita-datos { grid-column: 1 / -1; margin-top: 48px; grid-template-columns: 1fr 1fr; column-gap: var(--hueco); }
  .visita-datos h2, .visita-datos .estado-grande { grid-column: 1 / -1; }
  .pregunta dt { grid-column: 1 / span 6; }
  .pregunta dd { grid-column: 7 / -1; }
}

/* ---------- Celular: su propia composición ---------- */
@media (max-width: 800px) {
  .solo-ancho { display: none; }
  .cabecera { flex-wrap: wrap; row-gap: 4px; }
  .cabecera nav { order: 3; margin-left: 0; width: 100%; }
  .menu { gap: 22px; }
  .portada { display: block; min-height: 0; padding-top: 16px; }
  .portada-frase { display: block; font-size: 8.2vw; line-height: 0.95; }
  .mitad { display: inline; }
  .portada-marco { aspect-ratio: 4 / 3.4; margin-top: 28px; }
  .portada-pie { padding-top: 24px; }
  .portada-estado { text-align: left; align-items: flex-start; padding-top: 28px; }

  .precios-cuerpo, .escalones, .servicios, .listas, .preguntas, .visita, .pedido, .pie-arriba, .simple, .legal, .legal-punto, .pregunta { grid-template-columns: minmax(0, 1fr); }
  .precios-cuerpo > *, .servicios > *, .listas > *, .preguntas > *, .visita > *, .pedido > *, .pie-arriba > *, .simple > *, .legal > *, .legal-punto > *, .pregunta > * { grid-column: 1 / -1 !important; }
  .titulo-grande { font-size: 9.4vw; }
  .titulo-grande span:first-child { padding-left: 0; }
  .precios-lado { order: 2; margin-top: 56px; }
  .precios-tabla { order: 1; }
  .foto-vitrina { width: 62%; justify-self: end; }
  .tarifas thead { display: none; }
  .tarifas tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 11px 0; }
  .tarifas tbody th { grid-column: 1; grid-row: 1 / span 2; padding: 0; }
  .tarifas tbody td { padding: 0; }
  .tarifas tbody td:not(.valor) { grid-column: 2; grid-row: 2; text-align: right; font-size: 1rem; }
  .tarifas td.valor { grid-column: 2; grid-row: 1; }
  .tarifas tbody + tbody tr:first-child { padding-top: 36px; }
  .tarifas tbody + tbody tr:first-child > * { padding-top: 0; }

  .escalones { row-gap: 40px; }
  .escalon h2, .escalon h3 { font-size: 8.6vw; }
  .escalon:nth-child(1) { grid-column: 1; }
  .escalon:nth-child(2) { grid-column: 1; padding-left: 6vw; }
  .escalon:nth-child(3) { grid-column: 1; padding-left: 12vw; }
  .escalon:nth-child(4) { grid-column: 1; padding-left: 18vw; }
  .escalon p { font-size: 1rem; }

  .servicios-fijo { position: static; }
  .servicios-filas { margin-top: 56px; gap: 64px; }
  .servicio:nth-child(1) .servicio-foto { width: 100%; aspect-ratio: 4 / 3; }
  .servicio:nth-child(2) .servicio-foto { width: 72%; justify-self: end; }
  .servicio:nth-child(3) .servicio-foto { width: 56%; }
  .servicio:nth-child(4) .servicio-foto { width: 72%; justify-self: end; aspect-ratio: 4 / 3; }

  .listas-titulo { font-size: 15.5vw; }
  .listas-foto { grid-row: 2; width: min(82%, 480px); margin-top: 24px; }
  .listas-datos { grid-row: 3; margin-top: 40px; }

  .pregunta { row-gap: 12px; }
  .pregunta dt { font-size: 1.5rem; }
  .preguntas-titulo { font-size: 1.5rem; margin-bottom: 40px; }
  .preguntas-tabla { gap: 48px; }

  .visita-datos { margin-top: 40px; grid-template-columns: 1fr; }
  .visita-grande { font-size: 11.6vw; flex-wrap: wrap; }
  .pedido-intro { margin-bottom: 48px; }
  .pedido-foto { display: none; }
  .formulario { grid-template-columns: 1fr; }
  .pie-frase { font-size: 11vw; }
  .pie-invitacion .boton { width: 100%; }
  .pie-enlaces { display: flex; flex-wrap: wrap; gap: 12px 20px; }
  .pie-nombre { font-size: 19vw; }
  .simple-foto { width: 100%; aspect-ratio: 4 / 3; }
  .tira { grid-template-columns: 1fr 1fr; }
  .tira h2, .tira-a { grid-column: 1 / -1 !important; }
  .tira-b, .tira-c { grid-column: auto !important; }
  .tira-b img, .tira-c img { aspect-ratio: 1; }
  .legal-punto { row-gap: 12px; }
  .whatsapp { padding: 12px 14px; }
}