/* ============================================
   MELITA LUZ — Hoja de estilos principal
   Paleta extraída de los logos: teal · dorado · crema · oscuro
   ============================================ */

:root {
    --teal: #1d4e4e;
    --teal-dark: #143838;
    --teal-deep: #0e2726;
    --gold: #c9a24a;
    --gold-light: #e0c27e;
    --gold-soft: #f0e2c0;
    --gold-deep: #876619;   /* dorado oscuro para textos pequeños sobre fondos claros (contraste AA) */
    --cream: #f3edda;
    --cream-2: #faf6ec;
    --dark: #0d0d0d;
    --ink: #20302f;
    --muted: #44524f;       /* gris-teal oscuro: texto secundario legible (contraste ~7:1 sobre crema) */
    --white: #ffffff;

    --shadow-sm: 0 4px 14px rgba(20, 56, 56, 0.08);
    --shadow-md: 0 10px 30px rgba(20, 56, 56, 0.12);
    --radius: 14px;
    --maxw: 1180px;
    --font-title: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Jost', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream-2);
    line-height: 1.65;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; color: var(--teal-dark); }
a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .03em;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .25s ease;
    text-align: center;
}
.btn--gold { background: var(--gold); color: var(--teal-deep); }
.btn--gold:hover { background: var(--gold-light); color: var(--teal-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--teal { background: var(--teal); color: var(--cream); }
.btn--teal:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; border-color: var(--gold); color: var(--teal-dark); }
.btn--outline:hover { background: var(--gold); color: var(--teal-deep); }
/* Botón outline sobre fondos OSCUROS: el teal-dark es invisible; usar dorado claro.
   Se aplica a todos los contextos oscuros para evitar el problema recurrente. */
.hero .btn--outline,
.ct-hero .btn--outline,
.tarot-hero .btn--outline,
.te .btn--outline,
.parallax .btn--outline,
.precio-card--dark .btn--outline { color: var(--gold-light); border-color: rgba(201,162,74,.65); }
.hero .btn--outline:hover,
.ct-hero .btn--outline:hover,
.tarot-hero .btn--outline:hover,
.te .btn--outline:hover,
.parallax .btn--outline:hover,
.precio-card--dark .btn--outline:hover { background: var(--gold); color: var(--teal-deep); border-color: var(--gold); }
.btn--lg { padding: 16px 38px; font-size: 1.05rem; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(243, 237, 218, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 162, 74, 0.25);
    transition: box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(20,56,56,.10); background: rgba(243,237,218,.97); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--teal-dark); letter-spacing: .02em; }
.brand-tagline { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }

.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: .9rem; letter-spacing: .04em; color: var(--ink); position: relative; padding: 4px 0; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--gold); transition: width .25s ease; }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: var(--teal-dark); }
.nav-cta { margin-left: 6px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--teal-dark); transition: .3s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
    display: none; flex-direction: column; gap: 8px;
    padding: 18px 22px 26px;
    background: var(--cream);
    border-bottom: 1px solid rgba(201,162,74,.25);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile-link { padding: 10px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(201,162,74,.15); }

/* ============================================
   SECCIONES GENÉRICAS
   ============================================ */
.section { padding: 80px 0; }
.section--cream { background: var(--cream); }
.section--teal { background: var(--teal-deep); color: var(--cream); }
.section--teal h1, .section--teal h2, .section--teal h3 { color: var(--cream); }

.section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-eyebrow { display: block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
/* En secciones de fondo oscuro, el eyebrow va en dorado claro para mantener contraste */
.section--teal .section-eyebrow,
.parallax .section-eyebrow,
.hero .section-eyebrow { color: var(--gold-light); }
.section-title { font-size: clamp(2rem, 4vw, 2.9rem); margin: 12px 0 14px; }
.section-sub { color: var(--muted); font-size: 1.05rem; }
.section--teal .section-sub { color: rgba(243,237,218,.75); }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    background:
        radial-gradient(circle at 75% 30%, rgba(201,162,74,.18), transparent 55%),
        linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-dark) 55%, var(--teal) 100%);
    color: var(--cream);
    overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 78vh; padding: 70px 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(201,162,74,.4); padding: 7px 16px; border-radius: 50px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--cream); line-height: 1.05; }
.hero h1 .accent { color: var(--gold-light); font-style: italic; }
.hero-lead { font-size: 1.2rem; color: rgba(243,237,218,.82); margin: 22px 0 34px; max-width: 540px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-visual { display: flex; justify-content: center; position: relative; }
/* Halo radial oscuro para separar el logo dorado del fondo */
.hero-visual::before {
    content: ''; position: absolute; z-index: -1;
    width: 115%; height: 115%; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(8,22,21,.85) 0%, rgba(8,22,21,.45) 45%, transparent 70%);
}
.hero-visual img { width: min(440px, 86%); filter: drop-shadow(0 18px 42px rgba(0,0,0,.55)); }

/* ============================================
   GRID DE TARJETAS
   ============================================ */
.card-grid { display: grid; gap: 28px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(201,162,74,.18);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--gold-soft); }
.card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-cat { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.card-title { font-size: 1.4rem; }
.card-text { color: var(--muted); font-size: .95rem; flex: 1; }
.card-price { font-family: var(--font-title); font-size: 1.6rem; color: var(--teal); font-weight: 700; }
.card-price .old { font-size: 1rem; color: var(--muted); text-decoration: line-through; margin-right: 8px; }

/* Servicios destacados en home */
.feature { text-align: center; padding: 34px 26px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid rgba(201,162,74,.18); transition: transform .25s ease; }
.feature:hover { transform: translateY(-6px); }
.feature-icon { font-size: 2.6rem; margin-bottom: 14px; }
.feature h3 { font-size: 1.5rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .96rem; }

/* CTA banda */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.cta-band p { color: rgba(243,237,218,.8); font-size: 1.1rem; margin-bottom: 28px; }

/* Lista de confianza bajo el hero */
.hero-trust { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; margin-top: 30px; padding: 0; }
.hero-trust li { font-size: .82rem; letter-spacing: .04em; color: rgba(243,237,218,.8); }

/* ============================================
   SECCIÓN SPLIT (imagen + texto)
   ============================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split-text .section-eyebrow { display: block; margin-bottom: 10px; }
.split-text .section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 18px; }
.split-text p { color: var(--muted); margin-bottom: 16px; }

.check-list { list-style: none; margin: 0 0 24px; padding: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink); }
.check-list li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }

/* ============================================
   PASOS (Cómo funciona)
   ============================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { background: var(--white); border-radius: var(--radius); padding: 38px 28px 30px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(201,162,74,.18); position: relative; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: var(--gold-light); font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(20,56,56,.18); }
.step h3 { font-size: 1.4rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .95rem; }

/* ============================================
   TEMÁTICAS
   ============================================ */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.theme { background: var(--white); border-radius: var(--radius); padding: 32px 22px; text-align: center; border: 1px solid rgba(201,162,74,.18); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.theme:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.theme-icon { font-size: 2.4rem; display: block; margin-bottom: 12px; }
.theme h3 { font-size: 1.3rem; margin-bottom: 6px; }
.theme p { color: var(--muted); font-size: .9rem; }

/* ============================================
   TESTIMONIOS
   ============================================ */
.testimonial { background: rgba(243,237,218,.06); border: 1px solid rgba(201,162,74,.28); border-radius: var(--radius); padding: 30px 28px; margin: 0; }
.testimonial p { font-family: var(--font-title); font-size: 1.25rem; font-style: italic; line-height: 1.5; color: var(--cream); margin-bottom: 18px; }
.testimonial figcaption { font-size: .85rem; letter-spacing: .05em; color: var(--gold-light); }

/* ============================================
   FAQ (acordeón con <details>)
   ============================================ */
.faq-item { background: var(--white); border: 1px solid rgba(201,162,74,.22); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 20px 24px; font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; color: var(--teal-dark); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--gold); font-size: 1.6rem; line-height: 1; transition: transform .25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 22px; color: var(--muted); margin: 0; }

/* ============================================
   TAROT — experiencia de tirada
   ============================================ */
.tarot-step-title { text-align: center; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.tarot-help { text-align: center; color: var(--muted); margin-bottom: 26px; }

.tarot-panel { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid rgba(201,162,74,.22); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-sm); text-align: center; }
.tarot-temas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0 26px; }
.tema-btn { padding: 10px 20px; border-radius: 50px; border: 1.5px solid rgba(201,162,74,.5); background: transparent; color: var(--teal-dark); font-family: var(--font-body); font-size: .95rem; cursor: pointer; transition: all .2s ease; }
.tema-btn:hover { border-color: var(--gold); }
.tema-btn.is-active { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.tarot-label { display: block; text-align: left; font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.tarot-textarea { width: 100%; border: 1.5px solid rgba(201,162,74,.35); border-radius: 12px; padding: 14px 16px; font-family: var(--font-body); font-size: 1rem; resize: vertical; margin-bottom: 24px; background: var(--cream-2); color: var(--ink); }
.tarot-textarea:focus { outline: none; border-color: var(--gold); }

/* Mazo de cartas para elegir */
.tarot-deck { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.carta-mazo { width: 88px; height: 142px; border: none; padding: 0; border-radius: 10px; cursor: pointer; background: none; transition: transform .25s ease; }
.carta-mazo-inner {
    display: block; width: 100%; height: 100%; border-radius: 10px;
    background-image: url('/static/img/tarot/reverso.webp');
    background-size: cover; background-position: center;
    box-shadow: var(--shadow-sm); border: 2px solid transparent; transition: all .25s ease;
}
.carta-mazo:hover { transform: translateY(-8px); }
.carta-mazo.is-picked { transform: translateY(-12px); }
.carta-mazo.is-picked .carta-mazo-inner { border-color: var(--gold); box-shadow: 0 10px 26px rgba(201,162,74,.5); }

/* Cartas reveladas */
.tarot-result-cards { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.tarot-card { width: 180px; height: 325px; perspective: 1200px; }
.tarot-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,.2,.2,1); }
.tarot-card.is-flipped .tarot-card-inner { transform: rotateY(180deg); }
.tarot-card-back, .tarot-card-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; box-shadow: var(--shadow-md); }
.tarot-card-back { background-image: url('/static/img/tarot/reverso.webp'); background-size: cover; background-position: center; }
.tarot-card-front {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, var(--cream-2), var(--gold-soft));
    border: 2px solid var(--gold);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 18px; text-align: center;
}
.tarot-card-front.is-reversed .tc-sim { transform: rotate(180deg); }
.tc-pos { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tc-sim { font-size: 3.4rem; line-height: 1; }
.tc-nom { font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; color: var(--teal-dark); }
.tc-inv { font-size: .7rem; color: var(--muted); font-style: italic; }

/* Lectura */
.tarot-reading { max-width: 680px; margin: 0 auto; }
.reading-intro { font-family: var(--font-title); font-size: 1.4rem; font-style: italic; color: var(--teal-dark); text-align: center; margin-bottom: 30px; line-height: 1.5; }
.reading-card { background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.reading-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.reading-card p { color: var(--ink); }
.reading-consejo { background: var(--teal-deep); color: var(--cream); border-radius: 12px; padding: 26px 28px; margin-top: 26px; }
.reading-consejo h3 { color: var(--gold-light); font-size: 1.3rem; margin-bottom: 8px; }
.reading-consejo p { color: rgba(243,237,218,.9); }

.tarot-cierre { text-align: center; margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(201,162,74,.25); }
.tarot-cierre p { color: var(--muted); margin-bottom: 18px; font-size: 1.1rem; }
.tarot-cierre .btn--outline { margin-left: 12px; }
.tarot-aviso { text-align: center; background: var(--cream); border: 1px solid rgba(201,162,74,.3); border-radius: 12px; padding: 30px; color: var(--ink); font-size: 1.05rem; }

/* Cargando */
.tarot-loading { text-align: center; padding: 50px 0; color: var(--muted); }
.tarot-spinner { width: 54px; height: 54px; margin: 0 auto 18px; border: 3px solid rgba(201,162,74,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
    .carta-mazo { width: 62px; height: 100px; }
    .tarot-card { width: 140px; height: 226px; }
    .tarot-cierre .btn--outline { margin-left: 0; margin-top: 12px; }
}

/* ============================================
   HOME · BENTO (servicios asimétricos)
   ============================================ */
.bento { display: grid; grid-template-columns: 1.5fr 1fr; grid-auto-rows: 280px; gap: 18px; }
.bento-item { position: relative; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; box-shadow: var(--shadow-sm); isolation: isolate; }
.bento-item::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,22,21,.92) 0%, rgba(8,22,21,.4) 50%, rgba(8,22,21,.15) 100%); transition: background .3s ease; }
.bento-item:hover::after { background: linear-gradient(to top, rgba(8,22,21,.95) 0%, rgba(8,22,21,.5) 55%, rgba(8,22,21,.2) 100%); }
.bento-item--wide { grid-row: span 1; }
.bento-item--bottom { grid-column: 1 / -1; grid-row: span 1; }
.bento-body { padding: 28px 30px; color: var(--cream); }
.bento-cat { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; }
.bento-item h3 { color: var(--cream); font-size: 1.7rem; margin: 6px 0 8px; }
.bento-item p { color: rgba(243,237,218,.82); font-size: .95rem; font-weight: 600; max-width: 460px; }
.bento-link { display: inline-block; margin-top: 14px; color: var(--gold-light); font-weight: 500; font-size: .92rem; letter-spacing: .03em; transition: transform .2s ease; }
.bento-item:hover .bento-link { transform: translateX(4px); }

