/* ═══════════════════════════════════════════════════════════
   NeuroFluxIA V3 — Patrones comunes de página
   Bloques que se repiten en varias páginas: hero a sangre,
   bloque de respuesta directa, banda de imagen, acordeón de
   FAQ y CTA final. Cada página añade luego su propio CSS.
   ═══════════════════════════════════════════════════════════ */

/* ═══ HERO ═══════════════════════════════════════════════ */
/* ── Hero en vertical (por defecto) ────────────────────────
   El texto NO se superpone a la imagen: la foto es una banda
   superior y el texto vive sobre marfil sólido. Es la única
   forma de garantizar el contraste sobre una foto a contraluz. */
.hero{position:relative;display:flex;flex-direction:column;isolation:isolate}
.hero-media{position:relative;width:100%;height:clamp(230px,40svh,340px);overflow:hidden}
/* En vertical se encuadra a la derecha, que es donde está la escena:
   la pared vacía de la izquierda no aporta nada en una pantalla estrecha. */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:82% 55%}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(0deg,var(--paper) 0%,rgba(251,249,245,.5) 32%,rgba(251,249,245,0) 70%);
}
.hero-inner{width:100%;padding-top:2.2rem;padding-bottom:clamp(2.4rem,6vw,3.5rem)}

/* ── Hero en apaisado: la imagen pasa a fondo y el texto encima ──
   El velo llega casi opaco hasta el 58%, que es donde termina el
   titular; a partir de ahí se abre y deja ver la escena. */
@media (min-width:900px){
  /* Pantalla completa de verdad: la foto ocupa todo el hueco disponible.
     justify-content:center y no flex-end: con flex-end, si el contenido
     crece más que el alto disponible el desbordamiento se va hacia ARRIBA,
     por debajo de la barra fija, y se recorta sin avisar. */
  .hero{
    min-height:100svh;
    justify-content:center;
    padding-top:calc(76px + 1.5rem);
    padding-bottom:118px;   /* hueco reservado para la banda anclada abajo */
    overflow:hidden;
  }
  .hero-media{position:absolute;inset:0;height:auto;z-index:-2}
  .hero-media img{height:100%;object-position:72% 50%}
  .hero-scrim{
    /* z-index POSITIVO: el velo es hijo de .hero-media, que ya es su propio
       contexto de apilamiento. Con z-index:-1 quedaba detrás de la <img>.
       El velo ahora es SUAVE: la foto se compuso con la pared vacía a la
       izquierda, así que el texto ya cae sobre una zona limpia y no hace
       falta tapar media imagen con marfil opaco. */
    z-index:1;
    background:
      linear-gradient(90deg,rgba(251,249,245,.82) 0%,rgba(251,249,245,.66) 34%,rgba(251,249,245,.3) 56%,rgba(251,249,245,.06) 76%,rgba(251,249,245,0) 100%),
      linear-gradient(0deg,var(--paper) 0%,rgba(251,249,245,.35) 16%,rgba(251,249,245,0) 42%);
  }
  .hero-inner{padding-top:0}
}
.hero-inner{width:100%;padding-bottom:clamp(2rem,4.5vw,3rem)}
.hero-copy{max-width:min(100%,44rem)}
/* Los rotulos del hero y del CTA van sobre foto, no sobre marfil. */
.hero-copy .label,.cta-inner .label{color:var(--gold-foto)}
.hero-copy .label::before,.cta-inner .label::before,
.cta-inner .label::after{background:var(--gold-foto)}
.hero-copy h1{margin-top:1.2rem;font-size:var(--fs-h1)}
/* El párrafo del hero SIEMPRE cae sobre una fotografía, y cada foto tiene
   su propia luminosidad. Con --ink-2 (#6B6355) daba 4,87 sobre la pared de
   la portada pero solo 4,26 sobre la de agentes, que es una escena de
   tarde. Este tono propio aguanta cualquiera de las dos: 5,46 en el peor
   caso. Es texto sobre foto, no texto sobre marfil. */
