/* ============================================================
   PLATAFORMAS DE CALIDAD — HOJA DE ESTILOS ÚNICA
   Compartida por index.html y aviso-privacidad.html
   Sin dependencias. Sin !important.

   ÍNDICE
   01  Tokens
   02  Base
   03  Utilidades
   04  Header y navegación
   05  Footer
   06  Hero
   07  Normas
   08  Misión y visión
   09  Valores
   10  Política de calidad
   11  Nosotros
   12  Servicios
   13  Lightbox de fichas
   14  Testimonios
   15  Contacto
   16  Página de aviso de privacidad
   17  Responsive
   18  Impresión
   ============================================================ */


/* ---------- 01 Tokens ---------- */
:root{
  --navy:#1B2A4A;
  --navy-d:#0F1D35;
  --navy-m:#243459;
  --red:#C8312B;
  --red-l:#E04540;
  --red-d:#8B1A16;
  --red-soft:#F58A87;
  --white:#FFFFFF;
  --off:#F5F7FA;
  --text:#1B2A4A;
  --muted:#5A6A8A;
  --border:rgba(27,42,74,.10);

  --r-sm:10px;
  --r:12px;
  --r-lg:20px;

  --shadow-sm:0 8px 28px rgba(27,42,74,.12);
  --shadow:0 14px 38px rgba(27,42,74,.14);
  --shadow-lg:0 18px 50px rgba(27,42,74,.12);

  --header-h:92px;
  --pad-x:40px;
}


/* ---------- 02 Base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.7;
  overflow-x:hidden;
}

/* height:auto es obligatorio: sin él, cualquier <img> con atributo
   height="" se estira al valor del atributo en vez de mantener su
   proporción. Es lo que deformaba la foto del hero. */
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4{margin:0;font-family:'Playfair Display',Georgia,serif;line-height:1.15;}
p{margin:0;}

section[id],article[id]{scroll-margin-top:calc(var(--header-h) + 16px);}

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--navy);
  color:#fff;
  padding:12px 20px;
  z-index:100000;
  border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0;}


/* ---------- 03 Utilidades ---------- */
.wrap{max-width:1200px;margin:0 auto;}

.section{padding:95px var(--pad-x);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--red);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:currentColor;
  flex:none;
}
.eyebrow--light{color:var(--red-soft);}

.sec-title{
  font-size:clamp(2rem,3vw,2.7rem);
  color:var(--navy);
  margin:0 0 16px;
}
.sec-title--light{color:var(--white);}

.sec-body{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.75;
  max-width:640px;
}
.sec-body--light{color:rgba(255,255,255,.62);}

.head-center{text-align:center;margin-bottom:55px;}
.head-center .eyebrow{justify-content:center;}
.head-center .sec-body{margin-left:auto;margin-right:auto;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.875rem 1.75rem;
  border-radius:var(--r);
  font-family:inherit;
  font-weight:700;
  font-size:.9rem;
  border:0;
  cursor:pointer;
  transition:background .3s ease,transform .3s ease,border-color .3s ease,color .3s ease;
}
.btn--red{background:var(--red);color:var(--white);}
.btn--red:hover{background:var(--red-d);color:var(--white);transform:translateY(-2px);}
/* Fondo transparente sobre el hero navy = el botón se leía como un
   bloque azul. Con una capa blanca translúcida y borde más marcado
   se lee como botón secundario y no como parte del fondo. */
.btn--ghost{
  background:rgba(255,255,255,.12);
  color:var(--white);
  border:1.5px solid rgba(255,255,255,.50);
  backdrop-filter:blur(3px);
}
.btn--ghost:hover{
  background:var(--white);
  color:var(--navy);
  border-color:var(--white);
  transform:translateY(-2px);
}
.btn--light{background:var(--white);color:var(--navy);border:2px solid transparent;}
.btn--light:hover{background:var(--red);color:var(--white);border-color:var(--red);transform:translateY(-2px);}

/* Revelado al hacer scroll */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal--left{transform:translateX(-34px);}
.reveal--right{transform:translateX(34px);}
.reveal.is-visible{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}


