/* ================================================================
   Aldara — astrosistemicaldara.com
   Hoja de estilos común a todas las páginas.
   Paleta y tipografías extraídas del sitio actual.
   Si prefieres inyectarla en línea, pega este archivo dentro de
   un <style> en el <head> del espejo: no depende de nada más.
   ================================================================ */

:root{
  --verde:#205b4f;
  --verde-medio:#53a292;
  --agua:#9bd4c9;
  --agua-claro:#d9e8e5;
  --dorado:#b68e00;
  --dorado-vivo:#f2bc00;
  --dorado-hover:#c79900;
  --crema:#ffefb7;
  --arena:#cba590;
  --gris-fondo:#f6f5f4;
  --gris-borde:#e2e1df;
  --texto:#7f7c76;
  --negro:#161513;
  --blanco:#ffffff;

  --serif:"Brygada 1918",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --ancho:1200px;
  --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.75;
  color:var(--texto);
  background:var(--blanco);
}
img{display:block;max-width:100%;height:auto}
a{color:#dab704;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--dorado-hover)}
:focus-visible{outline:2px solid var(--dorado-vivo);outline-offset:3px}
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  color:var(--verde);
  font-weight:600;
  margin:0;
  text-wrap:pretty;
}
h1{font-size:40px;font-weight:500;line-height:1.4}
h2{font-size:28px;line-height:1.3}
h3{font-size:24px;line-height:1.3}
h4{font-size:20px;line-height:1.2}
h5{font-size:16px;line-height:1.2}
h6{font-size:12px;line-height:1.25}
p{margin:0}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.contenedor--estrecho{max-width:900px}
.seccion{padding:var(--s6) 0}
.seccion--agua{background:var(--agua-claro)}
.seccion--gris{background:var(--gris-fondo)}
.eyebrow{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dorado);
  font-weight:600;
}
.centrado{text-align:center}
.medida{max-width:56ch}
.medida-centrada{max-width:62ch;margin-left:auto;margin-right:auto}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  padding:16px 26px;
  border:1px solid transparent;
  border-radius:2px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;
}
.btn--dorado{background:var(--dorado);color:var(--blanco)}
.btn--dorado:hover{background:#9c7a00;color:var(--blanco)}
.btn--crema{background:var(--crema);color:var(--verde)}
.btn--crema:hover{background:var(--blanco);color:var(--verde)}
.btn--verde{background:var(--verde);color:var(--blanco)}
.btn--verde:hover{background:#17453b;color:var(--blanco)}
.btn--linea{background:transparent;color:var(--crema);border-color:var(--crema)}
.btn--verde-linea{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn--verde-linea:hover{background:var(--verde);color:var(--blanco)}
.btn--linea:hover{background:var(--crema);color:var(--verde)}
.enlace-mas{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dorado);
}
.enlace-mas:hover{color:var(--dorado-hover)}
.enlace-mas::before{content:"\21bb";font-size:13px;letter-spacing:0}

/* ---------- Cabecera ---------- */
.cabecera{position:absolute;top:0;left:0;right:0;z-index:20}
.cabecera--solida{position:static;background:var(--verde)}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:var(--s2) 0;
}
.cabecera__acciones{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.logo{display:block}
.logo img{width:64px;height:61px}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav__lista{display:flex;align-items:center;gap:var(--s4)}
.nav__lista>li{position:relative}
.nav a{
  display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blanco);padding:var(--s1) 0;
}
.nav a:hover,.nav [aria-current="page"]{color:var(--crema)}
.nav__padre>a::after{content:"\25be";margin-left:6px;font-size:10px}
.nav__sub{
  position:absolute;top:100%;left:-16px;min-width:280px;
  background:var(--verde);padding:var(--s2) 0;
  border-top:2px solid var(--dorado);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.nav__sub a{
  display:block;padding:10px 20px;letter-spacing:.06em;
  text-transform:none;font-size:13px;line-height:1.4;
}
.nav__padre:hover .nav__sub,
.nav__padre:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.hamburguesa{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;
  background:transparent;border:0;cursor:pointer;
}
.hamburguesa span{display:block;height:2px;background:var(--blanco)}
.menu-movil{display:none;background:var(--verde);padding:var(--s3) 0 var(--s4)}
.menu-movil[data-abierto="true"]{display:block}
.menu-movil ul{list-style:none;margin:0;padding:0}
.menu-movil a{
  display:block;padding:12px 0;color:var(--blanco);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-movil a:hover{color:var(--crema)}
.menu-movil .sub a{padding-left:var(--s2);text-transform:none;letter-spacing:.04em;font-weight:400}
.menu-movil .btn{margin-top:var(--s3)}

/* ---------- Hero de portada ---------- */
.hero{
  position:relative;
  padding:calc(var(--s8) + 40px) 0 var(--s8);
  background:var(--verde) url("Casas-Intro-830x400-1.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(32,91,79,.55) 0%,rgba(32,91,79,.12) 70%);
}
.hero__contenido{position:relative;z-index:2;max-width:640px}
.hero h1{color:var(--blanco)}
.hero p{color:var(--blanco);margin-top:var(--s3);max-width:46ch}

/* ---------- Hero de páginas interiores ---------- */
.hero-int{
  position:relative;text-align:center;
  padding:calc(var(--s8) + var(--s2)) 0 var(--s7);
  background:var(--verde) center/cover no-repeat;
}
.hero-int::after{content:"";position:absolute;inset:0;background:rgba(32,91,79,.55)}
.hero-int .contenedor{position:relative;z-index:2}
.hero-int h1,.hero-int h2{color:var(--blanco)}
.hero-int .eyebrow{color:var(--crema);display:block;margin-bottom:var(--s2)}
.hero-int p{color:rgba(255,255,255,.9);margin:var(--s3) auto 0;max-width:62ch}

/* ---------- Tres áreas ---------- */
.tres{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
.area{text-align:center}
.area__icono{width:14px;height:14px;margin:0 auto var(--s2);background:var(--dorado-vivo);transform:rotate(45deg)}
.area h3{font-size:20px}
.area p{margin-top:var(--s2)}
.tres--compacta{margin-top:0}

/* ---------- Cita destacada de portada ---------- */
.cita-destacada{font-size:24px;line-height:1.35;color:var(--dorado);max-width:22ch;margin:var(--s3) auto 0}

/* ---------- Bloque de cita con firma (páginas interiores) ---------- */
.intro-cita{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.intro-cita__marca{
  font-family:var(--serif);font-size:40px;line-height:1;color:var(--agua);
  display:block;margin-bottom:var(--s2);
}
.intro-cita blockquote{margin:0;color:var(--dorado);font-weight:600;font-size:15px;line-height:1.7}
.intro-cita blockquote p+p{margin-top:var(--s2)}
.intro-cita__firma{margin-top:var(--s3)}
.firma__nombre{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--verde)}
.firma__lugar{font-size:12px}
.intro-cita__titulo{
  font-family:var(--serif);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde);padding-bottom:var(--s3);border-bottom:1px solid var(--gris-borde);
  margin-bottom:var(--s4);
}

/* ---------- Prosa a dos columnas ---------- */
.prosa{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s6);align-items:start}
.prosa p+p{margin-top:var(--s3)}
.prosa strong{color:var(--negro)}
.prosa+.prosa{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--gris-borde)}
.titular-lateral{font-size:28px;line-height:1.25}

/* ---------- Lo mejor de nuestros servicios ---------- */
.mejor{padding:var(--s6) 0 0}
.mejor__grid{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.mejor__texto h2{margin-bottom:var(--s3)}
.mejor__texto p+p{margin-top:var(--s3)}
.mejor__texto .btn{margin-top:var(--s4)}
.panel{
  background:var(--agua-claro) url("lotus-spa-template-section-grad-bg.svg") right center/cover no-repeat;
  border-radius:48px 0 0 48px;
  padding:var(--s5) var(--gutter);
  margin-right:calc(var(--gutter) * -1);
}
.panel__item+.panel__item{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid rgba(32,91,79,.14)}
.panel__item h4{margin:6px 0 var(--s2)}
.panel__item .enlace-mas{margin-top:var(--s3)}
.panel__num{font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--dorado)}
.panel a:not(.enlace-mas){color:var(--verde);text-decoration:underline;text-decoration-color:rgba(32,91,79,.4)}
.panel a:not(.enlace-mas):hover{color:var(--dorado-hover)}

/* ---------- Cita previa ---------- */
.cta{padding:var(--s7) 0;text-align:center}
.cta h2{color:var(--dorado);margin-top:var(--s2);max-width:24ch;margin-left:auto;margin-right:auto}
.cta p{margin-top:var(--s3)}
.cta .btn{margin-top:var(--s4)}

/* ---------- Listado de servicios sobre imagen (portada) ---------- */
.servicios{
  position:relative;padding:var(--s7) 0;
  background:#3b3a35 url("servicios-fondo.jpg") center/cover no-repeat;
  color:rgba(255,255,255,.86);
}
.servicios::before{content:"";position:absolute;inset:0;background:rgba(46,44,38,.78)}
.servicios .contenedor{position:relative;z-index:2}
.servicios h2,.servicios h3{color:var(--blanco)}
.servicios .eyebrow{color:var(--crema)}
.servicios__intro{max-width:60ch;margin:var(--s3) auto 0;text-align:center}
.servicios__grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s6);border-top:1px solid rgba(255,255,255,.16)}
.servicio{padding:var(--s5) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.servicio h3{margin:var(--s2) 0 var(--s2);font-size:22px}
.servicio__dur{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--crema);margin:var(--s3) 0}
.servicio .enlace-mas{color:var(--crema)}
.servicio .enlace-mas:hover{color:var(--blanco)}
.servicio .eyebrow{color:var(--crema);opacity:.85}

