/* ══════════════════════════════════════════════════════════════════
   Dr. Diego Preciado Estrella — drdiegopreciado.com
   Paleta tomada directamente del logo.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Colores del logo */
  --navy-900:#16204a;
  --navy-800:#202050;
  --navy-700:#25325a;
  --navy-600:#2a3563;
  --blue-500:#2590c4;
  --cyan-500:#00a4da;
  --cyan-400:#2bb8e8;

  /* Neutros */
  --ink:#1b2340;
  --muted:#5c6784;
  --line:#e4e9f2;
  --line-soft:#eef2f8;
  --bg:#ffffff;
  --bg-soft:#f6f8fc;

  --wa:#25d366;

  /* Sistema */
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(27,35,64,.05), 0 8px 24px -12px rgba(27,35,64,.18);
  --shadow-lg:0 2px 4px rgba(27,35,64,.06), 0 24px 48px -20px rgba(27,35,64,.28);
  --header-h:76px;

  --font-display:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ─────────── Reset ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.15; color:var(--navy-800); margin:0 0 .5em; letter-spacing:-.015em}
h1{font-size:clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem)}
h2{font-size:clamp(1.6rem, 1.1rem + 2vw, 2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-800); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--cyan-500); outline-offset:3px; border-radius:4px}

/* ─────────── Layout ─────────── */
.wrap{width:min(1180px, calc(100% - 3rem)); margin-inline:auto}
.wrap-narrow{width:min(820px, calc(100% - 3rem))}
.section{padding:clamp(4rem, 8vw, 7rem) 0}
.section-soft{background:var(--bg-soft); border-block:1px solid var(--line-soft)}

.section-head{max-width:680px; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-sub{color:var(--muted); font-size:1.05rem; margin-top:.4rem}
.section-head-light h2{color:#fff}
.section-head-light .section-sub{color:rgba(255,255,255,.72)}
.section-head-light .eyebrow{color:var(--cyan-400)}

.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-500);
  margin:0 0 .8rem;
}

.cols-2{display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:repeat(auto-fit, minmax(300px,1fr))}
.cols-3{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

/* ─────────── Botones ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.8rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:1rem 1.7rem; font-size:1rem}
.btn-sm{padding:.55rem 1.05rem; font-size:.87rem}
.btn-block{width:100%}

.btn-primary{background:var(--navy-800); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--navy-600); box-shadow:var(--shadow-lg)}

.btn-ghost{background:transparent; color:var(--navy-800); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-800); background:#fff}

.btn-light{background:#fff; color:var(--navy-800)}
.btn-light:hover{background:var(--cyan-500); color:#fff}

.ico{width:20px; height:20px; fill:currentColor; flex:none}
.ico-lg{width:26px; height:26px}

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:var(--blue-500); text-decoration:none; border-bottom:1.5px solid transparent;
  transition:border-color .2s, color .2s;
}
.link-arrow::after{content:'→'; transition:transform .2s}
.link-arrow:hover{color:var(--navy-800); border-color:currentColor}
.link-arrow:hover::after{transform:translateX(3px)}

/* ─────────── Header ─────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.is-stuck{border-color:var(--line); box-shadow:0 4px 20px -14px rgba(27,35,64,.5)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--header-h)}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand-mark{width:46px; height:auto; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-text strong{font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--navy-800); letter-spacing:-.01em}
.brand-text small{font-size:.73rem; color:var(--blue-500); letter-spacing:.01em}

.nav{display:flex; align-items:center; gap:1.6rem}
.nav a{
  font-size:.93rem; font-weight:500; text-decoration:none; color:var(--ink);
  transition:color .2s;
}
.nav a:not(.btn):hover{color:var(--blue-500)}
.nav-cta{color:#fff !important}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; cursor:pointer; padding:0; place-items:center;
}
.nav-toggle span{display:block; width:19px; height:2px; background:var(--navy-800); border-radius:2px; margin:4px auto; transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ─────────── Hero ─────────── */
.hero{
  padding:clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  background:
    radial-gradient(1000px 500px at 88% -8%, rgba(37,144,196,.10), transparent 62%),
    radial-gradient(700px 420px at 4% 4%, rgba(32,32,80,.05), transparent 60%);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{margin-bottom:1rem}
.hero h1 em{font-style:normal; color:var(--blue-500)}
.lead{font-size:clamp(1.02rem,.95rem + .3vw,1.18rem); color:var(--muted); max-width:38ch}

.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.9rem 0 2.4rem}

.hero-facts{
  list-style:none; margin:0; padding:1.5rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.3rem;
}
.hero-facts li{display:flex; flex-direction:column; gap:.15rem}
.hero-facts strong{font-family:var(--font-display); font-size:.92rem; color:var(--navy-800)}
.hero-facts span{font-size:.82rem; color:var(--muted); line-height:1.45}

.hero-media{margin:0}
.photo-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; background:var(--bg-soft); box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
.photo-frame img{width:100%; height:100%; object-fit:cover; object-position:center top}
.photo-frame.is-empty img{display:none}
.photo-frame.is-empty::after{
  content:attr(data-placeholder);
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:2rem; font-size:.85rem; color:var(--muted); line-height:1.5;
  background:repeating-linear-gradient(45deg,#f2f5fa,#f2f5fa 14px,#eaeff7 14px,#eaeff7 28px);
}
.hero-media figcaption{
  margin-top:.85rem; font-size:.82rem; color:var(--muted); text-align:center;
}

/* ─────────── Barra de confianza ─────────── */
.trustbar{background:var(--navy-800); color:#fff; padding:1.15rem 0}
.trustbar-inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.7rem 2.5rem; text-align:center;
}
.trustbar span{
  font-family:var(--font-display); font-weight:500; font-size:.8rem;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.78);
}

/* ─────────── Paneles / padecimientos ─────────── */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.3rem); box-shadow:var(--shadow);
}
.panel-accent{border-top:4px solid var(--cyan-500)}
.panel h3{font-size:1.35rem; margin-bottom:.35rem}
.panel-note{color:var(--muted); font-size:.93rem; margin-bottom:1.4rem}

