/* Te Digo La Verdad — hoja de estilos
   Concepto: una sola fuente de luz (la veladora). Todo lo demás, sobrio. */

@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --cera: #160c0a;        /* fondo: cera quemada */
  --cera-alta: #1f110e;   /* superficies elevadas */
  --vidrio: #4a1016;      /* vidrio de veladora */
  --llama: #e8a548;       /* luz: acciones principales */
  --llama-clara: #f4c477;
  --oro: #c8a96a;         /* marcos y filetes */
  --papel: #f1e6d2;       /* texto principal */
  --humo: #bba99a;        /* texto secundario */
  --filete: rgba(200, 169, 106, .26);

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --medida: 36rem;
  --ancho: 72rem;
  --barra: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--cera);
  color: var(--papel);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--barra);
}
@media (min-width: 60rem) { body { font-size: 1.25rem; padding-bottom: 0; } }

/* grano muy leve para que el negro no se vea plano */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: var(--llama-clara); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--papel); }
:focus-visible { outline: 2px solid var(--llama); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--vidrio); color: var(--papel); }

h1, h2, h3 { font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.01em; }
h3 { font-size: 1.5rem; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
@media (min-width: 48rem) { .contenedor { width: min(100% - 4rem, var(--ancho)); } }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--llama); color: var(--cera); padding: .5rem 1rem; border-radius: 6px; font-family: var(--sans); font-weight: 700; }
.saltar:focus { top: 1rem; }

