/* ==========================================================================
   DiarioSurEsquelas.com - hoja de estilos
   Concepto: "Mediterráneo editorial". Papel crema, tinta azul mar profundo,
   acento terracota del atardecer malagueño y tipografía de periódico clásico.
   ========================================================================== */

/* Tipografías alojadas en la propia web (subconjunto latino, fontsource) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fuentes/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("fuentes/figtree-latin-800-normal.woff2") format("woff2"); }

:root {
  --papel: #fbf7f1;            /* fondo general, crema cálido */
  --arena: #f3ebdf;            /* secciones alternas */
  --blanco: #ffffff;
  --tinta: #13293a;            /* azul mar profundo para texto y bloques oscuros */
  --tinta-suave: #4f5d68;
  --mar: #2f6385;              /* azul Mediterráneo */
  --mar-claro: #e3edf3;
  --terracota: #b8572b;        /* acento */
  --terracota-texto: #9a4420;  /* AA sobre papel y arena */
  --terracota-claro: #f0c9a8;  /* AA sobre tinta */
  --linea: #e4d9ca;
  --linea-fuerte: #cdbca6;
  --sombra: 0 18px 40px -22px rgba(19, 41, 58, .35);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --ancho: 1180px;
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mar); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--terracota-texto); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; color: var(--tinta); font-variant-numeric: lining-nums; }
h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: 26px; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--terracota-texto); }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; }
.saltar:focus { left: 8px; }

/* Antetítulo con filete, como una sección de periódico */
.antetitulo {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracota-texto); margin-bottom: 18px;
}
.antetitulo::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.boton svg { width: 18px; height: 18px; flex: none; }
.boton:hover { transform: translateY(-1px); }
.boton-solido { background: var(--terracota); color: #fff; }
.boton-solido:hover { background: var(--terracota-texto); color: #fff; }
.boton-linea { border-color: var(--tinta); color: var(--tinta); background: rgba(255,255,255,.55); }
.boton-linea:hover { background: var(--tinta); color: #fff; }
.boton-claro { background: #fff; color: var(--tinta); }
.boton-claro:hover { background: var(--terracota-claro); color: var(--tinta); }

/* ---------- Franja superior ---------- */

/* ---------- Cabecera tipo cabecera de periódico ---------- */
/* Fija arriba al bajar por la página; con la clase .compacta (sur.js) se estrecha aún más */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,247,241,.97); border-bottom: 1px solid var(--linea-fuerte);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: box-shadow .3s;
}
.cabecera-marca { text-align: center; padding: 16px 0 12px; border-bottom: 1px solid var(--linea); transition: padding .3s; }
.marca { display: inline-block; text-decoration: none; color: var(--tinta); }
.marca-nombre { display: block; font: 600 clamp(28px, 3.8vw, 42px)/1 var(--serif); letter-spacing: .01em; transition: font-size .3s; }
.marca-nombre i { font-weight: 500; color: var(--terracota-texto); }
.marca-nombre small { font-size: .45em; font-family: var(--sans); font-weight: 500; letter-spacing: .04em; color: var(--tinta-suave); }
.marca-lema {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; max-height: 20px; overflow: hidden;
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave);
  transition: max-height .3s, margin .3s, opacity .3s, font-size .3s, letter-spacing .3s;
}
.marca-lema::before, .marca-lema::after { content: ""; width: 40px; height: 1px; background: var(--linea-fuerte); }
/* Botón de llamada siempre visible en la cabecera */
.cabecera-marca { position: relative; }
.boton-telefono {
  position: absolute; right: max(24px, calc((100% - var(--ancho)) / 2)); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--terracota); color: #fff; font: 700 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px -12px rgba(19,41,58,.6); transition: background .2s, padding .3s;
}
.boton-telefono:hover { background: var(--terracota-texto); color: #fff; }
.boton-telefono:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.boton-telefono svg { width: 17px; height: 17px; flex: none; }
.cabecera.compacta .boton-telefono { padding: 8px 16px; }
.cabecera.compacta { box-shadow: 0 10px 24px -16px rgba(19,41,58,.35); }
.cabecera.compacta .cabecera-marca { padding: 7px 0 6px; }
.cabecera.compacta .marca-nombre { font-size: 26px; }
.cabecera.compacta .marca-lema { max-height: 14px; margin-top: 3px; font-size: 10px; letter-spacing: .16em; }
.cabecera.compacta .marca-lema::before, .cabecera.compacta .marca-lema::after { width: 24px; }
.cabecera.compacta .menu a { padding-top: 10px; padding-bottom: 10px; }
.cabecera.compacta .menu a::after { bottom: 5px; }
html { scroll-padding-top: 110px; }

.navegacion .contenedor { display: flex; justify-content: center; align-items: center; position: relative; }
.menu { display: flex; gap: 6px; }
.menu a {
  position: relative; display: block; padding: 13px 18px; transition: padding .3s;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none;
}
.menu a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 2px;
  background: var(--terracota); transform: scaleX(0); transition: transform .25s;
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.boton-menu { display: none; }

/* ---------- Portada ---------- */
.portada { position: relative; background: var(--papel); }
.portada-imagen { position: relative; width: 100%; height: clamp(500px, 40vw, 740px); overflow: hidden; }
.portada-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.portada-imagen::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 50% 30%, rgba(251,247,241,.85), rgba(251,247,241,0) 100%),
    linear-gradient(180deg, rgba(251,247,241,.9) 0%, rgba(251,247,241,.5) 38%, rgba(251,247,241,0) 62%);
}
.portada-texto { position: absolute; inset: 0 0 auto; z-index: 2; text-align: center; padding-top: clamp(28px, 4.5vw, 64px); }
.portada-texto h1 { margin-bottom: 14px; }
.portada-entrada { max-width: 640px; margin: 0 auto 26px; font-size: 18px; color: var(--tinta); }
.portada-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* Datos en columnas, como un sumario */
.sumario { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.sumario ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.sumario li { padding: 26px 24px; border-left: 1px solid var(--linea); }
.sumario li:first-child { border-left: 0; }
.sumario b { display: block; font: 600 26px/1.1 var(--serif); color: var(--tinta); margin-bottom: 4px; }
.sumario span { font-size: 14px; color: var(--tinta-suave); line-height: 1.45; display: block; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 9vw, 112px) 0; }
.seccion-arena { background: var(--arena); }
.seccion-blanca { background: var(--blanco); }
.cabeza { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.cabeza h2 { margin: 0; }
.cabeza p { margin: 0; color: var(--tinta-suave); }
.cabeza-centro { text-align: center; max-width: 720px; margin: 0 auto 48px; display: block; }
.cabeza-centro .antetitulo { justify-content: center; }
.cabeza-centro .antetitulo::after { content: ""; width: 28px; height: 1px; background: currentColor; }

/* Sección "Cómo funciona": sol geométrico, figuras flotantes y mar en movimiento */
.seccion-pasos { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(120px, 14vw, 180px); }
.seccion-pasos > .contenedor { position: relative; z-index: 1; }
.geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.geo-sol { position: absolute; width: clamp(320px, 38vw, 560px); top: clamp(-260px, -18vw, -140px); right: clamp(-240px, -14vw, -120px); }
.geo-halo { transform-origin: 200px 200px; animation: geo-latido 6s ease-in-out infinite; }
.geo-rayos { transform-origin: 200px 200px; animation: geo-giro 60s linear infinite; }
.geo-anillo { transform-origin: 200px 200px; animation: geo-giro 28s linear infinite reverse; }
.geo-nucleo { transform-origin: 200px 200px; animation: geo-latido 6s ease-in-out infinite; }
.geo-figura { position: absolute; display: block; }
.geo-rombo { width: 46px; height: 46px; left: 2.5%; top: 58%; border: 1.5px solid var(--terracota); transform: rotate(45deg); opacity: .5; animation: geo-flota-rombo 9s ease-in-out infinite; }
.geo-circulo { width: 90px; height: 90px; left: 38%; top: 8%; border-radius: 50%; border: 1.5px dashed var(--mar); opacity: .35; animation: geo-flota 11s ease-in-out infinite, geo-giro 40s linear infinite; }
.geo-triangulo { width: 40px; left: 52%; bottom: 30%; color: var(--mar); opacity: .4; animation: geo-flota-giro 13s ease-in-out infinite; }
.geo-punto { width: 14px; height: 14px; left: 22%; bottom: 34%; border-radius: 50%; background: var(--terracota); opacity: .55; animation: geo-flota 7s ease-in-out infinite reverse; }
.geo-mar { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 10vw, 140px); }
.geo-ola { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.geo-ola-1 { fill: var(--mar); opacity: .12; animation: geo-mar 26s linear infinite; }
.geo-ola-2 { fill: var(--mar); opacity: .18; animation: geo-mar 18s linear infinite reverse; }
.geo-ola-3 { fill: var(--arena); animation: geo-mar 34s linear infinite; }

@keyframes geo-giro { to { transform: rotate(360deg); } }
@keyframes geo-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes geo-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22px; } }
@keyframes geo-flota-rombo { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(135deg) translate(-10px, -14px); } }
@keyframes geo-flota-giro { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, -26px) rotate(160deg); } }
@keyframes geo-mar { to { transform: translateX(-50%); } }