/* ---------- 04 Header y navegación ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:9000;
  min-height:var(--header-h);
  background:var(--white);
  box-shadow:0 2px 10px rgba(27,42,74,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 55px;
}

.site-header__logo img{height:56px;width:auto;}

.site-nav{display:flex;align-items:center;gap:34px;}

.site-nav a{
  color:var(--navy);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  transition:color .3s ease;
}
.site-nav a:hover{color:var(--red);}

.btn-nav{
  background:var(--red);
  color:var(--white);
  padding:13px 26px;
  border-radius:var(--r);
  letter-spacing:.06em;
  transition:background .3s ease,transform .3s ease;
}
.btn-nav:hover{background:var(--red-d);color:var(--white);transform:translateY(-2px);}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:10px;
  color:var(--navy);
  font-size:1.4rem;
  cursor:pointer;
}


/* ---------- 05 Footer ---------- */
.site-footer{
  background:var(--navy-d);
  color:rgba(255,255,255,.72);
  padding:55px var(--pad-x) 30px;
}

.site-footer__grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

.site-footer__logo img{height:52px;width:auto;margin-bottom:16px;}
.site-footer p{font-size:.92rem;line-height:1.7;}
.site-footer h4{
  font-family:'Inter',sans-serif;
  color:var(--white);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.site-footer a{color:rgba(255,255,255,.82);transition:color .3s ease;}
.site-footer a:hover{color:var(--red-soft);}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:8px;font-size:.92rem;}

.site-footer__legal{
  max-width:1200px;
  margin:40px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:.85rem;
  color:rgba(255,255,255,.50);
}


/* ---------- 06 Hero ---------- */
.hero{
  min-height:700px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  background:linear-gradient(130deg,var(--navy-d) 0%,var(--navy) 50%,var(--navy-m) 100%);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-20%;
  right:-8%;
  width:700px;
  height:700px;
  background:radial-gradient(circle,rgba(200,49,43,.20) 0%,transparent 68%);
  pointer-events:none;
}

.hero__text{padding:6rem 3rem 5rem 5rem;position:relative;z-index:1;}

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(200,49,43,.14);
  border:1px solid rgba(200,49,43,.28);
  color:var(--red-soft);
  font-size:.73rem;
  font-weight:700;
  padding:.32rem .875rem;
  border-radius:100px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:1.75rem;
}

.hero h1{
  font-size:clamp(2.1rem,3.4vw,3.2rem);
  font-weight:800;
  color:var(--white);
  line-height:1.14;
  margin:0 0 1.5rem;
}
.hero h1 em{font-style:italic;color:#E8504A;}

.hero__text p{
  font-size:1rem;
  color:rgba(255,255,255,.68);
  max-width:470px;
  line-height:1.82;
  margin:0 0 2.5rem;
}

.btn-row{display:flex;gap:1rem;flex-wrap:wrap;}

.hero__img{padding:6rem 4rem 5rem 2rem;position:relative;z-index:1;}
.hero__img img{
  width:100%;
  max-width:560px;
  border-radius:var(--r-lg);
  box-shadow:0 16px 56px rgba(0,0,0,.28);
  object-fit:cover;
}

.divider{
  height:6px;
  background:linear-gradient(90deg,var(--navy-d),var(--navy),var(--red),var(--navy),var(--navy-d));
  opacity:.18;
}


/* ---------- 07 Normas ---------- */
.normas{background:linear-gradient(160deg,var(--navy-d) 0%,var(--navy) 100%);}

.normas__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}

.norma-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  padding:36px 28px 42px;
  text-align:center;
  transition:background .3s ease,transform .3s ease,border-color .3s ease;
}
.norma-card:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-5px);
  border-color:rgba(200,49,43,.38);
}

/* Placa blanca: los logos vienen con fondo blanco y flotarían feo sobre el navy */
.norma-card__plate{
  width:150px;
  height:150px;
  margin:0 auto 26px;
  background:var(--white);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.norma-card__plate img{max-width:100%;max-height:100%;object-fit:contain;}

.norma-card h3{
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 14px;
}
.norma-card p{color:rgba(255,255,255,.58);font-size:.95rem;line-height:1.65;}


/* ---------- 08 Misión y visión ---------- */
.mv{background:var(--off);}
.mv__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}

.mv-card{border-radius:var(--r-lg);padding:48px 40px;transition:transform .3s ease;}
.mv-card:hover{transform:translateY(-5px);}

.mv-card--mision{
  background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 100%);
  color:var(--white);
}
.mv-card--vision{
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:0 6px 28px rgba(27,42,74,.11);
}