.hero-sub{margin-top:1.3rem;max-width:42ch;color:#5A5347}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:1.8rem}

/* Marcas de confianza: banda a sangre pegada al borde inferior del hero */
.hero-marks{position:relative;width:100%;background:var(--paper);border-top:1px solid var(--line)}
.hero-marks-inner{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);
  padding-inline:0;
}
@media (min-width:820px){.hero-marks-inner{grid-template-columns:repeat(4,1fr)}}
.hero-mark{
  background:var(--paper);
  padding:1.4rem clamp(.9rem,2vw,1.6rem);
  display:flex;flex-direction:column;gap:.2rem;
}
.hero-mark strong{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.35rem,2.3vw,1.75rem);
  letter-spacing:-.03em;line-height:1;color:var(--gold-text);
}
.hero-mark span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}

/* Estas reglas van DESPUÉS de las base a propósito: con la misma
   especificidad gana la última, y dentro del media query anterior
   quedaban anuladas por las de arriba. */
@media (min-width:900px){
  /* Con el hero a pantalla completa, la banda se ancla al pie y hace de
     zócalo del hero en vez de empujar la página hacia abajo. */
  .hero-marks{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    background:rgba(251,249,245,.88);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line-2);
  }
  .hero-marks-inner{background:var(--line-2)}
  .hero-mark{background:rgba(251,249,245,.72);padding-block:1.15rem}
}

/* ═══ BANDA DE ORO ═══════════════════════════════════════ */
.band{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3.8rem,10vw,9rem);
}
.band-media{position:absolute;inset:-10% 0;z-index:-2}
.band-media img{width:100%;height:100%;object-fit:cover}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* El centro subio de .42 a .58: por ahi cruzan los hilos dorados de la
     textura y la firma de la banda se quedaba en 3,2 sobre ellos. */
  background:linear-gradient(180deg,rgba(251,249,245,.72),rgba(251,249,245,.66) 45%,rgba(251,249,245,.8));
}
.band-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.band-quote{
  font-family:var(--f-accent);font-weight:500;
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.28;letter-spacing:-.012em;
  max-width:21ch;color:var(--ink);text-wrap:balance;
}
/* Sobre fotografia, como .hero-sub: --ink-2 se quedaba en 4,52 sobre la
   banda de agentes. */
