@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url("/fuentes/f-5875ec71.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url("/fuentes/f-9822a208.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fuentes/f-f8a76ad1.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fuentes/f-9fc55ade.woff2") format("woff2")}

:root{
  /* Paleta de marca, medida sobre la web actual */
  --marino:#242A56;
  --tinta:#0E1633;
  --verde:#4C9A2A;
  --verde-osc:#3D7D22;
  --crema:#FFF6DD;
  --dorado:#F2B705;

  /* Neutros con sesgo azul: elegidos, no heredados */
  --gris:#5B6178;
  --gris-claro:#8B90A6;
  --papel:#FBFAF8;
  --linea:#E6E3DC;

  --sombra-s:0 2px 10px -4px rgba(14,22,51,.14);
  --sombra-m:0 14px 40px -20px rgba(14,22,51,.30);
  --sombra-l:0 30px 70px -34px rgba(14,22,51,.42);

  --dur:.22s;
  --curva:cubic-bezier(.4,0,.2,1);
  --ancho:1200px;
  --lado:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
/* El encabezado se queda pegado arriba: al saltar a un ancla hay que
   dejarle sitio o tapa el principio de la sección de destino. */
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;
  background:var(--papel);
  color:var(--marino);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:3px}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--lado)}

h1,h2,h3{font-family:"Lexend","DM Sans",sans-serif;font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.05}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12}
h3{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.25}
p{margin:0}

/* La etiqueta de concepto: el vocabulario de una factura */
.concepto{
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde);display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;
}
.concepto::before{content:"";width:26px;height:2px;background:var(--dorado);flex:none}

.cifra{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:"DM Sans",sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;text-decoration:none;cursor:pointer;
  padding:1rem 1.75rem;border-radius:6px;border:2px solid transparent;
  transition:transform var(--dur) var(--curva),box-shadow var(--dur) var(--curva),
             background-color var(--dur) var(--curva),color var(--dur) var(--curva);
}
.btn--verde{background:var(--verde);color:#fff}
.btn--verde:hover{background:var(--verde-osc);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(76,154,42,.65)}
.btn--verde:active{transform:translateY(0)}
.btn--linea{border-color:currentColor;color:var(--marino)}
.btn--linea:hover{background:var(--marino);color:#fff;transform:translateY(-2px)}
.btn--claro{border-color:rgba(255,255,255,.35);color:#fff}
.btn--claro:hover{background:#fff;color:var(--marino);border-color:#fff}
.btn svg{width:17px;height:17px;transition:transform var(--dur) var(--curva)}
.btn:hover svg{transform:translateX(3px)}

/* ---------- Cabecera ---------- */
.top{
  position:sticky;top:0;z-index:50;background:rgba(251,250,248,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);
  transition:box-shadow var(--dur) var(--curva);
}
.top.scrolled{box-shadow:var(--sombra-s)}
.top__in{display:flex;align-items:center;gap:2rem;height:74px}
.marca{display:block;flex:none;line-height:0}
.marca img{width:clamp(150px,15vw,186px);height:auto}
.nav{display:flex;gap:2rem;margin-left:auto}
.nav a{
  position:relative;text-decoration:none;font-size:.94rem;font-weight:500;
  color:var(--marino);padding:.35rem 0;transition:color var(--dur) var(--curva);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--verde);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--curva);
}
.nav a:hover{color:var(--verde)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--verde)}
.top .btn{padding:.7rem 1.3rem;font-size:.88rem}

/* ---------- El menú en móvil ---------- */
/* El botón de las tres rayas. En escritorio no existe. */
.hamb{
  display:none;flex:none;cursor:pointer;
  width:44px;height:44px;padding:0;margin-left:.2rem;
  background:none;border:1px solid var(--linea);border-radius:10px;
  place-items:center;align-content:center;gap:5px;
  transition:border-color var(--dur) var(--curva),background-color var(--dur) var(--curva);
}
.hamb:hover{border-color:var(--marino)}
.hamb span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--marino);
  transition:transform var(--dur) var(--curva),opacity var(--dur) var(--curva);
}
/* Abierto, las tres rayas se convierten en aspa */
.hamb[aria-expanded="true"]{background:var(--marino);border-color:var(--marino)}
.hamb[aria-expanded="true"] span{background:#fff}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:880px){
  .hamb{display:grid}
  /* El menú pasa a ser un panel que baja desde la cabecera */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:var(--papel);
    border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra-m);
    padding:.35rem var(--lado) 1rem;
    /* cerrado por defecto; se abre con el botón */
    display:none;
  }
  .nav[data-abierto]{display:flex}
  .nav a{
    padding:.95rem 0;font-size:1.02rem;
    border-bottom:1px solid var(--linea);
  }
  .nav a:last-child{border-bottom:0}
  /* el subrayado animado del escritorio no encaja en una lista vertical */
  .nav a::after{display:none}
  .nav a[aria-current]{color:var(--verde);font-weight:700}
  /* que el botón principal no ahogue al de menú en pantallas estrechas */
  .top .btn{padding:.68rem 1rem;font-size:.82rem}
  .top__in{gap:.65rem}
}
@media(max-width:380px){
  .top .btn{padding:.62rem .8rem;font-size:.78rem}
  .marca img{width:130px}
}