.mv-card__icon{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  margin-bottom:24px;
}
.mv-card--mision .mv-card__icon{background:rgba(200,49,43,.18);color:var(--red-soft);}
.mv-card--vision .mv-card__icon{background:rgba(200,49,43,.10);color:var(--red);}

.mv-card__label{
  font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;
  margin-bottom:10px;
}
.mv-card--mision .mv-card__label{color:var(--red-soft);}
.mv-card--vision .mv-card__label{color:var(--red);}

.mv-card h3{font-size:1.6rem;margin:0 0 16px;}
.mv-card--mision h3{color:var(--white);}
.mv-card--vision h3{color:var(--navy);}

.mv-card p{font-size:.95rem;line-height:1.85;}
.mv-card--mision p{color:rgba(255,255,255,.70);}
.mv-card--vision p{color:var(--muted);}


/* ---------- 09 Valores ---------- */
.valores{background:var(--white);}
.valores__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

.valor-card{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:34px 28px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.valor-card:hover{transform:translateY(-5px);box-shadow:0 6px 28px rgba(27,42,74,.11);}

.valor-card__icon{
  width:50px;height:50px;
  background:rgba(200,49,43,.10);
  color:var(--red);
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;
  margin-bottom:20px;
  transition:background .3s ease,color .3s ease;
}
.valor-card:hover .valor-card__icon{background:var(--red);color:var(--white);}

.valor-card h4{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  font-size:.95rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:12px;
}
.valor-card p{color:var(--muted);font-size:.9rem;line-height:1.75;}


/* ---------- 10 Política de calidad ---------- */
.politica{background:#FCFCFD;}
.politica .head-center{margin-bottom:42px;}

.politica__card{
  background:var(--white);
  border:1px solid rgba(27,42,74,.08);
  border-radius:22px;
  padding:52px 50px 48px;
  position:relative;
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.politica__card::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--red-d),var(--red),var(--red-l),var(--red),var(--red-d));
}

.politica__icon{
  width:56px;height:56px;
  background:rgba(200,49,43,.10);
  border:1px solid rgba(200,49,43,.22);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:1.35rem;
  margin:0 auto 32px;
  box-shadow:0 8px 22px rgba(200,49,43,.12);
}

.politica__text{
  max-width:760px;margin:0 auto 32px;
  color:#46536E;font-size:1rem;line-height:2.05;font-style:italic;
}

.politica__firma{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(200,49,43,.10);
  border:1px solid rgba(200,49,43,.22);
  color:var(--red);
  font-size:.82rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.10em;
  padding:12px 24px;border-radius:100px;
}

/* Banner de aviso de privacidad */
.privacidad{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-m) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  padding:32px 40px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;margin-top:55px;
  box-shadow:0 16px 44px rgba(27,42,74,.18);
}
.privacidad__icon{
  width:54px;height:54px;
  background:rgba(200,49,43,.14);
  border:1px solid rgba(200,49,43,.32);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--red-soft);font-size:1.35rem;flex:none;
}
.privacidad__text{flex:1;}
.privacidad__text h4{
  font-family:'Inter',sans-serif;
  color:var(--white);font-size:1.1rem;font-weight:800;margin:0 0 6px;
}
.privacidad__text p{color:rgba(255,255,255,.62);font-size:.92rem;line-height:1.6;}


/* ---------- 11 Nosotros ---------- */
.nosotros{background:var(--off);}
.nosotros__grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.nosotros__img img{border-radius:18px;box-shadow:var(--shadow);width:100%;}

.nosotros__text h4{
  font-family:'Inter',sans-serif;
  color:var(--muted);
  font-size:.8rem;letter-spacing:.12em;font-weight:800;
  text-transform:uppercase;margin:0 0 8px;
}
.nosotros__text .sec-title{font-size:2.3rem;margin-bottom:22px;}
.nosotros__text p{color:var(--muted);font-size:1rem;line-height:1.85;}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;}
.stat{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;padding:22px;
  display:flex;align-items:center;gap:18px;
}
.stat__icon{
  width:44px;height:44px;
  background:rgba(200,49,43,.10);color:var(--red);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.stat strong{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  color:var(--navy);font-size:1.8rem;line-height:1;
}
.stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:6px;}