.band-sign{font-size:var(--fs-lg);color:#5A5347;max-width:40ch}

/* ═══ FAQ ════════════════════════════════════════════════ */
.faq-grid{display:grid;gap:clamp(2.4rem,5vw,4rem)}
.faq-grid > *{min-width:0}
@media (min-width:900px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.faq-side h2{margin-top:1.2rem}
.garantias{list-style:none;margin:2rem 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.garantias li{display:flex;align-items:flex-start;gap:.7rem;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.garantias .ico{color:var(--gold);flex:none;margin-top:.22rem}

.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item:first-child{border-top:1px solid var(--line-2)}
.faq-item summary{
  display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  padding:1.25rem 0;font-family:var(--f-display);font-weight:600;font-size:1.08rem;
  letter-spacing:-.015em;line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-n{font-family:var(--f-ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;color:var(--gold-text);flex:none}
.faq-item summary::after{
  content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-body{padding:0 0 1.4rem 2.6rem}
.faq-body p{color:var(--ink-2);line-height:1.75}
@media (max-width:560px){.faq-body{padding-left:0}}

/* ═══ CTA FINAL ══════════════════════════════════════════ */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,10vw,8rem);
}
.cta-media{position:absolute;inset:-10% 0;z-index:-2}
.cta-media img{width:100%;height:100%;object-fit:cover}
.cta-scrim{
  /* z-index POSITIVO, igual que en .hero-scrim y por el mismo motivo: el velo
     es hijo de .cta-media, que con z-index:-2 ya es su propio contexto de
     apilamiento. Con z-index:-1 quedaba DETRAS de la <img> y no pintaba nada:
     el CTA de las tres paginas llevaba la foto a pelo. */
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(251,249,245,.9),rgba(251,249,245,.7) 50%,rgba(251,249,245,.94));
}
/* Mismo criterio que .hero-sub: el parrafo del CTA SIEMPRE cae sobre una
   fotografia, y cada foto tiene su luminosidad. Con --ink-2 daba 4,63 sobre
   la pared de miel de automatizacion. Este tono propio aguanta las tres. */
.cta-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.cta-inner h2{max-width:17ch}
.cta-inner .prose{max-width:50ch;color:#5A5347}
.cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:.8rem}

/* ═══ RESPUESTA DIRECTA ══════════════════════════════════
   Bloque pensado para ser citado por buscadores y modelos:
   una frase que define la entidad y una lista de atributos
   con cifras. Semántica <dl> a propósito, no <div>. */
.answer{
  padding-block:clamp(2.8rem,6vw,5rem);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.answer-lead{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.25rem,2.5vw,1.85rem);line-height:1.42;letter-spacing:-.02em;
  max-width:38ch;color:var(--ink);
}
.answer-lead strong{font-weight:700}
.answer-facts{
  display:grid;gap:1px;margin:clamp(2rem,4vw,3rem) 0 0;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:560px){.answer-facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.answer-facts{grid-template-columns:repeat(3,1fr)}}
.answer-facts > div{background:var(--paper);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.answer-facts dt{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);
}
.answer-facts dd{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65}
.answer-facts dd strong{color:var(--ink);font-weight:600}


/* Cita de la fuente de un dato oficial. Va debajo del párrafo que lo usa:
   decir de dónde sale la cifra es lo que separa un dato de una afirmación. */
.dato-fuente{margin-top:.6rem;font-size:var(--fs-xs);letter-spacing:.02em;color:var(--ink-2);font-style:italic}

/* ═══ ZONA DE SERVICIO ═══════════════════════════════════
   La rejilla de poblaciones cercanas. Antes reutilizaba la
   lista de garantías (con su visto de oro), que ni encajaba
   ni significaba lo mismo. Aquí cada población es una ficha
   con su comarca y su distancia. */
.zona{
  list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;
  display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));
}
.zona-item{min-width:0}
.zona-item > a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:.8rem;row-gap:.15rem;
  padding:.9rem 1rem;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.zona-item > a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.zona-n{
  grid-column:1;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:1rem;line-height:1.25;color:var(--ink);
}
.zona-meta{
  grid-column:1;grid-row:2;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);
}
.zona-meta i{font-style:normal;color:var(--line-2)}
/* La flecha ocupa las dos filas, a la derecha */
.zona-ico{grid-column:2;grid-row:1 / span 2;color:var(--gold);flex:none;
          transition:transform .2s var(--ease)}
.zona-item > a:hover .zona-ico{transform:translateX(3px)}
.zona-item > a:hover .zona-n{color:var(--gold-text)}

.zona-pie{margin-top:clamp(1.4rem,2.6vw,2rem);font-size:var(--fs-sm);color:var(--ink-2)}
.zona-pie a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.zona-pie a:hover{color:var(--gold)}

/* ═══ SERVICIOS EN LA PÁGINA DE POBLACIÓN ════════════════
   Índice de servicios, no el desarrollo: el texto largo vive
   en /automatizacion, /agentes-inteligencia-artificial y
   /inteligencia-artificial, y repetirlo aquí sería competir
   contra nuestras propias páginas. Fichas con regla de oro
   arriba, para no confundirlas con las de zona de servicio. */
.servloc{
  list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
}
.servloc-item{
  position:relative;min-width:0;display:flex;flex-direction:column;
  padding:clamp(1.3rem,2.4vw,1.7rem);
  background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:0 0 var(--r-md) var(--r-md);
  transition:border-color .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.servloc-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);border-top-color:var(--gold)}
.servloc-n{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;color:var(--gold-text);
}
.servloc-item h3{
  margin-top:.6rem;font-family:var(--f-display);font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.08rem,1.9vw,1.24rem);line-height:1.25;color:var(--ink);
}
.servloc-item h3 a{color:inherit}
/* La tarjeta entera es el enlace, pero solo lo declara el titular: si lo
   hicieran dos elementos, uno taparía al otro. */
.servloc-item h3 a::after{content:"";position:absolute;inset:0}
.servloc-item:hover h3{color:var(--gold-text)}
.servloc-item > p{margin-top:.7rem;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.servloc-dato{
  margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.15rem;
}
.servloc-dato span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.servloc-dato strong{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:1rem;color:var(--ink)}
/* Empuja el "ver más" al fondo, para que las tres fichas lo alineen aunque
   sus textos midan distinto. */
.servloc-ir{
  margin-top:auto;padding-top:1rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--gold-text);
}
.servloc-ir .ico{transition:transform .2s var(--ease)}
.servloc-item:hover .servloc-ir .ico{transform:translateX(3px)}