/* ---------- Hero: la fotografía ocupa el fondo, como en la web actual ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem);isolation:isolate}
.hero__fondo{position:absolute;inset:0;z-index:-2}
.hero__fondo img{width:100%;height:100%;object-fit:cover;object-position:70% 45%}
/* Velo para que el texto se lea sobre la foto sin apagarla */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(251,250,248,.97) 0%,
      rgba(251,250,248,.93) 28%,
      rgba(251,250,248,.70) 46%,
      rgba(251,250,248,.28) 62%,
      rgba(251,250,248,.06) 78%),
    linear-gradient(to bottom, rgba(255,246,221,.35), transparent 40%);
}
@media(max-width:960px){
  .hero::before{
    background:linear-gradient(to bottom,
      rgba(251,250,248,.96) 0%,
      rgba(251,250,248,.90) 52%,
      rgba(251,250,248,.72) 100%);
  }
}
.hero__in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:960px){.hero__in{grid-template-columns:1fr}}
.hero h1 span{color:var(--verde)}
.hero__bajada{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--gris);max-width:46ch;margin-top:1.4rem}
.hero__acc{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero__pie{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.2rem;font-size:.87rem;color:var(--gris)}
.hero__pie span{display:flex;align-items:center;gap:.5rem}
.hero__pie svg{width:17px;height:17px;color:var(--verde);flex:none}

/* El recibo: el objeto real del negocio, flotando sobre la fotografía */
.hero__vis{position:relative}
.recibo{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-radius:14px;box-shadow:var(--sombra-l);
  border:1px solid rgba(255,255,255,.9);overflow:hidden;
}
.recibo__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.4rem;background:var(--marino);color:#fff;
}
.recibo__top b{font-family:"Lexend",sans-serif;font-size:.94rem;font-weight:500;letter-spacing:.01em}
.recibo__sello{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.14);padding:.3rem .6rem;border-radius:99px;
}
.recibo__cuerpo{padding:1.4rem}
.linea{
  display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px dashed var(--linea);font-size:.9rem;
}
.linea:last-of-type{border-bottom:0}
.linea__c{color:var(--gris)}
.linea__a{color:var(--gris-claro);text-decoration:line-through;font-size:.84rem}
.linea__b{font-weight:700;color:var(--marino);min-width:5.2rem;text-align:right}
.linea--baja .linea__b{color:var(--verde)}
.recibo__total{
  margin-top:.4rem;padding:1.15rem 1.4rem;background:var(--crema);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:2px solid var(--dorado);
}
.recibo__total span{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--marino)}
.recibo__total b{font-family:"Lexend",sans-serif;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;color:var(--verde);letter-spacing:-.02em}
.recibo__nota{padding:.85rem 1.4rem;font-size:.76rem;color:var(--gris-claro);border-top:1px solid var(--linea)}

/* ---------- Valores ---------- */
.valores{padding-block:clamp(3.5rem,6vw,5.5rem);background:#fff;border-block:1px solid var(--linea)}
/* Los cuatro en una sola fila: el icono va arriba para que el texto
   disponga del ancho completo de su columna. Con el icono al lado,
   a 4 columnas le quedarían unos 200 px y caería en cuatro líneas. */
.valores__rej{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,3vw,2.75rem) clamp(1.5rem,2.8vw,2.75rem);
}
@media(max-width:1040px){.valores__rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.valores__rej{grid-template-columns:1fr}}

.valor{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;min-width:0}
.valor__ico{flex:none;width:66px}
.valor__ico svg{width:100%;height:auto;transition:transform .3s var(--curva)}
.valor:hover .valor__ico svg{transform:scale(1.07)}
.valor__cuerpo{min-width:0}
.valor h3{font-size:clamp(1.14rem,1.45vw,1.32rem)}
.valor p{color:var(--gris);font-size:.92rem;margin-top:.4rem;text-wrap:pretty}
.valor__cuerpo::after{content:"";display:block;width:52px;height:1px;background:var(--dorado);margin-top:1rem}

/* ---------- Proceso: sobre el marino de marca ---------- */
.proceso{padding-block:clamp(2.1rem,3.5vw,2.9rem);background:var(--marino);color:#fff}
.proceso__cab{max-width:52ch;margin-bottom:clamp(1.2rem,2vw,1.6rem)}
.proceso__cab h2{color:#fff}
.proceso__cab p{color:rgba(255,255,255,.74);margin-top:1rem}
/* la etiqueta de concepto se mantiene en verde, como pide la marca */
.proceso .concepto{color:var(--verde)}
.proceso .concepto::before{background:var(--verde)}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);counter-reset:p}
@media(max-width:840px){.pasos{grid-template-columns:1fr}}
.paso{
  background:#fff;border:1px solid transparent;border-radius:12px;
  padding:clamp(1.35rem,2vw,1.7rem);position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .24s var(--curva),box-shadow .24s var(--curva);
}
.paso:hover{transform:translateY(-5px);box-shadow:0 22px 46px -22px rgba(0,0,0,.5)}
/* La tarjeta es blanca dentro de una sección azul: hay que devolver
   el color al texto o lo hereda en blanco y desaparece. */
.paso__n{
  counter-increment:p;font-family:"Lexend",sans-serif;font-size:.78rem;font-weight:700;
  color:var(--verde);letter-spacing:.1em;display:block;
}
.paso__n::before{content:"0" counter(p)}
.paso__ico{width:66px;margin-bottom:1rem}
.paso__ico svg,
.paso__ico img{
  width:100%;height:auto;aspect-ratio:1;display:block;
  transition:transform .3s var(--curva);
}
.paso:hover .paso__ico svg,
.paso:hover .paso__ico img{transform:scale(1.06)}
.paso h3{color:var(--marino);margin:.35rem 0 .5rem}
.paso p{color:var(--gris);font-size:.93rem;margin:0}