/* ---------- Tarjeta blanca de servicios (página Servicios) ---------- */
.tarjetas{
  background:var(--blanco);
  display:grid;grid-template-columns:1fr;
  margin-top:calc(var(--s6) * -1);position:relative;z-index:3;
}
.tarjeta{padding:var(--s5) var(--s4);border-bottom:1px solid var(--gris-borde)}
.tarjeta:last-child{border-bottom:0}
.tarjeta h4{margin:var(--s1) 0 var(--s2)}
.tarjeta .enlace-mas{margin-top:var(--s3)}
.tarjeta__num{font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--texto)}

/* ---------- Bloques de texto con imagen (Servicios) ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center}
.duo--invertido .duo__media{order:-1}
.duo__texto h3{margin-bottom:var(--s3)}
.duo__texto p+p{margin-top:var(--s3)}
.duo__texto .enlace-mas,.duo__texto .btn{margin-top:var(--s4)}
.duo__media img{width:100%;height:auto;border-radius:4px}
.duo strong{color:var(--negro)}

/* ---------- Banda de oferta ---------- */
.oferta{
  position:relative;padding:var(--s7) 0;text-align:center;
  background:#101a2b url("oferta-fondo.jpg") center/cover no-repeat;
}
.oferta::after{content:"";position:absolute;inset:0;background:rgba(11,20,36,.62)}
.oferta .contenedor{position:relative;z-index:2}
.oferta h2{color:var(--blanco);margin-top:var(--s2);max-width:22ch;margin-left:auto;margin-right:auto}
.oferta .eyebrow{color:var(--crema)}
.oferta p{color:rgba(255,255,255,.9);margin:var(--s3) auto 0;max-width:60ch}
.oferta .btn{margin-top:var(--s4)}