/* ============================================
   HOME · TIMELINE (cómo funciona)
   ============================================ */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 920px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.timeline::before { content: ''; position: absolute; top: 34px; left: 14%; right: 14%; height: 2px; background: linear-gradient(90deg, transparent, rgba(201,162,74,.6), transparent); }
.tl-step { text-align: center; position: relative; }
.tl-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold)); color: var(--teal-deep); font-family: var(--font-title); font-size: 2rem; font-weight: 700; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(201,162,74,.12); }
.tl-step h3 { color: var(--cream); font-size: 1.35rem; margin-bottom: 6px; }
.tl-step p { color: rgba(243,237,218,.75); font-size: .95rem; max-width: 250px; margin: 0 auto; }

/* ============================================
   HOME · TEMÁTICAS (tarjetas horizontales)
   ============================================ */
.tema-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 0 auto; }
.tema-row { display: flex; align-items: center; gap: 20px; background: var(--white); border: 1px solid rgba(201,162,74,.2); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.tema-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tema-row .ti { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 6px 16px rgba(20,56,56,.2); }
.tema-row h3 { font-size: 1.25rem; margin-bottom: 2px; }
.tema-row p { color: var(--muted); font-size: .9rem; }

/* ============================================
   HOME · TESTIMONIOS (destacado + secundarios)
   ============================================ */
.testi-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: stretch; }
.testi-main, .testi-mini { background: rgba(243,237,218,.06); border: 1px solid rgba(201,162,74,.28); border-radius: var(--radius); margin: 0; }
.testi-main { padding: 40px 38px; position: relative; display: flex; flex-direction: column; justify-content: center; }
.testi-quote { font-family: var(--font-title); font-size: 5rem; line-height: .6; color: var(--gold); height: 40px; }
.testi-main p { font-family: var(--font-title); font-size: 1.7rem; font-style: italic; line-height: 1.45; color: var(--cream); margin: 10px 0 18px; }
.testi-main figcaption, .testi-mini figcaption { font-size: .85rem; letter-spacing: .05em; color: var(--gold-light); }
.testi-side { display: flex; flex-direction: column; gap: 22px; }
.testi-mini { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.testi-mini p { color: rgba(243,237,218,.9); font-size: 1.02rem; margin-bottom: 12px; }

/* ============================================
   HOME · BLOG (destacado + lista)
   ============================================ */
.blog-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.blog-main { display: block; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(201,162,74,.18); transition: transform .25s ease, box-shadow .25s ease; }
.blog-main:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-main img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-main-body { padding: 24px 26px; }
.blog-main-body h3 { font-size: 1.6rem; margin: 8px 0 10px; }
.blog-main-body p { color: var(--muted); }
.blog-list { display: flex; flex-direction: column; gap: 16px; }
.blog-row { display: flex; gap: 16px; align-items: center; background: var(--white); border-radius: 12px; padding: 12px; border: 1px solid rgba(201,162,74,.18); box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.blog-row:hover { transform: translateX(4px); }
.blog-row img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.blog-row h4 { font-size: 1.1rem; margin-top: 4px; color: var(--teal-dark); }

@media (max-width: 900px) {
    .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .bento-item--bottom { grid-column: auto; }
    .timeline { grid-template-columns: 1fr; gap: 36px; }
    .timeline::before { display: none; }
    .tema-list { grid-template-columns: 1fr; }
    .testi-grid { grid-template-columns: 1fr; }
    .blog-feature { grid-template-columns: 1fr; }
}

/* ============================================
   TIRADAS · Experiencia inmersiva
   ============================================ */
.te { position: relative; min-height: 100vh; padding: 70px 0 90px; color: var(--cream); overflow: hidden; isolation: isolate; }
.te-bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(rgba(8,22,21,.9), rgba(8,22,21,.96)), url('/static/img/fondos/hero.webp'); background-size: cover; background-position: center; }
.te-stars { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.te-stars::before { content: ''; position: absolute; inset: -50%;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(224,194,126,.8), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(243,237,218,.7), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(224,194,126,.6), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(243,237,218,.6), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(224,194,126,.7), transparent);
    background-repeat: repeat; background-size: 520px 520px; animation: twinkle 7s ease-in-out infinite; }
.te-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; z-index: -2; background: radial-gradient(circle, rgba(201,162,74,.16), transparent 65%); pointer-events: none; }
.te-inner { max-width: 980px; }

.te-head { text-align: center; margin-bottom: 56px; }
.te-greeting { display: inline-block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.te-head h1 { color: var(--cream); font-size: clamp(2.4rem, 5.5vw, 4rem); margin-bottom: 14px; }
.te-sub { color: rgba(243,237,218,.78); font-size: 1.15rem; max-width: 560px; margin: 0 auto 18px; }
.te-badge { display: inline-block; border: 1px solid rgba(201,162,74,.5); color: var(--gold-light); border-radius: 50px; padding: 8px 20px; font-size: .85rem; letter-spacing: .04em; }

.te-step { text-align: center; animation: teFade .6s ease both; }
@keyframes teFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.te-stepnum { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.te-steptitle { color: var(--cream); font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin: 8px 0 8px; }
.te-steptitle span { color: var(--gold-light); }
.te-help { color: rgba(243,237,218,.7); margin-bottom: 30px; }

/* Tarjetas de tema con imagen */
.tema-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0 36px; }
.tema-card { position: relative; background: rgba(243,237,218,.04); border: 1.5px solid rgba(201,162,74,.3); border-radius: var(--radius); padding: 18px 14px; cursor: pointer; transition: all .25s ease; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tema-card:hover { transform: translateY(-5px); border-color: var(--gold); background: rgba(243,237,218,.07); }
.tema-card.is-active { border-color: var(--gold); background: rgba(201,162,74,.14); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(0,0,0,.3); }
.tema-card-img { width: 92px; height: 92px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid rgba(201,162,74,.5); transition: border-color .25s ease; }
.tema-card.is-active .tema-card-img { border-color: var(--gold-light); }
.tema-card-label { font-family: var(--font-title); font-size: 1.25rem; color: var(--cream); font-weight: 600; }
.tema-card-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--teal-deep); font-size: .8rem; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: all .2s ease; }
.tema-card.is-active .tema-card-check { opacity: 1; transform: scale(1); }