/* ---------- Segmentos ---------- */
.segs{padding-block:clamp(2.1rem,3.4vw,2.8rem);background:var(--crema)}
.segs__rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,1.85rem);margin-top:clamp(1.25rem,2.2vw,1.7rem)}
@media(max-width:800px){.segs__rej{grid-template-columns:1fr}}
.seg{
  background:#fff;border-radius:14px;padding:clamp(1.45rem,2.2vw,1.9rem);
  display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--sombra-s);
  transition:transform .24s var(--curva),box-shadow .24s var(--curva);
}
.seg:hover{transform:translateY(-5px);box-shadow:var(--sombra-m)}
.seg__ico{width:64px;height:64px;border-radius:50%;background:#EAF3E4;display:grid;place-items:center;flex:none}
.seg__ico svg{width:34px;height:34px;color:var(--marino)}
.seg p{color:var(--gris);font-size:.95rem;flex:1}
.seg .btn{align-self:flex-start;margin-top:.4rem}

/* =========================================================
   PÁGINA DE EMPRESAS
   La cabecera de la web actual es una sola imagen de 1,8 MB que
   lleva dentro el dato del ahorro y tres etiquetas. Aquí la
   fotografía va por un lado (57 KB) y los textos son texto.
   ========================================================= */

.ehero{padding-block:clamp(2.2rem,4vw,3.4rem) clamp(2.5rem,4.5vw,4rem);background:var(--papel)}
.ehero__in{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,4.5vw,4rem);align-items:center;
}
@media(max-width:940px){
  .ehero__in{grid-template-columns:1fr;gap:2.25rem}
  .ehero__fig{order:-1;max-width:26rem;margin-inline:auto}
}
.ehero__txt h1{margin-bottom:1.1rem}
.ehero__txt h1 span{color:var(--verde)}

/* La fotografía, con el módulo del ahorro asomando por la esquina */
.ehero__fig{position:relative;margin:0;min-width:0}
.ehero__fig>img{
  width:100%;height:auto;display:block;border-radius:18px;
  aspect-ratio:4/4.4;object-fit:cover;object-position:52% 32%;
  box-shadow:var(--sombra-m);
}
.ahorro{
  position:absolute;right:clamp(-.5rem,-1vw,-1.5rem);bottom:clamp(1rem,3vw,2rem);
  width:min(19rem,78%);
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:clamp(1rem,1.6vw,1.3rem);box-shadow:0 24px 50px -22px rgba(14,22,51,.42);
}
/* Al apilarse la cabecera, la fotografía se queda pequeña y la tarjeta
   llegaba a taparle dos tercios. Sigue flotando sobre la foto —que es
   como debe leerse— pero con dos ajustes: la foto se hace más alta, y la
   tarjeta sobresale por abajo en vez de quedarse dentro. Así flota y deja
   ver la escena. */
@media(max-width:940px){
  .ehero__fig{max-width:30rem;margin-bottom:5.5rem}
  .ehero__fig>img{aspect-ratio:4/5.2}
  .ahorro{
    left:1rem;right:1rem;
    bottom:-4.5rem;
    width:auto;
    padding:1rem 1.15rem;
    box-shadow:0 20px 44px -20px rgba(14,22,51,.42);
  }
  /* algo más compacta, para que sobresalga lo justo */
  .ahorro__precio{margin-bottom:.7rem;padding-bottom:.65rem}
  .ahorro__g{height:2.4rem}
  .ahorro__p{font-size:.72rem}
}
/* El precio destacado, encima del ahorro: es el gancho de la oferta, así
   que va en el verde de marca y con la cifra a mayor tamaño que el texto. */
.ahorro__precio{
  display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
  margin:0 0 .9rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--linea);
}
.ahorro__precio b{
  font-family:"Lexend",sans-serif;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;
  color:var(--verde);letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.ahorro__precio span{font-size:.82rem;font-weight:700;color:var(--marino)}
/* La aclaración salta a su propia línea: al anunciar un precio hay que
   decir qué incluye, o el cliente lo compara con el total de su factura. */
.ahorro__precio small{
  flex:1 1 100%;font-size:.73rem;font-weight:400;line-height:1.4;
  color:var(--gris-claro);margin-top:.3rem;
}
.ahorro__t{font-size:.8rem;font-weight:700;color:var(--gris);margin:0}
.ahorro__n{
  font-family:"Lexend",sans-serif;font-size:clamp(1.75rem,3vw,2.3rem);font-weight:700;
  color:var(--verde);letter-spacing:-.03em;line-height:1.1;margin:.15rem 0 .5rem;
  font-variant-numeric:tabular-nums;
}
.ahorro__g{width:100%;height:2.9rem;display:block}
.ahorro__p{font-size:.76rem;color:var(--gris-claro);margin:.5rem 0 0}

/* Los tres sellos que venían dentro de la imagen */
.sellos{padding-block:clamp(1.5rem,2.6vw,2.2rem);background:var(--crema)}
.sellos__rej{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);list-style:none;margin:0;padding:0;
}
@media(max-width:760px){.sellos__rej{grid-template-columns:1fr;gap:1.1rem}}
.sellos__rej li{display:flex;align-items:center;gap:.9rem;min-width:0}
.sellos__rej svg{width:38px;height:38px;flex:none;color:var(--marino)}
.sellos__rej b{display:block;font-family:"Lexend",sans-serif;font-size:1.08rem;color:var(--marino);line-height:1.25}
.sellos__rej span{display:block;font-size:.9rem;color:var(--gris);margin-top:.1rem}

