/* ===== core.css — bundled tokens.css + base.css + components.css + home.css =====
 * Merged into one file to cut render-blocking requests (loaded on every page,
 * always in this order). Keep editing the source files; regenerate by
 * concatenating them in this exact order if they change.
 * ===== */

/* ---- tokens.css ---- */
/* Design tokens — Dra. Ximena García Design System */

@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-Light.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-Regular.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-Medium.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-DemiBold.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-DemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-Bold.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../assets/fonts/ArticulatCF-ExtraBold.woff2') format('woff2'),url('../assets/fonts/ArticulatCF-ExtraBold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Miller Display';src:url('../assets/fonts/miller-displayitalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* Color */
  --black:#21211F;
  --ebony:#6B6D64;
  --beige:#A5927D;
  --smudge-green:#B9B7AC;
  --sage:#D5C4B4;
  --nude:#EEEAE3;
  --white:#FFFFFF;
  --text-primary:var(--black);
  --text-secondary:var(--ebony);
  --text-on-dark:var(--nude);
  --text-accent:var(--beige);
  --surface-page:var(--white);
  --surface-muted:var(--nude);
  --surface-dark:var(--black);
  --surface-card:var(--white);
  --border-subtle:var(--smudge-green);
  --border-strong:var(--ebony);
  --accent:var(--beige);
  --cta-bg:var(--beige);
  --cta-text:var(--white);
  --price-strike:var(--smudge-green);

  /* Type */
  --font-sans:'Articulat CF',Helvetica,Arial,sans-serif;
  --font-display:'Miller Display',Georgia,serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-demibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  --text-eyebrow:600 13px/1.3 var(--font-sans);
  --tracking-eyebrow:0.08em;
  --text-display-xl:800 76px/0.98 var(--font-sans);
  --text-display-lg:800 52px/1.02 var(--font-sans);
  --text-h1:700 40px/1.08 var(--font-sans);
  --text-h2:700 30px/1.15 var(--font-sans);
  --text-h3:600 22px/1.25 var(--font-sans);
  --text-h4:600 17px/1.3 var(--font-sans);
  --text-price:800 56px/1 var(--font-sans);
  --text-price-strike:500 22px/1 var(--font-sans);
  --text-body-lg:400 19px/1.5 var(--font-sans);
  --text-body:400 16px/1.55 var(--font-sans);
  --text-small:400 13px/1.5 var(--font-sans);
  --text-caption:500 12px/1.4 var(--font-sans);
  --text-accent-italic:400 italic 30px/1.2 var(--font-display);

  /* Spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-pill:999px;
  --container-max:1120px;

  /* Effects */
  --shadow-card:0 12px 32px -12px rgba(33,33,31,0.18);
  --shadow-soft:0 4px 16px rgba(33,33,31,0.08);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;
  --duration-standard:240ms;
}

.motif-tile-bg{
  background-color:var(--nude);
  background-image:url('../assets/icon-1.png');
  background-size:220px 220px;
  background-repeat:repeat;
  background-blend-mode:multiply;
  position:relative;
}
.motif-tile-bg::before{
  content:'';
  position:absolute;inset:0;
  background:var(--nude);
  opacity:.86;
}