.te-question { max-width: 560px; margin: 0 auto 30px; text-align: left; }
.te-question label { display: block; color: rgba(243,237,218,.8); font-size: .9rem; margin-bottom: 8px; }
.te-question label span { color: rgba(243,237,218,.5); }
.te-question textarea { width: 100%; background: rgba(8,22,21,.5); border: 1.5px solid rgba(201,162,74,.35); border-radius: 12px; padding: 14px 16px; font-family: var(--font-body); font-size: 1rem; color: var(--cream); resize: vertical; }
.te-question textarea::placeholder { color: rgba(243,237,218,.4); }
.te-question textarea:focus { outline: none; border-color: var(--gold); }
.te-cta { margin-top: 6px; }

/* Mazo en arco */
.te-deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 10px auto 36px; max-width: 760px; }
.te-carta { width: 84px; height: 134px; border: none; padding: 0; background: none; cursor: pointer; transition: transform .25s ease; }
.te-carta-inner { display: block; width: 100%; height: 100%; border-radius: 10px; background-image: url('/static/img/tarot/reverso.webp'); background-size: cover; background-position: center; box-shadow: 0 6px 16px rgba(0,0,0,.4); border: 2px solid transparent; transition: all .25s ease; }
.te-carta:hover { transform: translateY(-10px); }
.te-carta.is-picked { transform: translateY(-16px); }
.te-carta.is-picked .te-carta-inner { border-color: var(--gold); box-shadow: 0 12px 30px rgba(201,162,74,.55); }
/* Barajado y reparto del mazo */
.te-deck.is-dealing { pointer-events: none; }
.te-carta.is-stacked { z-index: 2; }
.te-deck.is-shuffling .te-carta { animation: teShuffle .6s ease-in-out 3 both; }
@keyframes teShuffle {
    0%, 100% { transform: translate(var(--dx), var(--dy)) rotate(0deg); }
    28%      { transform: translate(calc(var(--dx) + 22px * var(--sign)), calc(var(--dy) - 9px)) rotate(calc(7deg * var(--sign))); }
    58%      { transform: translate(calc(var(--dx) - 15px * var(--sign)), var(--dy)) rotate(calc(-5deg * var(--sign))); }
    82%      { transform: translate(calc(var(--dx) + 7px * var(--sign)), var(--dy)) rotate(calc(2deg * var(--sign))); }
}

/* Cartas reveladas — estilo carta de tarot real */
.te-result-cards { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin: 24px 0 52px; }
.te-card { width: 200px; height: 361px; perspective: 1300px; }
.te-card.is-flipped { animation: teCardGlow 1.4s ease .9s both; }
@keyframes teCardGlow { 0% { filter: drop-shadow(0 0 0 rgba(201,162,74,0)); } 40% { filter: drop-shadow(0 0 22px rgba(201,162,74,.55)); } 100% { filter: drop-shadow(0 0 10px rgba(201,162,74,.25)); } }
.te-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,.2,.2,1); }
.te-card.is-flipped .te-card-inner { transform: rotateY(180deg); }
.te-card-back, .te-card-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.te-card-back { background-image: url('/static/img/tarot/reverso.webp'); background-size: cover; background-position: center; }
.te-card-front { transform: rotateY(180deg); background: linear-gradient(165deg, var(--teal-deep), #0a1a19); border: 1px solid var(--gold); display: block; padding: 0; text-align: center; overflow: hidden; }
/* Ilustración a sangre completa */
.te-card-front .tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.te-card-front.is-reversed .tc-img { transform: rotate(180deg); }
/* Marco dorado interior (doble línea) sobre la ilustración */
.te-card-front::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,162,74,.55); border-radius: 8px; pointer-events: none; z-index: 2; }
/* Velos superior e inferior para legibilidad del texto */
.te-card-front::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(8,22,21,.72) 0%, rgba(8,22,21,0) 22%, rgba(8,22,21,0) 55%, rgba(8,22,21,.85) 100%); }
/* Posición (Pasado / Presente / Futuro) — banda superior */
.te-card-front .tc-pos { position: absolute; top: 14px; left: 0; right: 0; z-index: 3; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
/* Nombre — banda inferior */
.te-card-front .tc-nom { position: absolute; bottom: 16px; left: 10px; right: 10px; z-index: 3; font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; color: var(--cream); line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.te-card-front .tc-nom::before { content: '✦'; display: block; color: var(--gold-light); font-size: .58rem; margin: 0 auto 7px; opacity: .9; }
.te-card-front .tc-inv { display: block; margin-top: 4px; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #f0b8ac; font-style: normal; font-weight: 600; }
/* Respaldo si no hubiera imagen: símbolo centrado */
.te-card-front .tc-sim { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 3.4rem; }

/* Galería provisional de la baraja (/tarot/cartas) */
.cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 20px 0 40px; }
.cg-card { margin: 0; }
.cg-card-face { position: relative; aspect-ratio: 150 / 271; border-radius: 14px; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,.5); transition: transform .25s ease, box-shadow .25s ease; }
.cg-card:hover .cg-card-face { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(201,162,74,.3); }
.cg-card-face .tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-card-face::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,162,74,.55); border-radius: 8px; z-index: 2; pointer-events: none; }
.cg-card-face::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(8,22,21,.7) 0%, rgba(8,22,21,0) 22%, rgba(8,22,21,0) 55%, rgba(8,22,21,.88) 100%); }
.cg-num { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; font-size: .64rem; letter-spacing: .3em; color: var(--gold-light); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.cg-nom { position: absolute; bottom: 14px; left: 10px; right: 10px; z-index: 3; font-family: var(--font-title); font-size: 1.28rem; font-weight: 600; color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.cg-claves { margin-top: 12px; font-size: .82rem; color: rgba(243,237,218,.72); text-align: center; line-height: 1.4; }
@media (max-width: 900px) { .cg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

/* Lectura (sobre fondo oscuro) */
.te-reading { max-width: 700px; margin: 0 auto; text-align: left; }
.te-reading .reading-intro { color: var(--gold-light); }
.te-reading .reading-card { background: rgba(243,237,218,.05); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 20px 24px; margin-bottom: 18px; }
.te-reading .reading-card h3 { color: var(--cream); }
.te-reading .reading-card p { color: rgba(243,237,218,.85); }
.te-reading .reading-consejo { background: rgba(201,162,74,.14); border: 1px solid rgba(201,162,74,.35); border-radius: 12px; padding: 26px 28px; margin-top: 26px; }
.te-reading .reading-consejo h3 { color: var(--gold-light); }
.te-reading .reading-consejo p { color: var(--cream); }

.te-cierre { text-align: center; margin-top: 44px; }
.te-cierre p { color: rgba(243,237,218,.8); font-size: 1.1rem; margin-bottom: 18px; }

.te-aviso { text-align: center; background: rgba(243,237,218,.06); border: 1px solid rgba(201,162,74,.3); border-radius: 12px; padding: 30px; color: var(--cream); font-size: 1.05rem; max-width: 640px; margin: 0 auto 30px; }

/* ====== Cargando: escena mística impactante ====== */
.te-loading { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; color: rgba(243,237,218,.85); }
.te-loading[hidden] { display: none; }
.te-loader { position: relative; display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: 30px; }
/* Resplandor dorado suave detrás de las cartas */
.te-loader::before { content: ''; position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(201,162,74,.24), transparent 68%); filter: blur(8px); animation: teGlowPulse 2.4s ease-in-out infinite; }
/* Tres cartas boca abajo que suben y bajan (efecto cargando) */
.te-loader-cards { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }
.te-loader-cards span { display: block; width: 92px; height: 146px; border-radius: 11px; background: url('/static/img/tarot/reverso.webp') center/cover; border: 1.5px solid rgba(201,162,74,.55); box-shadow: 0 14px 30px rgba(0,0,0,.5); animation: teFloatCard 1.5s ease-in-out infinite; }
.te-loader-cards span:nth-child(2) { animation-delay: .2s; }
.te-loader-cards span:nth-child(3) { animation-delay: .4s; }
@keyframes teFloatCard { 0%, 100% { transform: translateY(9px); box-shadow: 0 10px 20px rgba(0,0,0,.4); } 50% { transform: translateY(-14px); box-shadow: 0 24px 38px rgba(0,0,0,.55); } }
@keyframes teGlowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.te-loading-txt { font-family: var(--font-title); font-size: 1.7rem; color: var(--cream); }
.te-dots i { animation: teDot 1.4s infinite; opacity: 0; }
.te-dots i:nth-child(2) { animation-delay: .2s; }
.te-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes teDot { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
.te-loading-sub { color: rgba(243,237,218,.6); font-size: .98rem; margin-top: 8px; font-style: italic; }

/* ====== Resultado en diapositivas ====== */
.te-slides-step { animation: none; }
.te-slide { display: none; }
.te-slide.is-active { display: block; animation: teSlideIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes teSlideIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.te-slide-inner { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 70px); padding: 70px 0; }
.te-slide-inner.is-alt { flex-direction: row-reverse; }
.te-slide-media { flex: 0 0 auto; display: flex; justify-content: center; }
.te-slide-text { flex: 1 1 0; max-width: 520px; text-align: left; }
/* Carta grande de la diapositiva */
.te-slide-card { position: relative; width: min(340px, 74vw); aspect-ratio: 150 / 271; border-radius: 16px; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: teCardRise .9s ease both .1s; }
@keyframes teCardRise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.te-slide-card .tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.te-slide-card.is-reversed .tc-img { transform: rotate(180deg); }
.te-slide-card .tc-sim { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; }
.te-slide-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(201,162,74,.55); border-radius: 9px; z-index: 2; pointer-events: none; }
.te-slide-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,22,21,.55) 0%, transparent 26%, transparent 60%, rgba(8,22,21,.9) 100%); }
.te-slide-cardname { position: absolute; bottom: 18px; left: 12px; right: 12px; z-index: 3; font-family: var(--font-title); font-size: 1.5rem; font-weight: 600; color: var(--cream); text-shadow: 0 1px 8px rgba(0,0,0,.85); }
/* Texto de la diapositiva */
.te-slide-intro { font-family: var(--font-title); font-style: italic; font-size: 1.35rem; color: var(--gold-light); line-height: 1.5; margin-bottom: 26px; }
.te-slide-pos { display: inline-block; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.te-slide-nom { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--cream); margin-bottom: 22px; line-height: 1.1; }
.te-slide-inv { font-family: var(--font-body); font-size: .9rem; font-style: italic; color: #f0b8ac; letter-spacing: .04em; }
.te-slide-body { color: rgba(243,237,218,.9); font-size: 1.18rem; line-height: 1.75; }
.te-slide-foot { display: flex; align-items: center; gap: 20px; margin-top: 36px; }
.te-slide-count { font-size: .82rem; letter-spacing: .18em; color: rgba(243,237,218,.55); margin-left: auto; }
.te-navlink { background: none; border: none; color: rgba(243,237,218,.7); font-family: var(--font-body); font-size: .95rem; cursor: pointer; padding: 6px 2px; transition: color .2s ease; }
.te-navlink:hover { color: var(--gold-light); }
.te-slide-error { min-height: 60vh; display: grid; place-items: center; }
/* Diapositiva final */
.te-slide--final .te-slide-final { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 0; max-width: 680px; margin: 0 auto; }
.te-final-eyebrow { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.te-final-title { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--cream); margin-bottom: 26px; }
.te-final-consejo { font-family: var(--font-title); font-style: italic; font-size: 1.5rem; line-height: 1.6; color: rgba(243,237,218,.92); margin-bottom: 24px; }
/* Resumen de las 3 cartas elegidas en la diapositiva final */
.te-final-cards { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 8px 0 30px; }
.te-final-card { margin: 0; width: 120px; }
.te-final-card-img { position: relative; aspect-ratio: 150 / 271; border-radius: 11px; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 12px 26px rgba(0,0,0,.5); }
.te-final-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.te-final-card.is-reversed .te-final-card-img img { transform: rotate(180deg); }
.te-final-card-img .tc-sim { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; }
.te-final-card figcaption { margin-top: 10px; font-size: .82rem; color: rgba(243,237,218,.85); line-height: 1.3; }
.te-final-card-pos { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 3px; }
.te-final-card figcaption em { color: #f0b8ac; font-style: italic; }

.te-final-nota { color: rgba(243,237,218,.7); font-size: 1.05rem; margin-bottom: 32px; }
.te-final-cta { margin-bottom: 26px; }
.te-final-back { margin-top: 6px; }

@media (max-width: 820px) {
    .te-slide-inner, .te-slide-inner.is-alt { flex-direction: column; text-align: center; min-height: auto; padding: 48px 0 60px; }
    .te-slide-text { text-align: center; max-width: 100%; }
    .te-slide-foot { justify-content: center; flex-wrap: wrap; }
    .te-slide-count { margin-left: 0; width: 100%; order: 3; }
    .te-slide--final .te-slide-final { min-height: auto; padding: 60px 0; }
}

.te-pago-head { text-align: center; margin-bottom: 10px; }
.te-pago-nota { text-align: center; color: rgba(243,237,218,.6); font-size: .9rem; margin-top: 20px; }

@media (max-width: 760px) {
    .tema-cards { grid-template-columns: repeat(2, 1fr); }
    .te-carta { width: 64px; height: 102px; }
    .te-card { width: 158px; height: 285px; }
    .te-card-front .tc-sim { width: 76px; height: 76px; font-size: 2.3rem; }
    .te-card-front .tc-nom { font-size: 1.18rem; }
}

/* ============================================
   MENÚ DE USUARIO (cabecera)
   ============================================ */
.user-menu { position: relative; }
.user-btn { background: transparent; border: 1.5px solid rgba(201,162,74,.5); color: var(--teal-dark); padding: 9px 16px; border-radius: 50px; font-family: var(--font-body); font-size: .9rem; cursor: pointer; transition: all .2s ease; }
.user-btn:hover { border-color: var(--gold); }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid rgba(201,162,74,.25); border-radius: 12px; box-shadow: var(--shadow-md); min-width: 180px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease; }
.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: none; }
.user-dropdown a { display: block; padding: 10px 14px; border-radius: 8px; font-size: .92rem; color: var(--ink); }
.user-dropdown a:hover { background: var(--cream); color: var(--teal-dark); }