/* ---------- 12 Servicios ---------- */
.servicios{background:var(--white);}

.servicios__intro{
  display:grid;grid-template-columns:1fr 1fr;
  gap:70px;align-items:center;margin-bottom:70px;
}
.servicios__intro .sec-title{font-size:2.55rem;margin-bottom:24px;}
.servicios__intro p{margin-bottom:34px;}
.servicios__img img{border-radius:18px;box-shadow:var(--shadow);}

.servicios__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}

/* Tarjeta de ícono. La ficha (flyer) se abre en lightbox, no se
   incrusta: los flyers traen el título quemado y a 340 px no se leen. */
.servicio-card{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px 26px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
.servicio-card::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--red-l));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.servicio-card:hover{
  background:var(--white);
  transform:translateY(-6px);
  box-shadow:0 14px 35px rgba(27,42,74,.15);
  border-color:rgba(200,49,43,.25);
}
.servicio-card:hover::before{transform:scaleX(1);}

.servicio-card__icon{
  width:54px;height:54px;
  background:rgba(200,49,43,.10);color:var(--red);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;margin-bottom:22px;
  transition:background .3s ease,color .3s ease;
}
.servicio-card:hover .servicio-card__icon{background:var(--red);color:var(--white);}

.servicio-card h3{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  font-size:1.02rem;font-weight:800;
  text-transform:uppercase;line-height:1.35;
  margin:0 0 14px;
}
.servicio-card p{color:var(--muted);font-size:.94rem;line-height:1.75;flex:1;}

.servicio-card__btn{
  align-self:flex-start;
  margin-top:22px;
  background:transparent;border:0;padding:0;
  font-family:inherit;font-size:.85rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--red);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .25s ease,color .25s ease;
}
.servicio-card__btn:hover{gap:13px;color:var(--red-d);}


/* ---------- 13 Lightbox de fichas ---------- */
.lightbox{
  position:fixed;inset:0;z-index:10000;
  background:rgba(15,29,53,.92);
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  opacity:0;
  animation:lbIn .25s ease forwards;
  overflow-y:auto;
}
.lightbox[hidden]{display:none;}

@keyframes lbIn{to{opacity:1;}}

.lightbox__figure{
  margin:0;max-width:820px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.lightbox__figure img{
  width:auto;max-width:100%;max-height:78vh;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:var(--white);
}
.lightbox__figure figcaption{
  color:rgba(255,255,255,.82);
  font-size:.95rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  text-align:center;
}

.lightbox__close{
  position:fixed;top:22px;right:26px;
  width:48px;height:48px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:var(--white);font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.lightbox__close:hover{background:var(--red);border-color:var(--red);}

body.lb-open{overflow:hidden;}


/* ---------- 14 Testimonios ---------- */
.testimonios{background:var(--off);}
.testimonios__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}

.testimonio{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:34px;
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.testimonio:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(27,42,74,.14);}

.testimonio__mark{
  font-family:'Playfair Display',Georgia,serif;
  font-size:4rem;color:var(--red-l);opacity:.35;
  line-height:1;margin-bottom:10px;
}
.testimonio blockquote{
  margin:0 0 28px;
  color:var(--muted);font-size:.96rem;line-height:1.8;font-style:italic;
  flex:1;
}
.testimonio figcaption{display:flex;align-items:center;gap:14px;}
.testimonio figcaption img{
  width:46px;height:46px;border-radius:50%;
  object-fit:cover;border:2px solid #EEF1F7;
}
.testimonio figcaption span{color:var(--navy);font-weight:800;font-size:.95rem;}


/* ---------- 15 Contacto ---------- */
.contacto{background:var(--white);}
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start;}

.contacto__mapa iframe{
  width:100%;height:380px;border:0;
  border-radius:18px;box-shadow:var(--shadow);display:block;
}

.contacto__datos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px;}
.contacto__datos h4,
.form label{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  font-size:.78rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 8px;display:block;
}
.contacto__datos p,
.contacto__datos a{color:var(--navy);font-size:.95rem;line-height:1.65;}
.contacto__datos a:hover{color:var(--red);}

.redes{display:flex;gap:10px;}
.redes a{
  width:40px;height:40px;
  background:var(--off);
  border:1px solid rgba(27,42,74,.12);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);
  transition:background .3s ease,color .3s ease;
}
.redes a:hover{background:var(--red);color:var(--white);}