/* ---------- Cifras ---------- */
.cifras{display:grid;grid-template-columns:1fr;gap:var(--s4);text-align:center}
.cifra__num{font-family:var(--serif);font-size:40px;line-height:1.1;color:var(--verde);font-weight:500}
.cifra__etq{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:var(--s1)}

/* ---------- Retrato ---------- */
.retrato{max-width:320px;margin:0 auto;text-align:center}
.retrato img{width:100%;height:auto}
.retrato h3{margin-top:var(--s3);font-size:22px}
.retrato p{margin-top:2px}

/* ---------- Testimonio ---------- */
.testimonio{padding:var(--s7) 0;text-align:center}
.testimonio__marca{font-family:var(--serif);font-size:48px;line-height:1;color:var(--agua);display:block;margin-bottom:var(--s3)}
.testimonio blockquote{margin:0 auto;max-width:64ch;font-size:15px;line-height:1.9;color:var(--negro)}
.testimonio figcaption{margin-top:var(--s4)}
.testimonio__autor{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--verde)}
.testimonio__lugar{display:block;font-weight:400;letter-spacing:0;text-transform:none;font-size:12px;margin-top:2px}

/* ---------- Reserva y formulario ---------- */
.reserva{position:relative;padding:var(--s7) 0;background:var(--blanco)}
.reserva__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:var(--s6)}
.reserva h2{margin-top:var(--s2)}
.reserva__intro{margin-top:var(--s3);max-width:46ch}
.dato{margin-top:var(--s5)}
.dato h3,.dato h4{
  font-family:var(--serif);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde);display:flex;align-items:center;gap:var(--s1);
}
.dato h3::before,.dato h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dorado-vivo);flex:none}
.dato p{margin-top:var(--s1);padding-left:16px;color:var(--negro)}
.dato p+p{margin-top:0}
.dato p a{color:var(--negro)}
.dato p a:hover{color:var(--dorado-hover)}
.separador{border:0;border-top:1px solid var(--gris-borde);margin:var(--s5) 0 0}
.datos-par{display:grid;grid-template-columns:1fr;gap:var(--s4)}