/* ============================================
   TAROT — hero de la página explicativa
   ============================================ */
.tarot-hero { position: relative; padding: 90px 0; text-align: center; color: var(--cream); overflow: hidden; isolation: isolate; }
.tarot-hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(rgba(8,22,21,.82), rgba(14,39,38,.9)), url('/static/img/fondos/hero-tarot.webp');
    background-size: cover; background-position: center;
}

/* ===== Altura unificada de los heroes de página ===== */
.tarot-hero, .ct-hero, .blog-hero {
    min-height: 46vh;
    padding: 56px 0;
    display: flex; align-items: center;
}
.tarot-hero > .container, .ct-hero > .container, .blog-hero > .container { width: 100%; }
.tarot-hero-inner { max-width: 720px; margin: 0 auto; }
.tarot-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 16px 0 16px; }
.tarot-hero p { color: rgba(243,237,218,.85); font-size: 1.15rem; }
.tarot-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ============================================
   PRECIOS
   ============================================ */
.precios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.precio-card { position: relative; background: var(--white); border: 1px solid rgba(201,162,74,.25); border-radius: var(--radius); padding: 32px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.precio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.precio-card--destacado { border: 2px solid var(--gold); box-shadow: var(--shadow-md); }
.precio-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--teal-deep); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; font-weight: 600; }
.precio-cat { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.precio-card h3 { font-size: 1.5rem; margin: 8px 0 6px; }
.precio-num { font-family: var(--font-title); font-size: 2.6rem; font-weight: 700; color: var(--teal); margin-bottom: 12px; }
.precio-desc { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.precio-feats { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; flex: 1; }
.precio-feats li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .92rem; color: var(--ink); }
.precio-feats li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }
.precio-card .btn { margin-top: auto; }

.pago-cards { margin-top: 30px; }
.pago-cards .precios-grid { grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: 0 auto; }

/* Tarjetas de precio en versión oscura (sobre la experiencia inmersiva).
   Debe ir DESPUÉS de .precio-card para ganar por orden de cascada. */