/* Qué hacemos por tu empresa */
.servicios{padding-block:clamp(2.4rem,4.2vw,3.6rem)}
.servicios__rej{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.4rem,2.4vw,2rem);
}
@media(max-width:1040px){.servicios__rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.servicios__rej{grid-template-columns:1fr}}
.serv{
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:clamp(1.25rem,1.9vw,1.6rem);min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  transition:transform .24s var(--curva),box-shadow .24s var(--curva),border-color .24s var(--curva);
}
.serv:hover{transform:translateY(-5px);box-shadow:var(--sombra-m);border-color:transparent}
/* Estos iconos vienen dibujados con el símbolo al 58 % de su círculo, que
   se queda corto: dentro de un círculo de 70 px el símbolo medía 23. Se
   sube al 82 % para que llene mejor, sin llegar a tocar el borde. */
.aa-ico__dibujo{transform:translate(50px,50px) scale(.82) translate(-50px,-50px)}

/* Estos iconos ya llevan su propio fondo circular dentro del dibujo, así
   que no necesitan otra caja detrás: metidos en una, el símbolo quedaba
   diminuto. Aquí ocupan todo su hueco. */
.serv__ico{
  width:70px;height:70px;flex:none;display:grid;place-items:center;
}
.serv__ico svg{width:100%;height:100%;transition:transform .3s var(--curva)}
.serv:hover .serv__ico svg{transform:scale(1.07)}
.serv h3{font-size:1.13rem;margin:.15rem 0 0;color:var(--marino)}
.serv p{color:var(--gris);font-size:.95rem;margin:0}

/* Qué revisamos en tu factura: una lista de conceptos explicados. Va en
   <dl> porque es exactamente eso, términos con su definición. */
.revisamos{padding-block:clamp(2.6rem,4.6vw,4rem);background:var(--crema)}
.revisamos__intro{color:var(--gris);margin-top:.9rem}
.revisamos__lista{
  margin:clamp(1.6rem,2.8vw,2.4rem) 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
@media(max-width:820px){.revisamos__lista{grid-template-columns:1fr}}
.revisamos__lista>div{
  background:#fff;border-radius:14px;padding:clamp(1.35rem,2.2vw,1.8rem);
  box-shadow:var(--sombra-s);min-width:0;
  transition:transform .24s var(--curva),box-shadow .24s var(--curva);
}
.revisamos__lista>div:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.revisamos__lista dt{
  font-family:"Lexend",sans-serif;font-size:1.08rem;font-weight:700;
  color:var(--marino);line-height:1.3;margin:0 0 .6rem;
  display:flex;align-items:center;gap:.7rem;
}
.revisamos__lista dt::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--verde);box-shadow:0 0 0 4px rgba(76,154,42,.16);
}
.revisamos__lista dd{margin:0;color:var(--gris);font-size:.95rem;line-height:1.65}

/* Cierre de la página */
.cierre{padding-block:clamp(2.4rem,4.2vw,3.6rem);background:var(--crema)}
.cierre__in{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(1.5rem,3.5vw,3rem);align-items:center;
}
@media(max-width:860px){.cierre__in{grid-template-columns:1fr}}
.cierre__in h2{margin-bottom:.9rem}
.cierre__in>div>p:last-child{color:var(--gris);max-width:56ch;margin:0}
.cierre__acc{display:flex;flex-wrap:wrap;gap:.75rem}

/* =========================================================
   CHAT DE ATENCIÓN
   Abajo a la derecha, sin tapar nada.
   ========================================================= */