.formulario{max-width:520px}
.formulario__linea{width:48px;height:2px;background:var(--verde-medio);margin-bottom:var(--s3)}
.formulario__texto{margin-bottom:var(--s4);color:var(--texto)}
.contacto-directo{display:flex;flex-wrap:wrap;gap:var(--s2)}
.formulario__dato{margin-top:var(--s4);font-size:14px;line-height:1.9;color:var(--texto)}
.formulario__dato a{color:var(--verde);font-weight:600}
.formulario__dato a:hover{color:var(--dorado-hover)}

/* ---------- Mapa ---------- */
.mapa{background:var(--agua-claro)}
.mapa iframe{display:block;width:100%;height:420px;border:0}

/* ---------- Texto legal ---------- */
.legal h2{font-size:24px;margin-top:var(--s5)}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:var(--s3);max-width:75ch}
.legal a{word-break:break-word}

/* ---------- Pie ---------- */
.pie{background:var(--verde);color:rgba(255,255,255,.85);padding:var(--s6) 0 0}
.pie__grid{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.pie img{width:93px;height:112px}
.pie__lema{color:var(--blanco);font-weight:600;margin-top:var(--s3)}
.pie h5{color:var(--blanco);margin-bottom:var(--s3)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li+li{margin-top:10px}
.pie a{color:rgba(255,255,255,.85)}
.pie a:hover{color:var(--crema)}
.pie__contacto p+p{margin-top:6px}
.pie__barra{margin-top:var(--s6);padding:var(--s3) 0;border-top:1px solid rgba(255,255,255,.16);font-size:13px}
.pie__barra a{color:var(--dorado-vivo)}
.pie__barra a:hover{color:var(--crema)}

/* ---------- Fade discreto al hacer scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js-anim .fade:not(.visible){opacity:0;transform:translateY(12px)}
  .fade{transition:opacity .6s ease,transform .6s ease}
}

@media (max-width:479px){
  .btn{padding:14px 18px;letter-spacing:.1em}
}

/* ---------- Tablet ---------- */
@media (min-width:768px){
  body{font-size:15px}
  h1{font-size:56px}
  h2{font-size:36px}
  h3{font-size:28px}
  h4{font-size:22px}
  h5{font-size:18px}
  h6{font-size:13px}
  .seccion{padding:var(--s7) 0}
  .tres{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .cita-destacada{font-size:32px;max-width:34ch}
  .intro-cita{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .prosa{grid-template-columns:1fr 1fr}
  .prosa--tres{grid-template-columns:1fr 1fr}
  .servicios__grid{grid-template-columns:repeat(2,1fr);column-gap:var(--s6)}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .tarjeta{border-right:1px solid var(--gris-borde)}
  .tarjeta:nth-child(2n){border-right:0}
  .datos-par{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .reserva__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .duo{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .cifras{grid-template-columns:repeat(3,1fr)}
  .cifra__num{font-size:48px}
  .pie__grid{grid-template-columns:1fr 1fr 1fr;gap:var(--s5)}
  .testimonio blockquote{font-size:17px}
  .titular-lateral{font-size:36px}
}

/* ---------- Escritorio ---------- */
@media (min-width:1024px){
  body{font-size:16px}
  h1{font-size:88px;font-weight:500}
  h2{font-size:48px}
  h3{font-size:32px}
  h4{font-size:24px}
  h5{font-size:20px}
  h6{font-size:14px}
  :root{--gutter:40px}
  .nav{display:block}
  .hamburguesa,.menu-movil{display:none}
  .logo img{width:80px;height:76px}
  .hero{padding:calc(var(--s8) + var(--s6)) 0 var(--s8)}
  .hero-int{padding:calc(var(--s8) + var(--s5)) 0 var(--s8)}
  .cita-destacada{font-size:40px;line-height:1.3;max-width:32ch}
  .mejor__grid{grid-template-columns:5fr 7fr;gap:var(--s7);align-items:center}
  .panel{padding:var(--s6);border-radius:96px 0 0 96px}
  .panel__item{max-width:44ch}
  .servicio h3{font-size:26px}
  .tarjetas{grid-template-columns:repeat(3,1fr)}
  .tarjeta{border-right:1px solid var(--gris-borde)}
  .tarjeta:nth-child(2n){border-right:1px solid var(--gris-borde)}
  .tarjeta:nth-child(3n){border-right:0}
  .tarjeta:nth-last-child(-n+3){border-bottom:0}
  .prosa--tres{grid-template-columns:4fr 4fr 4fr}
  .prosa--lateral{grid-template-columns:4fr 8fr}
  .testimonio blockquote{font-size:18px}
  .titular-lateral{font-size:44px}
}
@media (min-width:1360px){
  .panel{margin-right:calc((100vw - var(--ancho)) / -2)}
}
