:root {
  --ink: #110d09;
  --paper: #f3ecdf;
  --paper-deep: #e8ddca;
  --gold: #c3a065;
  --gold-light: #e2c895;
  --red: #a91723;
  --red-dark: #761018;
  --white: #fffaf1;
  --line: rgba(73, 51, 26, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif; }
button, a { font: inherit; }
a { color: inherit; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20; height: 84px; padding: 0 clamp(24px, 3.5vw, 60px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 2.2vw, 38px);
  color: var(--white); border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(7,5,4,.82); box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--gold-light); }
.brand-mark { position: relative; width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; }
.brand-mark::before { content: ""; width: 17px; height: 17px; border-radius: 50%; box-shadow: -5px 0 0 0 var(--gold-light); transform: translateX(3px); }
.brand-mark::after { content: ""; position: absolute; inset: -8px; border: 1px dashed rgba(216,184,124,.65); border-radius: 50%; }
.brand strong { display: block; font: 32px/1 "Snell Roundhand", "Brush Script MT", cursive; font-weight: 500; }
.brand small { display: block; margin-top: 2px; font: 11px/1.2 Georgia, serif; letter-spacing: .2em; text-transform: uppercase; }
.site-header nav { justify-self: center; display: flex; gap: clamp(15px, 1.45vw, 26px); }
.site-header nav a { position: relative; padding: 32px 0 30px; color: #f6eee2; font-size: clamp(13px,.9vw,15px); letter-spacing: .065em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:21px; height:1px; background:var(--gold-light); transition:right .2s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--gold-light); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right:0; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.language-switch { padding: 9px 10px; color: #eee3d4; border: 1px solid rgba(227,202,153,.35); background: rgba(0,0,0,.2); cursor: pointer; }
.language-switch span { padding: 0 7px; font-size: 13px; }
.language-switch span + span { border-left: 1px solid rgba(255,255,255,.25); }
.language-switch .active { color: var(--gold-light); }
.menu-toggle { display: none; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 28px; min-width: 210px; padding: 15px 22px; color: #fff; border: 1px solid #c9444c; background: linear-gradient(180deg, #bf2833, var(--red)); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; transition: transform .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); background: var(--red-dark); }
.button-small { min-width: auto; padding: 13px 18px; font-size: 12px; }

.hero { position: relative; min-height: 620px; height: clamp(620px, 62vw, 760px); display: flex; align-items: center; isolation: isolate; overflow: hidden; color: var(--white); background: #090705; }
.hero::before { content:""; position:absolute; inset:0 0 0 30%; z-index:-2; background:url('/public/assets/mama-negra-hero-bright.jpg') 46% 78% / auto 150% no-repeat; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,4,3,.98) 0%, rgba(5,4,3,.93) 29%, rgba(5,4,3,.65) 43%, rgba(5,4,3,.2) 55%, rgba(5,4,3,0) 69%), linear-gradient(0deg, rgba(5,4,3,.18), transparent 48%); }
.hero-copy { width: min(560px, 48vw); padding: 118px 0 50px clamp(36px, 5.5vw, 84px); text-align: center; }
.moon-phases { margin-bottom: 17px; color: var(--gold-light); font: 20px Georgia, serif; letter-spacing: .38em; }
.eyebrow { margin: 19px 0 4px; color: #f7ead6; font: 16px Georgia, serif; letter-spacing: .04em; }
h1, h2, h3, blockquote { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { margin: 0; color: #f5d8a8; font-size: clamp(49px, 5.6vw, 80px); line-height: .88; letter-spacing: .025em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
h1 span { display: block; margin-top: 15px; font-size: .43em; letter-spacing: .18em; }
.disciplines { margin: 0; font: 16px Georgia, serif; }
.hero blockquote { margin: 20px auto 12px; color: var(--gold-light); font-style: italic; font-size: clamp(22px, 2vw, 30px); line-height: 1.18; }
.hero-intro { max-width: 455px; margin: 0 auto 22px; line-height: 1.5; font-size: 15px; }
.hero-quote { position: absolute; top: 150px; right: 4.5vw; color: #f1d4a0; text-align: center; font: italic 20px/1.45 Georgia, serif; text-shadow:0 2px 16px rgba(0,0,0,.75); }

.paper-section { background-color: var(--paper); background-image: radial-gradient(rgba(88,62,30,.055) 1px, transparent 1px); background-size: 7px 7px; }
.consultations { padding: 42px clamp(26px, 5vw, 80px) 54px; }
.section-heading { text-align: center; }
.section-heading > span { display: inline-block; width: 58px; height: 1px; background: #9d7b4b; margin: 0 20px 8px; }
.section-heading h2 { display: inline-block; margin: 0; color: #45311f; text-transform: uppercase; letter-spacing: .25em; font-size: 29px; }
.section-heading p { margin: 4px 0 26px; color: #725a40; font: italic 17px Georgia, serif; }
.reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1280px; margin: 0 auto; }
.reading-card { display: flex; flex-direction: column; align-items: center; padding: 0 32px 6px; text-align: center; border-right: 1px solid var(--line); }
.reading-card:last-child { border-right: 0; }
.card-art { position: relative; width: 100%; height: 148px; margin-bottom: 16px; overflow: hidden; display: grid; place-items: center; color: var(--gold-light); font: 50px Georgia, serif; background-color: #1d130d; }
.card-art::before { content: ""; position: absolute; inset: 0; opacity: .66; background: radial-gradient(circle at 25% 65%, #f0b75e 0 3%, #7a2f18 4% 12%, transparent 13%), radial-gradient(circle at 64% 35%, #7a151b 0 8%, transparent 9%), linear-gradient(130deg, #0c0907, #4e2815 52%, #0b0907); }
.art-tarot::before { background: linear-gradient(135deg, transparent 20%, #a77b3e 21% 23%, #21130e 24% 47%, #a77b3e 48% 50%, transparent 51%), radial-gradient(circle at 70% 35%, #d2a14f 0 7%, transparent 8%), #170f0c; }
.art-flower::before { background: radial-gradient(ellipse at center, #dfa82c 0 5%, #a71924 6% 15%, #650e18 16% 27%, transparent 28%), radial-gradient(circle at 80% 62%, #8d632f 0 4%, transparent 5%), linear-gradient(130deg, #080706, #25120d); }
.card-art span { position: relative; z-index: 1; }
.duration { margin: 0; font: 15px Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.reading-card h3 { margin: 4px 0 10px; min-height: 48px; font-size: 23px; line-height: 1.05; text-transform: uppercase; letter-spacing: .05em; }
.reading-card > p:not(.duration):not(.format):not(.price) { max-width: 330px; min-height: 52px; margin: 0 0 14px; color: #51483e; font-size: 14px; line-height: 1.4; }
.format { margin: auto 0 12px; font-size: 13px; }
.price { margin: 0 0 12px; font: 22px Georgia, serif; }
.price small { margin-left: 8px; color: #775d3c; font-size: 14px; }
.reading-card .button { width: min(100%, 270px); margin-top: auto; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header nav { display: none; }
  .menu-toggle { display: block; justify-self: end; color: var(--gold-light); border: 0; background: transparent; text-transform: uppercase; letter-spacing: .12em; font-size:14px; }
  .site-header.menu-open nav { position: absolute; top: 84px; right: 18px; display: flex; flex-direction: column; gap: 0; min-width:240px; background: #0d0a08; padding: 10px 18px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
  .site-header.menu-open nav a { padding: 14px 10px; font-size:16px; }
  .site-header.menu-open nav a::after { bottom:7px; }
  .hero-copy { width: min(660px, 62vw); padding-left: 4vw; }
  .hero-quote { display: none; }
}

@media (max-width: 760px) {
  .site-header { height: 76px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .brand-mark { width: 34px; height: 34px; }
  .brand strong { font-size: 27px; }
  .brand small { font-size: 9px; }
  .menu-toggle { justify-self: end; }
  .header-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 62px; padding: 8px 12px; justify-content: center; background: #0b0907; border-top: 1px solid rgba(221,190,133,.3); }
  .header-actions .button { flex: 1; }
  .hero { min-height: 860px; height:auto; align-items: end; }
  .hero::before { inset:0; background-position:42% center; background-size:cover; }
  .hero-shade { background: linear-gradient(0deg, rgba(6,5,4,.99) 0%, rgba(6,5,4,.9) 38%, rgba(6,5,4,.13) 76%), linear-gradient(90deg, rgba(6,5,4,.35), transparent); }
  .hero-copy { width: 100%; padding: 280px 22px 54px; }
  .moon-phases { margin-bottom: 14px; font-size: 17px; }
  h1 { font-size: clamp(45px, 14vw, 68px); }
  .eyebrow { font-size: 12px; }
  .disciplines { font-size: 15px; }
  .hero blockquote { font-size: 24px; }
  .hero-intro { font-size: 14px; }
  .consultations { padding-inline: 20px; }
  .section-heading > span { width: 30px; margin-inline: 8px; }
  .section-heading h2 { font-size: 24px; }
  .reading-grid { grid-template-columns: 1fr; gap: 34px; }
  .reading-card { padding: 0 0 34px; border-right: 0; border-bottom: 1px solid var(--line); }
  .reading-card:last-child { border-bottom: 0; }
  .card-art { height: 180px; }
  .reading-card > p:not(.duration):not(.format):not(.price), .reading-card h3 { min-height: 0; }
  body { padding-bottom: 62px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.ritual-scene{position:relative;width:100%;height:178px;margin-bottom:16px;overflow:hidden;isolation:isolate;background:#130d09;box-shadow:inset 0 0 0 1px rgba(215,179,111,.28)}
.ritual-scene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,3,2,.08) 35%,rgba(5,3,2,.78) 100%),radial-gradient(circle at 50% 42%,transparent 22%,rgba(5,3,2,.44) 100%)}
.ritual-scene::after{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;border:1px solid rgba(225,191,127,.38)}
.ritual-scene>img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) sepia(.08) contrast(1.08);transition:transform .6s ease,filter .6s ease}
.reading-card:hover .ritual-scene>img{transform:scale(1.035);filter:saturate(1) sepia(0) contrast(1.08)}
.spanish-scene>img{object-position:center 52%;transform:scale(1.08) rotate(-1deg)}
.reading-card:hover .spanish-scene>img{transform:scale(1.12) rotate(-1deg)}
.tarot-scene>img{object-position:center 43%;transform:scale(1.06) rotate(1deg)}
.reading-card:hover .tarot-scene>img{transform:scale(1.1) rotate(1deg)}
.polished-scene>img{object-position:center center;transform:scale(1.01)}
.reading-card:hover .polished-scene>img{transform:scale(1.045)}
.scene-label{position:absolute;left:23px;bottom:17px;z-index:4;color:#f2d7a4;font:11px Georgia,serif;text-transform:uppercase;letter-spacing:.17em;text-shadow:0 2px 8px #000}
.candle{position:absolute;right:26px;bottom:19px;z-index:4;width:18px;height:45px;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,#c79854,#f7dd9b 45%,#a77438);box-shadow:0 0 24px rgba(255,176,59,.8)}
.candle i{position:absolute;left:5px;top:-18px;width:8px;height:18px;border-radius:60% 35% 55% 35%;background:#ffd274;box-shadow:0 0 18px 7px rgba(255,148,35,.55);transform:rotate(6deg)}
.moon-seal{position:absolute;right:25px;top:20px;z-index:4;width:38px;height:38px;display:grid;place-items:center;color:#f1ce89;border:1px solid rgba(241,206,137,.6);border-radius:50%;font:27px Georgia,serif;background:rgba(8,6,4,.42);box-shadow:0 0 24px rgba(215,172,92,.22)}
.dual-scene{background:linear-gradient(135deg,#2a1c13,#080605)}
.dual-scene>img{position:absolute;width:72%;height:130%;top:-15%;object-fit:cover;border:1px solid rgba(239,210,155,.55);box-shadow:0 12px 28px rgba(0,0,0,.55)}
.dual-scene .deck-back{left:-6%;transform:rotate(-7deg);object-position:45% center}
.dual-scene .deck-front{right:-6%;transform:rotate(7deg);object-position:52% center}
.reading-card:hover .dual-scene .deck-back{transform:rotate(-9deg) scale(1.03)}
.reading-card:hover .dual-scene .deck-front{transform:rotate(9deg) scale(1.03)}
.hibiscus{position:absolute;right:20px;top:14px;z-index:4;color:#b51625;font-size:44px;text-shadow:0 0 18px rgba(213,35,50,.65)}
.story{display:grid;grid-template-columns:33% 44% 23%;min-height:250px;color:#f5eadc;background:#080806;overflow:hidden}
.story-photo{background:url('/public/assets/mama-negra-story.jpg') 39% 62%/cover no-repeat}
.story-copy{padding:32px 42px;display:flex;flex-direction:column;justify-content:center}
.story-copy h2{margin:0 0 19px;color:var(--gold-light);text-align:center;text-transform:uppercase;letter-spacing:.18em;font-size:22px}
.story-copy p{margin:0 0 16px;font:16px/1.55 Georgia,serif}
.story-copy .story-note{font:14px/1.5 Avenir,"Helvetica Neue",Arial,sans-serif;color:#d7c4ab}
.outline-button{align-self:center;display:inline-flex;gap:22px;align-items:center;padding:10px 22px;color:#f8eee0;border:1px solid rgba(230,200,149,.68);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:9px}
.story>blockquote{margin:0;padding:34px 20px;display:grid;place-items:center;color:var(--gold-light);text-align:center;font:italic 16px/1.55 Georgia,serif;background:radial-gradient(circle at 90% 20%,rgba(117,77,37,.35),transparent 42%),linear-gradient(135deg,#18140d,#080806)}
.booking{display:grid;grid-template-columns:34% 43% 23%;min-height:380px}
.booking-intro{padding:25px 34px}
.booking-kicker{margin:0;color:#5e452a;font:18px Georgia,serif;text-transform:uppercase;letter-spacing:.08em}
.booking-intro h2,.faq h2{margin:6px 0 8px;font:30px Georgia,serif}
.booking-intro>p:not(.booking-kicker){margin:0 0 12px;color:#5d5143;font-size:10px;line-height:1.4}
.service-options{display:grid;gap:5px}.service-options label{min-height:55px;padding:9px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;border:1px solid rgba(93,61,28,.16);background:rgba(255,255,255,.22);cursor:pointer}
.service-options label:has(input:checked){border-color:#9c7a46;background:#f7f0e4}.service-options input{accent-color:#9c7a46}.service-options span b,.service-options span small{display:block;font-size:11px}.service-options span small{margin-top:3px}.service-options strong{font:14px Georgia,serif}.service-options strong small{font-size:9px;color:#765d41}
.scheduler{display:grid;grid-template-columns:1fr 1.08fr;margin:37px 0 26px;border:1px solid var(--line);background:rgba(255,255,255,.25)}
.date-panel,.time-panel{padding:18px;border-right:1px solid var(--line)}.time-panel{border-right:0}.scheduler label{display:block;margin-bottom:10px;font-size:11px;font-weight:700}.scheduler input[type=date]{width:100%;padding:11px;border:1px solid var(--line);background:#f9f3ea;color:#3e3328}.calendar-note{margin-top:24px;padding:18px 8px;color:#70593d;text-align:center;font:italic 12px Georgia,serif}.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.time-grid button{padding:8px 2px;border:1px solid var(--line);background:#fbf6ee;color:#514535;font-size:10px;cursor:pointer}.time-grid button.selected{color:#fff;border-color:#9f1721;background:#9f1721}.timezone{margin:12px 0 9px;color:#665c51;font-size:9px}.continue-button{width:100%;min-width:0}.payment-note{margin:7px 0 0;color:#6b5d4f;font-size:8px;line-height:1.35}
.travel-card{padding:28px 23px;color:#f6ead8;text-align:center;background:url('/public/assets/mama-negra-hero.jpg') 88% 55%/cover no-repeat;position:relative;isolation:isolate}.travel-card::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,9,6,.7)}.travel-card .booking-kicker{color:var(--gold-light);font-size:19px}.travel-card p{font:12px/1.45 Georgia,serif}.travel-card strong{color:#fff2d6;font:16px/1.65 Georgia,serif}.travel-card .outline-button{margin-top:5px}
.testimonials{padding:18px 42px 25px;color:#f8eee3;background:radial-gradient(circle at 15% 50%,rgba(104,63,26,.18),transparent 30%),#090806}.testimonials>header{display:flex;justify-content:center;align-items:center;gap:16px}.testimonials>header span{width:48px;height:1px;background:#b48c51}.testimonials>header h2{margin:0 0 12px;color:var(--gold-light);font-size:21px;letter-spacing:.19em;text-transform:uppercase}.testimonials>div{display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:auto}.testimonials blockquote{margin:0;padding:4px 30px;text-align:center;border-right:1px solid rgba(211,177,116,.35);font-style:italic}.testimonials blockquote:last-child{border-right:0}.testimonials blockquote p{margin:0 0 9px;font-size:12px;line-height:1.5}.testimonials cite{font:8px Avenir,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.faq{padding:48px clamp(32px,8vw,120px);display:grid;grid-template-columns:1fr 1.5fr;gap:70px}.faq .booking-kicker{font-size:14px}.faq-list details{border-top:1px solid var(--line);padding:16px 2px}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{cursor:pointer;font:16px Georgia,serif}.faq-list p{color:#5e5245;font-size:12px;line-height:1.5}
footer{min-height:96px;padding:16px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#e9d6b7;background:#080705}footer p{font:11px Georgia,serif;letter-spacing:.08em}
.whatsapp-contact{display:inline-block;margin-top:7px;color:var(--gold-light);font-family:Avenir,"Helvetica Neue",Arial,sans-serif;font-size:10px;text-decoration:none;letter-spacing:.04em}.whatsapp-contact:hover,.whatsapp-contact:focus-visible{text-decoration:underline}
dialog{width:min(460px,calc(100vw - 32px));padding:34px;color:#2d241c;border:1px solid #9b7745;background:var(--paper);box-shadow:0 20px 80px rgba(0,0,0,.65)}dialog::backdrop{background:rgba(0,0,0,.72)}dialog h2{font-size:32px;margin:7px 0}dialog p{font-size:13px;line-height:1.5}.dialog-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:25px;cursor:pointer}

@media(max-width:1000px){.booking{grid-template-columns:40% 60%}.travel-card{grid-column:1/-1;min-height:260px;background-position:center 51%}.reading-card{padding-inline:14px}}
@media(max-width:760px){.ritual-scene{height:220px}.story{grid-template-columns:1fr}.story-photo{min-height:280px;background-position:42% 55%}.story-copy{padding:30px 24px}.story-copy p{font-size:13px}.story>blockquote{min-height:180px;font-size:16px}.booking{grid-template-columns:1fr}.booking-intro{padding:34px 20px}.scheduler{grid-template-columns:1fr;margin:0 20px 28px}.date-panel{border-right:0;border-bottom:1px solid var(--line)}.travel-card{grid-column:auto;min-height:330px}.testimonials{padding:28px 18px}.testimonials>div{grid-template-columns:1fr}.testimonials blockquote{padding:20px 5px;border-right:0;border-bottom:1px solid rgba(211,177,116,.35)}.testimonials blockquote p{font-size:14px}.faq{grid-template-columns:1fr;gap:22px;padding:38px 22px}footer{padding:26px 18px 84px;flex-direction:column;text-align:center}}