/* =====================================================================
   BGU Servicios Condominales — hoja de estilo principal
   Paleta tomada del logotipo y de la iconografía oficial:
     cian #00B6DA · verde #96C700 · lima #BDFC05 · gris #5D5D5D
   ===================================================================== */

/* =====================================================================
   TIPOGRAFÍAS — servidas desde este mismo servidor, no desde Google
   ---------------------------------------------------------------------
   Lato (SIL OFL 1.1) y Waterfall (SIL OFL 1.1). Los archivos viven en
   `assets/fonts/`. Waterfall sustituye a Cochocib Script Latin Pro, que es
   de licencia comercial.

   Antes se pedían a fonts.googleapis.com. Se trajeron aquí por tres razones:
   1. Esa petición bloqueaba el dibujado de la página: 330 ms en escritorio y
      1 820 ms en celular, medido con PageSpeed el 14/08/2026.
   2. Eran el único tercero que veía la dirección IP de cada visitante. Al
      quitarlas, el sitio deja de compartir datos con nadie, y el punto 11 del
      aviso de privacidad se puede simplificar.
   3. Un sitio que no depende de un servidor ajeno no se cae con él.

   `unicode-range` hace que el navegador baje SOLO lo que necesita: para un
   texto en español nunca pide los archivos `-ext`, que existen por si algún
   día se escribe algo con caracteres de Europa central.

   `font-display:swap` enseña el texto de inmediato con la tipografía de
   respaldo y lo cambia al terminar la descarga: se prefiere un cambio de
   letra a un hueco en blanco.

   La licencia OFL exige conservar el aviso de licencia. Está en
   `assets/fonts/LICENCIAS.txt`; no lo borres al mover archivos.
   ===================================================================== */

@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/lato-300.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lato-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/lato-900.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Waterfall';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/waterfall-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Los `-ext` cubren checo, polaco, turco y demás. El español no los toca. */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/lato-300-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lato-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/lato-900-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Waterfall';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/waterfall-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --cyan:#00B6DA;
  --cyan-600:#0096b6;
  --cyan-700:#00738c;
  /* verde del logotipo para botones y textos; la iconografía usa #96C700 */
  --green:#7DC10E;
  --green-600:#699f0a;
  --lime:#BDFC05;
  --gray:#5D5D5D;
  --ink:#243039;
  --ink-soft:#4a5560;
  --line:#e3e8ec;
  --tint:#f4f9fb;
  --white:#fff;

  --grad-brand:linear-gradient(90deg,var(--green) 0%,var(--cyan) 100%);
  --grad-lime:linear-gradient(140deg,var(--lime) 0%,var(--green) 100%);

  --wrap:1180px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-sm:0 2px 10px rgba(36,48,57,.06);
  --shadow-md:0 14px 40px -18px rgba(36,48,57,.28);
  --shadow-lg:0 30px 70px -30px rgba(36,48,57,.4);

  --font:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-script:'Waterfall','Brush Script MT',cursive;

  --header-h:84px;
}

*,*::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);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-600);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:700}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- tipografía de apoyo ---------- */
/* Waterfall tiene una x muy pequeña respecto al cuerpo: para que se vea a la
   misma escala que la sans (como en el brochure) necesita bastante más em. */
.script{
  font-family:var(--font-script);font-weight:400;color:var(--cyan);
  font-size:2.2em;line-height:.85;padding:0 .06em 0 .1em;
}
.title .script{display:inline-block;margin-top:.02em}
/* Signo de apertura («¿» o «¡») en manuscrita. Va sin la sangría izquierda del
   .script —si no, la frase arrancaría despegada del margen— y casi sin la
   derecha, para que el signo quede pegado a la palabra que abre. El signo de
   cierre no necesita clase: viaja dentro del propio .script del final.
   Se usa en «¿Quiénes somos?» y en «¡Todo verde y bien regado!». */
.script.sig{padding-left:0;padding-right:.02em}
/* Remate manuscrito de un solo renglón. La frase mide ~8 em de ancho (7.82 más
   el padding), así que el tamaño se topa por vw para que quepa entera. Su
   encabezado necesita además todo el ancho del contenedor, no la medida de
   lectura de 70ch (ver .section-head). Por debajo de 600 px se parte en dos
   renglones para no tener que encogerse tanto (ver ese @media). */