.form{display:flex;flex-direction:column;gap:18px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form__hp{position:absolute;left:-9999px;opacity:0;height:0;}

.form input,
.form select,
.form textarea{
  width:100%;
  background:var(--off);
  border:1px solid rgba(27,42,74,.12);
  border-radius:var(--r);
  padding:14px 16px;
  color:var(--navy);
  font-family:inherit;font-size:.95rem;
  outline:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color:var(--navy);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(27,42,74,.08);
}
.form textarea{min-height:135px;resize:vertical;}

.form__consent{
  display:flex;align-items:flex-start;gap:12px;
  color:var(--muted);font-size:.86rem;line-height:1.6;
}
.form__consent input{width:18px;height:18px;flex:none;margin-top:3px;}
.form__consent a{color:var(--red);font-weight:700;text-decoration:underline;}

.form button{width:max-content;padding:16px 28px;font-size:.95rem;font-weight:800;}

.form__msg{padding:14px 16px;border-radius:var(--r);font-weight:700;font-size:.92rem;}
.form__msg--ok{background:#ecfdf5;color:#166534;}
.form__msg--error{background:#fef2f2;color:#991b1b;}
.form__msg[hidden]{display:none;}


/* ---------- 16 Página de aviso de privacidad ---------- */
.aviso-hero{
  background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 55%,var(--navy-m) 100%);
  padding:80px var(--pad-x) 70px;
  position:relative;overflow:hidden;
}
.aviso-hero::before{
  content:'';position:absolute;
  top:-40%;right:-6%;width:620px;height:620px;
  background:radial-gradient(circle,rgba(200,49,43,.20) 0%,transparent 68%);
  pointer-events:none;
}
.aviso-hero__inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;}

.aviso-hero h1{
  color:var(--white);
  font-size:clamp(2rem,3.6vw,3rem);
  font-weight:800;margin:0 0 14px;
}
.aviso-hero p{color:rgba(255,255,255,.68);font-size:1.02rem;max-width:640px;line-height:1.8;}

.aviso-meta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;
}
.aviso-meta span{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.82);
  font-size:.82rem;font-weight:700;
  padding:9px 16px;border-radius:100px;
}

/* Cuerpo con índice lateral */
.aviso-body{
  max-width:1200px;margin:0 auto;
  padding:70px var(--pad-x) 90px;
  display:grid;grid-template-columns:270px 1fr;gap:60px;align-items:start;
}

/* Sin scroll interno: con 15 apartados cortos cabe en pantalla, y una
   barra propia dentro de la caja se veía como un elemento roto. */
.aviso-toc{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px 18px;
}
.aviso-toc h2{
  font-family:'Inter',sans-serif;
  font-size:.75rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;
}
.aviso-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.aviso-toc li{counter-increment:toc;margin-bottom:2px;}
.aviso-toc a{
  display:flex;gap:9px;
  padding:6px 9px;border-radius:8px;
  font-size:.82rem;line-height:1.4;color:var(--muted);
  transition:background .2s ease,color .2s ease;
}
.aviso-toc a::before{
  content:counter(toc) ".";
  font-weight:800;color:var(--red);flex:none;min-width:20px;
}
.aviso-toc a:hover{background:rgba(200,49,43,.08);color:var(--navy);}
.aviso-toc a.is-active{background:var(--navy);color:var(--white);}
.aviso-toc a.is-active::before{color:var(--red-soft);}

.aviso-toc__toggle{display:none;}

.aviso-content{max-width:78ch;}

.aviso-content section{
  padding-bottom:44px;
  margin-bottom:44px;
  border-bottom:1px solid var(--border);
}
.aviso-content section:last-of-type{border-bottom:0;}

.aviso-content h2{
  display:flex;align-items:baseline;gap:14px;
  font-size:1.55rem;color:var(--navy);margin:0 0 20px;
}
.aviso-content h2 .num{
  font-family:'Inter',sans-serif;
  font-size:.85rem;font-weight:800;
  color:var(--red);
  background:rgba(200,49,43,.10);
  border-radius:8px;padding:5px 11px;flex:none;
}

.aviso-content h3{
  font-family:'Inter',sans-serif;
  font-size:.88rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);
  margin:32px 0 14px;
}

