/* ═══════════════════════════════════════════════════════════════
   EL ÚLTIMO ADIÓS · web.css · estilo «Cal y mármol» (sept. 2026)
   Sistema de diseño común de la web. Documentación: DISENO.md
   Fuentes (Google Fonts, en el <head> de cada página):
   EB Garamond 400/500 + cursiva 400 (titulares, citas y cifras)
   Atkinson Hyperlegible 400/700 (texto)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0 · Cifras ─────────────────────────────────────────────── */
/* Atkinson dibuja el cero tachado. En vez de envolver cada número en .cifra, los dígitos (0-9) del texto salen
   de EB Garamond con esta familia, como en memorial/familia.css. Es el mismo archivo latino que ya se descarga
   de Google Fonts con la hoja de fuentes (no añade peticiones). Si Google lo cambia algún día, los dígitos vuelven
   a Atkinson sin romper nada. size-adjust = el 1.1em de .cifra. Las cifras de caja alta las da lining-nums (body). */
@font-face {
  font-family: "EUA Cifras";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format("woff2");
  unicode-range: U+0030-0039;
  size-adjust: 110%;
}

/* ─── 1 · Tokens ─────────────────────────────────────────────── */
:root {
  /* Paleta */
  --cal: #FAF8F3;          /* fondo general */
  --marmol: #E7E3DB;       /* superficie alterna (bloques, pie) */
  --papel: #FFFEFB;        /* tarjetas y paneles */
  --tinta: #1F1D1A;        /* texto principal */
  --tinta-2: #3B3833;      /* texto de párrafo sobre cal o mármol */
  --piedra: #6E6A62;       /* texto secundario sobre cal/papel (5,1:1) */
  --piedra-osc: #5E5A53;   /* texto secundario sobre mármol (5,4:1) */
  --anil: #1F3A5F;         /* acción: botón principal, reproducir, hablar, enlaces */
  --anil-osc: #152A46;     /* hover del añil */
  --anil-velo: rgba(31, 58, 95, .07);
  --albero: #C8963E;       /* solo detalles mínimos: filetes, llama del logo. Nunca texto */
  --linea: #D6D1C7;        /* filetes y separadores */
  --linea-2: #CBC5BA;      /* bordes de tarjetas */
  --control: #8C877E;      /* bordes de campos y barras de la onda (3,5:1) */
  --error: #A3261B;        /* errores de formulario (6,4:1 sobre cal) */
  --chat-fondo: #F6F4EE;
  --burbuja-yo: #E1E6EC;

  /* Variable de contexto: texto secundario (cambia en los bloques de mármol) */
  --t2: var(--piedra);

  /* Tipografía */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "EUA Cifras", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Medidas */
  --radio: 8px;
  --radio-s: 6px;
  --radio-l: 10px;
  --ancho: 1240px;
  --margen: 40px;
  --sec-y: 88px;
}

/* ─── 2 · Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cal); color: var(--tinta);
  font: 17px/1.6 var(--sans); font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--anil); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 16px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--tinta); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(40px, 3.7vw, 54px); line-height: 1.08; }
h1 .fr { display: block; text-wrap: balance; }
h1 .nw, .nw { white-space: nowrap; }
h2 { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.1; }
h3 { font-size: clamp(24px, 2.1vw, 29px); line-height: 1.2; }
p { max-width: 40em; text-wrap: pretty; }
b, strong { font-weight: 700; }

/* Cifras: los dígitos ya salen solos en EB Garamond (apartado 0). .cifra se mantiene para el marcado que ya la usa
   (y para cifras tabulares, como la duración de las notas de voz) */
.cifra { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; font-size: 1.1em; line-height: 1; letter-spacing: 0; }
/* Ojo: el atajo «font:» devuelve font-variant-numeric a normal (EB Garamond dibuja entonces cifras antiguas).
   Toda regla de texto con «font: … var(--sans)» debe añadir detrás font-variant-numeric: lining-nums */