.check-list{list-style:none; margin:0; padding:0; display:grid; gap:.72rem}
.check-list li{position:relative; padding-left:1.9rem; font-size:.98rem}
.check-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:9px; height:9px;
  border-radius:50%; background:var(--cyan-500); box-shadow:0 0 0 4px rgba(0,164,218,.14);
}

/* ─────────── Tecnología ─────────── */
.tech-strip{margin-top:clamp(1.5rem,3vw,2.5rem)}
.tech-strip > h3{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:1.2rem;
}
.tech-card{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:1.5rem 1.4rem;
}
.tech-card strong{
  display:block; font-family:var(--font-display); font-size:1rem;
  color:var(--navy-800); margin-bottom:.4rem;
}
.tech-card p{font-size:.92rem; color:var(--muted); margin:0 0 .9rem}
.tech-where{
  display:block; font-size:.8rem; line-height:1.45; color:var(--blue-500);
  font-weight:500; padding-top:.75rem; border-top:1px solid var(--line);
}

/* ─────────── Sobre mí ─────────── */
.about-grid{align-items:start}
.mini-head{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:1.4rem;
}
.timeline{list-style:none; margin:0 0 1.5rem; padding:0 0 0 1.6rem; border-left:2px solid var(--line); display:grid; gap:1.4rem}
.timeline li{position:relative}
.timeline li::before{
  content:''; position:absolute; left:calc(-1.6rem - 6px); top:.55em;
  width:10px; height:10px; border-radius:50%; background:#fff; border:2.5px solid var(--blue-500);
}
.timeline strong{display:block; font-family:var(--font-display); font-size:1rem; color:var(--navy-800)}
.timeline span{font-size:.88rem; color:var(--muted)}

.fineprint{font-size:.82rem; color:var(--muted); line-height:1.55}
.fineprint-light{color:rgba(255,255,255,.6); margin-top:1rem}

/* ─────────── Pasos ─────────── */
.steps{
  list-style:none; margin:2.4rem 0 0; padding:0;
  display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  position:relative;
}
/* Línea que conecta los tres pasos en pantallas anchas */
@media (min-width:900px){
  .steps::before{
    content:''; position:absolute; top:-6px; left:12%; right:12%; height:2px;
    background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px);
  }
}
.steps li{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:3.2rem 1.7rem 1.9rem;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.steps li:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--blue-500)}