/* ---- base.css ---- */
/* Base reset */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* El header es fixed y se superpone al contenido — sin esto, saltar a un
   ancla (#tratamientos, etc.) deja el destino tapado bajo la barra. */
html{scroll-padding-top:110px}
body{
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
button{font-family:var(--font-sans)}

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}

@media (max-width:960px){
  .container{padding-left:20px;padding-right:20px}
}

/* ---- components.css ---- */
/* ============ Buttons ============ */
.btn{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:16px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--radius-pill);
  padding:14px 28px;
  text-decoration:none;
  transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.btn--primary{background:var(--cta-bg);color:var(--cta-text)}
.btn--secondary{background:transparent;color:var(--black);border:1.5px solid var(--border-strong)}
.btn--ghost{background:transparent;color:var(--ebony)}
.btn--whatsapp{background:var(--beige);color:var(--white)}
.btn--small{padding:9px 18px;font-size:14px}

.btn__icon{width:18px;height:18px}

/* ============ Badge ============ */
.badge{font-family:var(--font-sans);display:inline-block}
.badge--eyebrow{background:transparent;color:var(--ebony);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.badge--tag{background:var(--nude);color:var(--beige);font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase;padding:10px 18px;border-radius:var(--radius-sm)}
.badge--discount{background:var(--black);color:var(--nude);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-pill)}

/* ============ Price tag ============ */
.price-tag{font-family:var(--font-sans);display:flex;flex-direction:column;gap:4px}
.price-tag__label{font:600 13px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ebony)}
.price-tag__row{display:flex;align-items:baseline;gap:12px;color:var(--black)}
.price-tag__price{font:800 32px var(--font-sans)}
.price-tag__price--large{font:800 56px var(--font-sans)}
.price-tag__original{font:500 18px var(--font-sans);text-decoration:line-through;color:var(--price-strike)}

/* ============ Section header ============ */
.section-header{font-family:var(--font-sans);display:flex;flex-direction:column;gap:10px}
.section-header--left{text-align:left;align-items:flex-start}
.section-header--center{text-align:center;align-items:center}
.section-header--right{text-align:right;align-items:flex-end}
.section-header__eyebrow{font:600 13px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ebony)}
.section-header__title{margin:0;font:700 34px var(--font-sans);text-transform:uppercase;color:var(--black)}
.section-header__subtitle{margin:0;font:400 17px var(--font-sans);color:var(--ebony);max-width:46ch}
.section-header--dark .section-header__title{color:var(--nude)}
.section-header--dark .section-header__eyebrow,
.section-header--dark .section-header__subtitle{color:var(--sage)}

/* ============ Category card ============ */
.category-card{
  font-family:var(--font-sans);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-soft);
  transition:box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.category-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.category-card__image{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--nude)}
.category-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-standard)}
.category-card:hover .category-card__image img{transform:scale(1.06)}
.category-card__body{padding:0 20px 20px;display:flex;flex-direction:column;gap:8px}
.category-card__title{margin:0;font:700 19px var(--font-sans);color:var(--black)}
.category-card__desc{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--ebony)}
.category-card__link{font:600 13px var(--font-sans);color:var(--beige);margin-top:4px}

/* ============ Treatment card ============ */
.treatment-card{
  font-family:var(--font-sans);
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  width:280px;
  transition:box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.treatment-card:hover{box-shadow:0 20px 40px -14px rgba(33,33,31,0.24);transform:translateY(-4px)}
.treatment-card__title{margin:0;font:700 20px var(--font-sans);color:var(--black)}
.treatment-card__desc{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--ebony)}
.treatment-card .price-tag{margin-top:auto}

/* ============ Google reviews ============ */
.reviews-summary{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.reviews-summary__stars{font-size:22px;letter-spacing:3px;color:var(--beige)}
.reviews-summary__score{font:800 40px var(--font-sans);color:var(--black)}
.reviews-summary__score-of5{font:500 18px var(--font-sans);color:var(--ebony)}
.reviews-summary__count{font:400 15px var(--font-sans);color:var(--ebony)}
.reviews-summary__count strong{color:var(--black);font-weight:700}
.reviews-summary__link{font:600 13px var(--font-sans);color:var(--beige);text-decoration:none;margin-top:4px}
.reviews-summary__link:hover{color:var(--black)}

.reviews-carousel{display:flex;align-items:center;gap:16px}
.reviews-carousel__track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:4px 2px 12px;
  flex:1;
}
.reviews-carousel__track::-webkit-scrollbar{display:none}
.reviews-carousel__arrow{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--border-strong);
  background:var(--white);
  color:var(--black);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity var(--duration-fast) var(--ease-standard);
}
.reviews-carousel__arrow:hover{opacity:.7}

