/* ============================================================
   ESTILOS COMPARTIDOS — páginas de aterrizaje de campaña
   Un solo archivo para las 5 páginas. Editar aquí cambia todas.
============================================================ */

/* Paleta: luz de vela sobre fondo oscuro.
   Los nombres se conservan; lo que cambia son los valores. */
:root {
    --color-primary: #A02334;        /* vino, más cálido que el rojo plano */
    --color-primary-dark: #6E1220;
    --color-secondary: #E3C158;      /* oro: por fin se lee */
    --color-dark: #100C0B;           /* fondo de la página */
    --color-light: #1A1513;          /* secciones alternas */
    --color-white: #F3EBE1;          /* crema: el texto */
    --color-gray: #A99C92;           /* texto secundario */
    --color-surface: #221B18;        /* tarjetas */
    --color-line: rgba(227,193,88,0.14);
    --color-whatsapp: #25D366;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
    --shadow: 0 4px 24px rgba(0,0,0,0.45);
    --shadow-hover: 0 10px 34px rgba(0,0,0,0.6);
    --transition: all 0.3s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--color-white);
    line-height: 1.7;
    background: var(--color-dark);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; margin: 0 auto; }
.text-center { text-align: center; }

/* ---------- Barra superior ---------- */
.topbar {
    background: #0A0706;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-white);
    padding: 10px 0;
    font-size: 0.9rem;
}
.topbar .container { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.topbar a { color: var(--color-secondary); text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
.topbar-brand { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-white); }

/* ---------- Hero ---------- */
.hero {
    background:
        linear-gradient(105deg, rgba(18,10,10,0.94) 0%, rgba(26,10,12,0.88) 45%, rgba(92,0,0,0.74) 100%),
        url('../altar.jpeg') center 32% / cover no-repeat;
    color: var(--color-white);
    padding: 70px 0 62px;
    text-align: center;
}

/* ---------- Video de presentación ----------
   Formato vertical (720x1280). Con preload="none" el archivo
   NO se descarga hasta que el visitante pulsa play, así que no
   afecta la velocidad de carga ni la calificación de Google. */
.video-bloque { max-width: 340px; margin: 0 auto; text-align: center; }
.video-bloque video {
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 1280;
    border-radius: 16px;
    background: #14100F;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    display: block;
}
.video-pie {
    margin-top: 13px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-gray);
    line-height: 1.5;
}

/* Foto del altar dentro del cuerpo de la página */
.altar-foto { max-width: 420px; margin: 0 auto; }
.altar-foto img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.32);
}
.altar-foto figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--color-gray);
}
.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--color-white);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 22px;
}
.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.2;
    margin-bottom: 18px;
    text-wrap: balance;
}
.hero h1 span { color: var(--color-secondary); }
.hero-lede {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    max-width: 640px;
    margin: 0 auto 32px;
    opacity: 0.95;
}

/* ---------- Botones ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.02rem;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid transparent;
}
.btn-wa { background: var(--color-whatsapp); color: var(--color-white); }
.btn-wa:hover { background: #1da851; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-call { background: transparent; color: var(--color-secondary); border-color: rgba(227,193,88,0.5); }
.btn-call:hover { background: var(--color-secondary); color: #2A1206; }
.btn-solid { background: var(--color-primary); color: var(--color-white); }
.btn-solid:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ---------- Secciones ---------- */
.section { padding: 60px 0; }
.section-light { background: var(--color-light); }
.section-dark { background: #0A0706; color: var(--color-white); }
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    margin-bottom: 14px;
    text-wrap: balance;
}
.section-intro { color: var(--color-gray); max-width: 640px; margin: 0 auto 38px; }
.section-dark .section-intro { color: rgba(255,255,255,0.75); }

/* ---------- Tarjetas de problema ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 26px 24px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--color-primary);
}
.card h3 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 9px; color: var(--color-secondary); }
.card p { color: var(--color-gray); font-size: 0.95rem; }

/* ---------- Pasos ---------- */
.steps { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: paso; }
.step { text-align: center; }
.step-num {
    counter-increment: paso;
    width: 54px; height: 54px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.step-num::before { content: counter(paso); }
.step h3 { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 7px; color: var(--color-secondary); }
.step p { font-size: 0.94rem; opacity: 0.8; }

/* ---------- Confianza ---------- */
.trust { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.trust-item { padding: 18px 12px; }
.trust-num {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: 6px;
}
.trust-label { font-size: 0.88rem; opacity: 0.85; }

/* ---------- Testimonios ---------- */
.quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quote {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 26px 24px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--color-secondary);
}
.quote p { font-style: italic; color: var(--color-gray); margin-bottom: 14px; }
.quote cite { font-style: normal; font-weight: 700; font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 9px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.faq summary {
    color: var(--color-white);
    padding: 18px 22px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-primary); font-size: 1.5rem; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 22px 20px; color: var(--color-gray); }

/* ---------- CTA final ---------- */
.cta {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    padding: 62px 0;
    text-align: center;
}
.cta h2 { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 15px; text-wrap: balance; }
.cta p { max-width: 600px; margin: 0 auto 30px; opacity: 0.95; }
.cta-phone { margin-top: 22px; font-size: 1.02rem; }
.cta-phone a { color: var(--color-secondary); font-weight: 700; text-decoration: none; }

/* ---------- Pie ---------- */
.footer { background: #0A0706; border-top: 1px solid var(--color-line); color: rgba(243,235,225,0.62); padding: 38px 0 26px; font-size: 0.9rem; }
.footer a { color: var(--color-secondary); text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-bottom: 18px; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
    position: fixed;
    bottom: 22px; right: 22px;
    width: 58px; height: 58px;
    background: var(--color-whatsapp);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 999;
    transition: var(--transition);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 31px; height: 31px; fill: var(--color-white); }

@media (max-width: 600px) {
    .section { padding: 45px 0; }
    .hero { padding: 45px 0 42px; }
    .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

.audio-maestro{padding:34px 20px;background:var(--color-light,#1A1513)}
.am-caja{max-width:620px;margin:0 auto;border:1px solid var(--color-line,rgba(227,193,88,.14));
  background:var(--color-surface,#221B18);padding:24px 26px;text-align:center}
.am-cab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-secondary,#E3C158);margin-bottom:14px;font-weight:600}
.am-cita{font-family:'Playfair Display',Georgia,serif;font-size:19px;line-height:1.45;
  color:var(--color-white,#F3EBE1);margin:0 0 18px;font-style:italic}
.am-caja audio{width:100%;max-width:460px;display:block;margin:0 auto}
.am-pie{font-size:13px;color:var(--color-gray,#A99C92);margin:14px 0 0}
@media(max-width:600px){.am-cita{font-size:17px}.am-caja{padding:20px 18px}}

.wa-nota{font-size:13.5px;line-height:1.5;color:var(--color-gray,#A99C92);
  margin:10px 0 0;text-align:center;max-width:30em;margin-left:auto;margin-right:auto}
@media(max-width:600px){.wa-nota{font-size:13px}}