.chat{position:fixed;right:1.25rem;bottom:1.25rem;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.chat__oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* El botón redondo */
.chat__abrir{
  width:60px;height:60px;flex:none;border-radius:50%;cursor:pointer;border:0;
  background:var(--marino);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(14,22,51,.55);
  transition:transform var(--dur) var(--curva),background-color var(--dur) var(--curva);
}
.chat__abrir:hover{background:var(--verde);transform:translateY(-2px)}
.chat__abrir svg{width:26px;height:26px;grid-area:1/1;transition:opacity var(--dur) var(--curva),transform var(--dur) var(--curva)}
.chat__ico-cerrar{opacity:0;transform:rotate(-90deg)}
.chat__abrir[aria-expanded="true"] .chat__ico-abrir{opacity:0;transform:rotate(90deg)}
.chat__abrir[aria-expanded="true"] .chat__ico-cerrar{opacity:1;transform:none}

/* El panel */
.chat__panel{
  width:min(23rem,calc(100vw - 2.5rem));
  max-height:min(30rem,calc(100vh - 8rem));
  background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(14,22,51,.5);
  display:flex;flex-direction:column;overflow:hidden;
  animation:chat-entra .24s var(--curva) both;
}
.chat__panel[hidden]{display:none}
@keyframes chat-entra{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat__panel{animation:none}}

.chat__cab{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;background:var(--marino);color:#fff;flex:none;
}
.chat__t{font-family:"Lexend",sans-serif;font-size:.98rem;font-weight:700;margin:0}
.chat__s{font-size:.78rem;color:rgba(255,255,255,.72);margin:.15rem 0 0}
.chat__x{background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;padding:.2rem;line-height:0;transition:color var(--dur) var(--curva)}
.chat__x:hover{color:#fff}
.chat__x svg{width:18px;height:18px}

.chat__mensajes{
  flex:1;overflow-y:auto;padding:1.1rem;
  display:flex;flex-direction:column;gap:.7rem;
  background:var(--papel);
}
.chat__msj{
  max-width:85%;padding:.7rem .9rem;border-radius:14px;
  font-size:.9rem;line-height:1.55;
  animation:chat-msj .2s var(--curva) both;
}
@keyframes chat-msj{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat__msj{animation:none}}
.chat__msj--bot{align-self:flex-start;background:#fff;border:1px solid var(--linea);color:var(--marino);border-bottom-left-radius:5px}
.chat__msj--yo{align-self:flex-end;background:var(--marino);color:#fff;border-bottom-right-radius:5px}
/* Cuando algo falla: el aviso y la salida hacia una persona */
.chat__msj--aviso{
  align-self:stretch;max-width:none;background:#FFF6DD;border:1px solid #E8D9A8;
  color:var(--marino);display:grid;gap:.75rem;
}
.chat__acc{display:flex;flex-wrap:wrap;gap:.5rem}
.chat__acc a{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.82rem;font-weight:700;padding:.5rem .85rem;border-radius:8px;
  background:var(--verde);color:#fff;transition:background-color var(--dur) var(--curva);
}
.chat__acc a:hover{background:var(--verde-osc)}
.chat__acc a.chat__acc--sec{background:#fff;color:var(--marino);border:1px solid var(--linea)}
.chat__acc a.chat__acc--sec:hover{background:var(--crema)}

/* Los tres puntos mientras piensa */
.chat__pensando{display:flex;gap:4px;align-items:center;padding:.85rem .9rem}
.chat__pensando i{width:6px;height:6px;border-radius:50%;background:var(--gris-claro);animation:chat-punto 1.1s ease-in-out infinite}
.chat__pensando i:nth-child(2){animation-delay:.15s}
.chat__pensando i:nth-child(3){animation-delay:.3s}
@keyframes chat-punto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat__pie{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--linea);background:#fff;flex:none}
.chat__pie input{
  flex:1;min-width:0;font:inherit;font-size:.9rem;color:var(--marino);
  padding:.65rem .85rem;border:1.5px solid var(--linea);border-radius:10px;background:#fff;
  transition:border-color var(--dur) var(--curva);
}
.chat__pie input:focus{outline:none;border-color:var(--verde)}
.chat__pie button{
  flex:none;width:42px;height:42px;border-radius:10px;border:0;cursor:pointer;
  background:var(--verde);color:#fff;display:grid;place-items:center;
  transition:background-color var(--dur) var(--curva);
}
.chat__pie button:hover{background:var(--verde-osc)}
.chat__pie button:disabled{opacity:.5;cursor:default}
.chat__pie button svg{width:18px;height:18px}

/* En móvil el panel ocupa casi toda la pantalla */
@media(max-width:520px){
  .chat{right:1rem;bottom:1rem;left:1rem;align-items:flex-end}
  .chat__panel{width:100%;max-height:calc(100vh - 7rem)}
}

/* ---------- Respuesta del formulario ---------- */
/* El campo trampa: fuera de la vista, pero no con display:none,
   porque algunos robots ignoran los campos ocultos de ese modo. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-envio{
  margin:1rem 0 0;font-size:.9rem;line-height:1.5;padding:.85rem 1rem;
  border-radius:8px;border:1px solid transparent;
}
.aviso-envio:empty{display:none}
.aviso-envio--bien{background:#EAF3E4;border-color:#BEDCAC;color:#2C5E18}
.aviso-envio--mal{background:#FDECEC;border-color:#F3C6C6;color:#8B2020}
.tarjeta-form button[disabled]{opacity:.62;cursor:progress}

/* =========================================================
   CONÓCENOS Y EMPLEO
   ========================================================= */

/* Cabecera de interior: la misma que la portada, con la fotografía al
   fondo, pero algo más baja y con el texto en una sola columna. */
.hero--interior{padding-block:clamp(2.6rem,5vw,4.5rem) clamp(3rem,5.5vw,5rem)}
/* La fotografía viene ya recortada con la misma proporción que la
   cabecera, así que apenas hay que recortar: se centra en vertical.
   En pantalla estrecha el recorte pasa a ser horizontal, y ahí conviene
   desplazarla a la derecha, que es donde están las personas. */
.hero--interior .hero__fondo img{object-position:60% center}
@media(max-width:960px){.hero--interior .hero__fondo img{object-position:74% center}}
.hero__solo{max-width:52ch;position:relative}
.hero--interior h1{margin-bottom:1.1rem}
.hero--interior h1 span{color:var(--verde)}
.hero--interior .hero__bajada{margin-top:0}

/* Quiénes somos / Nuestra misión */
.somos{padding-block:clamp(2.6rem,4.6vw,4rem);background:var(--crema)}
.somos__rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2rem)}
@media(max-width:820px){.somos__rej{grid-template-columns:1fr}}
.somos__b{
  position:relative;overflow:hidden;min-width:0;
  background:#fff;border-radius:16px;
  padding:clamp(1.6rem,2.8vw,2.4rem);
  box-shadow:var(--sombra-s);
  transition:transform .24s var(--curva),box-shadow .24s var(--curva);
}
.somos__b:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
/* Filo de color: verde en el primero, dorado en el segundo */
.somos__b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--verde)}
.somos__b:nth-child(2)::before{background:var(--dorado)}
.somos__ico{width:64px;margin-bottom:1.1rem}
.somos__ico svg{width:100%;height:auto;display:block}
.somos h2{margin-bottom:1.1rem}
.somos p{color:var(--gris);margin:0 0 1rem;max-width:52ch}
.somos p:last-child{margin-bottom:0}
/* El primer párrafo lleva el peso: algo mayor y en el color de marca */
.somos__lead{font-size:1.04rem;color:var(--marino)}

/* Qué hacemos: es una secuencia de trabajo, así que se dibuja como una
   línea de tiempo. La línea horizontal une los cinco pasos por detrás y
   cada uno se marca con su número sobre ella. */
.hacemos{padding-block:clamp(2.6rem,4.6vw,4rem)}
.hacemos__lista{
  list-style:none;counter-reset:h;margin:clamp(2rem,3.4vw,3rem) 0 0;padding:0;
  position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem);
}
/* La línea del tiempo. Arranca y acaba en el centro del primer y del
   último marcador, no en el borde de la sección. */