.step-num{
  position:absolute; top:-26px; left:1.7rem;
  display:grid; place-content:center; width:66px; height:66px; border-radius:50%;
  background:linear-gradient(140deg, var(--navy-800), var(--blue-500));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.9rem;
  line-height:1; box-shadow:0 10px 24px -10px rgba(37,144,196,.75);
  border:4px solid #fff;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.steps li:hover .step-num{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 14px 30px -8px rgba(37,144,196,.85);
}

.steps h3{font-size:1.15rem; margin-bottom:.45rem}
.steps p{font-size:.95rem; color:var(--muted)}

.steps-cta{
  margin-top:2.8rem; display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:1rem 1.4rem; text-align:center;
}
.steps-cta p{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; color:var(--navy-800);
}
@media (prefers-reduced-motion:reduce){
  .steps li:hover{transform:none}
  .steps li:hover .step-num{transform:none}
}

/* ─────────── Testimonios ─────────── */
.quotes-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .quotes-grid{grid-template-columns:1fr} }

.quote{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:1rem;
}
.quote p{font-size:1rem; color:var(--ink); margin:0}
.quote cite{
  font-style:normal; font-size:.84rem; color:var(--muted); font-weight:500;
  margin-top:auto; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
}
/* Etiqueta de la plataforma donde el paciente publicó la reseña */
.src{
  font-family:var(--font-display); font-weight:600; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:5px;
}
.src-g{background:#eaf1fd; color:#1a56b8}
.src-d{background:#e6f6f2; color:#0a7a63}
.quote p{font-size:.97rem; line-height:1.6}

.rating-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem;
  font-size:.95rem; color:var(--muted); margin-top:.7rem;
}
.rating-line strong{color:var(--navy-800); font-weight:600}
.stars{color:#f5a623; letter-spacing:.12em; font-size:1.05rem}
.center-note{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:.8rem 2rem; margin-top:2.2rem; text-align:center;
}

/* ─────────── En los medios ─────────── */
.media-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.55rem;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.media-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-500)}
.media-source{
  margin:0; font-family:var(--font-display); font-weight:600; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-500);
}
.media-card h3{font-size:1.1rem; line-height:1.35; margin:0}
.media-card h3 a{text-decoration:none; color:var(--navy-800)}
.media-card h3 a:hover{color:var(--blue-500)}
.media-card time{font-size:.83rem; color:var(--muted); margin-top:auto}

.media-card-all{
  background:var(--bg-soft); border-style:dashed;
  align-items:flex-start; justify-content:center; gap:1rem;
}
.media-card-all:hover{transform:none; box-shadow:none}
.media-card-all p{font-family:var(--font-display); font-weight:600; color:var(--navy-800); margin:0}

/* ─────────── Agendar ─────────── */
.section-dark{
  background:linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 55%, #2c4a7a 100%);
  color:#fff;
}
.booking-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start}
.booking-direct{display:grid; gap:.85rem}

.price-tags{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.price-tags div{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:1.1rem 1.2rem;
}
.price-tags strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.6rem; color:var(--cyan-400); line-height:1.1;
}
.price-tags span{display:block; font-size:.82rem; color:rgba(255,255,255,.7); margin-top:.25rem}
.price-note{font-size:.8rem; color:rgba(255,255,255,.55); margin:-.2rem 0 .4rem}

.contact-card{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:1.15rem 1.3rem; color:#fff;
  transition:background .2s, border-color .2s, transform .15s;
}
.contact-card:hover{background:rgba(255,255,255,.13); border-color:var(--cyan-400); transform:translateY(-2px)}
.contact-card strong{display:block; font-family:var(--font-display); font-size:1rem}
.contact-card span{display:block; font-size:.85rem; color:rgba(255,255,255,.66); margin-top:.1rem}
.contact-card .ico-lg{color:var(--cyan-400)}

.calendar-slot{
  border:1px dashed rgba(255,255,255,.28); border-radius:var(--radius);
  padding:1.4rem 1.3rem; margin-top:.4rem;
}
.calendar-slot strong{display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:.25rem}
.calendar-slot p{font-size:.87rem; color:rgba(255,255,255,.66); margin-bottom:1rem}