.title .script.una-linea{white-space:nowrap;font-size:min(2.2em,11.2vw)}
.script-line{
  font-family:var(--font-script);
  font-size:clamp(2.75rem,4.7vw,3.6rem);
  color:var(--green);
  line-height:1;
  margin:.1em 0 .8em;
  /* al ser más grande suele partirse en dos: que reparta parejo los renglones */
  text-wrap:balance;
}
.script-line.small{font-size:clamp(2.25rem,3.5vw,2.85rem);color:var(--cyan)}
.eyebrow{
  font-size:.78rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-600);margin:0 0 .9rem;
}
.eyebrow.light{color:var(--lime)}
.eyebrow .sep{margin:0 .35em;opacity:.6}
.title{font-size:clamp(2rem,4.4vw,3.05rem);font-weight:300;letter-spacing:-.01em}
.title b,.title strong{font-weight:900}
.title.light{color:#fff}
.sub{font-size:1.08rem;max-width:62ch}
.sub.light{color:rgba(255,255,255,.82)}
.big{font-size:1.15rem;color:var(--ink)}
.mini-head{font-weight:900;color:var(--ink);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:1.6rem 0 .7rem}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:.98rem;line-height:1;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
/* El borde transparente de 2 px de arriba existe para que los botones sólidos y
   los de contorno midan igual, pero deja al degradado dibujándose solo dentro
   del padding y repitiéndose para tapar esos 2 px: en las puntas asomaban
   briznas del color contrario (cian a la izquierda, verde a la derecha).
   `background-origin` va DESPUÉS de la forma corta `background:`, que lo
   reinicia a `padding-box`; lo mismo en .btn-lime. */
.btn-primary{background:var(--grad-brand);background-origin:border-box;color:#fff;box-shadow:0 12px 26px -12px rgba(0,182,218,.85)}
.btn-primary:hover{box-shadow:0 18px 34px -12px rgba(0,182,218,.9)}
.btn-lg{padding:1.15rem 2.2rem;font-size:1.05rem}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-600)}
.btn-wa{background:#25D366;color:#fff;padding:.7rem 1.2rem;font-size:.92rem}
.btn-wa .ico{width:18px;height:18px;fill:currentColor}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--cyan-600);margin-top:.4rem}
.link-arrow::after{content:"→";transition:transform .2s ease;display:inline-block}
.link-arrow:hover::after{transform:translateX(4px)}

/* =====================================================================
   HEADER
   ===================================================================== */
/* ESTE ES EL NÚMERO DE LA TRANSPARENCIA DEL MENÚ: el .75 del `rgba`.
   Cuanto más bajo, más se ve el contenido por debajo. Antes era .92 (apenas
   se asomaba). Referencias por si algún día se quiere mover:
     .85 → muy discreto      .75 → el de ahora      .68 → el límite
   Por debajo de .65 el menú empieza a estorbarse con las fotos y ya no se lee
   cómodo; comprobado midiendo el contraste contra un fondo negro.

   Lo que mantiene el texto legible NO es el blanco sino el desenfoque: al
   difuminar 18 px, lo de abajo pierde el detalle y no compite con las letras.
   Los dos números van juntos: si se sube la transparencia, hay que subir el
   desenfoque. El `saturate` evita que el desenfoque se vea gris y apagado.

   El prefijo -webkit- no sobra: Safari lo necesitó hasta hace poco y sin él
   ese navegador se queda con el fondo al 72 % y SIN desenfoque, que es
   justamente la combinación ilegible.

   Y si el navegador no sabe hacer el desenfoque, el bloque @supports de abajo
   le devuelve el blanco casi sólido. Vale más perder el efecto que el texto. */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(255,255,255,.95)}
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.brand img{width:190px}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav ul{display:flex;align-items:center;gap:1.5rem}
.nav a{color:var(--ink);font-weight:700;font-size:.94rem;position:relative;padding:.3rem 0}
.nav a.btn-wa{color:#fff}
.nav ul a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--grad-brand);transition:right .25s ease;border-radius:2px;
}
.nav ul a:hover::after,.nav ul a.is-active::after{right:0}
.nav ul a.is-active{color:var(--cyan-600)}

/* Acceso al portal de clientes. Va dentro del menú pero se ve distinto a
   propósito: no es una sección de esta página, es otro sitio. El recuadro lo
   separa de los anclas sin gritar como el botón de WhatsApp, que es la acción
   que sí queremos que domine para quien todavía no es cliente. */