.aviso-borrador { background: #7a1c25; color: var(--papel); font-family: var(--sans); font-size: .9375rem; text-align: center; padding: .55rem 1rem; }

/* ---------- Botones ---------- */
.icono { width: 1.15em; height: 1.15em; flex: none; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3.25rem; padding: .7em 1.35em;
  border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boton-llama { background: var(--llama); color: #1c0d06; box-shadow: 0 12px 34px -12px rgba(232, 165, 72, .65); }
.boton-llama:hover { background: var(--llama-clara); color: #1c0d06; }
.boton-borde { color: var(--papel); border: 1px solid var(--oro); background: rgba(22, 12, 10, .35); }
.boton-borde:hover { border-color: var(--llama-clara); color: var(--llama-clara); }
.boton-chico { min-height: 2.6rem; padding: .5em 1em; font-size: 1rem; box-shadow: none; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; }

.solo-escritorio { display: none; }
@media (min-width: 48rem) { .solo-escritorio { display: inline; } .solo-movil { display: none; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(22, 12, 10, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filete);
}
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--papel); text-decoration: none; font-size: 1.3rem; font-weight: 500; letter-spacing: .005em; margin-right: auto; }
.marca:hover { color: var(--papel); }
.marca-llama { width: .75em; height: 1em; color: var(--llama); }
.menu { display: none; gap: 1.75rem; font-family: var(--sans); font-size: 1.0625rem; }
.menu a { color: var(--humo); text-decoration: none; }
.menu a:hover { color: var(--papel); }
@media (min-width: 68rem) { .menu { display: flex; } }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.portada::before {
  content: ""; position: absolute; z-index: -1;
  width: 70rem; height: 70rem; right: -24rem; top: -12rem;
  background: radial-gradient(closest-side, rgba(232, 165, 72, .22), rgba(122, 28, 37, .2) 42%, rgba(22, 12, 10, 0) 72%);
  animation: respirar 6s ease-in-out infinite alternate;
}
.portada-rejilla { display: grid; }
.portada-foto { position: relative; margin: 0; }
.portada-foto picture, .portada-foto img { display: block; width: 100%; height: 100%; }
.portada-foto img { object-fit: cover; }
.portada-foto figcaption {
  position: absolute; z-index: 2;
  font-family: var(--sans); font-size: .875rem; line-height: 1; letter-spacing: .02em; color: var(--papel);
  padding: .45rem .8rem; border-radius: 999px;
  background: rgba(22, 12, 10, .62); border: 1px solid var(--filete);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.antetitulo { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; letter-spacing: .01em; color: var(--oro); margin-bottom: 1rem; max-width: 30rem; text-wrap: balance; }
.portada h1 { font-size: clamp(2.6rem, 7.2vw, 4.9rem); line-height: 1.02; letter-spacing: -.018em; max-width: 13ch; margin-bottom: 1.4rem; }
.entrada { font-size: clamp(1.2rem, 2.1vw, 1.45rem); line-height: 1.5; color: #dccdb8; max-width: 33rem; margin-bottom: 2rem; }
.letra-chica { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--humo); margin-top: 1.1rem; max-width: 32rem; }

.sellos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .45rem; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.35; color: #e2d4bf; }
.sellos li { display: flex; align-items: center; gap: .6rem; }
.sellos .marca-llama { width: .7rem; height: .95rem; flex: none; }
@media (min-width: 48rem) { .sellos { display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: .5rem; } }

@media (max-width: 59.99rem) {
  .portada-foto { height: clamp(17rem, 46vh, 30rem); height: clamp(17rem, 46svh, 30rem); }
  .portada-foto img { object-position: 50% 28%; }
  .portada-foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22, 12, 10, .3) 0%, rgba(22, 12, 10, 0) 20%, rgba(22, 12, 10, 0) 46%, rgba(22, 12, 10, .8) 82%, var(--cera) 100%);
  }
  .portada-foto figcaption { top: .9rem; right: 1rem; }
  .portada-texto { position: relative; z-index: 1; width: min(100% - 2rem, var(--ancho)); margin: -4.5rem auto 0; }
  .antetitulo { font-size: 1rem; margin-bottom: .75rem; }
  .portada::before { right: -32rem; top: 22rem; }
}
@media (min-width: 60rem) {
  .portada { padding-top: clamp(2.5rem, 4.5vw, 4.25rem); }
  .portada-rejilla {
    width: min(100% - 4rem, var(--ancho)); margin-inline: auto;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  }
  .portada-texto { grid-column: 1; grid-row: 1; }
  .portada-foto {
    grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; width: 100%; max-width: 30rem; justify-self: end;
    border-radius: 999px 999px 14px 14px; overflow: hidden;
    outline: 1px solid rgba(200, 169, 106, .45); outline-offset: 9px;
    box-shadow: 0 40px 120px -40px rgba(232, 165, 72, .55);
  }
  .portada-foto figcaption { left: 50%; bottom: 1.1rem; transform: translateX(-50%); white-space: nowrap; }
}

@keyframes respirar { from { opacity: .82; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada::before, .cierre::before { animation: none; }
  .boton, .preguntas summary::after, .situacion, .naipe-interior, .comparacion s { transition: none; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion-alta { background: var(--cera-alta); border-block: 1px solid var(--filete); }
.titulo-seccion { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 22ch; }
.bajada { color: var(--humo); max-width: var(--medida); margin-top: -1.25rem; margin-bottom: 2.25rem; }

/* Servicios */
.servicios { border-bottom: 1px solid var(--filete); }
.servicio { display: grid; gap: .6rem; padding-block: 1.75rem; border-top: 1px solid var(--filete); }
@media (min-width: 48rem) { .servicio { grid-template-columns: 17rem minmax(0, var(--medida)); gap: 2.5rem; } }
.servicio h3 { color: var(--papel); }
.servicio p { color: #d6c7b2; margin-bottom: .6rem; }
.enlace-wa { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--llama-clara); text-decoration: none; }
.enlace-wa:hover { color: var(--papel); text-decoration: underline; }

/* ¿Qué estás viviendo? */
.situaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .situaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .situaciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.situacion {
  display: flex; flex-direction: column; gap: .65rem; height: 100%;
  padding: 1.35rem 1.35rem 1.25rem; border: 1px solid var(--filete); border-radius: 14px;
  background: linear-gradient(180deg, rgba(74, 16, 22, .34), rgba(74, 16, 22, .1));
  color: var(--papel); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.situacion:hover { border-color: var(--llama); color: var(--papel); transform: translateY(-2px); }
.situacion-titulo { font-size: 1.45rem; line-height: 1.2; font-weight: 500; }
.situacion-texto { flex: 1; color: #d6c7b2; font-size: 1.0625rem; line-height: 1.5; }
.situacion-accion { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; color: var(--llama-clara); }
.situacion-llamar { background: rgba(232, 165, 72, .08); border-color: rgba(232, 165, 72, .45); }

/* Comparación: muchos / yo */
/* La promesa falsa, tachada a mano con tinta de cera roja; debajo, la verdad. */
.oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.comparacion { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.comparacion li { padding-block: 1.9rem; border-top: 1px solid var(--filete); }
.comparacion li:last-child { border-bottom: 1px solid var(--filete); }
.comparacion .promesa { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; color: var(--humo); margin: 0 0 .7rem; }
.comparacion s {
  text-decoration: none; color: #d9c7b4;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 4.6vw, 1.9rem); line-height: 1.25;
  background: linear-gradient(#c8323b, #c8323b) no-repeat 0 58% / 100% .17em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .08em;
  transition: background-size .55s cubic-bezier(.6, 0, .25, 1);
}
.comparacion.por-tachar s { background-size: 0% .17em; }
.comparacion .verdad { color: var(--papel); font-size: 1.25rem; line-height: 1.5; max-width: 38rem; margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--llama); }
.comparacion-cierre { margin-top: 2rem; max-width: var(--medida); color: var(--humo); font-family: var(--sans); font-size: 1.0625rem; }

/* Estado de atención en la portada */
.estado { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem; font-family: var(--sans); font-size: 1rem; line-height: 1.35; color: var(--humo); }
.estado::before { content: ""; flex: none; margin-top: .42em; width: .55rem; height: .55rem; border-radius: 50%; background: #7d6a5c; }
.estado.abierto { color: var(--papel); }
.estado.abierto::before { background: #6fbf73; box-shadow: 0 0 0 3px rgba(111, 191, 115, .18); }

/* Mi altar */
.altar { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .altar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5rem); align-items: center; } }
.altar-texto h2 { margin-bottom: 1.25rem; }
.altar-texto p { max-width: var(--medida); color: #e2d4bf; }
.altar-firma { font-style: italic; color: var(--llama-clara) !important; }
.altar-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); align-items: start; }
.altar-foto { margin: 0; }
.altar-ampliar { display: block; border-radius: 12px; }
.altar-ampliar:hover img { border-color: var(--llama); }
.altar-foto img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--filete); background: var(--cera-alta); }
.altar-foto figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--humo); margin-top: .5rem; }
@media (min-width: 60rem) { .altar-foto:nth-child(2) { margin-top: 3rem; } }

/* Saca una carta */
.carta-seccion { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.carta-seccion::before {
  content: ""; position: absolute; z-index: -1; width: 54rem; height: 54rem; left: 50%; top: 52%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232, 165, 72, .16), rgba(122, 28, 37, .14) 45%, rgba(22, 12, 10, 0) 72%);
}
.carta-seccion .titulo-seccion, .carta-seccion .bajada { margin-inline: auto; }
.mazo { display: flex; justify-content: center; gap: clamp(.75rem, 3vw, 1.75rem); margin-top: 1rem; }
.naipe {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit;
  width: clamp(5.75rem, 27vw, 9.5rem); aspect-ratio: 7 / 12; perspective: 1000px; cursor: pointer; border-radius: 12px;
  transition: opacity .3s ease;
}
.naipe-interior { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.naipe:not(.volteado):not(:disabled):hover .naipe-interior { transform: translateY(-6px); }
.naipe.volteado .naipe-interior { transform: rotateY(180deg); }
.naipe-dorso, .naipe-frente {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.naipe-dorso {
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 165, 72, .38), rgba(232, 165, 72, 0) 34%),
    repeating-linear-gradient(45deg, rgba(200, 169, 106, .13) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(-45deg, rgba(200, 169, 106, .13) 0 1.5px, transparent 1.5px 11px),
    #4a1016;
  border: 1px solid var(--oro);
  box-shadow: inset 0 0 0 6px #3a0c11, inset 0 0 0 7px rgba(200, 169, 106, .6), 0 18px 40px -18px rgba(0, 0, 0, .85);
}
.naipe-dorso .marca-llama { width: 1.5rem; height: 2rem; }
.naipe-frente {
  transform: rotateY(180deg); padding: .6rem;
  background: #efe2c6; color: #3b2a20; border: 1px solid var(--oro);
  box-shadow: inset 0 0 0 6px #efe2c6, inset 0 0 0 7px #a8843f, 0 18px 40px -18px rgba(0, 0, 0, .85);
}
.naipe-numero { font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1; color: #5b141b; }
.naipe-nombre { margin-top: .55rem; font-family: var(--sans); font-weight: 700; font-size: clamp(.7rem, 2.3vw, .9rem); line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.naipe:disabled { cursor: default; }
.naipe.apagado { opacity: .3; }
.carta-resultado { max-width: 36rem; margin: 2.25rem auto 0; }
.carta-aviso { font-family: var(--sans); font-size: 1rem; color: var(--oro); margin-bottom: .4rem; }
.carta-nombre { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .8rem; }
.carta-texto { font-size: 1.25rem; line-height: 1.55; color: #e2d4bf; margin-bottom: 1.6rem; }
.carta-resultado .letra-chica { margin-inline: auto; }

/* Voz */
.voz { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--filete); border-radius: 12px; background: rgba(74, 16, 22, .22); }
.voz-titulo { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--oro); margin-bottom: .6rem; }
.voz audio { width: 100%; }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: paso; }
@media (min-width: 60rem) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  display: block; font-size: 4rem; line-height: 1; color: var(--oro);
  font-variant-numeric: oldstyle-nums; margin-bottom: .75rem;
}
.pasos h3 { margin-bottom: .6rem; }
.pasos p { color: #d6c7b2; }

/* Quién te atiende (dentro de "Cómo trabajo", solo si hay historia) */
.atiende { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--filete); }
@media (min-width: 60rem) { .atiende { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; } }
.atiende h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.atiende .texto { max-width: var(--medida); font-size: 1.25rem; line-height: 1.55; }

/* Precios */
.precios { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 46rem; }
.precio { display: flex; align-items: baseline; gap: .6rem; padding-block: .9rem; }
.precio-nombre { flex: 0 1 auto; }
.precio-puntos { flex: 1 1 2rem; border-bottom: 2px dotted rgba(200, 169, 106, .55); transform: translateY(-.28em); min-width: 1.5rem; }
.precio-valor { flex: none; font-family: var(--sans); font-weight: 700; color: var(--llama-clara); text-align: right; max-width: 45%; }
.nota { max-width: var(--medida); color: var(--humo); }

/* Preguntas */
.preguntas { max-width: 48rem; border-bottom: 1px solid var(--filete); }
.preguntas details { border-top: 1px solid var(--filete); }
.preguntas summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: 1.25rem; font-size: 1.35rem; line-height: 1.3;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; line-height: 1; color: var(--oro); transition: transform .2s ease; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas .respuesta { padding-bottom: 1.5rem; color: #d6c7b2; max-width: var(--medida); }

/* Cierre */
.cierre { position: relative; overflow: hidden; isolation: isolate; }
.cierre::before {
  content: ""; position: absolute; z-index: -1; width: 56rem; height: 56rem; left: -18rem; bottom: -34rem;
  background: radial-gradient(closest-side, rgba(232, 165, 72, .22), rgba(122, 28, 37, .16) 45%, rgba(22, 12, 10, 0) 72%);
  animation: respirar 6s ease-in-out infinite alternate;
}
.cierre h2 { max-width: 19ch; margin-bottom: 1.25rem; }
.cierre .entrada { margin-bottom: 1.75rem; }

/* ---------- Artículos y páginas legales ---------- */
.articulo { width: min(100% - 2rem, 44rem); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem); }
.articulo h1 { font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; margin-bottom: 1.25rem; }
.articulo h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 2.75rem 0 1rem; }
.articulo h3 { margin: 2rem 0 .75rem; }
.articulo p, .articulo li { line-height: 1.72; }
.articulo ul, .articulo ol { padding-left: 1.25rem; margin: 0 0 1.25em; }
.articulo li { margin-bottom: .55em; }
.articulo li::marker { color: var(--oro); }
.articulo .entrada { margin-bottom: 2rem; }
.articulo .actualizado { font-family: var(--sans); font-size: .9375rem; color: var(--humo); }
.articulo-foto { margin: 2.25rem 0; }
.articulo-foto img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--filete); }
.articulo-foto figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--humo); margin-top: .6rem; }
.recuadro { margin: 2.5rem 0; padding: 1.75rem; border: 1px solid var(--filete); border-radius: 6px; background: rgba(74, 16, 22, .28); }
.recuadro h2 { margin-top: 0; }
.recuadro .botones { margin-top: 1.25rem; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--filete); padding-block: 3rem 2rem; font-family: var(--sans); font-size: 1rem; color: var(--humo); }
.pie a { color: var(--papel); }
.pie-rejilla { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pie-rejilla { grid-template-columns: minmax(0, 1fr) auto; } }
.pie-marca { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.3rem; color: var(--papel); }
.pie-enlaces { display: grid; gap: .6rem; align-content: start; }
.pie-legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--filete); font-size: .9375rem; }
.pie-legal p { max-width: 50rem; }