.booking-form{
  background:#fff; color:var(--ink); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-lg);
}
.booking-form h3{font-size:1.3rem; margin-bottom:.2rem}
.form-note{color:var(--muted); font-size:.9rem; margin-bottom:1.6rem}

.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.05rem}
.field-row{display:grid; grid-template-columns:1.6fr 1fr; gap:.9rem}
.field label{font-size:.86rem; font-weight:600; color:var(--navy-700)}
.field .opt{font-weight:400; color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; padding:.75rem .9rem;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); width:100%; transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(37,144,196,.14);
}
.field input:user-invalid,.field select:user-invalid{border-color:#d94a4a}

.consent{display:flex; gap:.65rem; align-items:flex-start; font-size:.83rem; color:var(--muted); margin:.4rem 0 1.4rem; line-height:1.5}
.consent input{margin-top:.2rem; width:17px; height:17px; accent-color:var(--blue-500); flex:none}
.consent a{color:var(--blue-500)}

.form-status{font-size:.88rem; margin:.9rem 0 0; min-height:1.2em}
.form-status.ok{color:#1a8a4a}
.form-status.err{color:#d94a4a}
.booking-form .fineprint-light{color:var(--muted); border-top:1px solid var(--line-soft); padding-top:1rem}

/* ─────────── Ubicación ─────────── */
.location-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,3vw,3rem); align-items:start}
.location-info h3{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:2rem 0 .6rem}
.location-info h3:first-child{margin-top:0}
.address{font-size:1rem; line-height:1.6}
.hours{width:100%; border-collapse:collapse; font-size:.95rem}
.hours th,.hours td{text-align:left; padding:.55rem 0; border-bottom:1px solid var(--line); font-weight:500}
.hours td{text-align:right; color:var(--muted)}
.plain-list{margin:0; padding-left:1.1rem; color:var(--muted); font-size:.95rem; display:grid; gap:.4rem}

.map-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--bg-soft);
}
.map-frame iframe{width:100%; height:100%; border:0; display:block}

/* ─────────── Galería del consultorio ─────────── */
.gallery{margin-top:clamp(2rem,4vw,3rem)}
.gallery > h3{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:1.2rem;
}
.shot{margin:0}
/* Las fotos del consultorio son verticales: marco 4:5 para recortar lo mínimo. */
.shot .photo-frame{aspect-ratio:4/5; border-radius:var(--radius); box-shadow:var(--shadow)}
.shot .photo-frame img{object-position:center}
@media (max-width:700px){ .shot .photo-frame{aspect-ratio:3/4} }
.shot figcaption{margin-top:.7rem; font-size:.87rem; color:var(--muted); line-height:1.45}

/* ─────────── FAQ ─────────── */
.faq{display:grid; gap:.6rem}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 1.3rem; transition:border-color .2s;
}
.faq details[open]{border-color:var(--blue-500)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--navy-800);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:.25rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--blue-500); border-bottom:2px solid var(--blue-500);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 1.2rem; margin:0; color:var(--muted); font-size:.96rem}

/* ─────────── Footer ─────────── */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.72); padding:clamp(3rem,5vw,4.5rem) 0 2rem; font-size:.93rem}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:2.5rem}
/* El logo original es azul marino; el filtro lo vuelve blanco puro
   para que se lea sobre el fondo oscuro del pie. */
.footer-logo{width:230px; height:auto; margin:0 0 1rem -.35rem; filter:brightness(0) invert(1); opacity:.95}
.footer-brand p{font-size:.86rem; color:rgba(255,255,255,.55)}
.site-footer h3{font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 1rem}
.footer-contact h3:not(:first-child){margin-top:1.8rem}
.footer-nav,.footer-contact{display:flex; flex-direction:column; gap:.5rem}
.footer-nav a,.footer-contact a:not(.socials a){text-decoration:none; color:rgba(255,255,255,.72); transition:color .2s; width:fit-content}
.footer-nav a:hover,.footer-contact a:hover{color:var(--cyan-400)}
.footer-contact .address{font-size:.88rem; color:rgba(255,255,255,.55); margin-top:.3rem}