.nav ul a.nav-portal{
  border:1.5px solid var(--cyan);color:var(--cyan-700);
  padding:.42rem .85rem;border-radius:999px;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.nav ul a.nav-portal::after{display:none}
.nav ul a.nav-portal:hover{background:var(--cyan);color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
.nav-toggle-box{display:block;width:26px;height:18px;position:relative}
.nav-toggle-box i,.nav-toggle-box::before,.nav-toggle-box::after{
  content:"";position:absolute;left:0;width:100%;height:2.5px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.nav-toggle-box::before{top:0}
.nav-toggle-box i{top:8px}
.nav-toggle-box::after{top:16px}
.nav-toggle[aria-expanded="true"] .nav-toggle-box::before{top:8px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box i{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-box::after{top:8px;transform:rotate(-45deg)}

/* =====================================================================
   PORTADA — única sección a ancho completo (sin contenedor centrado)
   ===================================================================== */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(1100px 620px at 78% 18%,rgba(0,182,218,.13),transparent 62%),
             radial-gradient(760px 520px at 4% 88%,rgba(150,199,0,.16),transparent 60%);
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  /* la calle entre columnas es ancha a propósito: es lo único que separa el
     texto de la mandala, que ahora llega mucho más adentro */
  align-items:center;gap:clamp(2rem,5.5vw,5rem);
  min-height:min(88vh,860px);
}
.hero-copy{
  /* el texto va por encima de la mandala, que ahora se pinta a todo color */
  position:relative;z-index:2;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.25rem,2.5vw,2.5rem) clamp(3rem,6vw,5.5rem) clamp(1.25rem,4vw,4.5rem);
  max-width:44rem;justify-self:end;width:100%;
}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.4rem);font-weight:300;letter-spacing:-.02em;margin-bottom:.4em}
/* «para tu condominio» en un solo renglón. La frase mide ~8.5 em de ancho, así
   que el tamaño se topa por vw para que quepa entera en la columna de texto.
   En la versión apilada se deja partir si hace falta (ver el @media de 900 px). */
.hero h1 .grad{
  display:block;white-space:nowrap;
  font-size:min(1.2em,4.5vw);font-weight:900;line-height:1.05;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink-soft);max-width:52ch}

/* Panel de fotos circular, pegado al borde derecho de la página, con la mandala
   concéntrica alrededor. El archivo `mandala.png` es un ARO: su hueco central es
   transparente y mide 1/1.4555 de su diámetro exterior. El panel de fotos entra
   justo en ese hueco, sin marco de por medio.
   --aro es la razón «diámetro de la mandala ÷ diámetro del panel». Se usa 1.44 y
   no 1.4555 a propósito: así el panel queda un pelo MÁS grande que el hueco y lo
   tapa por debajo (entre 1.3 y 3.7 px por lado según el tamaño de pantalla). Si
   se pusiera la medida exacta, el redondeo a píxeles dejaría asomar una hebra del
   fondo entre la foto y el aro. Si algún día se cambia el archivo de la mandala,
   hay que volver a medir su hueco y recalcular este número. */
.hero-visual{
  --panel:min(100%,700px);
  --sangria:calc(var(--panel) * .18);   /* cuánto se sale por el borde derecho */
  --aro:1.44;
  position:relative;align-self:stretch;
  display:grid;align-items:center;justify-items:end;
  min-height:520px;
}
.hero-mandala{
  position:absolute;top:50%;right:calc(var(--panel) / 2 - var(--sangria));
  width:calc(var(--panel) * var(--aro));aspect-ratio:1;
  transform:translate(50%,-50%);pointer-events:none;z-index:0;
}
.hero-mandala img{width:100%;height:100%;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-slider{
  position:relative;z-index:1;
  width:var(--panel);aspect-ratio:1;
  margin-right:calc(var(--sangria) * -1);
  border-radius:50%;
  overflow:hidden;background:var(--tint);
  /* sin borde: la foto tiene que llegar hasta el aro de la mandala. El marco
     blanco que había antes existía porque la mandala vieja no era un aro y la
     foto se recortaba sobre su relleno; con el archivo nuevo estorba. */
  box-shadow:0 40px 80px -40px rgba(36,48,57,.55);
}
/* La entrante se funde ENCIMA de la saliente (que sigue opaca debajo);
   así nunca se ven las dos fotos mezcladas a medio camino. */
.hero-slider img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:0;transform:scale(1.06);
  transition:opacity 1.2s ease,transform 7s ease-out;
}
.hero-slider img.is-leaving{opacity:1;z-index:1;transition:none}
.hero-slider img.is-active{opacity:1;z-index:2;transform:scale(1)}
.lede strong{color:var(--ink);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.6rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:2.4rem}
.hero-stats li{display:flex;flex-direction:column;max-width:150px}
.hero-stats b{font-size:2.4rem;font-weight:900;line-height:1;color:var(--cyan)}
.hero-stats span{font-size:.88rem;line-height:1.35;color:var(--gray);margin-top:.35rem}