/* Accesibilidad */
.saltar { position: absolute; left: 16px; top: -80px; z-index: 80; background: var(--anil); color: var(--cal); padding: 10px 14px; border-radius: var(--radio); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── 3 · Maquetación ────────────────────────────────────────── */
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.sec { padding: var(--sec-y) 0; }
.sec--marmol { background: var(--marmol); --t2: var(--piedra-osc); --linea: #C9C3B8; }
.entradilla { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); }
.nota { font-size: 15px; line-height: 1.5; color: var(--t2); }

/* ─── 4 · Botones y enlaces ──────────────────────────────────── */
/* Un solo .btn--p por pantalla. El resto, .btn--s o .enlace */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 22px; border-radius: var(--radio); border: 1.5px solid transparent;
  font: 700 17px/1.2 var(--sans); font-variant-numeric: lining-nums; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn--p { background: var(--anil); color: var(--cal); }
.btn--p:hover { background: var(--anil-osc); }
.btn--s { background: transparent; border-color: var(--anil); color: var(--anil); }
.btn--s:hover { background: var(--anil-velo); }
.btn--ancho { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.enlace { color: var(--anil); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.enlace:hover { text-decoration-thickness: 2.5px; }
button.enlace { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.flecha { white-space: nowrap; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 32px; }

/* ─── 5 · Cabecera y marca ───────────────────────────────────── */
.nav { border-bottom: 1px solid var(--linea); background: var(--cal); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.marca img, .marca svg { width: 38px; height: 38px; flex: none; }
.marca span { font: 500 24px/1 var(--serif); white-space: nowrap; letter-spacing: -.005em; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a, .nav-en { color: var(--tinta-2); text-decoration: none; font-size: 16px; white-space: nowrap; padding: 10px 0; }
/* «EN»/«ES»: zona táctil de 44 px; el hueco con el botón lo pone su propio relleno */
.nav-en { min-width: 44px; padding: 10px 12px; text-align: center; }
.nav-links a:hover, .nav-en:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-der { display: flex; align-items: center; gap: 14px; }
.nav .btn { min-height: 44px; padding: 10px 16px; font-size: 16px; }
.corto { display: none; }

/* ─── 6 · Hero de la portada ─────────────────────────────────── */
.hero { padding: 48px 0 92px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.rotulo { font-size: 16.5px; color: var(--piedra); margin-bottom: 18px; }
.lead { font-size: 19.5px; line-height: 1.55; color: var(--tinta-2); margin-top: 24px; max-width: 31em; }
.transp { margin-top: 32px; padding-left: 16px; border-left: 2px solid var(--albero); font-size: 16.5px; line-height: 1.5; color: var(--tinta-2); max-width: 30em; }
.confianza { margin-top: 16px; font-size: 15.5px; color: var(--piedra); display: flex; flex-wrap: wrap; gap: 4px 18px; max-width: none; }
.confianza span { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.confianza span::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M3 9.5l3.8 3.7L15 4.8%27 fill=%27none%27 stroke=%27%231F3A5F%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; }

.hero-visual { position: relative; }
.escena-caja { position: relative; }
.escena { border: 1px solid var(--linea-2); border-radius: var(--radio-l); overflow: hidden; background: var(--papel); }
.escena svg { width: 100%; height: auto; }
.hero-visual .chat { position: absolute; left: -9%; top: 61%; width: 60%; }
.escena-pie { margin: 12px 0 0 55%; font-size: 15px; line-height: 1.4; color: var(--piedra); }
.hero-mini { display: none; }
/* Portátiles de poca altura (1366×768, 1280×720…): se esconde la fila de nichos de arriba (90 de los 700 de alto
   del dibujo = 15 % del ancho) y el chat sube, para que la nota de voz de María se vea entera en la primera pantalla */
@media (min-width: 961px) and (max-height: 820px) {
  .hero { padding-top: 28px; }
  .hero-visual .escena svg { margin-top: -15%; }
  .hero-visual .chat { top: 55%; }
}

/* ─── 7 · Chat y nota de voz ─────────────────────────────────── */
.chat { background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio-l); overflow: hidden; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.chat-cab b { display: block; font-size: 16px; line-height: 1.25; }
.chat-cab .ej { font-weight: 400; color: var(--piedra); }
.chat-cab small { display: block; font-size: 14.5px; line-height: 1.3; color: var(--piedra); }
.chat-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--chat-fondo); }
.msg { max-width: 90%; padding: 10px 14px; }
.msg--yo { align-self: flex-end; background: var(--burbuja-yo); border-radius: 10px 10px 3px 10px; font-size: 16px; line-height: 1.4; color: var(--tinta); }
.msg--ella { align-self: flex-start; border: 1px solid var(--linea-2); border-radius: 10px 10px 10px 3px; background: #fff; padding: 10px 12px 12px; }
.quien { display: block; font-size: 14.5px; color: var(--piedra); margin-bottom: 6px; }
/* La cursiva queda solo para lo que dice la persona */
.cita { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.38; color: var(--tinta); margin-top: 8px; }

/* Avatar con la inicial (nunca un icono de QR) */
.av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--marmol); border: 1px solid var(--linea-2); display: grid; place-items: center; font: 500 23px/1 var(--serif); color: var(--tinta); padding-bottom: 2px; }
.av .mic { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; background: var(--anil); border: 2px solid #fff; display: grid; place-items: center; }
.av .mic svg { width: 9px; height: 11px; }

/* Reproductor: [data-player] contiene .play, .onda y .dur. La onda la dibuja web.js */
.voz { display: flex; align-items: center; gap: 12px; }
.play { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radio); background: var(--anil); color: var(--cal); display: grid; place-items: center; cursor: pointer; }
.play:hover { background: var(--anil-osc); }
.play svg { width: 18px; height: 18px; }
.play .i-pausa, .sonando .play .i-play { display: none; }
.sonando .play .i-pausa { display: block; }
.voz-medio { flex: 1; min-width: 0; }
.onda { display: flex; align-items: center; gap: 2px; height: 30px; overflow: hidden; }
.onda i { display: block; width: 3px; flex: none; border-radius: 1px; background: var(--control); }
.onda i.on { background: var(--anil); }
.dur { display: block; font-size: 15px; line-height: 1.2; color: var(--piedra); margin-top: 3px; }
.dur.cifra { font-size: 16px; }

/* ─── 8 · Cómo funciona: línea de pasos y formatos ───────────── */
.como .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.como-intro p { margin-top: 18px; font-size: 18px; color: var(--tinta-2); max-width: 18em; }
.como-intro .enlace { display: inline-block; margin-top: 22px; }
.pasos { list-style: none; padding: 0; }
.paso { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
.paso:last-child { padding-bottom: 0; }
.paso:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 60px; bottom: 10px; width: 1px; background: var(--tinta); opacity: .35; }
.num { width: 52px; height: 52px; border: 1.5px solid var(--tinta); border-radius: 50%; display: grid; place-items: center; font: 500 27px/1 var(--serif); font-variant-numeric: lining-nums; padding-bottom: 3px; }
.paso h3 { font-size: clamp(26px, 2.3vw, 31px); line-height: 1.15; margin-top: 8px; }
.paso p { margin-top: 10px; color: var(--tinta-2); max-width: 36em; }
.formatos { display: flex; gap: 16px; margin-top: 22px; }
.formatos figure { width: 132px; }
.formatos svg { width: 100%; height: auto; border-radius: var(--radio-s); border: 1px solid var(--linea-2); }
.formatos figcaption { font-size: 15px; line-height: 1.3; margin-top: 8px; color: var(--tinta-2); }

/* ─── 9 · Habla con María ────────────────────────────────────── */
.maria .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.maria .chat { max-width: 600px; }
.maria .chat-cab { padding: 16px 20px; }
.maria .chat-cuerpo { padding: 22px 20px; gap: 14px; }
.maria .cita { font-size: 20px; }
.sugerencias { padding: 18px 20px 20px; border-top: 1px solid var(--linea); }
.sugerencias > b { display: block; font-size: 16px; margin-bottom: 10px; }
.sug-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.sug { display: inline-flex; align-items: center; min-height: 44px; border: 1.5px solid var(--anil); background: transparent; color: var(--anil); border-radius: var(--radio); padding: 9px 14px; font-size: 16px; line-height: 1.3; font-weight: 700; text-decoration: none; }
.sug:hover { background: var(--anil-velo); }
.muestra { font-size: 15px; color: var(--piedra); margin-top: 12px; }
.maria-texto p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); }
.maria-texto .acciones { margin-top: 28px; }
.maria-texto .aviso { font-size: 17px; color: var(--tinta); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linea); }
.qr-movil { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.qr-movil img { width: 104px; height: 104px; border: 1px solid var(--linea-2); border-radius: var(--radio-s); flex: none; background: #fff; }
.qr-movil p { margin: 0; font-size: 16px; color: var(--tinta-2); }

/* ─── 10 · Por qué existe (carta y firma) ────────────────────── */
.historia .wrap { max-width: 900px; }
.carta { margin-top: 26px; }
.carta p { font-family: var(--serif); font-size: clamp(22px, 2vw, 27px); line-height: 1.5; color: var(--tinta); max-width: none; }
.carta p + p { margin-top: 18px; }
.firma { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linea); }
.firma-nombre { flex: 1 1 auto; min-width: 0; }
.firma-nombre b { display: block; font: 500 28px/1.2 var(--serif); }
.firma-nombre span { display: block; font-size: 16px; color: var(--t2); margin-top: 4px; text-wrap: balance; }
.nota-voz { flex: 0 1 380px; min-width: 0; background: var(--papel); border: 1px solid var(--linea-2); border-radius: 10px 10px 10px 3px; padding: 12px 14px; }
.historia .acciones { margin-top: 28px; }

/* ─── 11 · Precios ───────────────────────────────────────────── */
.precios .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab panel" "gar panel"; grid-template-rows: auto 1fr; column-gap: 72px; align-items: start; }
.precios-cab { grid-area: cab; }
.precios-cab p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); max-width: 24em; }
.garantias { grid-area: gar; margin-top: 40px; }
.garantias h3, .bloque h3 { font: 700 17px/1.4 var(--sans); font-variant-numeric: lining-nums; letter-spacing: 0; }
.lista-ok { list-style: none; padding: 0; }
.lista-ok li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.lista-ok .ok-ico { width: 18px; height: 18px; margin-top: 4px; }
.garantias li { padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.garantias li:first-child { padding-top: 12px; }
.garantias .enlace { display: inline-block; margin-top: 22px; }
.panel-col { grid-area: panel; }
.panel { background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio-l); padding: 32px 40px 30px; }
.panel-nombre { font: 500 30px/1.15 var(--serif); }
.precio-fila { display: flex; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap; margin-top: 8px; }
.precio { font: 500 74px/.95 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.precio-nota { font-size: 16px; line-height: 1.45; color: var(--tinta-2); padding-bottom: 8px; }
.precio-nota b { color: var(--tinta); }
.aviso-pago { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 8px 14px 16px; background: var(--papel); border: 1px solid var(--linea-2); border-left: 3px solid var(--anil); border-radius: var(--radio); font-size: 16px; color: var(--tinta-2); }
.aviso-pago p { flex: 1; max-width: none; }
.aviso-pago button { flex: none; width: 44px; height: 44px; margin-top: -10px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--tinta-2); cursor: pointer; border-radius: var(--radio); }