.review-card{
  flex:0 0 340px;
  scroll-snap-align:start;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.review-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.review-card__stars{color:var(--beige);font-size:16px;letter-spacing:2px}
.review-card__text{margin:0;font:400 15px/1.6 var(--font-sans);color:var(--ebony);flex:1}
.review-card__author{display:flex;align-items:center;gap:12px}
.review-card__avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--beige);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 14px var(--font-sans);
  flex-shrink:0;
}
.review-card__name{font:600 14px var(--font-sans);color:var(--black)}
.review-card__date{font:400 12px var(--font-sans);color:var(--ebony)}

/* ============ Avatar photo ============ */
.avatar-photo{
  border-radius:50%;
  overflow:hidden;
  background:var(--nude);
  border:4px solid var(--nude);
  box-shadow:var(--shadow-soft);
  flex-shrink:0;
}
.avatar-photo img{width:100%;height:100%;object-fit:cover}

/* ============ Site header ============ */
.site-header{
  font-family:var(--font-sans);
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  background:var(--white);
  border-bottom:1px solid var(--smudge-green);
  transition:background var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
}
/* Transparent-over-hero variant — opt-in only on pages with a photo hero
   right below the header (currently: home, sobre-mi). Every other page
   keeps the plain solid header above, with no JS dependency and no
   flash-of-transparent-header on load. */
.site-header--overlay:not(.is-scrolled){
  background:rgba(33,33,31,0.35);
  border-bottom-color:transparent;
}
.site-header__inner{
  max-width:1300px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  gap:24px;
  transition:padding var(--duration-standard) var(--ease-standard);
}
.site-header__logo{height:100px;transition:height var(--duration-standard) var(--ease-standard)}
.site-header__nav{display:flex;align-items:center;gap:32px}
.nav-link{
  font:600 14px var(--font-sans);
  letter-spacing:.02em;
  color:var(--black);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  transition:color var(--duration-standard) var(--ease-standard);
}
@media (min-width:961px){
  .site-header--overlay:not(.is-scrolled) .nav-link{color:var(--white)}
}
.nav-dropdown__caret{font-size:10px;transition:transform var(--duration-fast) var(--ease-standard)}
.nav-dropdown.is-open .nav-dropdown__caret{transform:rotate(180deg)}
.nav-dropdown__panel{
  /* Positioned relative to .site-header (position:fixed, so it's a containing
     block) rather than the trigger link — centers on the header/viewport
     instead of on wherever "Tratamientos" happens to sit, so it can never
     hang off the edge of a narrower desktop window. */
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:12px;
  background:var(--white);
  box-shadow:var(--shadow-card);
  border-radius:var(--radius-md);
  padding:32px;
  display:none;
  gap:32px;
  z-index:20;
  width:800px;
  max-width:calc(100vw - 48px);
}
.nav-dropdown.is-open .nav-dropdown__panel{display:flex}
.nav-dropdown__col{display:flex;flex-direction:column;gap:10px;min-width:150px}
.nav-dropdown__title{font:700 13px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--beige);text-decoration:none}
.nav-dropdown__link{font:400 14px var(--font-sans);color:var(--ebony);text-decoration:none}
.nav-dropdown__link:hover{color:var(--black)}
.nav-dropdown__note{font:400 13px var(--font-sans);color:var(--ebony)}
.site-header__actions{display:flex;align-items:center;gap:16px}
.site-header__phone{font:600 14px var(--font-sans);color:var(--ebony);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color var(--duration-standard) var(--ease-standard)}
.inline-icon{width:15px;height:15px;flex-shrink:0;transition:filter var(--duration-standard) var(--ease-standard)}
.site-header__burger{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.site-header__burger span{display:block;width:24px;height:2px;background:var(--black);transition:background var(--duration-standard) var(--ease-standard)}
.site-header--overlay:not(.is-scrolled) .site-header__phone{color:var(--white)}
.site-header--overlay:not(.is-scrolled) .site-header__phone .inline-icon{filter:brightness(0) invert(1)}
.site-header--overlay:not(.is-scrolled) .site-header__burger span{background:var(--white)}

/* ============ Site footer ============ */
.site-footer{font-family:var(--font-sans);background:var(--black);color:var(--nude);padding:64px 32px 32px}
.site-footer__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px}
.site-footer__brand{display:flex;flex-direction:column;gap:16px}
.site-footer__logo{height:72px;align-self:flex-start}
body.home .site-footer__logo{height:110px}
.site-footer__tagline{margin:0;font:400 14px/1.6 var(--font-sans);color:var(--sage);max-width:32ch}
.site-footer__col{display:flex;flex-direction:column;gap:10px}
.site-footer__heading{font:700 13px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--beige);margin-bottom:4px}
.site-footer__link{font:400 14px var(--font-sans);color:var(--sage);text-decoration:none}
.site-footer__link:hover{color:var(--nude)}
.site-footer__link--icon{display:inline-flex;align-items:center;gap:6px}
.site-footer__social{display:flex;gap:14px;margin-top:4px}
.site-footer__social img{width:18px;height:18px}
.site-footer__social a{opacity:.85;transition:opacity var(--duration-fast) var(--ease-standard)}
.site-footer__social a:hover{opacity:1}
.site-footer__bottom{
  max-width:var(--container-max);
  margin:48px auto 0;
  padding-top:24px;
  border-top:1px solid var(--ebony);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.site-footer__copy{font:400 12px var(--font-sans);color:var(--ebony)}
.site-footer__legal{display:flex;gap:20px}
.site-footer__legal a{font:400 12px var(--font-sans);color:var(--sage);text-decoration:none}
.site-footer__legal a:hover{color:var(--nude)}

/* ============ Cookie banner ============ */
.cookie-banner{
  font-family:var(--font-sans);
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  max-width:640px;
  margin:0 auto;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:50;
}
.cookie-banner[hidden]{display:none}
.cookie-banner__text{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--black)}
.cookie-banner__text a{color:var(--beige)}
.cookie-banner__actions{display:flex;gap:12px;justify-content:flex-end}
.cookie-banner__btn{font:600 14px var(--font-sans);padding:10px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);background:transparent;color:var(--black);cursor:pointer}
.cookie-banner__btn--accept{font-weight:700;border:none;background:var(--beige);color:var(--white)}

/* ============ Responsive ============ */
/* El header ahora usa un contenedor de 1300px (antes 1120px en páginas que
   no eran home) para que quepan los 7 nav-links + teléfono + botón sin que
   el texto se parta en dos líneas; el punto de quiebre del menú hamburguesa
   se sube a juego, igual en todas las páginas. */
@media (max-width:1300px){
  .site-header__nav{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--white);
    border-bottom:1px solid var(--smudge-green);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 32px 24px;
    box-shadow:var(--shadow-soft);
  }
  .site-header__nav.is-open{display:flex}
  .site-header__nav .nav-link{padding:14px 0;width:100%}
  .nav-dropdown{width:100%}
  .nav-dropdown__panel{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    padding:0 0 12px;
    margin-top:0;
    flex-direction:column;
    gap:20px;
  }
  .site-header__inner{padding:12px 20px}
  .site-header__logo{height:71px}
  .site-header__phone{display:none}
  .site-header__burger{display:flex;margin-left:auto}
  .site-header__actions{gap:12px}
  .site-header__actions .btn{padding:10px 16px;font-size:14px;white-space:nowrap}
}
@media (max-width:960px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .reviews-carousel__arrow{display:none}
  .review-card{flex-basis:280px}
}
@media (max-width:640px){
  .site-footer__grid{grid-template-columns:1fr}
  .review-card{flex-basis:82vw}
}

/* Booking modal */
.booking-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.booking-modal.is-open{display:flex}
.booking-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(33,33,31,0.55);
}
.booking-modal__dialog{
  position:relative;
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--surface-page);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.booking-modal__close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:1;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--surface-page);
  box-shadow:var(--shadow-soft);
  font-size:22px;
  line-height:1;
  color:var(--text-primary);
  cursor:pointer;
}
.booking-modal__iframe{
  display:block;
  width:100%;
  border:0;
}
@media (max-width:640px){
  .booking-modal{padding:0}
  .booking-modal__dialog{max-width:100%;max-height:100%;height:100%;border-radius:0}
}