/* franja de promesa */
.strip{background:var(--grad-brand);color:#fff}
.strip-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:1.6rem 0}
.strip p{margin:0;font-size:1rem;color:rgba(255,255,255,.92)}
.strip b{color:#fff;font-weight:900}

/* =====================================================================
   SECCIONES
   ===================================================================== */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section-tint{background:var(--tint)}
.section-head{margin-bottom:clamp(2.2rem,4vw,3.4rem);max-width:70ch}
.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* fotos circulares (lenguaje visual del brochure) */
.photo-circle{margin:0;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-md)}
.photo-circle img{width:100%;height:100%;object-fit:cover}
.nosotros-media{position:relative;padding-bottom:3rem}
.nosotros-media .photo-lg{aspect-ratio:1;border:10px solid #fff}
.nosotros-media .photo-lg img{object-position:50% 22%}
.nosotros-media .photo-sm{
  position:absolute;right:-.5rem;bottom:0;width:44%;aspect-ratio:1;border:8px solid #fff;
}

/* valores */
.values{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.values li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.8rem 1.4rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease;
}
.values li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.values img{width:78px;height:78px;object-fit:contain;margin:0 auto .9rem}
.values h3{font-size:1.05rem;margin-bottom:.35em}
.values p{font-size:.93rem;margin:0;color:var(--gray)}

/* =====================================================================
   SERVICIOS
   ===================================================================== */
.services{display:grid;gap:clamp(2rem,4vw,3rem)}
.service{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.service-alt{grid-template-columns:1.15fr .85fr}
.service-alt .service-media{order:2}
.service-alt .service-body{order:1}
/* La imagen se posiciona en absoluto para que sea el texto —y no el alto
   natural de la foto— quien determine la altura de la tarjeta. */
.service-media{position:relative;align-self:stretch;min-height:340px;background:var(--tint)}
.service-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.service-body{padding:clamp(1.8rem,3.5vw,3rem) clamp(1.5rem,3.5vw,3rem)}

/* icono de servicio: la iconografía oficial ya viene en disco redondo */
.service-ico{display:block;width:82px;height:82px;object-fit:contain;margin-bottom:1.1rem}
.service h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300}
.service h3 .script{color:var(--green)}
.service-alt h3 .script{color:var(--cyan)}
/* la ilustración del conserje se muestra completa, no recortada */
.service-media-ilustracion img{object-position:50% 12%}

.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.5rem;color:var(--ink-soft)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--grad-lime);
}
/* oficios de conserjería, cada uno con su icono redondo */
.tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.2rem;margin-bottom:1.4rem}
.tasks li{display:flex;align-items:center;gap:.75rem}
.tasks img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.tasks span{font-weight:700;color:var(--ink);font-size:.97rem;line-height:1.25}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.chips li{
  background:rgba(0,182,218,.1);color:var(--cyan-700);font-size:.86rem;font-weight:700;
  padding:.45rem .95rem;border-radius:999px;
}

/* bloque de tareas mixtas */
.mixto{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:auto 1fr auto;gap:1.8rem;align-items:center;
  background:#fff;border:2px dashed rgba(0,182,218,.35);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.mixto-icons{display:flex;align-items:center}
.mixto-icons img{width:56px;height:56px;object-fit:contain}
.mixto-icons img+img{margin-left:-14px}
.mixto h3{font-size:1.25rem;margin-bottom:.3em}
.mixto p{margin:0;font-size:.98rem}

/* =====================================================================
   GESTIÓN INTEGRAL (bloque oscuro)
   ===================================================================== */
.section-dark{
  position:relative;overflow:hidden;color:rgba(255,255,255,.8);
  background:linear-gradient(150deg,#123642 0%,#0f2a33 55%,#16202a 100%);
}
.section-dark::before{
  content:"";position:absolute;top:-30%;left:-14%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,182,218,.28),transparent 66%);
}
.section-dark::after{
  content:"";position:absolute;bottom:-38%;right:-10%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(125,193,14,.24),transparent 66%);
}
.section-dark .wrap{position:relative;z-index:1}
/* aquí el encabezado ocupa todo el ancho para que «Nosotros nos encargamos de
   todo» entre en un renglón; el párrafo conserva su medida por su propia regla */
#gestion .section-head{max-width:none}

/* El icono de la membresía va suelto en el hueco de la derecha, a media altura
   del encabezado —o sea a la altura del renglón manuscrito—, no debajo.
   ---------------------------------------------------------------------
   Va POSICIONADO y no en una columna de rejilla por una razón concreta: el
   renglón «Nosotros nos encargamos de todo» lleva `white-space:nowrap`, así que
   si se le mete en una columna estrecha no se parte, se desborda. Sacándolo del
   flujo, el título conserva el ancho completo y el icono se acomoda encima.

   Que no choquen está medido, no supuesto: entre el final del renglón
   manuscrito y el borde derecho sobran entre 285 px (a 901 px de ventana) y
   405 px, y arriba de 975 px el título deja de crecer —lo topa el `clamp` de
   `.title`—, así que ese hueco ya no se encoge por más ancha que sea la
   pantalla. El icono ocupa como mucho 200 px más 24 de respiro. Si algún día se
   cambia el texto del título por uno más largo, hay que volver a medir. */