.aviso-content p{
  color:#46536E;font-size:1rem;line-height:1.9;margin-bottom:18px;
}
.aviso-content p:last-child{margin-bottom:0;}

.aviso-content ul{margin:0 0 18px;padding:0;list-style:none;}
.aviso-content ul li{
  position:relative;
  padding-left:26px;margin-bottom:13px;
  color:#46536E;font-size:.98rem;line-height:1.85;
}
.aviso-content ul li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);opacity:.65;
}
.aviso-content ul li strong{color:var(--navy);}
.aviso-content a{color:var(--red);font-weight:600;text-decoration:underline;}

/* Cajas destacadas */
.callout{
  border-radius:var(--r-lg);
  padding:26px 30px;
  margin:26px 0;
  display:flex;gap:20px;align-items:flex-start;
}
.callout__icon{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.callout h4{
  font-family:'Inter',sans-serif;
  font-size:.98rem;font-weight:800;margin:0 0 8px;
}
.callout p{font-size:.94rem;line-height:1.75;margin-bottom:0;}
.callout p + p{margin-top:10px;}

.callout--info{background:var(--off);border:1px solid var(--border);}
.callout--info .callout__icon{background:rgba(27,42,74,.08);color:var(--navy);}
.callout--info h4{color:var(--navy);}
.callout--info p{color:var(--muted);}

.callout--alert{background:rgba(200,49,43,.06);border:1px solid rgba(200,49,43,.20);}
.callout--alert .callout__icon{background:rgba(200,49,43,.12);color:var(--red);}
.callout--alert h4{color:var(--red-d);}
.callout--alert p{color:#6B4B49;}

.callout--dark{
  background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 100%);
  border:1px solid rgba(255,255,255,.08);
}
.callout--dark .callout__icon{background:rgba(200,49,43,.18);color:var(--red-soft);}
.callout--dark h4{color:var(--white);}
.callout--dark p{color:rgba(255,255,255,.70);}
.callout--dark a{color:var(--red-soft);}

/* Tarjetas de derechos ARCO */
.arco{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0;}
.arco-card{
  background:var(--off);
  border:1px solid var(--border);
  border-left:4px solid var(--red);
  border-radius:var(--r);
  padding:22px 24px;
}
.arco-card h4{
  font-family:'Inter',sans-serif;
  color:var(--navy);font-size:.95rem;font-weight:800;margin:0 0 8px;
}
.arco-card p{font-size:.92rem;line-height:1.7;color:var(--muted);margin:0;}

/* Botón de volver arriba */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:8000;
  width:48px;height:48px;border-radius:50%;
  background:var(--red);color:var(--white);border:0;
  font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(200,49,43,.35);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease,background .3s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;}
.to-top:hover{background:var(--red-d);}


/* ---------- 17 Responsive ---------- */
@media(max-width:1024px){
  .aviso-body{grid-template-columns:1fr;gap:32px;}

  .aviso-toc{
    position:static;max-height:none;
    padding:0;background:transparent;border:0;
  }
  .aviso-toc h2{display:none;}
  .aviso-toc__toggle{
    display:flex;width:100%;
    align-items:center;justify-content:space-between;gap:12px;
    background:var(--off);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:16px 20px;
    font-family:inherit;font-size:.85rem;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--navy);cursor:pointer;
  }
  .aviso-toc ol{
    display:none;
    margin-top:12px;
    background:var(--off);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px;
  }
  .aviso-toc.is-open ol{display:block;}
}

@media(max-width:960px){
  :root{--pad-x:24px;}

  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero__text{padding:4rem 24px 2rem;}
  .hero__img{padding:0 24px 3rem;}

  .section{padding:70px var(--pad-x);}
  .aviso-hero{padding:60px var(--pad-x) 55px;}
  .aviso-body{padding:50px var(--pad-x) 70px;}

  .normas__grid,
  .mv__grid,
  .valores__grid,
  .servicios__intro,
  .servicios__grid,
  .testimonios__grid,
  .contacto__grid,
  .contacto__datos,
  .form__row,
  .arco,
  .site-footer__grid{grid-template-columns:1fr;}

  .nosotros__grid{grid-template-columns:1fr;gap:40px;}

  .privacidad{flex-direction:column;text-align:center;}
  .politica__card{padding:42px 26px;}
  .politica__text{font-size:.95rem;line-height:1.9;}

  .form button{width:100%;}
  .callout{flex-direction:column;gap:14px;}
}