.precio-card--dark { background: rgba(243,237,218,.06); border-color: rgba(201,162,74,.35); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.precio-card--dark:hover { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.precio-card--dark.precio-card--destacado { border: 2px solid var(--gold); background: rgba(201,162,74,.12); }
.precio-card--dark .precio-cat { color: var(--gold-light); }
.precio-card--dark h3 { color: var(--cream); }
.precio-card--dark .precio-num { color: var(--gold-light); }
.precio-card--dark .precio-desc { color: rgba(243,237,218,.72); }
.precio-card--dark .precio-feats li { color: rgba(243,237,218,.88); }
/* Botón outline sobre fondo oscuro: el color teal-dark base es invisible aquí */
.precio-card--dark .btn--outline { color: var(--gold-light); border-color: rgba(201,162,74,.6); }
.precio-card--dark .btn--outline:hover { background: var(--gold); color: var(--teal-deep); border-color: var(--gold); }

/* ============================================
   TIRADAS (página privada)
   ============================================ */
.tiradas-head { text-align: center; margin-bottom: 40px; }
.tiradas-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0 8px; }
.tiradas-estado { color: var(--muted); font-size: 1.05rem; }
.tiradas-estado strong { color: var(--teal); }

/* ============================================
   AUTENTICACIÓN (login / registro)
   ============================================ */
.auth-section { display: flex; justify-content: center; align-items: flex-start; min-height: 70vh; }
.auth-card { width: 100%; max-width: 440px; background: var(--white); border: 1px solid rgba(201,162,74,.22); border-radius: var(--radius); padding: 40px 36px; box-shadow: var(--shadow-md); }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-logo { width: 64px; margin: 0 auto 14px; }
.auth-head h1 { font-size: 1.9rem; margin-bottom: 6px; }
.auth-head p { color: var(--muted); font-size: .95rem; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }
.auth-form input { border: 1.5px solid rgba(201,162,74,.35); border-radius: 10px; padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; background: var(--cream-2); color: var(--ink); }
.auth-form input:focus { outline: none; border-color: var(--gold); }
.auth-error { background: #fbe9e7; border: 1px solid #e6a99e; color: #8a3324; border-radius: 10px; padding: 12px 16px; font-size: .92rem; margin-bottom: 18px; text-align: center; }
.auth-alt { text-align: center; margin-top: 22px; color: var(--muted); font-size: .92rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 900px) {
    .precios-grid, .pago-cards .precios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .precios-grid, .pago-cards .precios-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: var(--teal-deep); color: rgba(243,237,218,.8); padding: 60px 0 0; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.footer-logo { width: 150px; margin-bottom: 16px; }
.footer-desc { font-size: .92rem; max-width: 300px; color: rgba(243,237,218,.65); }
.footer-col h3 { color: var(--gold-light); font-size: 1.15rem; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(243,237,218,.78); font-size: .92rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-social { display: flex; flex-direction: column; gap: 10px; }
.footer-social a { color: rgba(243,237,218,.78); }
.footer-soon { color: rgba(243,237,218,.45); font-size: .9rem; }
.footer-bottom { border-top: 1px solid rgba(201,162,74,.2); padding: 22px 0; text-align: center; font-size: .82rem; color: rgba(243,237,218,.5); }

/* ============================================
   PÁGINAS INTERNAS (encabezado)
   ============================================ */
.page-head { background: linear-gradient(135deg, var(--teal-deep), var(--teal)); color: var(--cream); padding: 70px 0; text-align: center; }
.page-head h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-head p { color: rgba(243,237,218,.8); max-width: 620px; margin: 14px auto 0; }

.prose { max-width: 760px; margin: 0 auto; padding: 50px 22px; font-size: 1.1rem; line-height: 1.8; }
.prose h2 { font-family: var(--font-title); font-size: 1.9rem; color: var(--teal-dark); margin: 40px 0 14px; }
.prose h3 { font-family: var(--font-title); font-size: 1.4rem; color: var(--teal-dark); margin: 28px 0 10px; }
.prose p { margin-bottom: 18px; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 18px 24px; }
.prose li { margin-bottom: 8px; color: var(--ink); }
.prose a { color: var(--gold-deep); text-decoration: underline; }
.prose strong { color: var(--teal-dark); }
.prose blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--gold); background: var(--cream-2); border-radius: 0 12px 12px 0; font-family: var(--font-title); font-style: italic; font-size: 1.25rem; color: var(--teal-dark); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 20px 0; }

/* Artículo: cabecera y meta */
.article-head { text-align: center; max-width: 820px; margin: 0 auto; padding: 0 22px; }
.article-cat { display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 12px; }
.article-meta { color: var(--muted); font-size: .92rem; margin-top: 12px; }
.article-cover { max-width: 900px; margin: 30px auto 0; padding: 0 22px; }
.article-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.article-author { max-width: 760px; margin: 10px auto 0; padding: 24px 22px; display: flex; align-items: center; gap: 14px; border-top: 1px solid #e6e3d7; }
.article-author .aa-ava { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold)); display: grid; place-items: center; font-size: 1.5rem; }
.article-author .aa-name { font-family: var(--font-title); font-size: 1.15rem; color: var(--teal-dark); font-weight: 600; }
.article-author .aa-role { color: var(--muted); font-size: .88rem; }
.article-back { display: inline-block; margin: 8px 0 0; color: var(--gold-deep); font-weight: 500; }

/* Placeholder de “en construcción” */
.placeholder-note { text-align: center; padding: 80px 22px; color: var(--muted); }
.placeholder-note .em { font-family: var(--font-title); font-size: 1.6rem; color: var(--teal); display: block; margin-bottom: 10px; }

/* ============================================
   EFECTOS — Aparición al hacer scroll (reveal)
   ============================================ */
/* El contenido es visible por defecto; solo se oculta para animar si hay JS activo.
   Así nunca queda texto invisible si el JS falla o tarda. */
.reveal { transition: opacity .8s cubic-bezier(.16,.7,.3,1), transform .8s cubic-bezier(.16,.7,.3,1); will-change: opacity, transform; }
.js .reveal { opacity: 0; transform: translateY(34px); }
.js .reveal--left { transform: translateX(-40px); }
.js .reveal--right { transform: translateX(40px); }
.js .reveal--zoom { transform: scale(.94); }
.reveal.is-visible { opacity: 1 !important; transform: none !important; }
/* En móvil/tablet el layout se apila: el desplazamiento horizontal solo causaría
   desbordamiento, así que revelamos solo en vertical. */
@media (max-width: 900px) {
    .js .reveal--left, .js .reveal--right { transform: translateY(34px); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    * { animation: none !important; }
}

/* ============================================
   HERO — cielo estrellado animado
   ============================================ */
.hero { isolation: isolate; }
/* Capa de imagen de fondo (cuando exista fondos/hero.webp); si no, queda el degradado base */
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -3;
    background-image: url('/static/img/fondos/hero-inicio.webp');
    background-size: cover; background-position: center;
    opacity: .55;
}
/* Velo oscuro para dar contraste al texto y al logo (más denso por la izquierda) */
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(105deg, rgba(8,22,21,.95) 0%, rgba(10,28,27,.82) 45%, rgba(12,32,31,.55) 100%);
}
/* Estrellas: dos capas de puntos con parpadeo */
.hero-stars { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-stars::before, .hero-stars::after {
    content: ''; position: absolute; inset: -50%;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(224,194,126,.9), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(243,237,218,.8), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(224,194,126,.7), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(243,237,218,.7), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(224,194,126,.8), transparent),
        radial-gradient(1px 1px at 10% 65%, rgba(243,237,218,.6), transparent),
        radial-gradient(1px 1px at 90% 75%, rgba(224,194,126,.7), transparent);
    background-repeat: repeat; background-size: 600px 600px;
    animation: twinkle 6s ease-in-out infinite;
}
.hero-stars::after { background-size: 420px 420px; opacity: .6; animation-duration: 9s; animation-delay: -3s; }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: .85; } }

/* Halo dorado flotante */
.hero-glow { position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,74,.30), transparent 65%);
    top: 8%; right: 4%; filter: blur(6px); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }

.hero-visual img { animation: floatSlow 8s ease-in-out infinite; }
@keyframes floatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero-badge { backdrop-filter: blur(4px); }

/* ============================================
   PARALLAX — banda con imagen de fondo fija
   ============================================ */
.parallax {
    position: relative; overflow: hidden;
    background-color: var(--teal-deep);
    color: var(--cream);
    text-align: center;
    padding: 130px 0;
}
.parallax__bg {
    position: absolute; inset: -10% 0; z-index: 0;
    background-size: cover; background-position: center;
    /* desplazamiento controlado por JS (data-parallax) */
    transform: translate3d(0, var(--parallax-y, 0), 0);
    will-change: transform;
}
.parallax::after { /* velo para legibilidad */
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(rgba(14,39,38,.78), rgba(20,56,56,.72));
}
.parallax .container { position: relative; z-index: 2; }
.parallax h2 { color: var(--cream); font-size: clamp(2rem, 4.5vw, 3.2rem); }
.parallax p { color: rgba(243,237,218,.85); font-size: 1.15rem; max-width: 640px; margin: 16px auto 0; }
.parallax .quote { font-family: var(--font-title); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.3; }
.parallax .quote-author { display:block; margin-top: 18px; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-light); font-family: var(--font-body); font-style: normal; }

/* Fallback: si no hay imagen, un degradado místico anima el fondo */
.parallax__bg--fallback {
    background-image:
        radial-gradient(circle at 25% 20%, rgba(201,162,74,.22), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(29,78,78,.6), transparent 50%),
        linear-gradient(135deg, var(--teal-deep), var(--teal-dark));
}