/* Selector «¿Dónde irá?» */
.donde { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.donde legend { font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 12px; }
.opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* El dibujo va encima del texto en todos los tamaños: así se distingue bien el nicho, la urna y el marco */
.opcion label { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 8px 8px 10px; border: 1px solid var(--control); border-radius: var(--radio); cursor: pointer; font-size: 15.5px; line-height: 1.25; font-weight: 700; color: var(--tinta-2); background: #fff; }
.opcion svg { width: 100%; height: auto; border-radius: 4px; flex: none; }
.opcion input:checked + label { border-color: var(--anil); box-shadow: inset 0 0 0 1.5px var(--anil); color: var(--tinta); background: var(--anil-velo); }
.opcion input:focus-visible + label { outline: 3px solid var(--anil); outline-offset: 2px; }
.mismo { font-size: 15px; color: var(--piedra); margin-top: 10px; }
.bloque { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linea); }
.bloque h3 { margin-bottom: 12px; }
.incluye li { padding: 4px 0; font-size: 17px; }
.incluye .nota { margin-top: 10px; }
/* Línea temporal del pago */
.tl { list-style: none; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--anil); opacity: .45; }
.tl li { position: relative; font-size: 15.5px; line-height: 1.45; color: var(--tinta-2); }
.tl li::before { content: ""; position: absolute; left: 0; top: -22px; width: 13px; height: 13px; border-radius: 50%; background: var(--anil); }
.tl li:last-child::before { background: var(--papel); border: 2px solid var(--anil); }
.tl b { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 2px; }
.panel form.buy { margin-top: 26px; }
.nota-pago { margin-top: 12px; }
.sin-voz { margin-top: 18px; }
.sin-voz summary { cursor: pointer; font-size: 16.5px; color: var(--tinta-2); list-style: none; padding: 8px 0; }
.sin-voz summary::-webkit-details-marker { display: none; }
.sin-voz summary .enlace { font-weight: 700; }
.sin-voz-cuerpo { padding: 12px 0 4px; border-top: 1px solid var(--linea); margin-top: 6px; }
.sin-voz-cuerpo p { font-size: 16px; color: var(--tinta-2); }
.sin-voz-cuerpo form { margin-top: 14px; }