@media(max-width:800px){
  .site-header{padding:0 20px;min-height:76px;}
  .site-header__logo img{height:46px;}
  .nav-toggle{display:block;}

  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 20px 20px;
    box-shadow:0 12px 24px rgba(27,42,74,.12);
    display:none;
  }
  .site-nav.is-open{display:flex;}
  .site-nav a{padding:14px 0;border-bottom:1px solid var(--border);}
  .btn-nav{text-align:center;border-bottom:0;margin-top:14px;padding:14px 26px;}

  :root{--header-h:76px;}
}

@media(max-width:600px){
  .btn-row{flex-direction:column;}
  .btn-row .btn{width:100%;}
  .hero h1{font-size:2.1rem;}
  .stats{grid-template-columns:1fr;}
  .aviso-content h2{flex-direction:column;gap:10px;font-size:1.35rem;}
  .aviso-content h2 .num{align-self:flex-start;}
}


/* ---------- 18 Impresión ---------- */
@media print{
  .site-header,.site-footer,.aviso-toc,.to-top,.nav-toggle,.lightbox{display:none;}
  body{color:#000;}
  .aviso-hero{background:none;padding:0 0 24px;}
  .aviso-hero h1{color:#000;}
  .aviso-hero p,.aviso-meta span{color:#333;background:none;border:0;}
  .aviso-body{display:block;padding:0;}
  .aviso-content{max-width:none;}
  .aviso-content section{page-break-inside:avoid;border-bottom:1px solid #ccc;}
  .aviso-content p,.aviso-content ul li{color:#000;font-size:11pt;line-height:1.55;}
  .callout,.arco-card{border:1px solid #999;background:none;}
  .callout--dark h4,.callout--dark p,.callout--dark a{color:#000;}
  a{color:#000;text-decoration:underline;}
}


/* ============================================================
   19  BOTÓN FLOTANTE DE WHATSAPP
   Recupera la función que daba el plugin de WordPress.
   Sin librerías: es un enlace con estilo.
   ============================================================ */

.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:8600;              /* sobre el contenido, bajo el lightbox (10000) */

  display:flex;
  align-items:center;
  height:58px;
  padding:0 17px;
  border-radius:29px;

  /* Verde oficial de WhatsApp a propósito. El sitio es navy y rojo,
     pero este color se reconoce al instante y ese reconocimiento es
     justo lo que hace que la gente le dé clic. */
  background:#25D366;
  color:#fff;

  box-shadow:0 10px 30px rgba(37,211,102,.40);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.wa-float:hover{
  background:#1EBE5A;
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(37,211,102,.50);
}

.wa-float__icon{
  font-size:1.65rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  flex:none;
}

/* La etiqueta aparece al pasar el cursor. Se anima max-width en vez
   de width porque width:auto no es animable en CSS. */
.wa-float__label{
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.02em;
  transition:max-width .35s ease, opacity .25s ease, margin-left .35s ease;
}

.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{
  max-width:180px;
  opacity:1;
  margin-left:11px;
}

/* Anillo que late dos veces al cargar, para que la vista lo encuentre.
   Se detiene solo: no queda parpadeando de forma molesta. */
.wa-float::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#25D366;
  z-index:-1;
  animation:waPulso 2.2s ease-out 2;
}

@keyframes waPulso{
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.45); opacity:0;   }
  100% { transform:scale(1.45); opacity:0;   }
}

/* En el aviso de privacidad conviven el botón de WhatsApp y el de
   volver arriba. Sin esto quedarían uno encima del otro. */
.to-top{ bottom:96px; }

@media(max-width:800px){
  .wa-float{
    right:18px;
    bottom:18px;
    width:56px;
    height:56px;
    padding:0;
    justify-content:center;
  }
  /* En móvil la etiqueta no se muestra: no hay cursor que la active
     y ocuparía espacio útil de pantalla. */
  .wa-float__label{ display:none; }
  .to-top{ right:18px; bottom:86px; }
}

@media(prefers-reduced-motion:reduce){
  .wa-float::before{ animation:none; }
  .wa-float:hover{ transform:none; }
  .wa-float__label{ transition:none; }
}

@media print{
  .wa-float{ display:none; }
}