.hacemos__lista::before{
  content:"";position:absolute;z-index:0;
  top:23px;height:2px;
  left:calc(10% + 23px);right:calc(10% + 23px);
  background:linear-gradient(to right,
    rgba(36,42,86,.10), rgba(36,42,86,.28) 15%, rgba(36,42,86,.28) 85%, rgba(36,42,86,.10));
}
.hacemos__lista li{
  counter-increment:h;position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
}
.hacemos__lista li::before{
  content:counter(h);
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--marino);color:#fff;
  display:grid;place-items:center;
  font-family:"Lexend",sans-serif;font-size:.98rem;font-weight:700;
  /* el halo del color de fondo despega el círculo de la línea */
  box-shadow:0 0 0 7px var(--papel);
  transition:transform .24s var(--curva),background-color .24s var(--curva);
}
.hacemos__lista li:hover::before{transform:scale(1.08);background:var(--verde)}
.hacemos__lista b{
  font-family:"Lexend",sans-serif;font-size:1.02rem;font-weight:500;
  color:var(--marino);line-height:1.35;max-width:16ch;
}

/* En pantallas estrechas la línea se pone de pie, a la izquierda */
@media(max-width:820px){
  .hacemos__lista{grid-template-columns:1fr;gap:0}
  .hacemos__lista::before{
    top:23px;bottom:23px;height:auto;
    left:23px;right:auto;width:2px;
    background:linear-gradient(to bottom, rgba(36,42,86,.28), rgba(36,42,86,.28));
  }
  .hacemos__lista li{
    flex-direction:row;align-items:center;text-align:left;
    gap:1.1rem;padding-block:.85rem;
  }
  .hacemos__lista b{max-width:none}
}

/* ¿Por qué elegirnos? */
.porque{padding-block:clamp(2.4rem,4.2vw,3.6rem)}
.porque__bajada{color:var(--gris);margin-top:.9rem}
.porque__rej{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,2.2vw,1.75rem);margin-top:clamp(1.4rem,2.4vw,2rem);
}
@media(max-width:820px){.porque__rej{grid-template-columns:1fr}}
.pq{
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:clamp(1.35rem,2.2vw,1.8rem);min-width:0;
  display:flex;gap:1rem;align-items:flex-start;
  transition:transform .24s var(--curva),box-shadow .24s var(--curva),border-color .24s var(--curva);
}
.pq:hover{transform:translateY(-4px);box-shadow:var(--sombra-m);border-color:transparent}
/* Igual que en los servicios: el dibujo ya trae su fondo */
.pq__ico{width:66px;height:66px;flex:none;display:grid;place-items:center}
.pq__ico svg{width:100%;height:100%;transition:transform .3s var(--curva)}
.pq:hover .pq__ico svg{transform:scale(1.06)}
.pq h3{font-size:1.13rem;margin:.2rem 0 .45rem;color:var(--marino)}
.pq p{color:var(--gris);font-size:.95rem;margin:0}

/* Empleo */
.ventajas{padding-block:clamp(2.4rem,4.2vw,3.6rem);background:var(--crema)}
.ventajas .serv{border-color:transparent}

/* Qué perfil encaja / Qué harás */
.perfil{padding-block:clamp(2.4rem,4.2vw,3.6rem)}
.perfil__rej{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media(max-width:860px){.perfil__rej{grid-template-columns:1fr;gap:2rem}}
.perfil h2{margin-bottom:.9rem}
.perfil__intro{color:var(--gris);max-width:52ch;margin-bottom:1.5rem}
.perfil__lista{list-style:none;margin:0;padding:0;display:grid}
.perfil__lista li{
  display:flex;align-items:center;gap:.9rem;padding:.95rem 0;
  border-bottom:1px solid var(--linea);font-size:.98rem;
}
.perfil__lista li:last-child{border-bottom:0}
.perfil__lista svg{width:26px;height:26px;flex:none;color:var(--verde)}
.perfil__que{background:var(--crema);border-radius:14px;padding:clamp(1.5rem,2.6vw,2.1rem)}
.perfil__que h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.perfil__que h2::after{content:"";display:block;width:56px;height:3px;background:var(--verde);margin-top:1rem}
.perfil__que p{color:var(--gris);margin-top:1.2rem}

/* El área de texto del formulario, con el mismo acabado que los campos */
.campo textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--marino);
  padding:.8rem .95rem;border:1.5px solid var(--linea);border-radius:8px;
  background:#fff;resize:vertical;min-height:6.5rem;
  transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva);
}
.campo textarea::placeholder{color:var(--gris-claro)}
.campo textarea:hover{border-color:#C9C5BC}
.campo textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(76,154,42,.14)}