/* ---------- Barra móvil ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(22, 12, 10, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--filete);
}
.barra-movil .boton { min-height: 3rem; box-shadow: none; }
@media (min-width: 60rem) { .barra-movil { display: none; } }

/* ---------- Rediseño oct 2026: menos texto, más toques ---------- */
.boton-wa { background: #25d366; color: #052e16; box-shadow: 0 12px 30px -14px rgba(37, 211, 102, .7); }
.boton-wa:hover { background: #4be083; color: #052e16; }

/* Tu caso: botones grandes para tocar con el pulgar */
.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; max-width: 46rem; }
@media (min-width: 48rem) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } }
.chip {
  display: flex; align-items: center; gap: .5rem; min-height: 4.25rem; height: 100%;
  padding: .85rem 1rem; border-radius: 16px 16px 16px 4px;
  background: #2a1713; border: 1px solid rgba(200, 169, 106, .3);
  color: var(--papel); text-decoration: none; font-size: 1.125rem; line-height: 1.2; font-weight: 500;
  transition: border-color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: var(--llama); background: #331c16; color: var(--papel); }
.chip:active { background: #3b2019; }
.chip-llamar { background: rgba(232, 165, 72, .1); border-color: rgba(232, 165, 72, .5); }
.chip .icono { width: 1.05rem; height: 1.05rem; flex: none; color: var(--llama); }
.servicios-linea { margin-top: 1.5rem; max-width: var(--medida); font-family: var(--sans); font-size: 1rem; color: var(--humo); }

/* Así empieza: una conversación de WhatsApp, como la que va a tener */
.chat-rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .chat-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; } }
.chat {
  display: flex; flex-direction: column; gap: .55rem; max-width: 27rem;
  padding: 1.1rem .9rem 1rem; border-radius: 22px;
  background: #0d1418 radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .03), transparent 60%);
  border: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--sans);
}
.burbuja { margin: 0; max-width: 85%; padding: .55rem .8rem .6rem; font-size: 1.0625rem; line-height: 1.35; border-radius: 12px; color: #e9edef; }
.burbuja.cliente { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.burbuja.yo { align-self: flex-start; background: #202c33; border-top-left-radius: 3px; }
.chat-nota { margin: .35rem 0 0; text-align: center; font-size: .875rem; color: #8696a0; }

/* Altar: fotos grandes, poco texto */
.altar-galeria { max-width: 50rem; }
.seccion#mi-altar .bajada { margin-top: -1.25rem; }

.chip-amor { background: rgba(179, 38, 47, .2); border-color: rgba(220, 90, 100, .55); }
.chip-amor:hover { background: rgba(179, 38, 47, .3); border-color: #e0727b; }

/* Testimonios reales, con permiso, como se ven en WhatsApp */
.testimonios { display: grid; gap: 1rem; max-width: 46rem; }
@media (min-width: 48rem) { .testimonios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.testimonio { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.testimonio .burbuja { max-width: 100%; margin: 0; font-family: var(--sans); }
.testimonio figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--humo); }

/* ---------- Galería de 8 fotos reales ---------- */
.altar-galeria.altar-galeria-8 { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.altar-galeria-8 .altar-foto:nth-child(2) { margin-top: 0; }
@media (min-width: 48rem) { .altar-galeria.altar-galeria-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .altar-galeria-8 .altar-foto:nth-child(even) { margin-top: 2rem; } }

/* ---------- Santa Muerte ---------- */
.santa-muerte { background: radial-gradient(120% 80% at 20% 0%, rgba(122, 28, 37, .35), transparent 60%), var(--cera); border-block: 1px solid var(--filete); }
.sm-rejilla { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 52rem) { .sm-rejilla { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); } }
.sm-foto { margin: 0; }
.sm-foto img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--oro); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }
.sm-foto figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--humo); margin-top: .5rem; }
.sm-texto h2 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0 0 1rem; }
.sm-texto p { max-width: var(--medida); }
.sm-lista { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; font-family: var(--sans); font-size: 1.125rem; }
.sm-lista li { padding-left: 1.6rem; position: relative; }
.sm-lista li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--llama); box-shadow: 0 0 10px var(--llama); }
.sm-nota { color: var(--humo); font-style: italic; margin-bottom: 1.5rem; }
.chip-sm { background: rgba(200, 169, 106, .14); border-color: rgba(200, 169, 106, .6); }

