:root{
  --ink: #23393A;
  --ink-soft: #5B7472;
  --bg: #FFFFFF;
  --bg-panel: #EFF8F7;
  --accent: #1F7A70;          /* AA sobre blanco y sobre --bg-panel */
  --accent-hover: #155C54;
  --accent-bright: #2E9D93;   /* solo rellenos decorativos, nunca texto */
  --accent-soft: #D9BFEA;
  --sand: #8FC9A8;
  --line: rgba(31,122,112,0.22);
  --white: #FFFFFF;
  --max: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1,h2,h3{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
a{ color: inherit; }

:where(a, button, .service-row):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }
section{ padding: 88px 0; scroll-margin-top: 84px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Header */
header{
  position: sticky; top:0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
header .wrap{
  display:flex; align-items:center; gap:24px;
  padding-top:16px; padding-bottom:16px;
}
.brand{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  text-decoration:none; margin-right:auto;
}
.brand-mark{ display:block; height:42px; width:auto; flex-shrink:0; }
.brand-name{
  display:flex; flex-direction:column;
  font-family:'Fraunces', Georgia, serif; color:var(--ink);
}
.brand-name b{ font-weight:600; font-size:1.12rem; line-height:1.2; letter-spacing:0.2px; }
.brand-name i{
  font-style:normal; font-weight:600; font-size:0.6rem; line-height:1;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent);
  margin-top:6px;
}

.site-nav{ display:flex; align-items:center; gap:26px; }
.site-nav a{
  padding:4px 0;
  font-size:0.95rem; font-weight:500; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap;
  transition: color 0.2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color:var(--accent); }

.nav-cta,
.site-nav a.nav-cta{
  background: var(--accent); color: var(--white);
  padding: 11px 24px; border-radius: 999px;
  font-size: 0.92rem; font-weight:600; line-height:1; text-decoration:none;
  white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(31,122,112,0.55);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible,
.site-nav a.nav-cta:hover, .site-nav a.nav-cta:focus-visible{
  background: var(--accent-hover); color: var(--white);
  box-shadow: 0 6px 16px -6px rgba(31,122,112,0.6);
  transform: translateY(-1px);
}

.nav-toggle{
  display:none; width:42px; height:42px; padding:0; flex-shrink:0;
  background:none; border:0; cursor:pointer; color:var(--ink);
  align-items:center; justify-content:center;
}
.nav-toggle-box{ position:relative; display:block; width:20px; height:2px; background:currentColor; transition:background 0.15s ease; }
.nav-toggle-box::before, .nav-toggle-box::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor;
  transition: top 0.2s ease, transform 0.2s ease;
}
.nav-toggle-box::before{ top:-6px; }
.nav-toggle-box::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::after{ top:0; transform:rotate(-45deg); }

/* Hero */
.hero .wrap{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 56px;
  align-items:center; padding-top: 64px; padding-bottom: 40px;
}
.hero .kicker{
  margin:0 0 14px; color: var(--accent);
  font-weight:600; font-size:0.95rem; letter-spacing:0.2px;
}
.hero h1{ font-size: clamp(2.2rem, 4vw, 3.2rem); }
.hero p.lead{
  font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; margin-top: 20px;
}
.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn-primary{
  background: var(--accent); color: var(--white);
  padding: 14px 26px; border-radius: 999px; text-decoration:none;
  font-weight:600; font-size:1rem; display:inline-block;
  transition: background 0.2s ease;
}
.btn-primary:hover{ background: var(--accent-hover); }
.btn-secondary{
  border: 1.5px solid var(--accent); color: var(--accent);
  padding: 13px 24px; border-radius: 999px; text-decoration:none;
  font-weight:600; font-size:1rem; display:inline-block;
}
.btn-secondary:hover{ background: var(--bg-panel); }
.hero-photo{
  position:relative; aspect-ratio: 4/5; border-radius: 44% 56% 58% 42% / 48% 44% 56% 52%;
  background: linear-gradient(155deg, var(--accent-soft), var(--sand));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: transform 0.15s ease-out;
  will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(31,122,112,0.35);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo-stage{ position:relative; }
.floaty{
  position:absolute; border-radius:50%;
  animation: float 9s ease-in-out infinite; pointer-events:none;
}
.floaty-1{
  width:180px; height:180px; top:-50px; right:0;
  background: radial-gradient(circle, rgba(217,191,234,0.5) 0%, rgba(217,191,234,0) 70%);
}
.floaty-2{
  width:150px; height:150px; bottom:-30px; left:-12px; animation-delay:2s;
  background: radial-gradient(circle, rgba(143,201,168,0.45) 0%, rgba(143,201,168,0) 70%);
}
.floaty-3{
  width:110px; height:110px; top:40%; right:-14px; animation-delay:4s;
  background: radial-gradient(circle, rgba(46,157,147,0.3) 0%, rgba(46,157,147,0) 70%);
}
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-18px) translateX(8px); }
}