/* ---------- Cifras ---------- */
.cifras{padding-block:clamp(3rem,5vw,4.5rem);background:var(--tinta);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.cifras__rej{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:820px){.cifras__rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cifra-b{border-left:2px solid rgba(242,183,5,.55);padding-left:1.15rem}
.cifra-b b{display:block;font-family:"Lexend",sans-serif;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.cifra-b span{display:block;font-size:.87rem;color:rgba(255,255,255,.7);margin-top:.5rem}

/* ---------- Reseñas ---------- */
.resenas{padding-block:clamp(3.5rem,6vw,5.5rem)}
.resenas__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.estrellas{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--gris)}
.estrellas svg{width:17px;height:17px;color:var(--dorado)}
/* Debajo de la nota, cuántas opiniones la sostienen. Alineado a la
   derecha para que cuelgue de las estrellas, no del titular. */
.valoracion{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
@media(min-width:760px){.valoracion{align-items:flex-end}}
.valoracion__n{margin:0;font-size:.8rem;color:var(--gris-claro)}
.valoracion__n b{color:var(--marino)}
/* ---------- Carrusel de opiniones ----------
   Las opiniones reales de Google, servidas desde este mismo servidor. Se
   desliza con el dedo, con las flechas o con el teclado, y mantiene el
   aire del widget que había: tarjeta blanca, la marca de Google arriba,
   las cinco estrellas y el sello de verificado. */
.resp{position:relative}
.resp__pista{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(280px,calc((100% - 2*clamp(1rem,2vw,1.5rem))/3));
  gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .4rem 1.5rem;margin:-.4rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.resp__pista::-webkit-scrollbar{display:none}
@media(max-width:900px){.resp__pista{grid-auto-columns:minmax(268px,86%)}}

.resp__c{
  scroll-snap-align:start;
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;min-width:0;
  box-shadow:0 1px 4px rgba(14,22,51,.06);
  transition:transform .24s var(--curva),box-shadow .24s var(--curva);
}
.resp__c:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.resp__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.resp__quien{display:flex;align-items:center;gap:.7rem;min-width:0}
.resp__ini{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:"Lexend",sans-serif;font-weight:700;color:#fff;font-size:1.05rem;
}
.resp__n{font-weight:700;font-size:.93rem;line-height:1.25;color:var(--marino);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resp__f{font-size:.76rem;color:var(--gris-claro)}
.resp__g{width:19px;height:19px;flex:none;margin-top:.15rem}
.resp__est{display:flex;gap:.12rem;align-items:center}
.resp__est svg{width:15px;height:15px;color:#FBBC04}
.resp__ok{display:inline-flex;align-items:center;gap:.25rem;margin-left:.4rem;font-size:.7rem;color:var(--gris-claro)}
.resp__ok svg{width:12px;height:12px;color:var(--verde)}
/* El texto se recorta a cinco líneas para que todas las tarjetas midan
   igual y quepan más en pantalla. Quien quiera leerlo entero, lo abre.
   El recorte lo pone el guion: sin él se lee completo, como debe ser. */
.resp__c p{color:var(--gris);font-size:.91rem;margin:0;line-height:1.6;min-width:0}
.resp__c[data-recortada] p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
  overflow:hidden;
}
.resp__c[data-recortada="abierta"] p{display:block;overflow:visible}
.resp__mas{
  align-self:flex-start;margin-top:-.25rem;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.83rem;font-weight:700;color:var(--verde);
  transition:color var(--dur) var(--curva);
}
.resp__mas:hover{color:var(--marino)}

/* Flechas y pie, como en el widget de antes */
.resp__acc{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.2rem}
.resp__b{
  width:42px;height:42px;border-radius:50%;flex:none;cursor:pointer;
  background:#fff;border:1px solid var(--linea);color:var(--marino);
  display:grid;place-items:center;
  transition:background-color var(--dur) var(--curva),color var(--dur) var(--curva),
             border-color var(--dur) var(--curva),transform var(--dur) var(--curva);
}
.resp__b:hover:not(:disabled){background:var(--marino);color:#fff;border-color:var(--marino)}
.resp__b:active:not(:disabled){transform:scale(.94)}
.resp__b:disabled{opacity:.3;cursor:default}
.resp__b svg{width:17px;height:17px}
.resp__pie{
  display:flex;align-items:center;gap:.5rem;
  font-size:.79rem;color:var(--gris-claro);margin-top:.9rem;
}
.resp__pie svg{width:15px;height:15px;flex:none}
/* Los rótulos de ayuda del widget («Publicado en Google», el sello de
   verificado) están fuera de pantalla hasta que se pasa el ratón, y en
   móvil empujaban la página 125 px a lo ancho. Se recorta solo en
   horizontal: «clip» deja el eje vertical intacto y no crea scroll. */

/* ---------- Formulario ---------- */
.form{padding-block:clamp(3.5rem,6vw,5.5rem);background:var(--tinta);color:#fff;position:relative;overflow:hidden}
.form::before{content:"";position:absolute;inset:auto -10% -40% auto;width:44rem;height:44rem;border-radius:50%;background:radial-gradient(circle,rgba(76,154,42,.16) 0%,transparent 66%);pointer-events:none}
.form__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:start;position:relative}
@media(max-width:920px){.form__in{grid-template-columns:1fr}}
.form h2{color:#fff}
.form__bajada{color:rgba(255,255,255,.72);margin-top:1.1rem;max-width:44ch}
.garantias{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.garantias li{display:flex;align-items:center;gap:.9rem;font-size:.93rem;color:rgba(255,255,255,.9)}
.garantias svg{width:40px;height:40px;flex:none;color:var(--verde)}
.tarjeta-form{background:#fff;border-radius:16px;padding:clamp(1.6rem,3vw,2.2rem);box-shadow:var(--sombra-l);color:var(--marino)}

/* La misma sección, en claro. En Empleo se quiere blanca para separarla
   del bloque azul de la portada. Va después del bloque oscuro a propósito:
   si fuera antes, las reglas de arriba le devolverían el texto en blanco. */
.form--claro{background:var(--papel);color:var(--marino);border-top:1px solid var(--linea)}
.form--claro::before{display:none}
.form--claro h2{color:var(--marino)}
.form--claro .form__bajada{color:var(--gris)}
.form--claro .garantias li{color:var(--gris)}
.form--claro .tarjeta-form{box-shadow:var(--sombra-m);border:1px solid var(--linea)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.campos{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo--full{grid-column:1/-1}
.campo label{font-size:.82rem;font-weight:700;letter-spacing:.01em}
.campo label i{color:var(--verde);font-style:normal}
.campo input,.campo select{
  font-family:inherit;font-size:.95rem;color:var(--marino);
  padding:.82rem 1rem;border:1.5px solid var(--linea);border-radius:8px;background:#fff;
  transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva);
}
.campo input::placeholder{color:var(--gris-claro)}
.campo input:hover,.campo select:hover{border-color:#C9C5BC}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(76,154,42,.14)}
.adjunto{
  grid-column:1/-1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border:1.5px dashed var(--linea);border-radius:10px;padding:1rem 1.15rem;
  transition:border-color var(--dur) var(--curva),background-color var(--dur) var(--curva);
}
.adjunto:hover{border-color:var(--verde);background:#FAFDF7}
.adjunto svg{width:26px;height:26px;color:var(--verde);flex:none}
.adjunto__t{font-size:.88rem;font-weight:700}
.adjunto__s{font-size:.78rem;color:var(--gris-claro)}
.consent{grid-column:1/-1;display:flex;gap:.75rem;align-items:flex-start;font-size:.82rem;color:var(--gris);line-height:1.5}
.consent input{margin-top:.15rem;width:17px;height:17px;accent-color:var(--verde);flex:none}
.consent a{color:var(--verde);font-weight:700}
.tarjeta-form .btn{width:100%;margin-top:1.15rem;padding-block:1.1rem}

/* ---------- Contacto ---------- */
.contacto{padding-block:clamp(3.5rem,6vw,5.5rem);background:#fff;border-block:1px solid var(--linea)}
.contacto__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:840px){.contacto__in{grid-template-columns:1fr}}
.contacto__foto{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--sombra-m);aspect-ratio:16/10}
.contacto__foto img{width:100%;height:100%;object-fit:cover}
.contacto p{color:var(--gris);margin-top:1rem;max-width:52ch}
.contacto__acc{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}

/* ---------- Preguntas ---------- */
.faq{padding-block:clamp(3.5rem,6vw,5.5rem)}
.faq__rej{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.faq__rej{grid-template-columns:1fr}}
.acord{border-top:1px solid var(--linea)}
.acord details{border-bottom:1px solid var(--linea)}
.acord summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;font-family:"Lexend",sans-serif;
  font-weight:500;font-size:1rem;transition:color var(--dur) var(--curva);
}
.acord summary::-webkit-details-marker{display:none}
.acord summary:hover{color:var(--verde)}
.acord summary::after{
  content:"";width:11px;height:11px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);
  transition:transform var(--dur) var(--curva);
}
.acord details[open] summary{color:var(--verde)}
.acord details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.acord p{padding:0 0 1.3rem;color:var(--gris);font-size:.94rem;max-width:62ch}

/* ---------- Pie: el mismo marino que en la web actual (#242A56) ---------- */
.pie{background:var(--marino);color:rgba(255,255,255,.72);padding-block:clamp(3rem,5vw,4rem) 1.5rem;font-size:.9rem}
.pie__rej{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
@media(max-width:860px){.pie__rej{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie__rej{grid-template-columns:1fr}}
.pie h4{font-family:"Lexend",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 1.1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.pie a{text-decoration:none;transition:color var(--dur) var(--curva)}
.pie a:hover{color:var(--verde)}
.pie__logo{width:172px;height:auto;margin-bottom:1.1rem}
.pie__legal{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.5);
}

/* ---------- Aparición al hacer scroll ---------- */
/* La aparición progresiva solo se activa si el guion ha arrancado: la marca
   la pone él en <html>. Si fallara, el contenido se ve igual en vez de
   quedarse invisible esperando una animación que no va a llegar. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .6s var(--curva),transform .6s var(--curva)}
.js .rev.vis{opacity:1;transform:none}

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

.legal{padding-block:clamp(2rem,4vw,3.5rem) clamp(4rem,7vw,6rem)}
.legal__in{max-width:820px}
.legal__volver{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.88rem;font-weight:700;color:var(--verde);margin-bottom:2rem;transition:gap var(--dur) var(--curva)}
.legal__volver:hover{gap:.8rem}
.legal__volver svg{width:16px;height:16px}
.legal__t{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:2rem}
.legal__cuerpo{font-size:.97rem;color:var(--gris)}
.legal__cuerpo h2{font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--marino);margin:2.6rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--linea)}
.legal__cuerpo h3{font-size:1.02rem;color:var(--marino);margin:1.8rem 0 .6rem}
.legal__cuerpo p{margin:0 0 1rem}
.legal__cuerpo ul{margin:0 0 1.2rem;padding-left:1.2rem;display:grid;gap:.5rem}
.legal__cuerpo li{line-height:1.6}
.legal__cuerpo strong{color:var(--marino)}
.legal__cuerpo a{color:var(--verde);font-weight:700}
.legal__cuerpo table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.88rem;margin-bottom:1.3rem}
.legal__cuerpo th,.legal__cuerpo td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
.legal__cuerpo th{background:var(--crema);color:var(--marino);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.legal__cuerpo em{color:var(--gris-claro);font-size:.88rem}
.legal__cuerpo table{display:block;overflow-x:auto}