/* ---------- Disponible (sin horario) ---------- */
.disponible { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-family: var(--sans); font-size: 1rem; color: var(--papel); }
.disponible::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #6fbf73; box-shadow: 0 0 0 3px rgba(111, 191, 115, .2); }

/* ---------- Portada: la luz de las veladoras respira (único movimiento de la página) ---------- */
.portada-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 62%, rgba(255, 170, 70, .22), transparent 70%);
  mix-blend-mode: screen; animation: llama 3.6s ease-in-out infinite alternate;
}
@keyframes llama { 0% { opacity: .55; } 35% { opacity: .9; } 60% { opacity: .7; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .portada-foto::after { animation: none; opacity: .8; } }

/* ---------- Tu petición: el manto de la Virgen con sus estrellas y un papelito ---------- */
.peticion {
  --manto: #1d5f5b;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background-color: var(--manto);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e3b04b' fill-opacity='.55'%3E%3Cpath d='M20 14l2 5 5 .4-4 3.3 1.3 5-4.3-2.8-4.3 2.8 1.3-5-4-3.3 5-.4z'/%3E%3Cpath d='M84 70l1.6 4 4 .3-3.1 2.6 1 4-3.5-2.2-3.5 2.2 1-4-3.1-2.6 4-.3z'/%3E%3Cpath d='M58 102l1.2 3 3 .2-2.3 1.9.8 3-2.7-1.7-2.7 1.7.8-3-2.3-1.9 3-.2z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .3));
  border-block: 3px solid #b08a3e;
  color: #f4e8d0;
}
.peticion-rejilla { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) { .peticion-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); } }
.peticion-texto h2 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.08; max-width: 18ch; margin: 0 0 1.25rem; color: #fbf3e2; }
.peticion-texto p { max-width: 34rem; color: #dfe9e4; font-size: 1.125rem; }
.papelito {
  position: relative; transform: rotate(-1.4deg);
  background: #f4e8d0; color: #2b1a12;
  padding: 1.75rem 1.5rem 1.5rem; border-radius: 3px;
  box-shadow: 0 2px 0 #d9c7a4, 0 28px 50px -20px rgba(0, 0, 0, .65);
}
.papelito::before { /* cinta que lo pega al altar */
  content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(2deg);
  background: rgba(240, 225, 190, .75); border: 1px solid rgba(160, 130, 80, .35);
}
.papelito-titulo { display: block; font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: #7d1a22; margin-bottom: .5rem; }
.papelito textarea {
  width: 100%; resize: vertical; min-height: 9.5rem; border: 0; padding: .1rem 0;
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 2rem; color: #2b1a12;
  background: transparent repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(125, 26, 34, .28) calc(2rem - 1px) 2rem);
}
.papelito textarea::placeholder { color: #8a7563; }
.papelito textarea:focus { outline: 2px solid #b08a3e; outline-offset: 6px; }
.papelito textarea[aria-invalid="true"] { outline: 2px solid #b3262f; outline-offset: 6px; }
.papelito-nota { font-family: var(--sans); font-size: .9375rem; color: #6b5646; margin: .75rem 0 1.1rem; }
.papelito .boton { width: 100%; }
@media (prefers-reduced-motion: reduce) { .papelito { transform: none; } }

/* ---------- Lo que pasa cuando me escribes (es una secuencia real) ---------- */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 52rem) { .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.pasos li { counter-increment: paso; position: relative; padding-top: 3.4rem; }
.pasos li::before {
  content: counter(paso); position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--serif); font-size: 1.35rem; color: #1c0d06; background: var(--llama);
  box-shadow: 0 0 22px rgba(232, 165, 72, .45);
}
@media (min-width: 52rem) { .pasos li:not(:last-child)::after { content: ""; position: absolute; top: 1.25rem; left: 3.2rem; right: -.9rem; border-top: 1px dashed var(--filete); } }
.pasos h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.pasos p { color: #e2d4bf; font-size: 1.0625rem; margin: 0; }
.portada::before { animation: none; }
@media (max-width: 59.99rem) {
  .portada-foto picture { position: relative; }
  .portada-foto picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 11, 9, 0) 40%, rgba(20, 11, 9, .7) 78%, var(--cera) 100%); }
  .portada .antetitulo { text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
}

/* ---------- Quién te atiende (solo con historia real) ---------- */
.quien-rejilla { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 52rem) { .quien-rejilla { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.quien-foto { margin: 0; }
.quien-foto img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--filete); }
.quien-nombre { font-family: var(--sans); font-size: 1.125rem; color: var(--oro); margin: -.25rem 0 1rem; letter-spacing: .02em; }
.quien-texto p { max-width: var(--medida); }

/* ---------- Mi palabra: enlace a la guía ---------- */
.comparacion-cierre a:not(.enlace-wa) { color: var(--oro); }
.fuentes { font-family: var(--sans); font-size: .9375rem; color: var(--humo); } .fuentes a { color: var(--oro); }

/* ---------- Testimonios en video ---------- */
.testimonios-videos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 18rem)); margin-bottom: 1.5rem; }
.testimonio-video { margin: 0; }
.testimonio-video video { width: 100%; height: auto; aspect-ratio: 478 / 850; border-radius: 14px; border: 1px solid var(--filete); background: #000; }
.testimonio-video figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--humo); margin-top: .5rem; }