/* Servicios */
.servicios{ background: var(--bg-panel); }
.servicios .intro{ max-width: 56ch; }
.servicios .intro h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.servicios .intro p{ color: var(--ink-soft); margin-top:14px; }
.service-list{
  margin-top: 48px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px;
}
.service{ border-bottom: 1px solid var(--line); }
.service-row{
  width:100%; margin:0; padding: 20px 0; background:none; border:0;
  font: inherit; color: inherit; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.service-row .name{ font-weight:600; font-size:1.02rem; }
.service-row .n{
  position:relative; flex-shrink:0; width:16px; height:16px;
  color: var(--accent);
}
.service-row .n::before,
.service-row .n::after{
  content:''; position:absolute; top:50%; left:50%; width:14px; height:2px;
  background: currentColor; border-radius:2px;
  transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease;
}
.service-row .n::after{ transform: translate(-50%, -50%) rotate(90deg); }
.service.open .service-row .n::after{ transform: translate(-50%, -50%) rotate(0); opacity:0; }
.service-detail{
  max-height:0; overflow:hidden; opacity:0; color: var(--ink-soft); font-size:0.95rem;
  margin:0; padding-right: 24px;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
}
.service.open .service-detail{ opacity:1; margin: 0 0 18px; }

/* Sobre ella */
.sobre .wrap{
  display:grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 56px; align-items:center;
}
.sobre-photo{
  aspect-ratio: 3/4; border-radius: 18px;
  background: var(--bg-panel);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sobre-photo img{ width:100%; height:100%; object-fit:cover; }
.sobre h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sobre p{ color: var(--ink-soft); margin-top:16px; max-width: 54ch; }

/* Ubicación */
.ubicacion{ background: var(--bg-panel); }
.ubicacion h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 32px; }
.lugares{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; align-items:stretch; }
.lugar{ display:flex; flex-direction:column; }
.lugar h3{ font-size:1.2rem; }
.lugar .direccion{ margin:6px 0 0; color: var(--ink); font-weight:600; }
.lugar .horarios{ list-style:none; padding:0; margin:10px 0 0; color: var(--ink-soft); font-size:0.95rem; }
.lugar .horarios li{ padding:3px 0; }
.lugar .ver-mapa{
  display:inline-block; align-self:flex-start; margin-top:auto; padding-top:12px;
  color: var(--accent); font-weight:600; font-size:0.92rem; text-decoration:none;
}
.lugar .ver-mapa:hover{ text-decoration:underline; }
.mapa-embed{
  margin-top:14px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:16/10;
}
.mapa-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* CTA final */
.cta-final{ background: var(--accent); color: var(--white); text-align:center; }
.cta-final h2{ color: var(--white); font-size: clamp(1.8rem,3.4vw,2.6rem); max-width: 20ch; margin: 0 auto; }
.cta-final p{ color: #EAF6F4; margin-top:16px; }
.cta-final .btn-primary{ background: var(--white); color: var(--accent); margin-top: 28px; }
.cta-final .btn-primary:hover{ background: #EAF6F4; }
.cta-final .nota-turno{ margin-top:14px; font-size:0.85rem; color: rgba(255,255,255,0.78); }

.js .reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in-view{ opacity:1; transform: translateY(0); }

footer{ padding: 32px 0; text-align:center; color: var(--ink-soft); font-size:0.9rem; }
footer p{ margin:6px 0 0; }
footer .ig-link{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--accent); font-weight:600; text-decoration:none; margin-bottom:12px;
}
footer .ig-link:hover{ text-decoration:underline; }
footer .credito{ margin-top:6px; font-size:0.8rem; opacity:0.7; }

/* Botón flotante de WhatsApp */
.wa-fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(20,60,50,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-fab svg{ width: 30px; height: 30px; display: block; }
.wa-fab:hover{ transform: scale(1.06); box-shadow: 0 12px 30px rgba(20,60,50,0.34); }
.wa-fab::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: 0.35; z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform: scale(1); opacity: 0.35; }
  70%{ transform: scale(1.9); opacity: 0; }
  100%{ transform: scale(1.9); opacity: 0; }
}

@media (max-width: 960px){
  .hero .wrap{ gap: 32px; }
  .sobre .wrap{ gap: 36px; }
}
@media (max-width: 900px){
  header{ z-index: 70; }
  .nav-toggle{ display:flex; }
  /* la marca y el botón quedan por encima del panel a pantalla completa */
  .brand, .nav-toggle{ position:relative; z-index:61; }

  .site-nav{
    position:fixed; inset:0; z-index:60;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    margin:0; padding:84px 24px 28px;
    background:#fff; color:var(--ink);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-nav.open{
    opacity:1; visibility:visible; transform:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .site-nav a{
    display:block; width:100%;
    padding:18px 2px; font-size:1.1rem; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .site-nav a:last-child{ border-bottom:0; }
  .site-nav a.nav-cta{
    box-sizing:border-box; width:100%;
    margin-top:24px; padding:16px; border-radius:999px;
    text-align:center; font-size:1rem; border-bottom:0;
  }

  html.nav-open, html.nav-open body{ overflow:hidden; }
}
@media (max-width: 780px){
  .wrap{ padding: 0 20px; }
  .hero .wrap, .sobre .wrap{ grid-template-columns: 1fr; }
  .lugares{ grid-template-columns: 1fr; }
  .hero .wrap{ padding-top: 40px; }
  .hero-photo{ order:-1; max-width: 300px; margin:0 auto; }
  .hero h1{ font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .hero p.lead{ font-size: 1.05rem; }
  .service-list{ grid-template-columns: 1fr; }
  section{ padding: 60px 0; }
  .floaty{ display:none; }
  .wa-fab{ right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .brand-mark{ height:38px; }
  .brand-name b{ font-size:1.05rem; }
}
@media (max-width: 380px){
  .brand-mark{ height:34px; }
  .brand-name b{ font-size:1rem; }
  .brand-name i{ font-size:0.56rem; letter-spacing:0.18em; }
}

@media print{
  .wa-fab{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .wa-fab::before{ display: none; }
}