/* ─── 12 · En vida y guía ────────────────────────────────────── */
.envida .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.envida-texto p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); }
.guia { background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio-l); padding: 28px 30px 26px; }
.guia h3 { font-size: 26px; line-height: 1.2; }
.guia > p { margin-top: 10px; color: var(--tinta-2); font-size: 16.5px; }
.guia .form { margin-top: 18px; }

/* ─── 13 · Preguntas frecuentes ──────────────────────────────── */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.faq-cab p { margin-top: 18px; font-size: 17px; color: var(--tinta-2); max-width: 17em; }
.faq-cab .contacto-directo { margin-top: 14px; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 500 24px/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--anil); }
.faq details[open] summary .v { display: none; }
.faq .r { padding: 0 40px 24px 0; color: var(--tinta-2); }
.faq .r p + p { margin-top: 10px; }

/* ─── 14 · Formularios ───────────────────────────────────────── */
.form { display: block; }
.campos { display: grid; gap: 18px; }
.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > label, .campo legend { font-size: 16px; font-weight: 700; color: var(--tinta); padding: 0; }
.campo .opcional { font-weight: 400; color: var(--t2); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--control); border-radius: var(--radio);
  background: #fff; font-size: 17px; line-height: 1.4; color: var(--tinta);
}
.campo textarea { min-height: 112px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #767169; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid var(--anil); outline-offset: 1px; border-color: var(--anil); }
.campo [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.radios label, .check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--tinta-2); cursor: pointer; }
.radios label { align-items: center; min-height: 44px; }
.radios input, .check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--anil); }
.check input { margin-top: 1px; }
.check a { color: var(--anil); }
.en-linea { display: flex; gap: 10px; }
.en-linea input { flex: 1; min-width: 0; }
.en-linea .btn { flex: none; }
.err { color: var(--error); font-size: 16px; font-weight: 700; }
.fino { font-size: 15px; line-height: 1.5; color: var(--t2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok { display: none; padding: 20px 22px; background: var(--papel); border: 1px solid var(--linea-2); border-left: 3px solid var(--anil); border-radius: var(--radio); }
.form-ok b { display: block; font: 500 24px/1.25 var(--serif); }
.form-ok p { margin-top: 6px; color: var(--tinta-2); }
.form.sent .campos { display: none; }
.form.sent .form-ok { display: block; }

/* ─── 15 · Contacto ──────────────────────────────────────────── */
.contacto .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.contacto-texto p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); }
.contacto-texto .otras { margin-top: 22px; display: grid; gap: 10px; font-size: 17px; }