#gestion .section-head{position:relative}
.gestion-sello{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:clamp(150px,14vw,200px);height:auto;
  /* la sombra lo despega del fondo oscuro: sin ella el aro blanco del icono
     se ve pegado como una calcomanía */
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));
}

.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
  margin-bottom:clamp(3rem,6vw,4.5rem);counter-reset:step;
}
.flow li{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);padding:1.5rem 1.4rem;position:relative;
}
.flow li::before{
  content:"";position:absolute;left:1.4rem;top:0;width:38px;height:3px;background:var(--grad-brand);
  border-radius:0 0 3px 3px;
}
.flow b{display:block;color:#fff;font-size:1.02rem;margin-bottom:.45rem;font-weight:900}
.flow span{font-size:.93rem;line-height:1.55;display:block;color:rgba(255,255,255,.72)}

.supp-head{font-weight:700;color:#fff;font-size:1.05rem;margin-bottom:1.4rem}
.supp{display:flex;flex-wrap:wrap;gap:.7rem}
.supp li{
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.6rem 1.15rem;
  font-size:.92rem;color:rgba(255,255,255,.88);transition:border-color .2s ease,background .2s ease;
}
.supp li:hover{border-color:var(--lime);background:rgba(189,252,5,.1)}
.supp .mas{
  font-family:var(--font-script);font-size:1.85rem;line-height:1;border:0;padding:.3rem .6rem 0;
  color:var(--lime);
}
.supp-cta{margin-top:clamp(2rem,4vw,3rem)}
.btn-lime{background:var(--grad-lime);background-origin:border-box;color:#1f2a10;box-shadow:0 14px 30px -14px rgba(150,199,0,.9)}
.btn-lime:hover{box-shadow:0 20px 38px -14px rgba(150,199,0,.95)}
.btn-lime .ico{width:19px;height:19px;fill:currentColor}

/* =====================================================================
   ENFOQUE
   ===================================================================== */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.types li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:2.2rem 1.6rem;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.types li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.types img{width:96px;height:96px;object-fit:contain;margin:0 auto 1.1rem}
.types b{display:block;color:var(--ink);font-size:1.2rem;font-weight:900;margin-bottom:.35rem}
.types span{font-size:.95rem;color:var(--gray);display:block;line-height:1.55}

/* =====================================================================
   RESULTADOS
   ===================================================================== */
.ba{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,4vw,3rem)}
.ba-pair{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;
}
.ba figure{margin:0;text-align:center}
.ba img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:var(--shadow-sm)}
.ba figcaption{
  margin-top:.8rem;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);
}
.ba figcaption.after{color:var(--cyan)}
.ba-arrow{font-size:1.6rem;color:var(--green);font-weight:700}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:clamp(2rem,4vw,3rem)}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:var(--shadow-sm);transition:transform .25s ease;
}
.gallery img:hover{transform:scale(1.04)}

/* =====================================================================
   CONTACTO
   ===================================================================== */
.section-cta{background:var(--tint)}
/* el encabezado de contacto es largo: va un punto por debajo del resto */
.section-cta .title{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.cta-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-list{display:grid;gap:.8rem;margin:2rem 0 2.2rem}
.contact-list a{
  display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:1rem 1.2rem;transition:transform .18s ease,box-shadow .18s ease;
}
.contact-list a:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.c-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:0 0 auto}
.c-ico svg{width:22px;height:22px;fill:#fff}
.c-ico.wa{background:#25D366}
.c-ico.mail{background:var(--cyan)}
.c-ico.ig{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888)}
/* «@bguservicioscondominales» es una sola palabra de 25 caracteres: en un
   teléfono de 320 px no cabe en un renglón y ensanchaba toda la sección de
   contacto. Aquí se le permite partirse en lugar de empujar. */
.contact-list span:last-child{display:flex;flex-direction:column;color:var(--ink-soft);font-size:.98rem;min-width:0;overflow-wrap:anywhere}
.contact-list b{color:var(--ink);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}

.cta-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-sm);
}
.cta-card h3{font-size:1.2rem}
.cta-card .note{font-size:.9rem;color:var(--gray);margin:1.2rem 0 0}

/* cierre */
.closing{
  text-align:center;padding:clamp(2.5rem,5vw,4rem) 1rem;margin:0;
  font-size:clamp(1.8rem,4.5vw,3rem);color:var(--gray);font-weight:300;
}
.closing .script{color:var(--green);font-size:2em}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:#fff;border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem)}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-brand img{width:180px;margin-bottom:1.1rem}
.footer-brand p{font-size:.93rem;color:var(--gray);max-width:34ch}