/* Microinteracción: subrayado dorado animado en títulos de sección */
.section-title { position: relative; display: inline-block; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; min-height: auto; }
    .hero-actions { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-visual { order: -1; }
    .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .themes { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; gap: 32px; }
    .split--reverse .split-media { order: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .nav-desktop { display: none; }
    .nav-toggle { display: flex; }
    .cols-3, .cols-4 { grid-template-columns: 1fr; }
    .themes { grid-template-columns: 1fr; }
    .section { padding: 56px 0; }
    .parallax { padding: 90px 0; }
    .brand-tagline { display: none; }
    /* Footer centrado en móvil */
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .footer-logo { margin-left: auto; margin-right: auto; }
    .footer-desc { max-width: 360px; margin-left: auto; margin-right: auto; }
    .footer-social { align-items: center; }
}

/* ============================================
   PANEL DE ADMINISTRACIÓN
   ============================================ */
.admin-body { background: #eef0ec; color: var(--ink); }
.admin-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

/* Barra lateral */
.admin-side { background: linear-gradient(180deg, var(--teal-deep), #0a1f1e); color: var(--cream); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.admin-brand { display: flex; align-items: center; gap: 10px; color: var(--cream); font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; padding: 6px 8px 20px; border-bottom: 1px solid rgba(201,162,74,.25); }
.admin-brand img { width: 36px; height: 36px; object-fit: contain; }
.admin-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; flex: 1; }
.admin-navlink { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: rgba(243,237,218,.82); font-size: .95rem; transition: background .18s ease, color .18s ease; }
.admin-navlink span { width: 20px; text-align: center; }
.admin-navlink:hover { background: rgba(243,237,218,.07); color: var(--cream); }
.admin-navlink.is-active { background: rgba(201,162,74,.18); color: var(--gold-light); font-weight: 500; box-shadow: inset 3px 0 0 var(--gold); }
.admin-navlink.is-soon { opacity: .4; cursor: default; }
.admin-navsep { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,218,.4); margin: 18px 14px 6px; }
.admin-logout { margin-top: 16px; text-align: center; padding: 10px; border: 1px solid rgba(201,162,74,.4); border-radius: 10px; color: var(--gold-light); font-size: .9rem; transition: background .2s ease; }
.admin-logout:hover { background: rgba(201,162,74,.15); }

/* Contenido */
.admin-main { padding: 30px 38px 60px; min-width: 0; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #dcdfd8; }
.admin-title { font-size: 2rem; color: var(--teal-dark); margin: 0; }
.admin-subtitle { color: var(--muted); font-size: .98rem; margin-top: 4px; }
.admin-user { background: #fff; border: 1px solid #dcdfd8; border-radius: 50px; padding: 8px 18px; font-size: .9rem; color: var(--teal-dark); white-space: nowrap; }

/* Flashes */
.admin-flashes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.admin-flash { padding: 13px 18px; border-radius: 10px; font-size: .95rem; border: 1px solid transparent; }
.admin-flash--ok { background: #e7f4ec; border-color: #b6ddc4; color: #1c6b3f; }
.admin-flash--error { background: #fbeaea; border-color: #e6bcbc; color: #9a2c2c; }
.admin-flash--info { background: #eef1f6; border-color: #c9d4e4; color: #37506f; }

/* KPIs de visitas */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid #e2e5de; border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 14px rgba(20,56,56,.05); display: flex; flex-direction: column; gap: 6px; }
.kpi--accent { background: linear-gradient(160deg, #143838, #1d4e4e); border-color: transparent; }
.kpi-label { font-size: .82rem; color: var(--muted); letter-spacing: .01em; }
.kpi--accent .kpi-label { color: rgba(243,237,218,.8); }
.kpi-value { font-family: var(--font-title); font-size: 2.3rem; font-weight: 700; color: var(--teal-dark); line-height: 1; }
.kpi--accent .kpi-value { color: #fff; }
.kpi-delta { font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kpi-delta em { font-style: normal; font-weight: 400; color: var(--muted); }
.kpi--accent .kpi-delta em { color: rgba(243,237,218,.7); }
.kpi-delta--up { color: #1c7a4a; }
.kpi-delta--down { color: #b23a3a; }
.kpi-delta--flat { color: var(--muted); }
.kpi--accent .kpi-delta--up { color: #7ee0a8; }
.kpi--accent .kpi-delta--down { color: #f2a6a6; }

/* Tarjetas de gráficas */
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 40px; }
.chart-card { background: #fff; border: 1px solid #e2e5de; border-radius: 18px; padding: 20px 22px 12px; box-shadow: 0 4px 14px rgba(20,56,56,.05); min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.chart-title { font-family: var(--font-title); font-size: 1.3rem; color: var(--teal-dark); }
.chart-sub { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.chart-empty { padding: 40px 16px; text-align: center; color: var(--muted); background: var(--cream-2); border-radius: 12px; font-size: .92rem; margin: 10px 0 16px; }
.admin-section-h { font-family: var(--font-title); font-size: 1.35rem; color: var(--teal-dark); margin: 8px 0 18px; padding-left: 14px; position: relative; }
.admin-section-h::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--gold); }

/* Tarjetas de estadísticas */
.admin-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 38px; }
.admin-stat { background: #fff; border: 1px solid #e2e5de; border-radius: 16px; padding: 22px 24px; box-shadow: 0 4px 14px rgba(20,56,56,.05); }
.admin-stat-ico { font-size: 1.5rem; margin-bottom: 8px; }
.admin-stat-num { font-family: var(--font-title); font-size: 2.4rem; font-weight: 700; color: var(--teal-dark); line-height: 1; }
.admin-stat-lbl { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* Tarjetas de acceso */
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.admin-card { background: #fff; border: 1px solid #e2e5de; border-radius: 16px; padding: 26px; box-shadow: 0 4px 14px rgba(20,56,56,.05); display: flex; flex-direction: column; }
.admin-card h3 { color: var(--teal-dark); font-size: 1.3rem; margin: 8px 0 8px; }
.admin-card p { color: var(--muted); font-size: .93rem; flex: 1; }
.admin-card-ico { font-size: 1.7rem; }
.admin-card .btn { margin-top: 18px; align-self: flex-start; }
.admin-card--soon { opacity: .6; }

/* Panel/caja genérica */
.admin-panel { background: #fff; border: 1px solid #e2e5de; border-radius: 16px; padding: 8px 4px; box-shadow: 0 4px 14px rgba(20,56,56,.05); overflow-x: auto; }
.admin-table { min-width: 560px; }
.admin-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.admin-search { flex: 1; min-width: 220px; display: flex; gap: 8px; }
.admin-search input { flex: 1; border: 1px solid #d3d7cf; border-radius: 10px; padding: 10px 14px; font-family: var(--font-body); font-size: .95rem; background: #fff; color: var(--ink); }
.admin-search input:focus { outline: none; border-color: var(--gold); }

/* Tablas */
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th { text-align: left; padding: 14px 16px; color: var(--muted); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid #eceee9; }
.admin-table td { padding: 13px 16px; border-bottom: 1px solid #f0f1ed; color: var(--ink); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #fafbf8; }
.admin-table .col-num { text-align: center; font-variant-numeric: tabular-nums; }
.admin-name { font-weight: 600; color: var(--teal-dark); }
.admin-sub { color: var(--muted); font-size: .82rem; }
.admin-empty { text-align: center; padding: 50px 20px; color: var(--muted); }

/* Etiquetas de estado */
.tag { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: .74rem; font-weight: 600; letter-spacing: .03em; }
.tag--ok { background: #e3f3e9; color: #1c6b3f; }
.tag--off { background: #f1e3e3; color: #9a2c2c; }
.tag--gold { background: #f6ecd4; color: var(--gold-deep); }
.tag--muted { background: #ececec; color: #666; }

/* Acciones en fila */
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-mini { border: 1px solid #d3d7cf; background: #fff; color: var(--teal-dark); border-radius: 8px; padding: 6px 11px; font-size: .82rem; font-family: var(--font-body); cursor: pointer; transition: all .18s ease; white-space: nowrap; }
.btn-mini:hover { border-color: var(--gold); background: #fbf6ea; }
.btn-mini--danger:hover { border-color: #d98a8a; background: #fbeaea; color: #9a2c2c; }

/* Formularios */
.admin-form { max-width: 860px; }
.admin-field { margin-bottom: 20px; }
.admin-field label { display: block; font-size: .88rem; color: var(--teal-dark); font-weight: 500; margin-bottom: 6px; }
.admin-field input, .admin-field textarea { width: 100%; border: 1px solid #d3d7cf; border-radius: 10px; padding: 11px 14px; font-family: var(--font-body); font-size: .95rem; background: #fff; color: var(--ink); }
.admin-field input:focus, .admin-field textarea:focus { outline: none; border-color: var(--gold); }
.admin-precio-row { display: grid; grid-template-columns: 1fr 90px 90px auto; gap: 14px; align-items: end; background: #fafbf8; border: 1px solid #e8eae4; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.admin-precio-row .admin-field { margin-bottom: 0; }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--teal-dark); }

/* Admin: tienda */
.admin-toolbar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 18px; }
.admin-toolbar .btn-mini { align-self: center; }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.admin-grid .admin-field select { width: 100%; border: 1px solid #d3d7cf; border-radius: 10px; padding: 11px 14px; font-family: var(--font-body); font-size: .95rem; background: #fff; color: var(--ink); }
.admin-hint { display: block; font-size: .78rem; color: var(--muted); margin-top: 5px; }
.admin-prod-preview { max-width: 200px; border-radius: 12px; border: 1px solid #e6e3d7; margin-top: 4px; }
.admin-form-actions { display: flex; gap: 12px; margin-top: 20px; }
.admin-prod { display: flex; align-items: center; gap: 12px; }
.admin-prod-img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid #e6e3d7; flex-shrink: 0; }
.admin-precio-old { color: var(--muted); text-decoration: line-through; font-size: .82rem; }

/* ===== LA BARAJA (admin) ===== */
.admin-mazo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; padding: 14px; }
.mazo-card { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: center; cursor: pointer; }
.mazo-card-img { display: block; width: 100%; aspect-ratio: 150 / 271; object-fit: cover; border-radius: 10px; border: 1px solid #e6e3d7; box-shadow: 0 4px 12px rgba(20,56,56,.12); transition: transform .2s ease, box-shadow .2s ease; }
.mazo-card:hover .mazo-card-img, .mazo-card:focus-visible .mazo-card-img { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(20,56,56,.2); }
.mazo-card-info { display: block; margin-top: 9px; }
.mazo-card-num { display: block; font-family: var(--font-title); font-size: .95rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .06em; }
.mazo-card-nom { display: block; font-size: .88rem; font-weight: 500; color: var(--ink); margin-top: 1px; }
.mazo-card-fr { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* Visor a pantalla completa */
.mazo-visor { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(14,39,38,.82); backdrop-filter: blur(3px); }
.mazo-visor[hidden] { display: none; }
.mazo-visor-caja { position: relative; display: flex; gap: 30px; align-items: center; max-width: 720px; width: 100%; padding: 26px; background: var(--cream-2); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.mazo-visor-img { width: 240px; flex-shrink: 0; border-radius: 12px; border: 1px solid #e6e3d7; }
.mazo-visor-x { position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.mazo-visor-x:hover { background: #ece7d8; color: var(--ink); }
.mazo-visor-num { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .08em; }
.mazo-visor-nom { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--ink); margin: 2px 0 4px; }
.mazo-visor-fr { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mazo-visor-claves-t { margin-top: 20px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.mazo-visor-claves { margin-top: 5px; color: var(--ink); line-height: 1.6; }

@media (max-width: 620px) {
    .admin-mazo { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
    .mazo-visor-caja { flex-direction: column; gap: 18px; text-align: center; padding: 34px 20px 26px; }
    .mazo-visor-img { width: 170px; }
}

/* ===== TIENDA (público) ===== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.prod-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e3d7; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.prod-card-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--cream-2); }
.prod-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.prod-card:hover .prod-card-img img { transform: scale(1.05); }
.prod-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--teal-deep); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; }
.prod-card-cat { position: absolute; bottom: 12px; left: 12px; background: rgba(20,56,56,.85); color: var(--cream); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 50px; }
.prod-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.prod-card-title { font-size: 1.16rem; color: var(--teal-dark); line-height: 1.3; margin-bottom: 8px; }
.prod-card-desc { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: 16px; flex: 1; }
.prod-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-price .old { color: var(--muted); text-decoration: line-through; font-size: .9rem; margin-right: 4px; }
.prod-price .now { color: var(--gold-deep); font-weight: 700; font-size: 1.25rem; font-family: var(--font-title); }
.prod-card-link { color: var(--gold-deep); font-weight: 600; font-size: .85rem; }

/* Intro + secciones editoriales de tienda */
.tienda-intro { max-width: 720px; text-align: center; margin: 0 auto; }
.tienda-intro .section-title { margin: 8px 0 14px; }
.tienda-intro p { color: var(--muted); font-size: 1.08rem; line-height: 1.8; }

.tienda-feature { padding: 72px 0; }
.tienda-feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.tienda-feature-inner.is-alt .tienda-feature-media { order: 2; }
.tienda-feature-media { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid #e6e3d7; aspect-ratio: 4/3; background: var(--cream-2); }
.tienda-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tienda-feature-media:hover img { transform: scale(1.04); }
.tienda-feature-body .section-eyebrow { color: var(--gold-deep); }
.tienda-feature-title { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--teal-dark); margin: 10px 0 12px; line-height: 1.15; }
.tienda-feature-price { margin-bottom: 16px; }
.tienda-feature-price .old { color: var(--muted); text-decoration: line-through; font-size: 1.1rem; margin-right: 6px; }
.tienda-feature-price .now { color: var(--gold-deep); font-weight: 700; font-size: 1.9rem; font-family: var(--font-title); }
.tienda-feature-lead { color: var(--ink); font-size: 1.12rem; line-height: 1.7; margin-bottom: 12px; font-weight: 500; }
.tienda-feature-desc { color: var(--muted); line-height: 1.75; margin-bottom: 24px; }
.tienda-feature-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tienda-feature-stock { color: #1c7a4a; font-size: .9rem; font-weight: 600; }
.tienda-cta { max-width: 640px; text-align: center; margin: 0 auto; }
.tienda-cta p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 12px 0 26px; }
@media (max-width: 860px) {
    .tienda-feature { padding: 48px 0; }
    .tienda-feature-inner { grid-template-columns: 1fr; gap: 28px; }
    .tienda-feature-inner.is-alt .tienda-feature-media { order: 0; }
}

/* Detalle de producto */
.prod-back { display: inline-block; color: var(--muted); font-size: .9rem; margin-bottom: 22px; }
.prod-back:hover { color: var(--gold-deep); }
.prod-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.prod-detail-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid #e6e3d7; }
.prod-detail-media img { width: 100%; display: block; }
.prod-detail-cat { display: inline-block; background: var(--cream-2); color: var(--gold-deep); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; }
.prod-detail-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--teal-dark); margin: 14px 0 12px; line-height: 1.15; }
.prod-detail-price { margin-bottom: 22px; }
.prod-detail-price .old { color: var(--muted); text-decoration: line-through; font-size: 1.3rem; margin-right: 8px; }
.prod-detail-price .now { color: var(--gold-deep); font-weight: 700; font-size: 2.3rem; font-family: var(--font-title); }
.prod-detail-lead { color: var(--ink); font-size: 1.1rem; line-height: 1.7; margin-bottom: 14px; }
.prod-detail-desc { color: var(--muted); line-height: 1.75; margin-bottom: 22px; }
.prod-detail-feats { list-style: none; padding: 0; margin: 0 0 26px; }
.prod-detail-feats li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--ink); }
.prod-detail-feats li::before { content: '✦'; position: absolute; left: 0; color: var(--gold-deep); }
.prod-detail-nota { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.prod-detail-nota a { color: var(--gold-deep); text-decoration: underline; }
@media (max-width: 900px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-detail { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 520px) {
    .prod-grid { grid-template-columns: 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; margin-top: 0; flex: 1 1 100%; }
    .admin-navsep { display: none; }
    .admin-logout { margin-top: 0; }
    .admin-main { padding: 22px 18px 44px; }
    .admin-stats, .admin-cards { grid-template-columns: repeat(2, 1fr); }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .chart-grid { grid-template-columns: 1fr; }
    .admin-precio-row { grid-template-columns: 1fr 1fr; }
}

/* Login del panel */
.admin-login-body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 20px;
    background: linear-gradient(rgba(8,22,21,.92), rgba(8,22,21,.96)), url('/static/img/fondos/hero.webp') center/cover fixed; }
.admin-login { width: 100%; max-width: 420px; }
.admin-login-card { background: rgba(20,40,40,.55); backdrop-filter: blur(8px); border: 1px solid rgba(201,162,74,.35); border-radius: 20px; padding: 40px 34px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.admin-login-logo { width: 68px; height: 68px; object-fit: contain; margin-bottom: 14px; }
.admin-login-card h1 { color: var(--cream); font-size: 1.7rem; margin: 0 0 4px; }
.admin-login-sub { color: rgba(243,237,218,.7); font-size: .92rem; margin-bottom: 24px; }
.admin-login-form { text-align: left; margin-top: 10px; }
.admin-login-form .admin-field label { color: rgba(243,237,218,.85); }
.admin-login-form .admin-field input { background: rgba(8,22,21,.5); border: 1.5px solid rgba(201,162,74,.35); color: var(--cream); }
.admin-login-form .admin-field input:focus { border-color: var(--gold); }
.admin-login-form .btn { margin-top: 8px; }
.admin-login-back { display: inline-block; margin-top: 20px; color: rgba(243,237,218,.6); font-size: .88rem; }
.admin-login-back:hover { color: var(--gold-light); }
.admin-login-card .admin-flash { text-align: left; margin-bottom: 14px; }

/* ============================================
   PÁGINA DE CONTACTO / CONSULTAS
   ============================================ */
.section--alt { background: var(--cream-2); }

/* Hero */
.ct-hero { position: relative; text-align: center; color: var(--cream); overflow: hidden; isolation: isolate; }
.ct-hero-bg { position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(rgba(8,22,21,.78), rgba(14,39,38,.9)), url('/static/img/fondos/hero-consulta.webp') center/cover; }
/* Contacto: su propio fondo */
.ct-hero--contacto .ct-hero-bg {
    background: linear-gradient(rgba(8,22,21,.78), rgba(14,39,38,.9)), url('/static/img/fondos/hero-contacto.webp') center/cover; }
/* Tienda: su propio fondo */
.ct-hero--tienda .ct-hero-bg {
    background: linear-gradient(rgba(8,22,21,.72), rgba(14,39,38,.88)), url('/static/img/fondos/hero-tienda.webp') center/cover; }
.ct-hero-inner { max-width: 720px; margin: 0 auto; }
.ct-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 12px 0 16px; }
.ct-hero h1 .accent { color: var(--gold-light); font-style: italic; }
.ct-hero p { color: rgba(243,237,218,.85); font-size: 1.15rem; }
.ct-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* Flashes */
.ct-flashes { max-width: 780px; margin: -30px auto 0; position: relative; z-index: 3; }
.ct-flash { padding: 16px 22px; border-radius: 12px; font-size: 1rem; margin-bottom: 12px; border: 1px solid transparent; box-shadow: var(--shadow-sm); }
.ct-flash--ok { background: #e7f4ec; border-color: #b6ddc4; color: #1c6b3f; }
.ct-flash--error { background: #fbeaea; border-color: #e6bcbc; color: #9a2c2c; }

/* Cómo funciona */
.ct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ct-step { text-align: center; padding: 10px; }
.ct-step-num { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold)); color: var(--teal-deep); font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; box-shadow: 0 8px 20px rgba(201,162,74,.25); }
.ct-step h3 { color: var(--teal-dark); font-size: 1.35rem; margin-bottom: 8px; }
.ct-step p { color: var(--muted); }

/* Tarifas */
.ct-precios { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }
.ct-nota { text-align: center; color: var(--muted); margin-top: 26px; font-size: .95rem; }

/* Reserva y contacto (2 columnas) */
.ct-hero--small { padding: 68px 0; }
.ct-reserva, .ct-contacto { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
/* Enlaces cruzados entre Consulta y Contacto */
.ct-cross { text-align: center; }
.ct-cross p { color: var(--muted); font-size: 1.08rem; margin-bottom: 16px; }
.ct-cross-inline { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e6e3d7; }
.ct-cross-inline p { color: var(--ink); font-weight: 500; margin-bottom: 12px; }
.ct-reserva-info .section-title, .ct-contacto-info .section-title { text-align: left; margin: 6px 0 16px; }
.ct-reserva-info p, .ct-contacto-info p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.ct-checks { list-style: none; padding: 0; margin: 22px 0 0; }
.ct-checks li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--ink); }
.ct-checks li::before { content: '✦'; position: absolute; left: 0; color: var(--gold-deep); }

/* Formularios */
.ct-form { background: #fff; border: 1px solid #e6e3d7; border-radius: 18px; padding: 30px; box-shadow: var(--shadow-sm); }
.section--alt .ct-form { background: #fff; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { margin-bottom: 16px; }
.ct-field label { display: block; font-size: .9rem; font-weight: 500; color: var(--teal-dark); margin-bottom: 6px; }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; border: 1.5px solid #d3d7cf; border-radius: 10px; padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--ink); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.15); }
.ct-field textarea { resize: vertical; }
.ct-form .btn { margin-top: 6px; }
.ct-legal { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.ct-legal a { color: var(--gold-deep); text-decoration: underline; }

@media (max-width: 820px) {
    .ct-steps { grid-template-columns: 1fr; gap: 30px; }
    .ct-precios { grid-template-columns: 1fr; }
    .ct-reserva, .ct-contacto { grid-template-columns: 1fr; gap: 28px; }
    .ct-row { grid-template-columns: 1fr; }
}

/* Admin · blog (packs + secciones) */
.admin-blog-cta { background: linear-gradient(135deg, #fbf7ec, #f3ead2); border: 1px solid #e7dcc0; border-radius: 18px; padding: 28px; margin-bottom: 34px; }
.admin-blog-cta-head { text-align: center; max-width: 620px; margin: 0 auto 22px; }
.admin-blog-cta-head h2 { color: var(--teal-dark); font-size: 1.7rem; margin-bottom: 6px; }
.admin-blog-cta-head p { color: var(--muted); }
.admin-packs { grid-template-columns: repeat(3, 1fr); }
.admin-section-title { color: var(--teal-dark); font-size: 1.4rem; margin: 6px 0 16px; }
@media (max-width: 860px) { .admin-packs { grid-template-columns: 1fr; } }

/* ============================================
   ARTÍCULO DE BLOG (estilo completo)
   ============================================ */
.art-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; padding: 60px 0 46px; color: var(--cream); overflow: hidden; isolation: isolate; }
.art-hero-bg { position: absolute; inset: 0; z-index: -2; }
.art-hero-img { width: 100%; height: 100%; object-fit: cover; }
.art-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,21,.55) 0%, rgba(8,22,21,.35) 40%, rgba(8,22,21,.92) 100%); }
.art-hero-inner { position: relative; max-width: 860px; }
.art-hero-back { display: inline-block; color: rgba(243,237,218,.85); font-size: .92rem; margin-bottom: 20px; transition: color .2s ease; }
.art-hero-back:hover { color: var(--gold-light); }
.art-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .85rem; color: rgba(243,237,218,.8); margin-bottom: 16px; }
.art-hero-meta > span:not(.art-hero-cat) { position: relative; }
.art-hero-cat { background: var(--gold); color: var(--teal-deep); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; padding: 5px 12px; border-radius: 50px; }
.art-hero-title { color: var(--cream); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; margin-bottom: 16px; }
.art-hero-sub { color: rgba(243,237,218,.88); font-size: 1.2rem; font-family: var(--font-title); font-style: italic; max-width: 720px; margin-bottom: 24px; }
.art-hero-author { display: flex; align-items: center; gap: 12px; }
.art-hero-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(201,162,74,.6); }
.art-hero-aname { display: block; font-family: var(--font-title); font-size: 1.1rem; color: var(--cream); font-weight: 600; }
.art-hero-arole { display: block; font-size: .82rem; color: rgba(243,237,218,.7); }

/* Layout cuerpo + sidebar */
.art-wrap { padding: 50px 22px; }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.art-body { min-width: 0; overflow-wrap: break-word; }
.art-body.prose { max-width: none; margin: 0; padding: 0; }

/* Figuras / varias imágenes dentro del artículo */
.prose figure, .prose .article-image { margin: 30px 0; text-align: center; }
.prose figure img, .prose .article-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.prose figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; border: 1px solid #e6e3d7; border-radius: 12px; overflow: hidden; }
.prose th { background: var(--cream-2); color: var(--teal-dark); text-align: left; padding: 12px 16px; }
.prose td { padding: 12px 16px; border-top: 1px solid #eceae1; }

/* Preguntas frecuentes (FAQ) */
.art-faq { margin: 10px 0 8px; border-top: 1px solid #e6e3d7; }
.art-faq-item { border-bottom: 1px solid #e6e3d7; }
.art-faq-item summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 4px; position: relative; font-family: var(--font-title); font-size: 1.18rem; font-weight: 600; color: var(--teal-dark); }
.art-faq-item summary::-webkit-details-marker { display: none; }
.art-faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--gold-deep); line-height: 1; transition: transform .2s ease; }
.art-faq-item[open] summary::after { content: '−'; }
.art-faq-item summary:hover { color: var(--teal); }
.art-faq-a { padding: 0 4px 20px; color: var(--muted); line-height: 1.7; }
.art-faq-a p { margin-bottom: 12px; }

/* Tags y compartir */
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.art-tag { background: var(--cream-2); color: var(--gold-deep); border: 1px solid #e6dcc4; border-radius: 50px; padding: 5px 14px; font-size: .82rem; }
.art-share { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e6e3d7; }
.art-share-label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.art-share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.art-share-btn { border: 1.5px solid #d8d3c4; background: #fff; color: var(--teal-dark); border-radius: 10px; padding: 9px 16px; font-family: var(--font-body); font-size: .9rem; cursor: pointer; transition: all .2s ease; }
.art-share-btn:hover { border-color: var(--gold); background: var(--cream-2); }

/* Sidebar */
.art-aside { display: flex; flex-direction: column; gap: 22px; align-self: start; position: sticky; top: 90px; }
.art-card { background: #fff; border: 1px solid #e6e3d7; border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.art-card-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); font-weight: 600; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eceae1; }
.toc-nav { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.toc-link { display: block; padding: 7px 12px; color: var(--muted); font-size: .9rem; line-height: 1.4; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; transition: all .18s ease; }
.toc-link:hover { color: var(--teal-dark); background: var(--cream-2); }
.toc-link--active { color: var(--gold-deep); border-left-color: var(--gold); background: var(--cream-2); font-weight: 500; }
.toc-link--h3 { padding-left: 24px; font-size: .84rem; }
/* Ficha autora */
.art-author-card { text-align: center; }
.art-author-ava { display: block; margin: 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cream-2); box-shadow: 0 4px 14px rgba(20,56,56,.12); }
.art-author-card h4 { font-family: var(--font-title); font-size: 1.2rem; color: var(--teal-dark); margin: 12px 0 2px; }
.art-author-role { color: var(--gold-deep); font-size: .84rem; margin-bottom: 10px; }
.art-author-bio { color: var(--muted); font-size: .9rem; line-height: 1.6; }
/* Relacionados */
.art-related { display: flex; flex-direction: column; gap: 14px; }
.art-related-item { display: flex; gap: 12px; align-items: center; }
.art-related-item img { width: 68px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.art-related-item h4 { font-size: .95rem; color: var(--teal-dark); line-height: 1.3; margin-bottom: 3px; }
.art-related-item span { font-size: .78rem; color: var(--muted); }
.art-related-item:hover h4 { color: var(--gold-deep); }
/* CTA */
.art-cta { background: linear-gradient(150deg, var(--teal), var(--teal-deep)); border: none; text-align: center; }
.art-cta h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: 8px; }
.art-cta p { color: rgba(243,237,218,.82); font-size: .92rem; margin-bottom: 16px; }
.art-cta .btn--outline { color: var(--gold-light); border-color: rgba(201,162,74,.6); }
.art-cta .btn--outline:hover { background: var(--gold); color: var(--teal-deep); border-color: var(--gold); }

@media (min-width: 981px) {
    .art-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 54px; }
}
@media (max-width: 980px) {
    .art-aside { position: static; }
    .art-toc { display: none; }
}

/* ============================================
   BLOG · listado
   ============================================ */
.blog-hero { position: relative; text-align: center; color: var(--cream); overflow: hidden; isolation: isolate; }
.blog-hero-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(8,22,21,.8), rgba(14,39,38,.92)), url('/static/img/fondos/hero-blog.webp') center/cover; }
.blog-hero-inner { max-width: 720px; margin: 0 auto; }
.blog-hero-eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.blog-hero h1 { color: var(--cream); font-size: clamp(2.1rem, 5vw, 3.3rem); margin-bottom: 14px; }
.blog-hero p { color: rgba(243,237,218,.85); font-size: 1.12rem; margin-bottom: 26px; }
.blog-search { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.blog-search input { flex: 1; border: 1.5px solid rgba(201,162,74,.4); border-radius: 50px; padding: 13px 22px; font-family: var(--font-body); font-size: 1rem; background: rgba(8,22,21,.5); color: var(--cream); }
.blog-search input::placeholder { color: rgba(243,237,218,.5); }
.blog-search input:focus { outline: none; border-color: var(--gold); }
.blog-search .btn { border-radius: 50px; }

/* Categorías */
.blog-cats-wrap { background: var(--cream-2); border-bottom: 1px solid #e6e3d7; position: sticky; top: 0; z-index: 20; }
.blog-cats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 16px 22px; }
.blog-cat { border: 1.5px solid #dcd6c6; background: #fff; color: var(--teal-dark); border-radius: 50px; padding: 8px 18px; font-size: .9rem; transition: all .2s ease; white-space: nowrap; cursor: pointer; font-family: inherit; line-height: 1.2; }
.blog-cat:hover { border-color: var(--gold); background: var(--cream); }
.blog-cat.is-active { background: var(--teal); border-color: var(--teal); color: var(--cream); }

/* Destacado */
.blog-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border: 1px solid #e6e3d7; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 50px; transition: box-shadow .25s ease, transform .25s ease; }
.blog-featured:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-featured-img { position: relative; min-height: 320px; }
.blog-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-badge { position: absolute; top: 16px; left: 16px; background: var(--gold); color: var(--teal-deep); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; }
.blog-featured-body { padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--teal-dark); margin: 12px 0 12px; line-height: 1.2; }
.blog-featured-excerpt { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 18px; }
.blog-featured-link { color: var(--gold-deep); font-weight: 600; margin-top: 6px; }

/* Rejilla y tarjetas */
.blog-section-title { margin: 10px 0 24px; }
.blog-section-title h2 { font-size: 1.6rem; color: var(--teal-dark); position: relative; padding-left: 16px; }
.blog-section-title h2::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--gold); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { background: #fff; border: 1px solid #e6e3d7; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-cat { position: absolute; top: 12px; left: 12px; background: rgba(20,56,56,.85); color: var(--cream); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 50px; }
.blog-featured-body .blog-card-cat { position: static; display: inline-block; align-self: flex-start; background: var(--cream-2); color: var(--gold-deep); }
.blog-card-body { padding: 22px 22px 24px; }
.blog-card-meta { display: flex; gap: 14px; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.blog-card-title { font-size: 1.28rem; color: var(--teal-dark); line-height: 1.3; margin-bottom: 10px; }
.blog-card-excerpt { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-bottom: 14px; }
.blog-card-more { color: var(--gold-deep); font-weight: 600; font-size: .92rem; }
.blog-card:hover .blog-card-title { color: var(--teal); }
.blog-empty { text-align: center; padding: 60px 20px; color: var(--muted); background: var(--cream-2); border-radius: 16px; }
.blog-empty a { color: var(--gold-deep); text-decoration: underline; }
/* Filtrado en el cliente (la URL no cambia) */
.blog-card--hidden { display: none !important; }
.blog-card--dup { display: none; }
#blogWrap.is-filtering .blog-card--dup { display: block; }
.blog-count { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.blog-section-title[data-list-head] { display: flex; flex-direction: column; }

/* CTA final */
.blog-cta { text-align: center; padding: 70px 22px; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); color: var(--cream); }
.blog-cta h2 { color: var(--cream); font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: 12px; }
.blog-cta p { color: rgba(243,237,218,.85); max-width: 560px; margin: 0 auto 26px; font-size: 1.08rem; }
.blog-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.blog-cta .btn--outline { color: var(--gold-light); border-color: rgba(201,162,74,.6); }
.blog-cta .btn--outline:hover { background: var(--gold); color: var(--teal-deep); border-color: var(--gold); }

@media (max-width: 860px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-img { min-height: 220px; aspect-ratio: 16/9; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
}

/* Aviso de transparencia de IA en la tirada (Reglamento UE de IA) */
.te-ai-nota { margin: 26px auto 0; max-width: 620px; text-align: center; font-size: .8rem;
    line-height: 1.5; color: rgba(243,237,218,.6); }
.te-ai-nota a { color: var(--gold-light); text-decoration: underline; }

/* Documentos legales */
.legal-doc { font-size: 1rem; }
.legal-updated { color: var(--muted); font-style: italic; font-size: .9rem; margin-bottom: 28px; }
.legal-data { list-style: none; padding: 18px 22px; margin: 0 0 8px; background: var(--cream);
    border: 1px solid rgba(201,162,74,.25); border-radius: 12px; }
.legal-data li { margin: 6px 0; }
.legal-nav { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(201,162,74,.3);
    font-size: .92rem; color: var(--muted); }