/* Pasos: tarjetas con icono en círculo, unidas por una línea que se dibuja */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: paso; position: relative; }
.pasos::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 62px; height: 0;
  border-top: 2px dashed var(--terracota); opacity: .55;
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.6,.1,.2,1) .3s;
}
.pasos.visible::before { transform: scaleX(1); }
.pasos li {
  position: relative; counter-increment: paso; text-align: center;
  padding: 26px 28px 32px; border-radius: 18px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(205,188,166,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px -30px rgba(19,41,58,.45);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pasos li:hover { transform: translateY(-6px); border-color: var(--terracota); box-shadow: 0 28px 50px -28px rgba(184,87,43,.45); }
.pasos li::before {
  content: counter(paso, upper-roman);
  position: absolute; top: 14px; right: 20px;
  font: italic 500 40px/1 var(--serif); color: var(--terracota); opacity: .25;
}
.paso-icono {
  position: relative; display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--terracota); color: #fff; box-shadow: 0 10px 24px -10px rgba(184,87,43,.7);
}
.paso-icono svg { width: 28px; height: 28px; }
.paso-icono::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px dashed var(--terracota); opacity: .6; animation: geo-giro 14s linear infinite;
}
.paso-icono::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--terracota); animation: paso-onda 3s ease-out infinite;
}
.pasos li:nth-child(2) .paso-icono { background: var(--mar); box-shadow: 0 10px 24px -10px rgba(47,99,133,.7); }
.pasos li:nth-child(2) .paso-icono::before, .pasos li:nth-child(2) .paso-icono::after { border-color: var(--mar); }
.pasos li:nth-child(2) .paso-icono::after { animation-delay: 1s; }
.pasos li:nth-child(3) .paso-icono { background: var(--tinta); box-shadow: 0 10px 24px -10px rgba(19,41,58,.7); }
.pasos li:nth-child(3) .paso-icono::before, .pasos li:nth-child(3) .paso-icono::after { border-color: var(--tinta); }
.pasos li:nth-child(3) .paso-icono::after { animation-delay: 2s; }
@keyframes paso-onda { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.pasos h3 { font-size: 26px; margin-bottom: 8px; }
.pasos p { color: var(--tinta-suave); margin: 0; }

/* Entrada escalonada de las tarjetas */
.js .pasos.aparece { opacity: 1; transform: none; }
.js .pasos.aparece li { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .pasos.aparece.visible li { opacity: 1; transform: none; }
.js .pasos.aparece.visible li:nth-child(2) { transition-delay: .2s; }
.js .pasos.aparece.visible li:nth-child(3) { transition-delay: .4s; }
.js .pasos.aparece.visible li:hover { transition-delay: 0s; transform: translateY(-6px); }

/* Dos columnas editoriales */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.dos-inverso > :first-child { order: 2; }
.texto-suave { color: var(--tinta-suave); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--terracota); padding-bottom: 3px; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .2s; }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* Esquela de muestra con el formato de Diario SUR:
   recuadro fino gris, cruz gris arriba a la izquierda con una raya hasta el borde,
   nombre en palo seco muy grueso y texto alineado a la izquierda */
.esquela {
  position: relative; background: #fff; color: #1a1a1a; text-align: left;
  border: 1.5px solid #8a8a8a; padding: clamp(12px, 1.6vw, 16px) clamp(16px, 3vw, 26px) clamp(20px, 3vw, 28px);
  font-family: var(--sans); box-shadow: var(--sombra);
}
.esquela-cabeza { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px -2px; }
.esquela-cruz { flex: none; width: 28px; height: 46px; color: #b4b4b4; }
.esquela-raya { flex: 1; height: 9px; margin-top: 12px; background: #b4b4b4; }
.esquela p { font-size: 16px; line-height: 1.45; margin: 0 0 12px; }
.esquela .esquela-trato { font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: -28px 0 8px 40px; }
.esquela .esquela-nombre { font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; color: #111; margin: 0 0 8px; }
.esquela .esquela-cargo { font-size: 15px; font-weight: 800; text-transform: uppercase; color: #9a9a9a; letter-spacing: -.01em; margin: 0 0 22px; }
.esquela .esquela-nombre + p:not(.esquela-cargo) { margin-top: 20px; }
.esquela .esquela-dep { font-weight: 700; letter-spacing: .06em; margin: 14px 0; }
.esquela .esquela-familia { font-weight: 700; color: #111; }
.esquela .esquela-funeral { font-size: 15px; margin: 16px 0 0; }
.esquela .esquela-funeral:empty { display: none; }
.esquelas-ejemplos { display: grid; gap: 28px; margin: 8px 0 12px; }
.esquela-tipo { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); margin: 0 0 10px; }

/* Lista de precios con puntos guía */
.precios { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.precios li { border-bottom: 1px solid var(--linea); }
.precio-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 16px;
  background: none; border: 0; border-left: 3px solid transparent; text-align: left;
  font: inherit; color: inherit; cursor: pointer; transition: background .2s, border-color .2s;
}
.precio-fila:hover { background: var(--papel); }
.precio-fila[aria-pressed="true"] { background: var(--arena); border-left-color: var(--terracota); }
.precios .p-modelo { display: block; font: 600 21px/1.2 var(--serif); }
.precios .p-medida { display: block; font: 400 14px/1.4 var(--sans); color: var(--tinta-suave); margin-top: 2px; }
.precios .p-guia { flex: 1; border-bottom: 1px dotted var(--linea-fuerte); min-width: 20px; }
.precios .p-precios { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.precios .p-sin { font: 400 13px/1 var(--sans); color: #8a8f94; font-variant-numeric: lining-nums tabular-nums; }
.precios .p-precio { font: 600 26px/1 var(--serif); color: var(--terracota-texto); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* Tarifador: recreación del tamaño de la esquela en una página de SUR */
.tarifador { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.simulador { margin: 0; position: sticky; top: 110px; }
.sim-hoja {
  background: #fff; border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra);
  padding: 4.5% 5.5% 6%; max-width: 420px; margin: 0 auto;
}
.sim-cabecera {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; margin-bottom: 4%;
  border-bottom: 2px solid #1a1a1a; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b;
}
.sim-cabecera b { font: 800 22px/1 var(--sans); letter-spacing: -.02em; color: #1a1a1a; text-transform: none; }
.sim-cabecera span:last-child { margin-left: auto; }
/* Zona impresa: 256 mm de ancho × 334 mm de alto, 5 columnas y 10 módulos */
.sim-zona {
  position: relative; aspect-ratio: 256 / 334;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(18.75% - 1px), rgba(19,41,58,.07) calc(18.75% - 1px) 18.75%, transparent 18.75% 20.3125%),
    repeating-linear-gradient(180deg, transparent 0 calc(8.8% - 1px), rgba(19,41,58,.07) calc(8.8% - 1px) 8.8%, transparent 8.8% 9.9%);
}
.sim-relleno { position: absolute; left: 0; right: 0; height: 2.2%; background: #e7e3dc; border-radius: 1px; }
.sim-relleno-1 { top: 0; width: 70%; }
.sim-relleno-2 { top: 4%; }
.sim-relleno-3 { top: 8%; width: 85%; }
.sim-pulsable { cursor: pointer; }
.sim-esquela {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  background: #fff; border: 1.5px solid #6e6e6e; box-shadow: 0 0 0 4px rgba(184,87,43,.25);
  transition: width .6s cubic-bezier(.3,.9,.3,1), height .6s cubic-bezier(.3,.9,.3,1);
  overflow: hidden;
}
.sim-cruz { position: absolute; left: 6px; top: 5px; width: 7px; height: 12px;
  background: linear-gradient(#b4b4b4, #b4b4b4) 2.5px 0 / 2px 100% no-repeat, linear-gradient(#b4b4b4, #b4b4b4) 0 3px / 100% 2px no-repeat; }
.sim-cruz::after { content: ""; position: absolute; left: 11px; top: 3px; width: 400px; height: 2px; background: #b4b4b4; }
.sim-lineas {
  position: absolute; left: 6px; right: 6px; top: 22px; bottom: 6px;
  background:
    linear-gradient(#1a1a1a, #1a1a1a) 0 0 / 70% 5px no-repeat,
    repeating-linear-gradient(180deg, #c9c9c9 0 2px, transparent 2px 7px) 0 12px / 100% 100% no-repeat;
}
.sim-info { display: grid; gap: 2px; max-width: 420px; margin: 22px auto 0; text-align: center; }
.sim-modelo { font: 600 24px/1.2 var(--serif); font-variant-numeric: lining-nums; }
.sim-medida { font-size: 14px; color: var(--tinta-suave); }
.sim-total-etiqueta { margin-top: 12px; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); }
.sim-total { font: 600 44px/1.05 var(--serif); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.sim-desglose { font-size: 14px; color: var(--tinta-suave); }

/* Visor de formatos: esquela de ejemplo cuyo texto escala con su tamaño (unidades de contenedor) */
/* La visualización manda: tabla estrecha a la izquierda y página grande a la derecha */
.visor { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.visor .simulador { order: 2; position: static; }
.visor .sim-hoja { max-width: min(600px, 64vh); }
.visor .sim-info { max-width: 600px; }
.visor .precio-fila { padding: 9px 10px 9px 12px; gap: 8px; }
.visor .p-modelo { font-size: 17px; }
.visor .p-medida { font-size: 12px; line-height: 1.3; }
.visor .p-guia { display: none; }
.visor .p-precios { margin-left: auto; }
.visor .p-sin { font-size: 11px; }
.visor .nota { font-size: 13px; }
.visor .sim-esquela {
  container-type: size; border: 0;
  box-shadow: 0 0 0 3px rgba(184,87,43,.4), 0 12px 26px -12px rgba(19,41,58,.55);
}
/* Mismo diseño que la esquela de la portada (formato Diario SUR): recuadro fino gris, cruz gris
   a la izquierda con raya hasta el borde, nombre en palo seco muy grueso y texto a la izquierda.
   --u escala con el ancho, limitado por el alto en los formatos apaisados. */
.muestra {
  --u: min(1cqw, 1.6cqh);
  position: absolute; inset: 0; border: max(1px, calc(var(--u) * .4)) solid #8a8a8a;
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 6) calc(var(--u) * 5);
  overflow: hidden; text-align: left; color: #1a1a1a; font-family: var(--sans);
}
.muestra > * { display: block; }
.muestra-cabeza { display: flex; align-items: flex-start; gap: calc(var(--u) * 2.6); margin-left: calc(var(--u) * -.5); }
.muestra-cruz { flex: none; width: calc(var(--u) * 7); color: #b4b4b4; }
.muestra-raya { flex: 1; height: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 3.2); background: #b4b4b4; }
.muestra-trato {
  margin: calc(var(--u) * -6.4) 0 calc(var(--u) * 2.2) calc(var(--u) * 10);
  font-size: calc(var(--u) * 3.8); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1;
}
.muestra-nombre { font-size: calc(var(--u) * 10); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; color: #111; margin-bottom: calc(var(--u) * 1.8); }
.muestra-cargo { font-size: calc(var(--u) * 3.6); font-weight: 800; line-height: 1.2; text-transform: uppercase; color: #9a9a9a; letter-spacing: -.01em; margin-bottom: calc(var(--u) * 3.4); }
.muestra-texto { font-size: calc(var(--u) * 3.8); line-height: 1.3; margin-bottom: calc(var(--u) * 2.4); }
.muestra-dep { font-size: calc(var(--u) * 3.8); font-weight: 700; letter-spacing: .06em; margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
.muestra-familia { font-weight: 700; color: #111; }
/* Formatos bajos (2 o 3 módulos de alto): no cabe todo, se queda lo esencial */
@container (aspect-ratio > 1.3) {
  .muestra-familia, .muestra-funeral { display: none; }
  .muestra-nombre { font-size: calc(var(--u) * 7.6); }
  .muestra-cargo { margin-bottom: calc(var(--u) * 2.4); }
}
/* Casi cuadrados (3 módulos de alto × 2 columnas): sin la familia */
@container (aspect-ratio > 1) and (aspect-ratio <= 1.3) { .muestra-familia { display: none; } }
.sim-modulos {
  justify-self: center; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--arena);
  font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--terracota-texto);
  font-variant-numeric: lining-nums tabular-nums;
}
.sim-nota { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--tinta-suave); }
.visor .p-precio { font-size: 16px; color: var(--tinta); }
.nota { font-size: 14px; color: var(--tinta-suave); line-height: 1.55; }
.cuadro-total { background: var(--tinta); color: #e7edf1; padding: 32px; border-radius: var(--radio); }
.cuadro-total h3 { color: #fff; }
.cuadro-total .cifra { display: block; font: 600 54px/1 var(--serif); color: var(--terracota-claro); margin: 8px 0 12px; }
.cuadro-total p { color: #c9d4db; font-size: 15px; }

/* Tabla (páginas interiores) */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.tabla th, .tabla td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla thead th { background: var(--tinta); color: #fff; font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tabla td:last-child, .tabla th:last-child { text-align: right; white-space: nowrap; }
.tabla tbody tr:nth-child(even) { background: var(--papel); }
.tabla .precio { display: block; font: 600 22px/1 var(--serif); color: var(--terracota-texto); }
.tabla .precio-sin { display: block; margin-top: 5px; font: 400 13px/1 var(--sans); color: #8a8f94; font-variant-numeric: lining-nums tabular-nums; }
/* Cifras alineadas en precios y teléfonos */
.tabla .precio, .precios .p-modelo, .cifra, .sumario b, .ficha-tel, .pie-tel, .llamada-tel b, .esquela { font-variant-numeric: lining-nums tabular-nums; }

/* Figuras */
.figura { margin: 0; }
.figura img { border-radius: var(--radio); box-shadow: var(--sombra); background: #fff; }
.figura figcaption { font-size: 14px; color: var(--tinta-suave); margin-top: 12px; font-style: italic; }
.marco { background: #fff; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); }
.marco img { box-shadow: none; }

/* Cita */
.cita { margin: 28px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--terracota); font: italic 500 24px/1.4 var(--serif); color: var(--tinta); }
.cita cite { display: block; margin-top: 10px; font: normal 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }

/* Índice "Todo lo que necesita saber": sumario de revista con sello giratorio */
.seccion-indice { background: var(--blanco); border-top: 1px solid var(--linea); }
.indice-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.indice-cabeza { position: sticky; top: 140px; }
.indice-cabeza h2 { font-size: clamp(38px, 4.6vw, 60px); }
.indice-cabeza p { max-width: 26em; }

/* Sello circular con texto que gira */
.sello { position: relative; width: 168px; aspect-ratio: 1; margin-top: 28px; color: var(--terracota-texto); }
.sello > svg:first-child { width: 100%; height: 100%; overflow: visible; }
.sello text { font: 600 12.5px var(--sans); letter-spacing: .21em; fill: currentColor; }
.sello-giro { transform-origin: 100px 100px; animation: geo-giro 24s linear infinite; }
.sello-cruz { position: absolute; left: 50%; top: 50%; width: 22px; transform: translate(-50%, -50%); color: var(--tinta); }

.indice { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); counter-reset: none; }
.indice li { border-bottom: 1px solid var(--linea-fuerte); }
.indice li:last-child { border-bottom: 2px solid var(--tinta); }
.indice a {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 52px; align-items: center; gap: 24px;
  padding: 30px 20px 30px 8px; text-decoration: none; color: var(--tinta);
}
/* Franja que barre la fila al pasar el ratón */
.indice a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.7,0,.2,1);
}
.indice a:hover::before, .indice a:focus-visible::before { transform: scaleX(1); }
.indice a:hover, .indice a:focus-visible { color: #fff; }

.indice .i-num {
  font: italic 500 46px/1 var(--serif); font-variant-numeric: lining-nums;
  color: transparent; -webkit-text-stroke: 1px var(--terracota); transition: color .4s, -webkit-text-stroke-color .4s;
}
.indice a:hover .i-num, .indice a:focus-visible .i-num { color: var(--terracota-claro); -webkit-text-stroke-color: var(--terracota-claro); }
.indice h3 {
  font-size: clamp(30px, 3.2vw, 42px); margin: 0 0 4px; color: inherit;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), color .4s;
}
.indice a:hover h3, .indice a:focus-visible h3 { transform: translateX(10px); font-style: italic; color: #fff; }
.indice p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--tinta-suave); transition: color .4s, transform .5s cubic-bezier(.2,.8,.2,1) .04s; }
.indice a:hover p, .indice a:focus-visible p { color: #c9d4db; transform: translateX(10px); }
.indice .i-dato {
  padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-texto);
  font-variant-numeric: lining-nums tabular-nums; transition: color .4s, border-color .4s;
}
.indice a:hover .i-dato, .indice a:focus-visible .i-dato { color: var(--terracota-claro); border-color: rgba(240,201,168,.5); }
.indice .i-flecha {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--tinta); color: var(--tinta);
  transition: background .4s, border-color .4s, color .4s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.indice .i-flecha svg { width: 20px; height: 20px; transform: rotate(-45deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.indice a:hover .i-flecha, .indice a:focus-visible .i-flecha { background: var(--terracota); border-color: var(--terracota); color: #fff; transform: scale(1.08); }
.indice a:hover .i-flecha svg, .indice a:focus-visible .i-flecha svg { transform: rotate(0); }

/* Llamada final */
.llamada { position: relative; background: var(--tinta); color: #dfe7ec; overflow: hidden; }
.llamada::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 0%, rgba(240,201,168,.22), transparent 60%),
              radial-gradient(50% 90% at 0% 100%, rgba(47,99,133,.55), transparent 70%);
}
.llamada .contenedor { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: clamp(56px, 8vw, 96px) 0; }
.llamada h2 { color: #fff; }
.llamada .antetitulo { color: var(--terracota-claro); }
.llamada p { color: #c9d4db; margin: 0; }
.llamada-tel { justify-self: end; text-align: right; text-decoration: none; color: #fff; }
.llamada-tel b { display: block; font: 600 clamp(44px, 6vw, 72px)/1 var(--serif); letter-spacing: .01em; }
.llamada-tel span { display: inline-block; margin-top: 12px; font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-claro); }
.llamada-tel:hover b { color: var(--terracota-claro); }

/* ---------- Páginas interiores ---------- */
.cabecera-pagina { position: relative; padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 64px); background: var(--arena); overflow: hidden; border-bottom: 1px solid var(--linea); }
.cabecera-pagina::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46%;
  background: url("../img/cabecera-malaga-1000.webp") 70% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
          mask-image: linear-gradient(90deg, transparent, #000 60%);
  opacity: .9;
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; }
.cabecera-pagina h1 { font-size: clamp(38px, 5vw, 62px); max-width: 14em; }
.cabecera-pagina p { max-width: 560px; font-size: 18px; color: var(--tinta-suave); margin: 0; }
.migas { font-size: 13px; color: var(--tinta-suave); margin-bottom: 18px; }
.migas a { color: var(--tinta-suave); }
.migas span { margin: 0 6px; }

.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(36px, 5vw, 72px); align-items: start; }
.texto { max-width: 760px; }
.texto h2 { font-size: clamp(30px, 3.4vw, 40px); margin-top: 1.4em; }
.texto h2:first-child { margin-top: 0; }
.texto h3 { margin-top: 1.4em; }
.texto ul, .texto ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.texto li { margin-bottom: .5em; }
.texto li::marker { color: var(--terracota); }
.texto img { margin: 8px 0 24px; }

.lateral { position: sticky; top: 110px; display: grid; gap: 20px; }
.ficha { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px; }
.ficha h2 { font-size: 24px; margin-bottom: 10px; }
.ficha p { font-size: 15px; color: var(--tinta-suave); }
.ficha-oscura { background: var(--tinta); border-color: var(--tinta); color: #dfe7ec; }
.ficha-oscura h2 { color: #fff; }
.ficha-oscura p { color: #c9d4db; }
.ficha-tel { display: block; font: 600 34px/1 var(--serif); color: #fff; text-decoration: none; margin: 4px 0 14px; }
.ficha-tel:hover { color: var(--terracota-claro); }
.ficha ul { list-style: none; margin: 0; padding: 0; }
.ficha li a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-weight: 500; font-size: 15px; }
.ficha li:last-child a { border-bottom: 0; }
.ficha li a:hover, .ficha li a[aria-current="page"] { color: var(--terracota-texto); }

/* Formularios */
.formulario { display: grid; gap: 18px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(22px, 4vw, 36px); }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo label { display: block; font: 600 13px/1.3 var(--sans); letter-spacing: .04em; margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 13px 14px; font: 400 16px/1.4 var(--sans); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--mar); box-shadow: 0 0 0 3px var(--mar-claro); background: #fff; }
.campo textarea { min-height: 150px; resize: vertical; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tinta-suave); }
.casilla input { margin-top: 4px; accent-color: var(--terracota); }
/* Campo trampa antispam: fuera de la vista y del orden de tabulación (no display:none, que algunos robots detectan) */
.campo-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Razones en tarjetas (Por qué publicar) */
.texto .razones { list-style: none; margin: 8px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.texto .razones li { margin: 0; background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--terracota); border-radius: var(--radio); padding: 22px 22px 20px; }
.texto .razones h3 { font-size: 24px; margin: 0 0 6px; }
.texto .razones p { font-size: 15px; color: var(--tinta-suave); margin: 0; }

/* Pasos numerados con línea discontinua (Cómo publicar) */
.texto .linea { list-style: none; counter-reset: linea; margin: 8px 0 32px; padding: 0; }
.texto .linea li { counter-increment: linea; position: relative; margin: 0; padding: 0 0 26px 66px; }
.texto .linea li::before {
  content: counter(linea); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--tinta); color: #fff; font: 600 21px/1 var(--serif);
}
.texto .linea li::after { content: ""; position: absolute; left: 22px; top: 54px; bottom: 6px; width: 2px; background: repeating-linear-gradient(var(--terracota) 0 6px, transparent 6px 12px); }
.texto .linea li:last-child { padding-bottom: 0; }
.texto .linea li:last-child::after { display: none; }
.texto .linea h3 { margin: 8px 0 6px; }
.texto .linea p { margin: 0 0 .6em; color: var(--tinta-suave); }

/* Preguntas frecuentes desplegables */
.faq { border-top: 2px solid var(--tinta); margin: 8px 0 36px; }
.faq details { border-bottom: 1px solid var(--linea-fuerte); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px;
  list-style: none; cursor: pointer; font: 600 21px/1.25 var(--serif); color: var(--tinta); transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); font: 400 20px/1 var(--sans); color: var(--terracota-texto); transition: transform .3s, background .2s;
}
.faq summary:hover { color: var(--terracota-texto); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--arena); }
.faq-respuesta { padding: 0 52px 18px 4px; }
.faq-respuesta p { margin: 0 0 .8em; color: var(--tinta-suave); }
.faq-respuesta p:last-child { margin-bottom: 0; }

/* Mapa web */
.mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.texto .mapa h2 { font-size: 26px; margin: 0 0 10px; }
.texto .mapa ul { list-style: none; padding: 0; margin: 0 0 24px; border-top: 2px solid var(--tinta); }
.texto .mapa li { margin: 0; border-bottom: 1px solid var(--linea); }
.mapa a { display: block; padding: 11px 2px; text-decoration: none; color: var(--tinta); font-weight: 600; }
.mapa a span { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-suave); }
.mapa a:hover { color: var(--terracota-texto); }

/* Portada: tabla de formatos propia a escala (SVG) */
.tabla-formatos { display: block; width: 100%; height: auto; }
.tabla-formatos text { font: 600 10.5px var(--sans); fill: var(--tinta); letter-spacing: .02em; }

/* Portada: zonas de difusión */
.zonas { margin: 0; }
.zonas-tarjeta { background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--terracota); border-radius: var(--radio); padding: 26px 26px 10px; box-shadow: var(--sombra); }
.zonas ul { list-style: none; margin: 0; padding: 0; }
.zonas li { padding: 14px 0; border-top: 1px solid var(--linea); }
.zonas li:first-child { border-top: 0; padding-top: 0; }
.zonas b { display: block; font: 600 24px/1.2 var(--serif); }
.zonas li span { font-size: 15px; color: var(--tinta-suave); }

/* Esquela con foto (ejemplo): la foto a la derecha del texto */
.esquela-con-foto .esquela-foto {
  float: right; width: 28%; aspect-ratio: 4 / 5; margin: 6px 0 10px 16px; display: grid; place-items: end center;
  background: #e2e2e2; color: #b9b9b9; overflow: hidden;
}
.esquela-con-foto .esquela-foto svg { width: 80%; }
.esquela-con-foto::after { content: ""; display: block; clear: both; }

/* Esquela civil, sin cruz: solo la raya gris */
.esquela-civil .esquela-cabeza { margin-left: 0; }
.esquela-civil .esquela-trato { margin: 0 0 8px; }

/* Ejemplos: animación "de sus datos a la esquela" (sur.js añade y quita .activa en bucle) */
.composicion { margin: 28px 0 36px; }
.comp-escena {
  display: grid; grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.1fr); align-items: center; gap: 18px;
  padding: clamp(18px, 3vw, 30px); border-radius: 10px;
  background: radial-gradient(circle, rgba(19,41,58,.08) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--arena);
}
.comp-nota {
  display: grid; gap: 9px; padding: 18px 18px 20px; background: #fff; border-radius: 6px;
  box-shadow: 0 14px 30px -20px rgba(19,41,58,.6); transform: rotate(-1.5deg);
}
.comp-etiqueta { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: 4px; }
.comp-dato { font-size: 13px; line-height: 1.35; color: var(--tinta); border-bottom: 1px dashed var(--linea-fuerte); padding-bottom: 6px; }
.comp-dato b { display: block; font: 600 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.comp-flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--terracota); color: #fff; }
.comp-flecha svg { width: 20px; height: 20px; }
.composicion.activa .comp-flecha { animation: comp-latido 1.6s ease-in-out infinite; }
.comp-esquela { padding: 12px 16px 16px; box-shadow: 0 18px 36px -22px rgba(19,41,58,.6); }
.comp-esquela .esquela-cabeza { gap: 8px; }
.comp-esquela .esquela-cruz { width: 17px; height: 28px; }
.comp-esquela .esquela-raya { height: 6px; margin-top: 7px; }
.comp-esquela p { font-size: 12px; line-height: 1.4; margin: 0 0 7px; }
.comp-esquela .esquela-trato { font-size: 10px; margin: -18px 0 6px 26px; }
.comp-esquela .esquela-nombre { font-size: 22px; margin-bottom: 8px; }
.comp-esquela .esquela-dep { margin: 8px 0; }
.comp-esquela .esquela-funeral { font-size: 11px; margin: 8px 0 0; }
/* Cada pieza aparece de izquierda a derecha, por orden (--i); al reiniciar se desvanece todo a la vez */
.js .comp-dato, .js .comp-esquela > * {
  opacity: 0; clip-path: inset(0 100% 0 0);
  transition: opacity .35s ease, clip-path 0s linear .35s;
}
.composicion.activa .comp-dato, .composicion.activa .comp-esquela > * {
  opacity: 1; clip-path: inset(0 0 0 0);
  transition: opacity .2s ease calc(var(--i) * .45s), clip-path .7s ease calc(var(--i) * .45s);
}
.composicion.activa .comp-dato { transition-timing-function: ease, steps(22, end); }
.composicion figcaption { margin-top: 12px; font-size: 14px; font-style: italic; color: var(--tinta-suave); text-align: center; }
@keyframes comp-latido { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Botones para ir a cada tipo de ejemplo */
.tipos { margin: 0 0 36px; padding: 20px 0 22px; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linea-fuerte); }
.tipos-titulo { display: block; margin-bottom: 14px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto); }
.texto .tipos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.texto .tipos li { margin: 0; }
.tipos a {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--tinta);
  font: 600 14px/1 var(--sans); color: var(--tinta); text-decoration: none; background: #fff;
  transition: background .2s, color .2s, transform .2s;
}
.tipos a:hover { background: var(--tinta); color: #fff; transform: translateY(-2px); }
.ejemplo-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ejemplo-volver { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
/* El ejemplo al que se llega con un botón se destaca un momento */
.esquelas-ejemplos > .figura:target .esquela { animation: ejemplo-destacar 2.2s ease-out; }
@keyframes ejemplo-destacar { 0%, 30% { box-shadow: 0 0 0 4px var(--terracota), var(--sombra); } 100% { box-shadow: 0 0 0 4px transparent, var(--sombra); } }

/* ---------- Pie ---------- */
.pie { background: #efe4d4; color: var(--tinta-suave); font-size: 15px; border-top: 3px solid var(--terracota); }
.pie .contenedor { padding: 64px 0 0; }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.pie h2 { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: 18px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--terracota-texto); text-decoration: underline; }
.pie-marca { font: 600 28px/1.1 var(--serif); color: var(--tinta); margin-bottom: 12px; display: block; }
.pie-marca i { color: var(--terracota-texto); font-weight: 500; }
.pie-tel { display: block; font: 600 30px/1 var(--serif); color: var(--tinta) !important; margin-bottom: 8px; }
.pie-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid var(--linea-fuerte); font-size: 13px; }

/* Botón fijo de llamada en móvil */
.llamar-fijo { display: none; }

/* Aparición suave */
.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
  .geo *, .geo-figura, .paso-icono::before, .paso-icono::after, .sello-giro, .comp-flecha, .figura:target .esquela { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .indice-rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .indice-cabeza { position: static; }
  .sello { width: 128px; margin-top: 18px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .cuerpo { grid-template-columns: 1fr; }
  .lateral { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .cabecera-marca { padding: 12px 60px 10px; }
  .marca-nombre { font-size: 26px; }
  .cabecera.compacta .cabecera-marca { padding: 8px 60px; }
  .cabecera.compacta .marca-nombre { font-size: 22px; }
  .cabecera.compacta .marca-lema { font-size: 9px; letter-spacing: .06em; margin-top: 2px; }
  .cabecera.compacta .boton-menu { width: 38px; height: 38px; }
  .marca-lema { font-size: 10px; letter-spacing: .08em; line-height: 1.4; }
  .marca-lema::before, .marca-lema::after { display: none; }
  .boton-menu {
    display: grid; place-items: center; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: #fff; color: var(--tinta); cursor: pointer;
  }
  .boton-menu svg { width: 22px; height: 22px; }
  .boton-telefono { position: static; transform: none; display: flex; width: fit-content; margin: 8px auto 0; padding: 8px 14px; font-size: 14px; }
  .cabecera.compacta .boton-telefono { margin-top: 5px; padding: 6px 12px; font-size: 13px; }
  .navegacion { display: none; }
  .navegacion.abierta { display: block; }
  .navegacion .contenedor { display: block; }
  .menu { flex-direction: column; gap: 0; padding: 6px 0 12px; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid var(--linea); }
  .menu a::after { display: none; }
  .menu a[aria-current="page"] { color: var(--terracota-texto); }

  .portada-imagen { height: auto; aspect-ratio: 4 / 3; }
  .portada-imagen img { object-position: 30% 50%; }
  .portada-imagen::after { display: none; }
  .portada-texto { position: static; padding: 36px 0 8px; }
  .portada-entrada { font-size: 17px; }

  .sumario ul { grid-template-columns: 1fr 1fr; }
  .sumario li:nth-child(3) { border-left: 0; }
  .sumario li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .sumario li { padding: 20px 16px; }

  .cabeza, .dos, .llamada .contenedor { grid-template-columns: 1fr; gap: 28px; }
  .tarifador { grid-template-columns: 1fr; gap: 28px; }
  .simulador { position: static; }
  .sim-hoja { max-width: 250px; }
  .visor .simulador { order: 0; }
  .visor .sim-hoja { max-width: 340px; }
  .dos-inverso > :first-child { order: 0; }
  .pasos { grid-template-columns: 1fr; gap: 22px; }
  .pasos::before { left: 50%; right: auto; top: 40px; bottom: 40px; height: auto; width: 0; border-top: 0; border-left: 2px dashed var(--terracota); transform: scaleY(0); transform-origin: top; }
  .pasos.visible::before { transform: scaleY(1); }
  .geo-sol { width: 300px; top: -150px; right: -150px; opacity: .8; }
  .geo-rombo { left: auto; right: 6%; top: auto; bottom: 18%; }
  .geo-circulo { left: auto; right: 8%; top: 46%; width: 60px; height: 60px; }
  .geo-triangulo { left: 6%; bottom: 12%; }
  .llamada-tel { justify-self: start; text-align: left; }

  .cabecera-pagina::after { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; }
  .lateral { grid-template-columns: 1fr; }
  .formulario .fila { grid-template-columns: 1fr; }
  .texto .razones, .mapa { grid-template-columns: minmax(0, 1fr); }
  .comp-escena { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .comp-flecha { justify-self: center; transform: rotate(90deg); }
  .composicion.activa .comp-flecha { animation: none; }
  .faq-respuesta { padding-right: 4px; }

  .llamar-fijo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
    padding: 15px; border-radius: 999px; background: var(--terracota); color: #fff;
    font: 600 16px/1 var(--sans); text-decoration: none; box-shadow: 0 10px 30px -8px rgba(19,41,58,.5);
  }
  .llamar-fijo svg { width: 18px; height: 18px; }
  .pie .contenedor { padding-bottom: 76px; }
}

@media (max-width: 560px) {
  .pie-rejilla { grid-template-columns: 1fr; }
  .indice a { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 10px 14px; padding: 22px 6px 22px 2px; }
  .indice .i-num { font-size: 32px; align-self: start; margin-top: 4px; }
  .indice .i-dato { grid-column: 2; grid-row: 2; justify-self: start; }
  .indice .i-flecha { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .precios .p-modelo { font-size: 19px; }
  .precios .p-precio { font-size: 22px; }
  .precio-fila { padding: 12px 8px 12px 10px; }
  .precios .p-guia { display: none; }
  .precios .p-precios { margin-left: auto; }
  .portada-acciones .boton { width: 100%; justify-content: center; }
}

/* ---------- Añadido: corrección de desbordamiento en páginas interiores ----------
   En <=1020px ".cuerpo" pasa a "1fr", que equivale a minmax(auto, 1fr): la tabla
   (min-width 560px) ensanchaba la columna y provocaba scroll horizontal en móvil.
   Con minmax(0, 1fr) la tabla se desplaza dentro de .tabla-envoltura. */
@media (max-width: 1020px) {
  .cuerpo { grid-template-columns: minmax(0, 1fr); }
}