/* «Una empresa de» + logotipo del corporativo.
   La línea de arriba lo separa del bloque de BGU: sin ella, el logotipo de
   Grupo Bildung se lee como si fuera parte del mismo bloque y se pierde la
   jerarquía —que es justo lo contrario de lo que se busca aquí—. */
.footer-grupo{
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);
  /* anula el ancho de lectura que `.footer-brand p` le impone al párrafo de
     arriba: aquí no hay texto corrido que medir */
  max-width:none;
}
/* El rótulo va ARRIBA y no al lado. Al lado se parte en tres renglones
   —«UNA / EMPRESA / DE»— en cuanto la columna se estrecha, y forzarlo a un
   solo renglón lo deja desbordándose en pantallas medianas. */
.footer-grupo span{
  display:block;margin-bottom:.7rem;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);
}
.footer-grupo img{display:block;width:96px;height:auto}
.footer-nav h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.footer-nav li{margin-bottom:.55rem}
.footer-nav a{color:var(--gray);font-size:.94rem}
.footer-nav a:hover{color:var(--cyan-600)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem);padding:1.4rem 0;
}
.footer-bottom p{margin:0;font-size:.85rem;color:var(--gray)}

/* botón flotante de WhatsApp */
.wa-float{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.75);transition:transform .2s ease;
}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float:hover{transform:scale(1.08)}

/* =====================================================================
   ANIMACIÓN DE ENTRADA
   ===================================================================== */
/* La curva está en una variable porque la usan las dos reglas de abajo y
   tienen que ir sincronizadas. Es una desaceleración: arranca rápido y frena
   al final, que es como se mueven las cosas de verdad. La `ease` de antes
   también frenaba al final, pero además arrancaba lento, y ese arranque suave
   sobre 24 px hacía que el bloque pareciera quedarse pegado y luego saltar. */
.reveal{
  --curva:cubic-bezier(.22,.61,.36,1);
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--curva),transform .8s var(--curva);
}
.reveal.is-visible{opacity:1;transform:none}

/* Escalonado dentro de las rejillas
   ---------------------------------------------------------------------
   Sin esto, los cuatro valores (o las cuatro fotos de la galería) aparecen
   todos en el mismo instante: se ve como un corte de escena, no como algo que
   entra. Con 60 ms de diferencia entre uno y otro, el ojo los lee en cadena.

   El tope de ocho existe por la lista de servicios adicionales, que tiene más
   de veinte renglones: sin tope, el último tardaría más de un segundo en
   aparecer y el visitante ya iría en la siguiente sección. Del noveno en
   adelante entran todos juntos, y no se nota porque para entonces la cadena
   ya se leyó.

   Los hijos solo se esconden cuando el contenedor trae `.reveal`, y ese
   contenedor SIEMPRE termina con `.is-visible` —main.js se lo pone aunque el
   navegador no tenga IntersectionObserver—, así que no hay forma de que algo
   se quede escondido para siempre. */
.values.reveal>li,.flow.reveal>li,.supp.reveal>li,.types.reveal>li,.gallery.reveal>figure{
  opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--curva),transform .7s var(--curva);
}
.values.is-visible>li,.flow.is-visible>li,.supp.is-visible>li,
.types.is-visible>li,.gallery.is-visible>figure{opacity:1;transform:none}
/* Los retrasos van pegados a los mismos contenedores de arriba, no a
   `.reveal` a secas: si se pusieran en todos, cualquier hijo de una sección
   —una tarjeta con efecto al pasar el ratón, por ejemplo— heredaría el
   retraso y ese efecto respondería tarde. */