/* ─── 16 · Franja de funerarias y pie ────────────────────────── */
.funer { padding: 30px 0; border-top: 1px solid var(--linea); }
.funer p { font-size: 17px; max-width: none; }
.funer b { margin-right: 8px; }
.pie { background: var(--marmol); color: var(--tinta-2); padding: 48px 0 34px; font-size: 16px; border-top: 1px solid var(--linea-2); --t2: var(--piedra-osc); }
.pie .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px 64px; }
.pie-texto { margin-top: 16px; max-width: 24em; }
.pie-texto a { color: var(--anil); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 26px; align-content: start; }
.pie nav a { text-decoration: none; white-space: nowrap; color: var(--tinta); padding: 6px 0; }
.pie nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal { max-width: none; grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--linea-2); font-size: 15.5px; color: var(--piedra-osc); }

/* ─── 17 · Barra fija inferior (móvil) y avisos flotantes ────── */
.barra { display: none; }
/* Abajo, para no tapar la cabecera. En móvil y tableta sube por encima de la barra cuando esta se ve */
.aviso-idioma { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 6px 8px 16px; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio); font-size: 16px; color: var(--tinta-2); box-shadow: 0 2px 10px rgba(31, 29, 26, .08); }
.aviso-idioma a { color: var(--anil); font-weight: 700; }
.aviso-idioma button { width: 44px; height: 44px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; border-radius: var(--radio); }

