:root { --ink: #203b36; --deep: #15352f; --cream: #f4f0e8; --sand: #d6c6a7; --gold: #b9975b; --muted: #78847c; --white: #fffdf9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.site-header { min-height: 760px; overflow: hidden; background: var(--cream); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
.brand em { color: var(--gold); font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; color: var(--cream); border-radius: 50%; background: var(--ink); font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: 32px; color: #53645c; font-size: 13px; font-weight: 500; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .footer-links a:hover { color: var(--gold); }
.nav-cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 17px; color: var(--cream) !important; border-radius: 2px; background: var(--ink); }
.nav-cta span, .button span { font-size: 18px; }
.menu-toggle { display: none; border: 0; background: transparent; }
.hero { display: grid; grid-template-columns: .91fr 1.09fr; gap: 8%; align-items: center; padding-top: 51px; }
.eyebrow, .section-kicker, .service-tag { margin: 0; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span, .section-kicker span { display: inline-block; width: 30px; height: 1px; background: currentColor; vertical-align: middle; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Playfair Display", serif; font-weight: 500; line-height: 1.06; letter-spacing: -.045em; }
h1 { max-width: 580px; margin: 21px 0 25px; font-size: clamp(56px, 6.3vw, 86px); }
h1 i, h2 em { color: var(--gold); font-style: italic; }
.hero-text { max-width: 390px; margin-bottom: 31px; color: #607068; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 17px 20px; border: 1px solid transparent; font-size: 12px; font-weight: 600; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--cream); background: var(--ink); }
.text-link, .arrow-link { color: var(--ink); font-size: 12px; font-weight: 600; border-bottom: 1px solid #adbaaf; padding-bottom: 6px; }
.text-link span, .arrow-link span { margin-left: 8px; font-size: 16px; }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 45px; color: #728078; font-size: 11px; }
.hero-note strong { color: var(--ink); }
.avatar-stack { display: flex; padding-left: 5px; }
.avatar-stack i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -5px; border: 2px solid var(--cream); border-radius: 50%; background: #ab8977; color: var(--cream); font-size: 9px; font-style: normal; }
.avatar-stack i:nth-child(2) { background: #c5a37a; }.avatar-stack i:nth-child(3) { background: #7e9892; }
.hero-visual { position: relative; height: 487px; }
.hero-image { position: absolute; background-position: center; background-size: cover; }
.image-main { inset: 0 0 29px 9%; background-image: linear-gradient(140deg, rgba(22, 53, 47, .05), rgba(22, 53, 47, .08)), url("https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1100&q=85"); }
.image-detail { right: 0; bottom: 0; width: 185px; height: 197px; border: 9px solid var(--cream); background-image: url("https://images.unsplash.com/photo-1600334089648-b0d9d3028eb2?auto=format&fit=crop&w=600&q=85"); }
.floating-card { position: absolute; left: 0; bottom: 61px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--cream); background: var(--ink); box-shadow: 0 12px 30px rgba(31, 57, 51, .17); }
.floating-card strong, .floating-card small { display: block; }.floating-card strong { font-family: "Playfair Display", serif; font-size: 17px; font-weight: 500; }.floating-card small { color: #bfcec3; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.floating-icon { color: var(--gold); font-size: 22px; }
.circle-label { position: absolute; top: 21px; right: -29px; display: grid; place-items: center; width: 102px; height: 102px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 8px; font-weight: 600; letter-spacing: .17em; line-height: 1.4; text-align: center; transform: rotate(15deg); }.circle-label span { font-size: 16px; line-height: .7; }
.hero-bottom { display: flex; gap: 17px; margin-top: 26px; color: #89958b; font-size: 9px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.section { padding-top: 130px; padding-bottom: 130px; }.section-kicker { display: flex; align-items: center; gap: 10px; color: var(--gold); }.section-kicker span { width: 26px; }
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9%; margin-top: 35px; padding-left: 9%; }.intro h2 { margin-bottom: 0; font-size: clamp(40px, 4vw, 59px); }.intro-copy { align-self: end; max-width: 350px; color: #68766e; font-size: 15px; }.intro-copy p { margin-bottom: 25px; }
.experience-section { color: var(--cream); background: var(--deep); }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }.section-heading h2 { margin: 20px 0 0; color: var(--cream); font-size: clamp(45px, 5vw, 66px); }.section-heading p { max-width: 265px; margin-bottom: 2px; color: #9bac9f; font-size: 13px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }.service-card { position: relative; padding: 25px 25px 28px; overflow: hidden; background: #23453d; }.service-card.featured { background: #31574d; }.service-number { position: absolute; top: 20px; right: 22px; z-index: 1; color: #b9cab8; font-size: 10px; }.service-art { height: 185px; margin: 0 -25px 23px; background-position: center; background-size: cover; opacity: .87; }.art-relax { background-image: url("https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=700&q=80"); }.art-deep { background-image: url("https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=700&q=80"); }.art-ritual { background-image: url("https://images.unsplash.com/photo-1600334129128-685c5582fd35?auto=format&fit=crop&w=700&q=80"); }.service-content { min-height: 205px; }.service-tag { color: #c7b78e; }.service-content h3 { margin: 11px 0 12px; color: var(--cream); font-size: 31px; }.service-content > p:not(.service-tag) { min-height: 60px; color: #a9b9ae; font-size: 13px; }.service-content a { display: inline-flex; align-items: center; gap: 13px; padding-top: 17px; border-top: 1px solid #5d796e; color: var(--cream); font-size: 11px; font-weight: 600; }.service-content a span { color: var(--gold); font-size: 18px; }
.price-menu { margin-top: 56px; padding: 25px 28px 11px; border: 1px solid #406359; background: #1b3d36; }.price-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }.price-menu-head h3 { margin: 0; color: var(--cream); font-size: 24px; }.price-menu-head span { color: #a7b9ac; font-size: 11px; }.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 44px; }.price-grid a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid #36564d; }.price-grid a > span:first-child { font-size: 17px; }.price-grid strong, .price-grid small { display: block; }.price-grid strong { color: var(--cream); font-size: 12px; font-weight: 600; }.price-grid small { margin-top: 2px; color: #9db0a3; font-size: 10px; }.price-grid b { color: var(--gold); font-family: "Playfair Display", serif; font-size: 18px; font-weight: 500; }
.promise { display: grid; grid-template-columns: .95fr 1.05fr; gap: 11%; align-items: center; }.promise-image { min-height: 550px; background: url("https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=900&q=85") center/cover; }.promise-copy h2 { margin: 19px 0 22px; font-size: clamp(42px, 4.6vw, 62px); }.promise-copy > p { max-width: 430px; color: #69776f; font-size: 15px; }.promise-list { margin-top: 34px; border-top: 1px solid #d6d4c9; }.promise-list div { display: grid; grid-template-columns: 25px 1fr; column-gap: 9px; padding: 17px 0; border-bottom: 1px solid #d6d4c9; }.promise-list span { grid-row: span 2; color: var(--gold); }.promise-list strong { font-size: 13px; font-weight: 600; }.promise-list small { color: #89948c; font-size: 11px; }
.testimonial-section { padding-top: 108px; padding-bottom: 108px; background: #e7e1d5; }.testimonial-inner { max-width: 790px; text-align: center; }.quote-mark { height: 50px; color: var(--gold); font-family: "Playfair Display", serif; font-size: 80px; line-height: .9; }.testimonial-inner blockquote { margin: 15px 0 32px; font-family: "Playfair Display", serif; font-size: clamp(27px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -.03em; }.testimonial-meta { display: flex; justify-content: center; align-items: center; gap: 14px; text-align: left; }.testimonial-meta .line { width: 28px; height: 1px; background: var(--gold); }.testimonial-meta strong, .testimonial-meta small { display: block; }.testimonial-meta strong { font-size: 11px; }.testimonial-meta small { color: #849087; font-size: 10px; }.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 39px; }.testimonial-dots span { width: 5px; height: 5px; border-radius: 50%; background: #bdc0b5; }.testimonial-dots span.active { background: var(--gold); }
.booking { padding-top: 120px; padding-bottom: 120px; }.booking-card { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 390px; background: var(--ink); }.booking-copy { padding: 55px 11%; }.booking-copy h2 { margin: 18px 0 17px; color: var(--cream); font-size: clamp(43px, 4.8vw, 63px); }.booking-copy p { max-width: 310px; margin-bottom: 28px; color: #9eafa3; font-size: 14px; }.button-light { color: var(--ink); background: var(--cream); }.booking-details { display: flex; flex-direction: column; justify-content: center; gap: 29px; padding: 45px 11%; color: #d9e1d8; background: #294940; }.booking-details div { display: flex; align-items: flex-start; gap: 17px; }.booking-details div > span { color: var(--gold); font-size: 23px; line-height: 1; }.booking-details p { margin: 0; font-size: 13px; }.booking-details small { display: block; margin-bottom: 4px; color: #99afa1; font-size: 9px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.booking-details a { color: var(--cream); text-decoration: underline; text-decoration-color: #759083; text-underline-offset: 3px; }.payment-note { margin: 17px 0 0; color: #7a897f; font-size: 11px; text-align: right; }.payment-note strong { color: var(--ink); }
.footer { color: #a9b9ae; background: var(--deep); }.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; }.footer-top { padding-top: 38px; padding-bottom: 38px; border-bottom: 1px solid #36564d; }.footer .brand { color: var(--cream); }.footer .brand-mark { color: var(--deep); background: var(--gold); }.footer-links { display: flex; gap: 27px; font-size: 11px; }.footer-bottom { padding-top: 18px; padding-bottom: 18px; color: #789086; font-size: 10px; }
@media (max-width: 800px) { .container { width: min(100% - 40px, 600px); }.site-header { min-height: auto; }.nav { padding: 22px 0; }.menu-toggle { display: block; padding: 8px 0 8px 8px; }.menu-toggle span { display: block; width: 25px; height: 1px; margin: 5px 0; background: var(--ink); }.nav-links { position: absolute; top: 70px; right: 20px; left: 20px; z-index: 10; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px; background: var(--white); box-shadow: 0 10px 25px rgba(30,50,44,.12); }.nav-links.open { display: flex; }.nav-links a { padding: 11px 0; }.nav-cta { justify-content: center; margin-top: 6px; }.hero { display: flex; flex-direction: column; gap: 48px; padding-top: 55px; }.hero-copy { width: 100%; }.hero-visual { width: 100%; height: 370px; }.image-detail { width: 140px; height: 140px; }.circle-label { right: -12px; }.hero-bottom { flex-wrap: wrap; gap: 8px 12px; margin-top: 0; padding-bottom: 24px; }.section { padding-top: 85px; padding-bottom: 85px; }.intro-grid, .promise { grid-template-columns: 1fr; gap: 33px; padding-left: 0; }.intro-copy { max-width: 450px; }.section-heading { display: block; }.section-heading p { margin-top: 24px; }.service-grid { grid-template-columns: 1fr; margin-top: 42px; }.service-card { display: grid; grid-template-columns: 43% 57%; padding: 22px; }.service-art { height: auto; min-height: 245px; margin: -22px 23px -22px -22px; }.service-content { min-height: 245px; }.service-content > p:not(.service-tag) { min-height: 0; }.price-grid { grid-template-columns: 1fr; }.price-menu { padding: 22px 18px 10px; }.price-menu-head { align-items: flex-start; flex-direction: column; gap: 5px; }.promise-image { min-height: 370px; }.booking-card { grid-template-columns: 1fr; }.booking-copy { padding: 42px 9%; }.booking-details { padding: 35px 9%; }.payment-note { text-align: left; }.footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }.footer-links { flex-wrap: wrap; gap: 12px 20px; } }
@media (max-width: 480px) { h1 { font-size: 55px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-visual { height: 300px; }.floating-card { bottom: 25px; }.circle-label { width: 80px; height: 80px; font-size: 7px; }.service-card { display: block; }.service-art { height: 170px; min-height: 0; margin: -22px -22px 22px; }.service-content { min-height: 0; }.service-content h3 { font-size: 28px; }.promise-image { min-height: 300px; }.booking-copy h2 { font-size: 45px; } }

/* Fotografía de servicio: misma identidad del terapeuta en toda la experiencia. */
.image-main { background-image: linear-gradient(140deg, rgba(22, 53, 47, .05), rgba(22, 53, 47, .08)), url("assets/services/masaje-relajante.png"); }
.image-detail { background-image: url("assets/services/reflexologia.png"); }
.art-relax { background-image: url("assets/services/masaje-relajante.png"); }
.art-deep { background-image: url("assets/services/masaje-descontracturante.png"); }
.art-ritual { background-image: url("assets/services/masaje-deportivo.png"); }
.promise-image { background-image: url("assets/services/masaje-energetico.png"); }

.price-grid a { grid-template-columns: 42px 28px 1fr auto; }
.price-thumb { width: 42px; height: 42px; border: 1px solid rgba(219, 232, 224, .4); border-radius: 50%; background-position: center; background-size: cover; opacity: .9; }
.thumb-descarga { background-image: url("assets/services/descarga-muscular.png"); }
.thumb-reflexologia { background-image: url("assets/services/reflexologia.png"); }
.thumb-energetico { background-image: url("assets/services/masaje-energetico.png"); }
.thumb-piernas { background-image: url("assets/services/masaje-piernas.png"); }
.thumb-craneofacial { background-image: url("assets/services/masaje-craneofacial.png"); }
.thumb-4manos { background-image: url("assets/services/masaje-4-manos.png"); }
.thumb-meditacion { background-image: url("assets/services/meditacion-guiada.png"); }

@media (max-width: 800px) { .price-grid a { grid-template-columns: 42px 28px 1fr auto; } }

/* Pestañas desplegables para leer la ficha completa de cada servicio. */
.service-detail { border-bottom: 1px solid #36564d; }
.service-detail summary { display: grid; grid-template-columns: 42px 28px minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; padding: 15px 0; cursor: pointer; list-style: none; }
.service-detail summary::-webkit-details-marker { display: none; }
.service-detail summary > span:nth-child(2) { font-size: 17px; }
.service-detail summary strong, .service-detail summary small { display: block; }
.service-detail summary strong { color: var(--cream); font-size: 15px; font-weight: 600; line-height: 1.18; }
.service-detail summary small { margin-top: 3px; color: #9db0a3; font-size: 13px; line-height: 1.25; }
.service-detail summary b { color: var(--gold); font-family: "Playfair Display", serif; font-size: 21px; font-weight: 500; white-space: nowrap; }
.service-chevron { color: var(--gold); font-size: 22px; font-weight: 300; line-height: 1; transition: transform .25s ease; }
.service-detail[open] .service-chevron { transform: rotate(45deg); }
.service-detail-body { padding: 0 32px 20px 80px; animation: detailAppear .3s ease both; }
.service-detail-body p { max-width: 760px; margin: 0 0 15px; color: #bdc9bf; font-size: 14px; line-height: 1.6; }
.service-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; color: #a9b9ae; font-size: 12px; line-height: 1.45; }
.service-detail-body a { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 13px; padding: 0 0 4px !important; border-bottom: 1px solid #6f8d7f !important; color: var(--cream); font-size: 12px; font-weight: 600; }
.service-detail-body a span { color: var(--gold); font-size: 18px; }
.thumb-deportivo-pistola, .thumb-deportivo { background-image: url("assets/services/masaje-deportivo.png"); }
@keyframes detailAppear { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .service-detail summary { grid-template-columns: 42px 24px minmax(0, 1fr) auto 18px; gap: 7px; }.service-detail-body { padding-left: 0; padding-right: 0; }.service-detail summary strong { font-size: 14px; }.service-detail summary small { font-size: 12px; }.service-detail-meta { display: block; }.service-detail-meta span { display: block; margin-top: 6px; } }

/* Carrusel horizontal con estética de post social para el menú completo. */
.price-menu { overflow: hidden; padding-bottom: 18px; }
.price-menu-head { align-items: center; margin-bottom: 2px; }
.price-menu-head > div:first-child > span { display: block; margin-top: 3px; color: #a7b9ac; font-size: 13px; }
.price-menu-controls { display: flex; align-items: center; gap: 7px; }
.price-menu-controls > span { color: #a7b9ac; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.price-menu-controls > span b { color: var(--gold); font-size: 15px; }
.price-nav { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid #6f8d7f; border-radius: 50%; color: var(--cream); background: transparent; font-size: 16px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.price-nav:hover, .price-nav:focus-visible { border-color: var(--gold); color: var(--deep); background: var(--gold); outline: none; }
.price-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(290px, 32%); gap: 18px; overflow-x: auto; margin: 0 -4px; padding: 18px 4px 16px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-color: #78958a transparent; scrollbar-width: thin; }
.price-grid::-webkit-scrollbar { height: 6px; }
.price-grid::-webkit-scrollbar-track { background: rgba(219,232,224,.08); }
.price-grid::-webkit-scrollbar-thumb { border-radius: 10px; background: #78958a; }
.service-detail { position: relative; min-width: 0; overflow: hidden; border: 0; border-radius: 3px; background: #f5f0e7; color: var(--ink); box-shadow: 0 10px 24px rgba(13, 34, 30, .16); scroll-snap-align: start; }
.service-detail::before { display: block; aspect-ratio: 1 / 1; content: ""; background: linear-gradient(145deg, #6d867b, #2b4c43); background-position: center; background-size: cover; }
.service-detail:has(.thumb-descarga)::before { background-image: url("assets/services/descarga-muscular.png"); }
.service-detail:has(.thumb-reflexologia)::before { background-image: url("assets/services/reflexologia.png"); }
.service-detail:has(.thumb-energetico)::before { background-image: url("assets/services/masaje-energetico.png"); }
.service-detail:has(.thumb-piernas)::before { background-image: url("assets/services/masaje-piernas.png"); }
.service-detail:has(.thumb-craneofacial)::before { background-image: url("assets/services/masaje-craneofacial.png"); }
.service-detail:has(.thumb-4manos)::before { background-image: url("assets/services/masaje-4-manos.png"); }
.service-detail:has(.thumb-meditacion)::before { background-image: url("assets/services/meditacion-guiada.png"); }
.service-detail:has(.thumb-deportivo-pistola)::before { background-image: url("assets/services/masaje-deportivo-pistola.png"); }
.service-detail:has(.thumb-deportivo)::before { background-image: url("assets/services/masaje-deportivo.png"); }
.service-detail summary { grid-template-columns: 42px 22px minmax(0, 1fr) auto 18px; gap: 8px; padding: 14px 14px 12px; color: var(--ink); background: #f5f0e7; }
.service-detail summary strong { color: var(--ink); font-size: 14px; }
.service-detail summary small { color: #75837a; font-size: 11px; }
.service-detail summary b { color: #997442; font-size: 19px; }
.service-detail summary > span:nth-child(2) { font-size: 16px; }
.service-detail .price-thumb { width: 42px; height: 42px; border-color: rgba(32,58,55,.2); }
.service-chevron { color: #997442; }
.service-detail-body { padding: 0 16px 18px; border-top: 1px solid rgba(32,58,55,.12); background: #f5f0e7; }
.service-detail-body p { margin: 14px 0 15px; color: #596861; font-size: 13px; line-height: 1.55; }
.service-detail-meta { display: block; margin-bottom: 16px; color: #6d7c73; font-size: 11px; }
.service-detail-meta span { display: block; margin-top: 5px; }
.service-detail-body a { color: var(--ink); border-bottom-color: #aa8c56 !important; }
@media (max-width: 800px) { .price-menu-head { align-items: flex-start; flex-direction: row; gap: 16px; }.price-menu-controls > span { display: none; }.price-grid { grid-auto-columns: minmax(285px, 78vw); } }
@media (max-width: 520px) { .price-menu-head { display: block; }.price-menu-controls { justify-content: flex-end; margin-top: 12px; }.price-grid { grid-auto-columns: minmax(270px, 86vw); } }

/* Legibilidad y fondo beige — ajuste de accesibilidad de la marca */
:root { --cream: #eee2d0; --white: #eee2d0; --gold: #a98448; }
body { background: var(--cream); font-size: 18px; line-height: 1.55; }
.nav-links { font-size: 15px; }
.brand { font-size: 20px; }
.eyebrow, .section-kicker, .service-tag { font-size: 12px; }
.hero-text { max-width: 440px; font-size: 18px; }
.button { font-size: 14px; }
.text-link, .arrow-link { font-size: 14px; }
.hero-note { font-size: 14px; }
.hero-bottom { font-size: 11px; }
.intro-copy, .promise-copy > p { font-size: 18px; }
.section-heading p { max-width: 330px; font-size: 16px; }
.service-content > p:not(.service-tag) { font-size: 15px; }
.service-content a { font-size: 14px; }
.price-menu-head h3 { font-size: 28px; }
.price-menu-head span { font-size: 14px; }
.price-grid strong { font-size: 15px; }
.price-grid small { font-size: 13px; }
.price-grid b { font-size: 21px; }
.promise-list strong { font-size: 15px; }
.promise-list small { font-size: 13px; }
.testimonial-section { background: #e5d8c5; }
.testimonial-inner blockquote { font-size: clamp(30px, 3.7vw, 46px); }
.testimonial-meta strong { font-size: 13px; }
.testimonial-meta small { font-size: 12px; }
.booking-copy p { max-width: 350px; font-size: 17px; }
.booking-details p { font-size: 16px; }
.booking-details small { font-size: 11px; }
.payment-note { font-size: 13px; }
.footer-links { font-size: 14px; }
.footer-bottom { font-size: 12px; }

/* Formulario de perfil para reservas por WhatsApp. */
.booking-dialog { width: min(900px, calc(100% - 28px)); max-height: min(900px, calc(100vh - 10px)); overflow: auto; padding: 0; border: 0; border-radius: 2px; color: var(--ink); background: var(--cream); box-shadow: 0 24px 80px rgba(15, 38, 32, .34); }
.booking-dialog::backdrop { background: rgba(17, 39, 34, .7); backdrop-filter: blur(4px); }
.booking-dialog-shell { position: relative; padding: 20px 38px 20px; }
.booking-dialog .section-kicker { font-size: 11px; }
.dialog-close { position: absolute; top: 12px; right: 15px; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(32, 59, 54, .24); border-radius: 50%; color: var(--ink); background: transparent; font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; }
.dialog-close:hover, .dialog-close:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.booking-dialog h2 { margin: 8px 0 6px; font-size: clamp(28px, 3.3vw, 38px); line-height: .96; letter-spacing: -.04em; }
.dialog-intro { max-width: none; margin: 0 0 12px; color: #68766e; font-size: 12px; line-height: 1.3; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 12px; }
.booking-dialog label { display: flex; flex-direction: column; gap: 4px; color: #52635a; font-size: 9px; font-weight: 700; letter-spacing: .035em; }
.booking-dialog input, .booking-dialog select, .booking-dialog textarea { width: 100%; border: 1px solid #c9cabb; border-radius: 0; color: var(--ink); background: rgba(255, 255, 255, .43); font: inherit; font-size: 11px; font-weight: 400; letter-spacing: 0; outline: none; }
.booking-dialog input, .booking-dialog select { min-height: 34px; padding: 5px 9px; }
.booking-dialog textarea { height: 44px; min-height: 44px; padding: 6px 9px; resize: vertical; }
.booking-dialog input::placeholder, .booking-dialog textarea::placeholder { color: #929b94; }
.booking-dialog input:focus, .booking-dialog select:focus, .booking-dialog textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185, 151, 91, .14); }
.form-full { grid-column: 1 / -1; }
.form-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; margin-top: 8px; color: #66746c !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.3; }
.form-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: var(--gold); }
.form-note { margin: 5px 0 8px; color: #87918a; font-size: 9px; line-height: 1.3; }
.form-submit { padding: 10px 16px; border: 0; font-size: 12px; cursor: pointer; }
.form-submit:hover, .form-submit:focus-visible { background: var(--gold); outline: none; }
@media (max-width: 620px) { .booking-dialog-shell { padding: 21px 18px 18px; }.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 8px; }.form-full { grid-column: 1 / -1; }.booking-dialog h2 { font-size: 34px; }.dialog-intro { font-size: 11px; }.booking-dialog { width: min(100% - 18px, 760px); max-height: calc(100vh - 8px); }.booking-dialog input, .booking-dialog select, .booking-dialog textarea { font-size: 11px; }.booking-dialog input, .booking-dialog select { padding-left: 8px; padding-right: 8px; } }

/* Acceso persistente a la ficha de reserva. */
.floating-booking { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #fff; background: #287657; box-shadow: 0 12px 30px rgba(20, 65, 49, .28); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.floating-booking::after { position: absolute; top: 3px; left: 4px; width: 6px; height: 6px; border: 2px solid #287657; border-radius: 50%; background: #e1efbd; content: ""; }
.floating-booking:hover, .floating-booking:focus-visible { background: #1f6248; box-shadow: 0 15px 34px rgba(20, 65, 49, .36); transform: translateY(-3px); outline: none; }
.floating-wa-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #e1efbd; font-size: 15px; line-height: 1; }
@media (max-width: 520px) { .floating-booking { right: 15px; bottom: 15px; padding: 11px 14px 11px 11px; font-size: 12px; } }

@media (max-width: 800px) {
  .price-menu-head h3 { font-size: 25px; }
  .price-menu-head span { font-size: 13px; }
}

/* Previews sociales en el inicio */
.social-preview { display: grid; grid-template-columns: 1fr 1.35fr 1.35fr; gap: 15px; align-items: stretch; margin-top: 43px; padding-bottom: 38px; }
.social-intro { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding-right: 24px; }
.social-intro .section-kicker { font-size: 11px; }
.social-intro strong { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 500; line-height: 1.07; letter-spacing: -.035em; }
.social-card { position: relative; display: grid; grid-template-columns: 105px 1fr; min-height: 105px; overflow: hidden; border: 1px solid rgba(32,59,54,.14); background: #f7f0e4; transition: transform .25s ease, box-shadow .25s ease; }
.social-card:hover { transform: translateY(-4px); box-shadow: 0 14px 25px rgba(32,59,54,.12); }
.social-card-art { position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px; overflow: hidden; color: var(--cream); }
.social-card-art::before, .social-card-art::after { position: absolute; content: ""; border: 1px solid rgba(238,226,208,.55); border-radius: 50%; }
.social-card-art::before { width: 95px; height: 95px; top: -36px; right: -31px; }
.social-card-art::after { width: 64px; height: 64px; bottom: -34px; left: -21px; }
.social-facebook .social-card-art { background: linear-gradient(145deg, #294d45, #17352f); }
.social-instagram .social-card-art { background: linear-gradient(145deg, #8c6658, #4a6156 72%); }
.social-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(238,226,208,.55); border-radius: 50%; color: var(--cream); font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; }
.social-art-label { position: relative; z-index: 1; color: #dcccae; font-size: 7px; font-weight: 700; letter-spacing: .13em; line-height: 1.35; text-align: right; }
.social-art-label em { color: var(--cream); font-family: "Playfair Display", serif; font-size: 9px; font-style: italic; font-weight: 500; letter-spacing: .02em; }
.social-card-copy { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 13px 28px 13px 15px; }
.social-card-copy span { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.social-card-copy strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.social-card-copy small { color: #78857c; font-size: 11px; line-height: 1.3; }
.social-arrow { position: absolute; top: 13px; right: 14px; color: var(--gold); font-size: 18px; }

@media (max-width: 900px) {
  .social-preview { grid-template-columns: 1fr 1fr; }
  .social-intro { grid-column: 1 / -1; min-height: 73px; padding-right: 0; }
}
@media (max-width: 560px) {
  .social-preview { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .social-intro { min-height: 0; padding-bottom: 8px; }
  .social-card { min-height: 115px; }
  .social-card-art { min-width: 112px; }
  .social-card-copy strong { font-size: 15px; }
  .social-card-copy small { font-size: 12px; }
}

/* Aparición progresiva al desplazarse hacia abajo o volver hacia arriba */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .24, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.service-card:nth-child(2), .price-grid a:nth-child(2), .promise-list div:nth-child(2) { transition-delay: .08s; }
.service-card:nth-child(3), .price-grid a:nth-child(3), .promise-list div:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .text-reveal { opacity: 1; transform: none; transition: none; animation: none !important; }
}

/* Laptop editorial para presentar las redes sociales */
.social-preview { grid-template-columns: .75fr 2.25fr; gap: 42px; align-items: center; }
.social-laptop { width: 100%; max-width: 800px; margin-left: auto; perspective: 1000px; }
.laptop-lid { position: relative; padding: 12px 12px 11px; border-radius: 16px 16px 7px 7px; background: linear-gradient(145deg, #d8d7d2 0%, #aaa9a4 49%, #e2e0da 100%); box-shadow: 0 17px 25px rgba(36, 52, 47, .2), inset 0 1px 0 rgba(255,255,255,.85); }
.laptop-camera { position: absolute; top: 5px; left: 50%; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #4a4b48; box-shadow: 0 0 0 1px #8b8a85; transform: translateX(-50%); }
.laptop-screen { overflow: hidden; min-height: 272px; border: 2px solid #202b28; border-radius: 6px; background: var(--cream); box-shadow: inset 0 0 0 1px #53625d; }
.screen-toolbar { display: flex; align-items: center; gap: 5px; height: 25px; padding: 0 10px; background: #28322f; }
.toolbar-dot { width: 6px; height: 6px; border-radius: 50%; }.dot-red { background: #d58570; }.dot-yellow { background: #ceb277; }.dot-green { background: #87a58a; }
.toolbar-address { width: 47%; margin-left: 8px; padding: 3px 10px; border-radius: 20px; color: #a7b5ac; background: #3b4944; font-size: 7px; letter-spacing: .05em; }
.screen-preview { display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; align-items: center; min-height: 245px; padding: 25px 30px; background: linear-gradient(135deg, #f3e9d9 0%, #e9dbc4 100%); }
.screen-preview-copy { max-width: 220px; }.screen-eyebrow { display: block; margin-bottom: 12px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.screen-preview-copy strong { display: block; color: var(--ink); font-family: "Playfair Display", serif; font-size: 29px; font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }.screen-preview-copy em { color: var(--gold); font-style: italic; }.screen-preview-copy small { display: block; margin-top: 13px; color: #758077; font-size: 10px; line-height: 1.4; }
.screen-socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.screen-socials .social-card { grid-template-columns: 75px 1fr; min-height: 137px; border-color: rgba(32,59,54,.17); background: rgba(255,253,249,.75); }.screen-socials .social-card-art { padding: 9px; }.screen-socials .social-icon { width: 23px; height: 23px; font-size: 16px; }.screen-socials .social-art-label { font-size: 5px; }.screen-socials .social-art-label em { font-size: 7px; }.screen-socials .social-card-copy { gap: 2px; padding: 9px 17px 9px 10px; }.screen-socials .social-card-copy span { font-size: 7px; }.screen-socials .social-card-copy strong { font-size: 10px; line-height: 1.2; }.screen-socials .social-card-copy small { font-size: 8px; line-height: 1.25; }.screen-socials .social-arrow { top: 8px; right: 8px; font-size: 14px; }
.screen-socials .social-card-copy { min-width: 0; }.screen-socials .social-card-copy strong, .screen-socials .social-card-copy small { overflow-wrap: anywhere; }
.laptop-hinge { position: relative; z-index: 1; width: 82%; height: 5px; margin: -1px auto 0; border-radius: 0 0 8px 8px; background: #92928d; }.laptop-base { position: relative; width: 112%; height: 13px; margin-left: -6%; border-radius: 2px 2px 15px 15px; background: linear-gradient(180deg, #c7c6c1, #9e9d98); box-shadow: 0 9px 12px rgba(32,59,54,.16); }.laptop-notch { position: absolute; left: 50%; top: 0; width: 115px; height: 4px; border-radius: 0 0 8px 8px; background: #8d8d88; transform: translateX(-50%); }.laptop-caption { margin: 17px 0 0; color: #8a9287; font-size: 11px; letter-spacing: .11em; text-align: center; text-transform: uppercase; }.laptop-caption span { margin: 0 5px; color: var(--gold); }
@media (max-width: 900px) { .social-preview { grid-template-columns: 1fr; gap: 25px; }.social-intro { grid-column: auto; min-height: 0; }.social-laptop { max-width: 760px; } }
@media (max-width: 560px) { .laptop-screen { min-height: 0; }.screen-preview { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 25px 20px 23px; }.screen-preview-copy { max-width: none; }.screen-preview-copy strong { font-size: 32px; }.screen-socials { grid-template-columns: 1fr; }.screen-socials .social-card { min-height: 122px; }.laptop-base { width: 108%; margin-left: -4%; }.laptop-caption { font-size: 9px; } }
@media (max-width: 700px) { .screen-socials { grid-template-columns: 1fr; } }

/* Dos laptops pequeñas: una para Facebook y otra para Instagram */
.social-laptops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.mini-laptop { min-width: 0; text-align: center; }
.mini-lid { position: relative; padding: 8px 8px 7px; border-radius: 10px 10px 4px 4px; background: linear-gradient(145deg, #dad9d4 0%, #aaa9a4 49%, #e1dfda 100%); box-shadow: 0 12px 19px rgba(36, 52, 47, .2), inset 0 1px 0 rgba(255,255,255,.85); }
.mini-camera { position: absolute; top: 3px; left: 50%; z-index: 2; width: 3px; height: 3px; border-radius: 50%; background: #474946; box-shadow: 0 0 0 1px #8c8b87; transform: translateX(-50%); }
.mini-screen { position: relative; display: block; overflow: hidden; aspect-ratio: 1.2 / 1; border: 2px solid #202b28; border-radius: 3px; color: var(--ink); text-align: left; box-shadow: inset 0 0 0 1px #53625d; transition: transform .2s ease; }
.mini-screen:hover { transform: scale(1.015); }
.mini-toolbar { display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; color: white; font-size: 7px; }
.mini-facebook .mini-toolbar { background: #1877f2; }.mini-instagram .mini-toolbar { background: linear-gradient(90deg, #833ab4, #fd1d1d 55%, #fcb045); }
.mini-toolbar .toolbar-dot { width: 4px; height: 4px; }.mini-favicon { display: grid; place-items: center; width: 10px; height: 10px; margin-left: 4px; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; line-height: 1; }.mini-address { overflow: hidden; margin-left: 3px; color: rgba(255,255,255,.9); font-size: 6px; letter-spacing: .04em; white-space: nowrap; }
.mini-content { position: relative; display: flex; min-height: calc(100% - 18px); flex-direction: column; justify-content: center; overflow: hidden; padding: 12px 13px; background: #f6f2e9; }.mini-content::after { position: absolute; right: -28px; top: -27px; width: 75px; height: 75px; content: ""; border: 1px solid rgba(32,59,54,.12); border-radius: 50%; box-shadow: 0 0 0 12px rgba(32,59,54,.04); }.mini-network, .mini-content strong, .mini-content small, .mini-link { position: relative; z-index: 1; }.mini-network { margin-bottom: 6px; font-size: 7px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.mini-facebook .mini-network, .mini-facebook .mini-link { color: #1877f2; }.mini-instagram .mini-network, .mini-instagram .mini-link { color: #c13584; }.mini-content strong { display: block; max-width: 135px; color: var(--ink); font-family: "Playfair Display", serif; font-size: clamp(18px, 2.1vw, 27px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }.mini-content small { display: block; max-width: 150px; margin-top: 8px; color: #78857c; font-size: 8px; line-height: 1.35; }.mini-link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 8px; font-weight: 700; }
.mini-hinge { position: relative; z-index: 1; width: 78%; height: 3px; margin: -1px auto 0; border-radius: 0 0 5px 5px; background: #92928d; }.mini-base { position: relative; width: 112%; height: 8px; margin-left: -6%; border-radius: 2px 2px 10px 10px; background: linear-gradient(180deg, #c7c6c1, #9e9d98); box-shadow: 0 6px 9px rgba(32,59,54,.16); }.mini-notch { position: absolute; left: 50%; top: 0; width: 55px; height: 3px; border-radius: 0 0 5px 5px; background: #8d8d88; transform: translateX(-50%); }.mini-caption { margin: 11px 0 0; color: #8a9287; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.mini-caption span { margin: 0 3px; color: var(--gold); }
@media (max-width: 700px) { .social-laptops { gap: 12px; }.mini-content { padding: 10px; }.mini-content strong { font-size: 21px; }.mini-content small { font-size: 8px; } }
@media (max-width: 430px) { .social-laptops { grid-template-columns: 1fr; gap: 24px; }.mini-laptop { max-width: 300px; margin: 0 auto; width: 100%; } }

/* Colores sociales suavizados para integrarlos con la paleta del sitio */
.social-laptops { filter: saturate(.64); }
.mini-facebook .mini-screen { border-color: #7898b8; }.mini-facebook .mini-toolbar { background: #7898b8; }.mini-facebook .mini-network, .mini-facebook .mini-link { color: #6f8faa; }
.mini-instagram .mini-screen { border-image: linear-gradient(90deg, #9882a9, #c78a92, #c7aa79) 1; }.mini-instagram .mini-toolbar { background: linear-gradient(90deg, #9882a9, #c78a92 55%, #c7aa79); }.mini-instagram .mini-network, .mini-instagram .mini-link { color: #ae718d; }

/* Híbrido inspirado en la identidad visual de las redes sociales */
:root { --ink: #203a37; --deep: #18322f; --cream: #eee7d9; --white: #eee7d9; --gold: #aa8c56; --social-aqua: #9fc5bd; --social-mist: #dbe8e0; --social-leaf: #6c9f94; }
body { background: var(--cream); }
.brand-mark { position: relative; color: transparent; background: var(--social-mist) url("assets/logo.svg") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(108,159,148,.22); }
.footer .brand-mark { color: transparent; background: var(--social-mist) url("assets/logo.svg") center / cover no-repeat; }
.social-preview { position: relative; }
.social-preview::before, .social-preview::after { position: absolute; z-index: -1; content: ""; border: 1px solid var(--social-aqua); border-radius: 70% 30% 70% 30%; opacity: .44; pointer-events: none; }
.social-preview::before { top: -22px; left: -70px; width: 72px; height: 150px; transform: rotate(-28deg); }
.social-preview::after { right: -65px; bottom: 28px; width: 55px; height: 112px; transform: rotate(31deg); }
.social-intro strong { color: var(--ink); }
.mini-facebook .mini-screen { border-color: #1877f2; }.mini-instagram .mini-screen { border-image: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045) 1; }
.mini-facebook .mini-content { background: linear-gradient(145deg, #f5f7f2, #e5f0ef); }.mini-instagram .mini-content { background: linear-gradient(145deg, #f8f0ef, #f0e6ec); }
.mini-facebook .mini-content::after { border-color: rgba(24,119,242,.15); box-shadow: 0 0 0 12px rgba(24,119,242,.04); }.mini-instagram .mini-content::after { border-color: rgba(193,53,132,.15); box-shadow: 0 0 0 12px rgba(193,53,132,.04); }
.promise-image { position: relative; }.promise-image::after { position: absolute; right: 22px; bottom: 24px; width: 72px; height: 72px; content: "✦"; display: grid; place-items: center; border: 1px solid rgba(219,232,224,.7); border-radius: 50%; color: var(--social-mist); font-size: 22px; opacity: .82; }
.experience-section { background: linear-gradient(135deg, #18322f, #1e3a35); }.service-card { background: #254941; }.service-card.featured { background: #315950; }.price-menu { background: #1b3c36; border-color: #54746c; }

/* Animación sencilla para los textos al entrar y volver a entrar en pantalla */
@keyframes textAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reveal.is-visible .text-reveal { animation: textAppear .55s ease both; }
.reveal.is-visible .text-reveal:nth-child(2) { animation-delay: .06s; }
.reveal.is-visible .text-reveal:nth-child(3) { animation-delay: .12s; }
.reveal.is-visible .text-reveal:nth-child(4) { animation-delay: .18s; }