.values.is-visible>li:nth-child(2),.flow.is-visible>li:nth-child(2),
.supp.is-visible>li:nth-child(2),.types.is-visible>li:nth-child(2),
.gallery.is-visible>figure:nth-child(2){transition-delay:.06s}
.values.is-visible>li:nth-child(3),.flow.is-visible>li:nth-child(3),
.supp.is-visible>li:nth-child(3),.types.is-visible>li:nth-child(3),
.gallery.is-visible>figure:nth-child(3){transition-delay:.12s}
.values.is-visible>li:nth-child(4),.flow.is-visible>li:nth-child(4),
.supp.is-visible>li:nth-child(4),.types.is-visible>li:nth-child(4),
.gallery.is-visible>figure:nth-child(4){transition-delay:.18s}
.values.is-visible>li:nth-child(5),.flow.is-visible>li:nth-child(5),
.supp.is-visible>li:nth-child(5),.types.is-visible>li:nth-child(5){transition-delay:.24s}
.values.is-visible>li:nth-child(6),.flow.is-visible>li:nth-child(6),
.supp.is-visible>li:nth-child(6),.types.is-visible>li:nth-child(6){transition-delay:.3s}
.values.is-visible>li:nth-child(7),.flow.is-visible>li:nth-child(7),
.supp.is-visible>li:nth-child(7),.types.is-visible>li:nth-child(7){transition-delay:.36s}
.values.is-visible>li:nth-child(n+8),.flow.is-visible>li:nth-child(n+8),
.supp.is-visible>li:nth-child(n+8),.types.is-visible>li:nth-child(n+8){transition-delay:.42s}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .values{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  :root{--header-h:70px}
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;z-index:-1;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    padding:1rem 1.25rem 1.6rem;margin:0;
    transform:translateY(-130%);transition:transform .3s ease;max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav ul li{border-bottom:1px solid var(--line)}
  .nav ul a{display:block;padding:.9rem .2rem;font-size:1.02rem}
  .nav ul a::after{display:none}
  .nav ul a.nav-portal{border:0;border-radius:0;padding:.9rem .2rem;color:var(--cyan-700)}
  .nav ul a.nav-portal:hover{background:none;color:var(--cyan-700)}
  .nav-cta{margin-top:1.2rem;align-self:flex-start}

  .strip-inner{grid-template-columns:1fr;gap:.6rem;padding:1.4rem 0}
  .grid-2{grid-template-columns:1fr}

  /* En celular no hay hueco a la derecha que llenar: el icono vuelve al flujo
     y se pone debajo del texto, centrado y más chico. */
  .gestion-sello{
    position:static;transform:none;
    display:block;width:min(140px,45%);margin:2.2rem auto 0;
  }
  .nosotros-media{max-width:420px;margin-inline:auto;padding-bottom:2rem}

  /* portada apilada: primero el mensaje, luego el panel de fotos.
     Aquí el panel se centra: al no haber columna de texto al lado, pegarlo
     al borde derecho solo lo dejaría descuadrado. */
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-copy{justify-self:stretch;max-width:none;padding-bottom:2.5rem;padding-right:clamp(1.25rem,4vw,4.5rem)}
  /* Apilada, la columna de texto ocupa todo el ancho y la frase cabe entera a su
     tamaño natural hasta ~430 px. Por debajo de eso se parte en dos renglones en
     vez de encogerse: en un teléfono de 320 px tendría que bajar un 29 %. */
  .hero h1 .grad{white-space:normal;font-size:1.2em}
  /* Aquí no puede haber NADA de relleno. El panel se centra dentro de la caja de
     contenido, pero la mandala va absoluta con `top:50%` y ese porcentaje se mide
     contra la caja de relleno: cualquier padding la baja (o la corre) justo la
     mitad de su valor y los dos círculos dejan de ser concéntricos. La separación
     con la sección de abajo va por margen, que sí queda fuera de esa cuenta.
     Lo mismo aplica al padding lateral: el % del panel y el de la mandala tienen
     que medirse contra la misma caja para que la proporción 1.5 se conserve. */
  .hero-visual{
    --panel:min(80%,520px);--sangria:0px;
    min-height:0;justify-items:center;
    padding:0;margin-bottom:clamp(3rem,7vw,4.5rem);
  }
  .hero-mandala{right:calc(50% - var(--sangria))}
  .hero-stats{gap:1.6rem}
  .tasks{gap:.9rem}

  .service,.service-alt{grid-template-columns:1fr}
  .service-alt .service-media{order:0}
  .service-alt .service-body{order:1}
  .service-media{min-height:0;aspect-ratio:16/10}

  .mixto{grid-template-columns:1fr;text-align:left}
  .types{grid-template-columns:repeat(2,1fr)}
  .ba{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
}

@media (max-width:600px){
  body{font-size:16px}
  /* En celular la frase no cabe entera en un renglón sin encogerse a menos de la
     mitad, así que aquí se deja partir. El tope de 18.8vw no es para que quepa
     completa sino para que se parta en DOS y no en tres: «encargamos de todo»
     mide 4.4 em y tiene que caber en el ancho útil de la pantalla. */
  .title .script.una-linea{white-space:normal;font-size:min(2.2em,18.8vw)}
  .values,.flow,.types,.footer-inner{grid-template-columns:1fr}
  .tasks{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  /* En un teléfono angosto las etiquetas largas («Solicita mayor información»)
     no caben en un renglón y se salían de la caja: aquí se dejan partir y el
     botón crece de alto en vez de desbordarse. */
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .hero-stats{gap:1.2rem 2rem}
  .hero-stats li{max-width:none;flex:1 1 40%}
  .brand img{width:150px}
  .ba-pair{grid-template-columns:1fr auto 1fr;padding:1.1rem;gap:.6rem}
  .ba-arrow{font-size:1.2rem}
  .footer-bottom{flex-direction:column}
  .wa-float{width:52px;height:52px;right:.9rem;bottom:.9rem}
  .wa-float svg{width:26px;height:26px}
}

/* Teléfonos muy angostos (320–360 px). «@bguservicioscondominales» mide 12.3 em
   y es lo único del sitio que a este ancho no cabe junto a su icono; como tiene
   que leerse de corrido para que se entienda que todo es un usuario, aquí se le
   hace sitio en vez de partirlo: tarjetas de contacto más compactas, icono de
   36 px y un punto menos de letra. De 361 px en adelante ya cabe tal cual. */
@media (max-width:360px){
  .contact-list a{padding:.9rem;gap:.7rem}
  .c-ico{width:36px;height:36px}
  .c-ico svg{width:18px;height:18px}
  .contact-list span:last-child{font-size:.92rem}
  .contact-list li:last-child span:last-child{white-space:nowrap}
}

/* =====================================================================
   PÁGINAS DE TEXTO LEGAL  (aviso-de-privacidad.html)
   Va después de la consulta de 900 px a propósito: `.nav-simple` tiene que
   ganarle al menú desplegable de celular, que se abre con un botón que estas
   páginas no llevan. Sin esto, los enlaces del encabezado se quedarían
   escondidos y sin manera de abrirlos.
   ===================================================================== */
.nav-simple{
  position:static;transform:none;z-index:auto;
  flex-direction:row;align-items:center;
  background:none;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible;
}
.nav-simple ul{flex-direction:row;align-items:center;gap:1.5rem}
.nav-simple ul li{border:0}
.nav-simple ul a{display:inline;padding:0}

/* el encabezado es `sticky`, o sea que sí ocupa lugar en el flujo: aquí no hay
   que compensar su altura como en las secciones ancladas de la portada */
.legal{padding:clamp(2.5rem,5vw,4rem) 0 5rem}
/* Medida de lectura corta: son párrafos largos y seguidos, y a todo el ancho
   del contenedor (1180 px) el ojo pierde el renglón al saltar de línea. */
.legal .wrap{max-width:74ch}
.legal-title{font-size:clamp(2rem,4.5vw,2.9rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.25em}
.legal-fecha{font-size:.9rem;color:var(--gray);margin-bottom:2.2rem}
.legal-intro{font-size:1.1rem}
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:900;
  margin:2.8rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.legal h3{font-size:1.05rem;font-weight:700;color:var(--cyan-700);margin:1.8rem 0 .6rem}
/* la base del sitio quita las viñetas porque casi todas las listas son tarjetas;
   aquí sí hacen falta, es texto corrido */
.legal ul,.legal ol{margin:0 0 1.3rem;padding-left:1.35rem}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin-bottom:.55rem}
.legal li::marker{color:var(--cyan)}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal-dir{
  border-left:3px solid var(--cyan);padding:.2rem 0 .2rem 1rem;
  margin-bottom:1.3rem;line-height:1.55;
}
/* dato que el lector no debe pasar por alto */
.legal-destacado{
  background:var(--tint);border-radius:var(--r-md);
  padding:1.1rem 1.3rem;margin-bottom:1.3rem;
}
/* matiz o salvedad: se lee, pero en segundo plano */
.legal-nota{font-size:.94rem;color:var(--gray)}
.legal-tabla{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
.legal-tabla th,.legal-tabla td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
.legal-tabla th{color:var(--ink);font-weight:700;background:var(--tint)}
.legal-tabla tr:last-child td{border-bottom:0}
.legal-cierre{
  margin-top:2.8rem;padding:1.3rem 1.5rem;
  border-radius:var(--r-md);background:var(--tint);
  font-weight:700;color:var(--ink);
}
/* Marca de borrador: existe para que sea imposible publicar el documento a
   medias sin darse cuenta. Se borra junto con el recuadro que envuelve. */
.legal-borrador{
  background:#fff4f4;border:2px solid #d92d20;border-radius:var(--r-md);
  padding:1rem 1.2rem;margin-bottom:2.5rem;color:#912018;
}

@media (max-width:600px){
  .legal h2{margin-top:2.2rem}
  .legal-tabla{font-size:.9rem}
  .legal-tabla th,.legal-tabla td{padding:.6rem .5rem}
  .nav-simple ul{gap:1rem}
  .nav-simple ul a{font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .reveal,.reveal>*{opacity:1;transform:none}
}

@media print{
  .site-header,.wa-float,.hero-mandala{display:none}
  body{color:#000}
}