.socials{display:flex; flex-wrap:wrap; gap:.6rem}
.socials a{
  display:grid; place-content:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  transition:background .2s, border-color .2s, transform .15s;
}
.socials a:hover{background:var(--cyan-500); border-color:var(--cyan-500); transform:translateY(-2px)}
.socials svg{width:19px; height:19px; fill:#fff}

.footer-legal{
  margin-top:3rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.6; display:grid; gap:.8rem;
}
.footer-legal strong{color:rgba(255,255,255,.75)}
.copyright{margin-top:.4rem}

/* ─────────── Selector de idioma ─────────── */
.lang-switch{display:flex; align-items:center; gap:.25rem; margin-left:.6rem}
.lang-opt{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .5rem; border-radius:8px; text-decoration:none;
  border:1px solid transparent; transition:background .2s, border-color .2s, opacity .2s;
}
.lang-opt svg{width:21px; height:15px; border-radius:2px; display:block; box-shadow:0 0 0 1px rgba(27,35,64,.12)}
.lang-opt b{font-family:var(--font-display); font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.04em}
.lang-opt:not(.is-active){opacity:.55; cursor:pointer}
.lang-opt:not(.is-active):hover{opacity:1; background:var(--bg-soft)}
.lang-opt.is-active{background:var(--bg-soft); border-color:var(--line)}
.lang-opt.is-active b{color:var(--navy-800)}

/* ─────────── Botones flotantes ─────────── */
.float-actions{
  position:fixed; right:1.5rem; bottom:calc(1.5rem + env(safe-area-inset-bottom));
  z-index:98; display:flex; flex-direction:column; gap:.75rem;
  opacity:0; transform:translateY(18px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.float-actions.is-visible{opacity:1; transform:none; pointer-events:auto}

.fab{
  position:relative;
  display:grid; place-content:center; width:58px; height:58px; border-radius:50%;
  color:#fff; text-decoration:none;
  box-shadow:0 6px 20px -4px rgba(27,35,64,.4), 0 2px 6px rgba(27,35,64,.2);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.fab svg{width:29px; height:29px; fill:currentColor}
.fab:hover{transform:scale(1.08)}
.fab:active{transform:scale(1)}
.fab-wa{background:var(--wa)}
.fab-tel{background:var(--navy-800)}

/* Etiqueta que aparece al pasar el cursor (solo con ratón) */
.fab-label{
  position:absolute; right:calc(100% + .7rem); top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; background:var(--navy-900); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
  padding:.5rem .85rem; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.fab-label::after{
  content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--navy-900);
}
@media (hover:hover){
  .fab:hover .fab-label{opacity:1; transform:translateY(-50%) translateX(0)}
}
@media (hover:none){ .fab-label{display:none} }

/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-media{max-width:420px; margin-inline:auto; order:-1}
  .photo-frame{aspect-ratio:3/2}
  .lead{max-width:none}
  .booking-grid,.location-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:2rem}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:860px){
  .nav-toggle{display:grid}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:.5rem 1.5rem 1.25rem; box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0; border-bottom:1px solid var(--line-soft); font-size:1rem}
  .nav-cta{margin-top:.9rem; border-bottom:none !important; justify-content:center}
  .float-actions{right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); gap:.6rem}
  .fab{width:54px; height:54px}
  .fab svg{width:27px; height:27px}
}

/* En pantallas angostas el encabezado lleva marca + idioma + menú:
   se reduce la marca y el selector deja solo las banderas. */
@media (max-width:620px){
  .header-inner{gap:.5rem}
  .brand{gap:.5rem}
  .brand-mark{width:38px}
  .brand-text strong{font-size:.82rem; line-height:1.25}
  .lang-switch{margin-left:0; gap:.1rem}
  .lang-opt{padding:.3rem .35rem}
  .lang-opt b{display:none}
  .lang-opt svg{width:24px; height:17px}
}

@media (max-width:560px){
  body{font-size:16px}
  .price-tags{grid-template-columns:1fr}
  .price-tags strong{font-size:1.45rem}
  .wrap,.wrap-narrow{width:calc(100% - 2.2rem)}
  .hero-actions .btn{width:100%}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand-text small{display:none}
  .trustbar-inner{gap:.5rem 1.4rem}
  .trustbar span{font-size:.72rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* Animación de entrada suave */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }