/*
Theme Name: Manuel Antonio Hair & Makeup
Theme URI: https://manuelantoniohairandmakeup.com/
Author: Priscilla Solano
Description: Tema a medida para Manuel Antonio Hair & Makeup by Priscilla. Bodas, novias y eventos especiales en Costa Rica. Paleta Ciruela, diseño responsive (escritorio, tablet y móvil), reseñas de Google integradas, galería filtrable y formulario de consulta de fecha.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: mahm
Tags: business, portfolio, responsive, translation-ready
*/

/* =========================================================
   1. PALETA — CIRUELA
   ---------------------------------------------------------
   Toda la identidad vive en estas variables. Cambiar los seis
   valores de acento repinta el sitio entero; ningún otro
   archivo del tema tiene colores escritos a mano.
   ========================================================= */
:root{
  /* neutros compartidos por todas las paletas */
  --ink:#2b2823;
  --paper:#fffcf9;
  --muted:#6b6459;
  --dim:#9a9288;
  --dark:#211f1c;
  --dark-ink:#f3ece1;
  --white:#ffffff;
  --star:#e0a02c;
  --google:#4285f4;
  --whatsapp:#25d366;

  /* acento — CIRUELA */
  --accent:#8d5a66;
  --accent-deep:#744653;
  --soft:#fbf2f3;
  --line:#f2e5e7;
  --sand:#eddde1;
  --sand2:#e2ccd2;

  /* tipografía y ritmo */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Karla', Helvetica, Arial, sans-serif;
  --mono:'DM Mono', ui-monospace, monospace;
  --radius:20px;
  --radius-sm:14px;
  --pill:30px;
  --gutter:56px;
  --maxw:1320px;
}
/* Para probar otro acento sin tocar nada más, descomentar y editar:
body{ --accent:#a9634a; --accent-deep:#8f4f39; --soft:#fdf4ee; --line:#f0e6dd; --sand:#efe0d6; --sand2:#e6d3c7; }
*/

/* =========================================================
   2. RESET Y BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.75; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:12px; top:12px; background:#fff; padding:10px 16px; z-index:99; }

.wrap{ max-width:var(--maxw); margin:0 auto; }
.section{ padding:88px var(--gutter); }
.section--soft{ background:var(--soft); }
.section--ink{ background:var(--ink); color:var(--dark-ink); }
.section--white{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }
.eyebrow--light{ color:#d9a58e; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a9917f; }
.h1{ font-size:clamp(38px,5vw,62px); line-height:1.04; }
.h2{ font-size:clamp(30px,3.4vw,44px); line-height:1.1; }
.h3{ font-size:26px; line-height:1.2; }
.lead{ font-size:17px; line-height:1.75; color:#5f584e; max-width:46ch; }
.body{ color:var(--muted); }
.signature{ font-family:var(--serif); font-style:italic; font-size:28px; color:var(--accent); }

/* botones */
.btn{ display:inline-block; padding:17px 30px; border-radius:var(--pill); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-align:center; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.btn:hover{ transform:translateY(-1px); opacity:1; }
.btn--dark{ background:var(--ink); color:var(--soft); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-deep); }
.btn--ghost{ border-color:var(--sand2); color:#3f382f; }
.btn--wa{ background:var(--whatsapp); color:#0b3d20; font-weight:700; }
.btn--sm{ padding:13px 22px; font-size:11px; letter-spacing:.16em; }

/* grids */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-6{ grid-template-columns:repeat(6,1fr); gap:14px; }
.split{ display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.split--reverse{ grid-template-columns:1.1fr 1fr; }
/* El retrato de la portada dominaba la sección: se angosta ~30% y el texto
   se queda con el espacio que sobra. */
.split--about{ grid-template-columns:.72fr 1.28fr; }
.split--about > .frame{ max-width:400px; width:100%; }
/* "Sobre mí": la columna de la foto era MÁS ancha que la del texto (1.1fr
   contra 1fr). Ahora manda el texto y el retrato queda vertical y contenido. */
.split--bio{ grid-template-columns:.62fr 1.38fr; }
.split--bio .frame{ max-width:380px; width:100%; aspect-ratio:3/4; min-height:0; }
.stack{ display:flex; flex-direction:column; gap:20px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.between{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }

/* marcador de imagen (mientras no hay foto real) */
.ph{ background:repeating-linear-gradient(135deg,var(--sand) 0 14px,var(--sand2) 14px 28px); display:flex; align-items:flex-end; justify-content:center; }
.ph span{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#a9897a; padding:14px; }

/* marco de foto real: toma la forma del marcador que reemplaza (border-radius y
   min-height llegan en el atributo style) y recorta la foto sin deformarla */
.frame{ position:relative; overflow:hidden; background:var(--sand); }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* =========================================================
   3. HEADER / FOOTER
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px var(--gutter); }
/* el logo se sube en alta resolución: se limita por alto para que no domine la barra */
.brand,.custom-logo-link{ flex:0 0 auto; display:flex; flex-direction:column; }
.brand img,.custom-logo{ width:auto; max-height:64px; object-fit:contain; }
.brand-kicker{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:#a9917f; }
.brand-name{ font-family:var(--serif); font-style:italic; font-size:25px; }
.brand-sub{ font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:#b9a696; padding-top:3px; }
/* --- Idioma: el contenido bilingüe se imprime dos veces y aquí se oculta el
   idioma que no está activo. Sin JS gana el idioma que puso el servidor. --- */
html[data-lang="es"] .i18n-block[data-lang="en"],
html[data-lang="en"] .i18n-block[data-lang="es"]{ display:none !important; }

.lang-switch{ display:flex; align-items:center; gap:6px; color:#c0b7a7; font-size:12px; }
.lang-btn{ background:none; border:0; cursor:pointer; padding:6px 8px; border-radius:8px;
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#8f877a; min-height:34px; }
.lang-btn:hover{ color:var(--accent); }
.lang-btn.is-on{ background:var(--accent); color:#fff; }

/* aviso (por ejemplo, reservas deshabilitadas) */
.notice{ display:flex; gap:18px; align-items:flex-start; background:var(--soft);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:28px 30px; max-width:820px; margin:0 auto; }
.notice-icon{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

.main-nav{ min-width:0; display:flex; align-items:center; gap:20px; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.main-nav a{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#5a544b; padding-bottom:4px; border-bottom:1px solid transparent; white-space:nowrap; }
.main-nav .current-menu-item > a{ color:var(--accent); border-bottom-color:var(--accent); }
.lang{ font-size:12px; letter-spacing:.16em; color:#c0b7a7; }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; color:var(--ink); }

.trustbar{ background:var(--ink); color:var(--dark-ink); padding:20px var(--gutter); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }

.site-footer{ background:var(--dark); color:#8b8377; padding:54px var(--gutter) 26px; display:flex; flex-direction:column; gap:34px; }
.site-footer .cols{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.site-footer h4{ margin:0 0 4px; color:var(--dark-ink); font-family:var(--sans); font-size:13px; font-weight:600; }
.site-footer .legal{ border-top:1px solid #332f2a; padding-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

/* =========================================================
   4. HERO Y TARJETAS
   ========================================================= */
.hero{ background:var(--soft); padding:74px var(--gutter) 86px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
/* Las tres fotos del encabezado. Las de la derecha eran franjas de 1.8:1 que
   cortaban a la gente por la mitad; ahora son cajas 4:3 y la vertical de la
   izquierda se estira exactamente hasta el mismo alto que las dos juntas. */
.hero-media{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.hero-media > .frame,
.hero-media .tall{ border-radius:150px 150px 14px 14px; height:100%; min-height:0; aspect-ratio:3/4; }
/* Nota: estas fotos son apaisadas dentro de una caja vertical, así que el
   recorte que hace object-fit es horizontal. Mover object-position en vertical
   no cambia nada; lo que se ve arriba y abajo es la foto entera. Para cambiar
   qué fotos salen acá se reordena la Galería en el panel. */
.hero-media .side{ display:grid; grid-template-rows:auto auto; gap:16px; }
.hero-media .side > .frame,
.hero-media .side div{ border-radius:14px; aspect-ratio:4/3; min-height:0; }
.hero-media .side > .frame:last-child,
.hero-media .side div:last-child{ border-radius:14px 14px 14px 110px; }
.page-hero{ padding:96px var(--gutter); display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }

.card{ background:var(--soft); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:16px; }
.card .ph{ border-radius:var(--radius-sm); min-height:280px; }
/* Foto de servicio: una sola proporción para las tres tarjetas y un único
   recorte, para que nadie quede cortado por la mitad. */
.card > .frame{ aspect-ratio:4/3; border-radius:var(--radius-sm); }
.card--outline{ background:var(--paper); border:1px solid var(--line); padding:30px; }
.card--featured{ background:var(--soft); border:1px solid var(--accent); padding:30px; }
.card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:#5f584e; }
.badge{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; background:var(--accent); color:#fff; padding:7px 10px; border-radius:20px; }
.step{ display:flex; flex-direction:column; gap:12px; border-top:2px solid var(--sand2); padding-top:18px; }
.step:first-child{ border-top-color:var(--accent); }
.step .num{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#a9917f; }
.step:first-child .num{ color:var(--accent); }
.stats{ display:flex; gap:44px; padding-top:14px; border-top:1px solid var(--line); }
.stats b{ display:block; font-family:var(--serif); font-weight:300; font-size:38px; line-height:1.1; }
.stats span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8f827c; }

/* =========================================================
   5. RESEÑAS DE GOOGLE
   ========================================================= */
.g-summary{ display:flex; align-items:center; gap:22px; background:var(--soft); border-radius:16px; padding:18px 24px; }
.g-mark{ width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:21px; color:var(--google); }
.g-score{ font-family:var(--serif); font-size:30px; line-height:1; }
.stars{ color:var(--star); letter-spacing:.08em; }
.review{ border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:14px; background:var(--paper); }
.review .head{ display:flex; align-items:center; gap:12px; }
.review .avatar{ width:38px; height:38px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--accent); }
.review .name{ font-weight:600; font-size:14px; }
.review .date{ font-size:11px; color:var(--dim); }
.review .g{ margin-left:auto; font-weight:700; color:var(--google); }
.reviews-nav{ display:flex; gap:10px; }
.round{ width:42px; height:42px; border:1px solid var(--sand2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#5a544b; background:none; cursor:pointer; }
.round:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.round:disabled{ opacity:.4; cursor:default; }
/* las tarjetas de reseña comparten alto dentro de la fila: al deslizar no salta */
.review{ height:100%; }

/* =========================================================
   6. GALERÍA
   ========================================================= */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.filter{ padding:12px 22px; border-radius:var(--pill); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--sand2); color:#3f382f; background:none; cursor:pointer; }
.filter.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* Rejilla pareja: todas las fotos ocupan exactamente la misma caja y la imagen
   se recorta centrada dentro. Antes era masonry por columnas, y como cada foto
   conserva su proporción original las piezas quedaban de alturas distintas. */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gallery-grid .item{ position:relative; margin:0; border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; display:block; aspect-ratio:3/4; background:var(--sand); }
.gallery-grid .item.is-hidden{ display:none; }
.gallery-grid .item img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Mientras la foto baja se ve un girador en su lugar, así la casilla no parece
   una imagen rota. Todo esto se activa solo si hay JS (html.js-img): sin JS las
   fotos se ven directamente y nunca queda un girador dando vueltas de fondo. */
@keyframes mahm-spin{ to{ transform:rotate(360deg); } }

html.js-img .gallery-grid .item::after{
  content:""; position:absolute; top:50%; left:50%; width:24px; height:24px;
  margin:-12px 0 0 -12px; border-radius:50%;
  border:2px solid rgba(141,90,102,.22); border-top-color:var(--accent);
  animation:mahm-spin .8s linear infinite;
  opacity:1; transition:opacity .25s ease; pointer-events:none;
}
html.js-img .gallery-grid .item.is-loaded::after{ opacity:0; animation:none; }
html.js-img .gallery-grid .item img{ opacity:0; transition:opacity .35s ease; }
html.js-img .gallery-grid .item.is-loaded img{ opacity:1; }

/* Mismo girador en el visor, que carga la foto grande. */
html.js-img .lightbox.is-loading .lb-stage::after{
  content:""; position:absolute; top:50%; left:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%;
  border:2px solid rgba(231,222,210,.25); border-top-color:#e7ded2;
  animation:mahm-spin .8s linear infinite; pointer-events:none;
}
html.js-img .lightbox.is-loading img{ opacity:.25; }
.lightbox img{ transition:opacity .25s ease; }
.lightbox{ position:fixed; inset:0; background:rgba(25,22,20,.92); z-index:80; display:none; align-items:center; justify-content:center; padding:60px; overscroll-behavior:contain; touch-action:pan-y; }
.lightbox.is-open{ display:flex; }
.lb-stage{ position:relative; margin:0; display:flex; align-items:center; justify-content:center; max-width:100%; min-width:60px; min-height:60px; }
.lightbox img{ max-height:82vh; max-width:100%; width:auto; border-radius:12px; }
.lightbox .close{ position:absolute; top:26px; right:32px; color:#e7ded2; font-size:13px; letter-spacing:.16em; text-transform:uppercase; background:none; border:0; cursor:pointer; z-index:2; padding:10px; }

/* pasar de foto */
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px;
  border-radius:50%; border:1px solid rgba(231,222,210,.35); background:rgba(25,22,20,.45);
  color:#e7ded2; font-size:30px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0 0 4px; }
.lb-nav:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.lb-nav[hidden]{ display:none; }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
.lb-counter{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:rgba(231,222,210,.75);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; }

/* Con el visor abierto la página de atrás no se mueve. El bloqueo real lo hace
   el JS (position:fixed en body); esto es el cinturón de seguridad. */
html.lb-open, html.lb-open body{ overflow:hidden !important; overscroll-behavior:none; }

/* =========================================================
   6b. GALERÍA — TRES DISEÑOS
   ---------------------------------------------------------
   Se elige en Apariencia > Personalizar > Galería.
   El <body> recibe .gal-mosaico | .gal-editorial | .gal-reticula
   ========================================================= */

/* Las dos fotos del llamado final de la galería: verticales, para que entren
   las personas enteras en vez de una franja a la altura del pecho. */
/* .grid.gal-cta para ganarle a las reglas de una sola columna de más abajo. */
.grid.gal-cta{ grid-template-columns:1fr 1fr; }
.grid.gal-cta > .frame{ aspect-ratio:4/5; min-height:0; }

/* Diseño 1 — rejilla pareja (por defecto) */
.gal-mosaico .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gal-mosaico .gallery-grid .item{ margin:0; position:relative; display:block; border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; aspect-ratio:3/4; }
.gal-mosaico .item-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:18px; background:linear-gradient(to top,rgba(35,28,30,.72) 0%,rgba(35,28,30,.15) 46%,transparent 70%); opacity:0; transition:opacity .25s ease; }
.gal-mosaico .item:hover .item-overlay,.gal-mosaico .item:focus .item-overlay{ opacity:1; }
.item-overlay .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:.85; }
.item-overlay .cap{ font-family:var(--serif); font-style:italic; font-size:22px; color:#fff; }

/* Diseño 2 — editorial en filas numeradas */
.gal-editorial .gallery-grid{ columns:auto; display:flex; flex-direction:column; gap:56px; }
.gal-editorial .gal-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.gal-editorial .gal-row .item{ display:block; border-radius:200px 200px 16px 16px; overflow:hidden; cursor:zoom-in; }
.gal-editorial .gal-row .item img{ width:100%; height:560px; object-fit:cover; }
.gal-editorial .gal-side{ display:flex; flex-direction:column; gap:20px; }
.gal-editorial .gal-rule{ display:flex; align-items:baseline; gap:14px; }
.gal-editorial .gal-rule .num{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); }
.gal-editorial .gal-rule .line{ flex:1; height:1px; background:var(--line); }
.gal-editorial .gal-rule .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#a9917f; }
.gal-editorial .gal-side .item{ border-radius:16px; }
.gal-editorial .gal-side .item img{ height:200px; }

/* Diseño 3 — retícula con foto destacada */
.gal-reticula .gallery-grid{ columns:auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:12px; }
.gal-reticula .gallery-grid .item{ position:relative; display:block; border-radius:12px; overflow:hidden; cursor:zoom-in; }
.gal-reticula .gallery-grid .item img{ width:100%; height:100%; object-fit:cover; }
.gal-reticula .gallery-grid .item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gal-reticula .gallery-grid .item:nth-child(6){ grid-column:span 2; }
.gal-reticula .chip{ position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.9); color:#3f382f; padding:7px 11px; border-radius:20px; font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }

/* =========================================================
   6c. CALENDARIO DE DISPONIBILIDAD (página Reservar)
   ========================================================= */
.booking{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.cal-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.cal-head .mono{ margin-left:12px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-dow{ text-align:center; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#a9917f; padding-bottom:4px; }
.cal-day{ aspect-ratio:1; border-radius:12px; border:1px solid var(--line); background:#fff; color:#3f382f; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-family:var(--sans); font-size:15px; font-weight:500; cursor:pointer; }
.cal-day .dot{ width:6px; height:6px; border-radius:50%; background:#5c8f6d; }
.cal-day.is-tight .dot{ background:#d09a3c; }
.cal-day.is-booked{ background:#f7f4f2; color:#b8aca6; border-color:transparent; cursor:not-allowed; text-decoration:line-through; }
.cal-day.is-booked .dot{ background:#c3b6b0; }
.cal-day.is-empty{ visibility:hidden; }
.cal-day.is-selected{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cal-day.is-selected .dot{ background:rgba(255,255,255,.85); }
.cal-legend{ display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; margin-top:22px; }
.cal-legend span{ display:flex; align-items:center; gap:9px; font-size:12px; color:#5f584e; }
.cal-legend i{ width:9px; height:9px; border-radius:50%; display:block; }
.book-panel{ background:var(--soft); border-radius:22px; padding:30px; display:flex; flex-direction:column; gap:16px; position:sticky; top:110px; }
.book-panel .picked{ font-family:var(--serif); font-size:30px; line-height:1.2; }
.book-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-btn{ padding:12px 16px; border-radius:26px; background:#fff; border:1px solid var(--sand2); color:#3f382f; font-size:11px; font-weight:600; letter-spacing:.1em; cursor:pointer; }
.chip-btn.is-on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.svc-btn{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--line); text-align:left; cursor:pointer; font-family:var(--sans); }
.svc-btn.is-on{ border-color:var(--accent); }
.svc-btn b{ font-size:14px; font-weight:500; }
.svc-btn span{ font-size:12px; color:#8a8078; }
.stepper{ display:flex; align-items:center; gap:14px; }
.stepper button{ width:42px; height:42px; border:1px solid var(--sand2); border-radius:50%; background:#fff; color:#5a544b; font-size:18px; cursor:pointer; }
.stepper output{ font-family:var(--serif); font-size:28px; min-width:34px; text-align:center; }
.book-rows{ border-top:1px solid var(--sand2); padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.book-rows div{ display:flex; justify-content:space-between; font-size:14px; color:#5f584e; }

/* =========================================================
   7. FAQ Y FORMULARIOS
   ========================================================= */
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); }
.faq-q{ width:100%; background:none; border:0; text-align:left; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sans); font-size:16px; font-weight:500; color:var(--ink); cursor:pointer; }
.faq-q .sign{ font-size:22px; font-weight:300; color:var(--accent); }
.faq-a{ padding:0 24px 22px; max-width:70ch; color:var(--muted); display:none; }
.faq-item.is-open .faq-a{ display:block; }

.form{ background:var(--soft); border-radius:22px; padding:36px; display:flex; flex-direction:column; gap:16px; }
.form h2{ font-size:32px; }
.form label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8f877a; }
.form input,.form select,.form textarea{ border:1px solid #eadfd4; border-radius:12px; padding:16px; font-size:15px; font-family:var(--sans); color:var(--ink); background:#fff; outline:none; width:100%; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); }
.form textarea{ min-height:130px; resize:vertical; }
.form .two{ display:flex; gap:12px; }
.form .note{ font-size:12px; color:#8f877a; text-align:center; }
.form .note.is-ok{ color:#2f7d4f; font-weight:600; }
.form .note.is-error{ color:var(--accent-deep); font-weight:600; }
/* trampa antispam: fuera de la vista pero accesible para el navegador */
.form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* flotantes */
.floaters{ position:fixed; right:22px; bottom:22px; z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.fab{ width:56px; height:56px; border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.fab svg{ width:28px; height:28px; fill:#0b3d20; }

/* =========================================================
   8. RESPONSIVE  —  escritorio / tablet / móvil
   ========================================================= */

/* Tablet horizontal */
@media (max-width:1180px){
  :root{ --gutter:40px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-6{ grid-template-columns:repeat(4,1fr); }
  .gallery-grid,.gal-mosaico .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .hero{ gap:40px; }
  /* la barra se aprieta antes del menú hamburguesa: logo y separación más chicos */
  .brand img,.custom-logo{ max-height:52px; }
  .main-nav ul{ gap:16px; }
  .main-nav a{ font-size:11px; letter-spacing:.12em; }
}

/* Con seis enlaces más el selector ES/EN la barra deja de entrar antes que el
   resto del layout: el menú hamburguesa entra a 1024px y no a 900px. */
@media (max-width:1024px){
  .site-header{ flex-wrap:wrap; gap:14px; padding:12px var(--gutter); }
  .nav-toggle{ display:block; order:3; margin-left:auto; }
  .site-header .btn--sm{ order:2; }
  .main-nav{ display:none; width:100%; order:4; }
  .main-nav.is-open{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:18px; padding:18px 0 6px; }
  .main-nav a{ font-size:13px; }
  .brand img,.custom-logo{ max-height:48px; }
}

/* Tablet vertical */
@media (max-width:900px){
  .booking{ grid-template-columns:1fr; }
  .book-panel{ position:static; }
  .gallery-grid,.gal-mosaico .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gal-mosaico .item-overlay{ opacity:1; }
  .gal-editorial .gal-row{ grid-template-columns:1fr; gap:24px; }
  .gal-reticula .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  :root{ --gutter:32px; }
  .site-header{ flex-wrap:wrap; gap:14px; padding:12px var(--gutter); }
  .brand img,.custom-logo{ max-height:48px; }
  .nav-toggle{ display:block; order:3; margin-left:auto; }
  .site-header .btn--sm{ order:2; }
  .main-nav{ display:none; width:100%; order:4; }
  .main-nav.is-open{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:18px; padding:18px 0 6px; }
  .main-nav a{ font-size:13px; }
  .lang-switch{ padding:6px 0 10px; }
  .notice{ flex-direction:column; gap:14px; padding:22px; }
  .hero{ grid-template-columns:1fr; padding:48px var(--gutter) 60px; }
  .hero-media{ grid-template-columns:1fr 1fr; }
  .split,.split--reverse,.split--about,.split--bio,.grid-2,.grid-3{ grid-template-columns:1fr; }
  .split--about > .frame{ max-width:320px; margin:0 auto; }
  .split--bio .frame{ max-width:320px; margin:0 auto; }
  .section{ padding:56px var(--gutter); }
  .page-hero{ padding:64px var(--gutter); }
  .gallery-grid,.gal-mosaico .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .trustbar{ justify-content:flex-start; gap:12px 20px; font-size:11px; }
  .stats{ gap:26px; }
  /* nada pegajoso en pantallas cortas */
  .section .stack[style*="sticky"],[style*="position:sticky"]{ position:static !important; }
  .section[style*="grid-template-columns:.75fr"]{ grid-template-columns:1fr !important; gap:32px !important; }
}

/* Móvil */
@media (max-width:600px){
  .gallery-grid,.gal-mosaico .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .gal-reticula .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .gal-reticula .gallery-grid .item:nth-child(1),
  .gal-reticula .gallery-grid .item:nth-child(6){ grid-column:auto; grid-row:auto; }
  .gal-editorial .gal-row .item img{ height:380px; }
  .cal-grid{ gap:5px; }
  .cal-day{ border-radius:9px; font-size:13px; gap:4px; }
  .book-panel{ padding:22px; }
  :root{ --gutter:20px; --radius:16px; }
  .h1{ font-size:clamp(30px,8.5vw,40px); }
  .h2{ font-size:clamp(26px,7vw,32px); }
  .h3{ font-size:22px; }
  .lead{ font-size:16px; }
  .section{ padding:44px var(--gutter); }
  .page-hero{ padding:52px var(--gutter); }
  /* En una sola columna: la vertical arriba y las dos chicas lado a lado. */
  .hero-media{ grid-template-columns:1fr; }
  .hero-media > .frame,
  .hero-media .tall{ border-radius:130px 130px 14px 14px; aspect-ratio:4/5; }
  .hero-media .side{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .grid,.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; gap:18px; }
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid,.gal-mosaico .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .between{ align-items:flex-start; }
  .g-summary{ flex-direction:column; align-items:flex-start; gap:14px; width:100%; }
  .g-summary .btn{ width:100%; }
  .form{ padding:24px; }
  .form .two{ flex-direction:column; }
  .btn{ padding:16px 24px; }
  .btn,.filter{ min-height:48px; }        /* área de toque mínima */
  .stats{ flex-wrap:wrap; gap:20px 32px; }
  .site-footer{ padding:40px var(--gutter) 22px; }
  .site-footer .cols{ gap:28px; }
  .trustbar{ flex-direction:column; gap:8px; letter-spacing:.18em; }
  /* La barra fija no debe comerse la pantalla: el botón de la cabecera se
     esconde (el botón flotante de WhatsApp y los CTA de cada sección lo cubren). */
  .site-header .btn--sm{ display:none; }
  .brand-kicker{ font-size:9px; letter-spacing:.28em; }
  .brand-name{ font-size:21px; }
  .brand-sub{ font-size:8px; }
  .floaters{ right:16px; bottom:16px; }
  .lightbox{ padding:20px 12px 64px; }
  .lb-nav{ width:44px; height:44px; font-size:26px; }
  .lb-prev{ left:6px; }
  .lb-next{ right:6px; }
  .lightbox img{ max-height:72vh; }
  .lightbox .close{ top:14px; right:14px; }
  .faq-q{ padding:18px; font-size:15px; }
  .faq-a{ padding:0 18px 18px; }
}

/* Evita cualquier desborde horizontal */
html,body{ max-width:100%; overflow-x:hidden; }
img,iframe{ max-width:100%; }
/* Por defecto una celda de grid/flex nunca baja de su contenido más ancho:
   sin esto, el correo largo ensancha la columna y con ella toda la página. */
.grid > *,.split > *,.stack,.between > *{ min-width:0; }
/* correos y URLs largas se parten en vez de desbordar */
.footer-mail,.form,.site-footer a,a[href^="mailto:"]{ overflow-wrap:anywhere; }
@media print{
  .site-header,.floaters,.lightbox{ display:none; }
}