/* ─── 18 · Páginas de documento (legales, gracias) ───────────── */
.doc { max-width: 72ch; margin: 0 auto; padding: 56px 24px 88px; }
.doc h1 { font-size: clamp(36px, 5vw, 50px); margin-bottom: 14px; }
.doc .meta { font-size: 15px; color: var(--piedra); margin-bottom: 36px; }
.doc h2 { font-size: 28px; margin: 44px 0 12px; }
.doc h3 { font-size: 22px; margin: 28px 0 8px; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: var(--tinta-2); }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 8px; margin: 10px 0; }
.doc a { color: var(--anil); text-underline-offset: 3px; }
.doc .foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--piedra); }

/* ─── 19 · Tableta ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --margen: 32px; }
  .nav-links { gap: 22px; }
  .hero .wrap { gap: 56px; }
  .maria .wrap, .envida .wrap, .contacto .wrap { gap: 48px; }
  .precios .wrap { column-gap: 48px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero .wrap, .como .wrap, .maria .wrap, .faq .wrap, .pie .wrap, .envida .wrap, .contacto .wrap { grid-template-columns: minmax(0, 1fr); }
  /* Tableta y móvil: el hero es una columna con su placa pequeña junto a la nota de voz; el dibujo grande se quita */
  .hero .wrap { gap: 0; }
  .hero h1 { font-size: clamp(40px, 6.4vw, 54px); }
  .hero-mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 28px; max-width: 640px; }
  .hero-mini .msg--ella { max-width: none; }
  .mini-placa svg { width: 100%; height: auto; border: 1px solid var(--linea-2); border-radius: var(--radio-s); }
  .mini-placa figcaption { font-size: 14px; line-height: 1.3; color: var(--piedra); margin-top: 6px; }
  .hero-visual { display: none; }
  .como .wrap, .maria .wrap, .faq .wrap, .envida .wrap, .contacto .wrap { gap: 40px; }
  .maria-texto { order: -1; }
  .maria .chat { max-width: none; }
  .precios .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "panel" "gar"; }
  .panel-col { margin-top: 32px; }
  .qr-movil { display: none; }
  .faq-cab p { max-width: 32em; }
  .barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--cal); border-top: 1px solid var(--linea-2); transform: translateY(110%); transition: transform .2s ease; display: flex; visibility: hidden; }
  .barra.ver { transform: none; visibility: visible; }
  .barra .btn { flex: 1; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .barra .btn--p { flex: 1.35; }
  .barra.ver ~ .aviso-idioma { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ─── 20 · Móvil ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --margen: 20px; --sec-y: 60px; }
  .nav .wrap { height: 64px; gap: 12px; }
  .marca { gap: 9px; }
  .marca img, .marca svg { width: 32px; height: 32px; }
  .marca span { font-size: 21px; }
  .nav-der { gap: 4px; }
  .nav .btn { min-height: 44px; padding: 8px 14px; }
  .largo { display: none; }
  .corto { display: inline; }
  .entradilla, .maria-texto p, .envida-texto p, .contacto-texto p, .precios-cab p { font-size: 17px; margin-top: 14px; }

  .hero { padding: 20px 0 52px; }
  .rotulo { font-size: 16px; margin-bottom: 12px; }
  /* El titular cabe en tres líneas («Te contesta con su voz.» mide 8,7 em) hasta en pantallas de 320 px */
  h1, .hero h1 { font-size: min(40px, calc((100vw - 2 * var(--margen)) / 8.85)); line-height: 1.06; }
  h2 { font-size: 34px; }
  .hero-mini { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .hero-mini .av { display: none; }
  .hero-mini .cita { font-size: 18px; }
  .lead { font-size: 17.5px; margin-top: 18px; }
  .no-movil { display: none; }
  .acciones { margin-top: 22px; gap: 16px 24px; }
  .hero .acciones .btn--p { width: 100%; }
  .transp { margin-top: 20px; font-size: 16px; }
  .confianza { font-size: 15px; }
  .cita { font-size: 19px; }
  .onda i { width: 2.5px; }

  .como-intro p { margin-top: 12px; font-size: 17px; max-width: none; }
  .como-intro .enlace { margin-top: 12px; }
  .paso { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 30px; }
  .num { width: 40px; height: 40px; font-size: 22px; }
  .paso:not(:last-child)::before { left: 19.5px; top: 48px; }
  .paso h3 { margin-top: 4px; font-size: 25px; }
  .formatos { gap: 10px; }
  .formatos figure { width: auto; flex: 1; min-width: 0; }
  .formatos figcaption { font-size: 14.5px; }

  .maria .chat-cab { padding: 12px 14px; }
  .maria .chat-cuerpo { padding: 16px 12px; }
  .maria .cita { font-size: 19px; }
  .sugerencias { padding: 16px 14px 18px; }
  .sug { padding: 8px 12px; font-size: 15.5px; }
  .maria-texto .acciones { margin-top: 22px; }
  .maria-texto .acciones .btn--p { width: 100%; }
  .maria-texto .acciones .enlace { display: none; }
  .maria-texto .aviso { margin-top: 20px; padding-top: 16px; font-size: 16px; }

  .carta p { font-size: 21px; }
  .firma { margin-top: 24px; padding-top: 20px; gap: 18px; flex-direction: column; align-items: stretch; }
  .nota-voz { flex: none; }

  .panel { padding: 22px 16px 20px; }
  .panel-col { margin-top: 22px; }
  .bloque { margin-top: 18px; padding-top: 16px; }
  .precio-fila { gap: 6px 20px; }
  .precio { font-size: 66px; }
  .garantias { margin-top: 32px; }
  .opciones { gap: 8px; }
  .opcion label { gap: 6px; padding: 6px 6px 8px; font-size: 15px; }
  .tl { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 0 28px; }
  .tl::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .tl li::before { left: -28px; top: 5px; }

  .guia { padding: 20px 16px; }
  .guia h3 { font-size: 24px; }
  .en-linea { flex-direction: column; }
  .en-linea .btn { width: 100%; }
  .fila { grid-template-columns: minmax(0, 1fr); }

  .faq summary { font-size: 21px; padding: 15px 0; }
  .faq .r { padding-right: 0; }
  .funer { padding: 22px 0; }
  .funer p { font-size: 16.5px; }
  .pie { padding: 32px 0 calc(24px + env(safe-area-inset-bottom)); }
  .pie nav { gap: 2px 20px; }
  .pie .wrap { gap: 18px; }
  .aviso-idioma { left: 12px; right: 12px; }
}
@media (max-width: 380px) {
  .hero-mini { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; }
  .barra .btn { font-size: 15px; padding: 10px 8px; }
}

/* ─── 21 · Movimiento reducido ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Fotos ilustrativas (hasta que haya fotos reales): paso 1 y 3, columna de «Cómo funciona» y «En vida» */
.paso-foto, .como-foto, .envida-foto { margin: 20px 0 0; max-width: 560px; }
.paso-foto img, .como-foto img, .envida-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 897; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--linea-2); background: var(--marmol); }
.paso-foto figcaption, .como-foto figcaption, .envida-foto figcaption { margin-top: 6px; font-size: 14px; color: var(--t2); }
.como-foto { margin-top: 32px; }
.envida-foto { margin-top: 24px; }
@media (max-width: 900px) { .como-foto { max-width: none; margin-top: 24px; } .paso-foto { margin-top: 16px; } }
.guia-portada { display: block; width: 104px; height: auto; margin-bottom: 18px; border: 1px solid var(--linea-2); border-radius: 4px; }