/* ---- home.css ---- */
/* ============ Hero ============ */
.hero{position:relative;height:640px;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(33,33,31,0) 35%,rgba(33,33,31,0.55) 68%,rgba(33,33,31,0.9) 100%);
  pointer-events:none;
}
.hero__content{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 64px 72px;
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  color:var(--white);
}
/* Blanco + sombra suave (no solo --nude) para que se lea igual de bien
   sobre fotos claras que sobre fotos oscuras. */
.hero__eyebrow{font:600 14px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--white);text-shadow:0 1px 4px rgba(33,33,31,.55)}
.hero__title{font:800 52px/1.08 var(--font-sans);max-width:20ch;margin:0}
.hero__subtitle{font:400 18px/1.5 var(--font-sans);color:var(--nude);max-width:56ch;margin:0}
.hero__actions{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;justify-content:center}
/* Outline treatment for the secondary hero CTA — pairs with the solid
   beige primary button the way the reference layout pairs a solid button
   with an outline one, without introducing a second brand accent color. */
.hero__actions .btn--whatsapp{
  background:transparent;
  border:1.5px solid var(--white);
  color:var(--white);
}
.hero__actions .btn--whatsapp:hover{opacity:.75}

/* ============ Sections ============ */
.section{padding:96px 32px}
.section--muted{background:var(--nude)}
.section__inner{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;gap:40px}

.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,280px));justify-content:center;gap:24px}
/* Grid fijo 2x2 para la vista de "categorías" en home — 4 tarjetas
   grandes y centradas en vez de 3+1 huérfana en la fila auto-fit. */
.category-grid--categories{grid-template-columns:repeat(2,1fr);max-width:840px;gap:28px;margin:0 auto}
.treatment-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}

.about-section{max-width:var(--container-max);margin:0 auto;padding:96px 32px;display:flex;gap:56px;align-items:center}
.about-section__body{display:flex;flex-direction:column;gap:16px}
.about-section__eyebrow{font:600 13px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ebony)}
.about-section__name{font:700 30px var(--font-sans);color:var(--black);margin:0}
.about-section__text{margin:0;font:400 17px/1.6 var(--font-sans);color:var(--ebony);max-width:56ch}

.closing-cta{
  background:var(--black);
  padding:80px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.closing-cta__quote{font:italic 400 34px var(--font-display);color:var(--sage);margin:0}
.closing-cta__title{font:700 30px var(--font-sans);color:var(--white);text-transform:uppercase;max-width:26ch;margin:0}
.closing-cta__actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* Hero más corto para páginas de tratamiento individual: prioriza llegar
   rápido al contenido/precio en vez del gran impacto visual de home/categoría.
   El título usa un max-width mayor que el hero estándar (menos líneas)
   para que el bloque de texto quepa sin invadir el header fijo. */
.hero--compact{height:520px}
.hero--compact .hero__title{max-width:30ch}

/* Con altura fija y ancho creciente, object-fit:cover recorta cada vez más
   la porción vertical visible de la foto a medida que la pantalla se ensancha,
   hasta cortar la cabeza/rostro del sujeto en monitores muy anchos. A partir
   de 1980px se deja crecer la altura junto con el ancho (mismo ratio que ya
   tenían a 1980px, así no cambia nada por debajo de ese punto) con un tope
   para no generar una franja desproporcionada en pantallas ultra-anchas. */
@media (min-width:1980px){
  .hero{height:32.3vw;max-height:840px}
  .hero--compact{height:26.3vw;max-height:720px}
}

@media (max-width:960px){
  .hero{height:560px}
  .hero--compact{height:480px}
  .hero__content{padding:0 32px 48px}
  .hero__title{font-size:38px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .about-section{flex-direction:column;text-align:center;padding:64px 32px}
  .about-section__body{align-items:center}
}
@media (max-width:640px){
  .section{padding:64px 20px}
  .hero__content{padding:0 20px 32px}
  .hero__title{font-size:30px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .category-grid{grid-template-columns:1fr}
  .closing-cta{padding:56px 20px}
  /* Los botones apilados (arriba) y el título/subtítulo largos suman más
     alto de lo que el hero compacto tiene a este ancho — se necesita más
     espacio para no invadir el header fijo. */
  .hero--compact{height:600px}
}