/* abhalo.com · páginas de sector (v4). Reseteo MÍNIMO y NEUTRO: blanco, negro, grises y una sola fuente del sistema.
   Sin paleta violeta, sin cristal, sin sombras, sin degradados. Es el lienzo limpio de cada sector: lo único que hace es que
   los bloques funcionen (formulario, calculadora, chat, FAQ, paquetes) y se lean en el móvil. Cada sector lo viste en su
   propio estilo.css, dentro de @layer sector, que SIEMPRE gana a esta capa (da igual la especificidad).
   Las páginas comunes (portada, soluciones, app, contacto, legal) NO cargan este archivo. */
@layer base, sector;

@layer base {
  /* Variables que cada sector redefine en  body[data-sector="<slug>"] { … } */
  body[data-sector] {
    --s-fondo: #ffffff; --s-superficie: #f2f2f2; --s-texto: #111111; --s-suave: #4a4a4a; --s-borde: #767676;
    --s-acento: #111111; --s-sobre-acento: #ffffff; --s-error: #b00020;
    --s-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --s-fuente-titulo: var(--s-fuente);
    --s-base: 18px; --s-linea: 1.6; --s-medida: 62ch; --s-ancho: 68rem; --s-radio: 0px;
    --s-e1: 8px; --s-e2: 16px; --s-e3: 24px; --s-e4: 32px; --s-e6: 48px; --s-e8: 64px; --s-seccion: clamp(48px, 9vw, 96px);
  }
  *, *::before, *::after { box-sizing: border-box; }
  body[data-sector] { margin: 0; background: var(--s-fondo); color: var(--s-texto); font: 400 var(--s-base)/var(--s-linea) var(--s-fuente);
    -webkit-text-size-adjust: 100%; overflow-wrap: anywhere; }
  body[data-sector] img { max-width: 100%; height: auto; display: block; }
  body[data-sector] h1, body[data-sector] h2, body[data-sector] h3 { font-family: var(--s-fuente-titulo); line-height: 1.15; margin: 0 0 var(--s-e2); text-wrap: balance; }
  body[data-sector] h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
  body[data-sector] h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
  body[data-sector] h3 { font-size: 1.2rem; }
  body[data-sector] p { margin: 0 0 var(--s-e2); max-width: var(--s-medida); }
  body[data-sector] ul, body[data-sector] ol { margin: 0; padding: 0; list-style: none; }
  body[data-sector] a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  body[data-sector] :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--s-acento); outline-offset: 3px; }
  body[data-sector] .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  body[data-sector] .v-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-sector] .ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  body[data-sector] .ico .t, body[data-sector] .ico .t6, body[data-sector] .ico .t16 { opacity: .2; }
  body[data-sector] .s-saltar { position: absolute; left: var(--s-e1); top: -4rem; z-index: 99; padding: var(--s-e1) var(--s-e2); background: var(--s-acento); color: var(--s-sobre-acento); }
  body[data-sector] .s-saltar:focus { top: var(--s-e1); }

  /* Estructura */
  body[data-sector] .s-ancho { width: min(var(--s-ancho), 100% - 2 * var(--s-e2)); margin-inline: auto; }
  body[data-sector] .s-seccion { padding-block: var(--s-seccion); }
  body[data-sector] .s-etiqueta { font-size: .9rem; font-weight: 700; color: var(--s-suave); margin-bottom: var(--s-e1); }
  body[data-sector] .s-lead { font-size: 1.15rem; }

  /* Tira de marca abhalo */
  body[data-sector] .s-marca { border-block: 1px solid var(--s-borde); }
  body[data-sector] .s-marca-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-e2); min-height: 48px; }
  body[data-sector] .s-logo { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-sector] .s-marca-lema { margin: 0; font-size: .9rem; color: var(--s-suave); }

  /* Botón */
  body[data-sector] .s-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 var(--s-e3);
    border: 2px solid var(--s-acento); border-radius: var(--s-radio); background: var(--s-acento); color: var(--s-sobre-acento);
    font: 700 1rem/1.2 var(--s-fuente); text-decoration: none; cursor: pointer; }
  body[data-sector] .s-botones { display: flex; flex-wrap: wrap; gap: var(--s-e2); }

  /* Primera pantalla */
  body[data-sector] .s-heroe-rejilla { display: grid; gap: var(--s-e4); }
  body[data-sector] .s-heroe--dividido .s-heroe-rejilla { grid-template-columns: 1fr; }
  @media (min-width: 880px) { body[data-sector] .s-heroe--dividido .s-heroe-rejilla { grid-template-columns: 1fr 1fr; align-items: start; } }
  body[data-sector] .s-heroe-foto { margin: 0; }

  /* La prueba y el dato con fuente */
  body[data-sector] .s-franja { padding-block: var(--s-e4); border-block: 1px solid var(--s-borde); }
  body[data-sector] .s-pruebas { display: grid; gap: var(--s-e2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  body[data-sector] .s-prueba { display: grid; gap: 2px; }
  body[data-sector] .s-prueba span:not(.ico) { color: var(--s-suave); }
  body[data-sector] .s-dato { margin: var(--s-e3) 0 0; max-width: none; }

  /* Problema, pasos */
  body[data-sector] .s-dolores, body[data-sector] .s-pasos { display: grid; gap: var(--s-e3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  body[data-sector] .s-num { display: inline-block; font-weight: 700; margin-bottom: var(--s-e1); }

  /* Chat de ejemplo */
  body[data-sector] .s-chat { margin: 0; border: 1px solid var(--s-borde); border-radius: var(--s-radio); max-width: 34rem; }
  body[data-sector] .s-chat-cabeza { display: grid; gap: 2px; padding: var(--s-e2); border-bottom: 1px solid var(--s-borde); }
  body[data-sector] .s-chat-aviso { color: var(--s-suave); font-size: .9rem; }
  body[data-sector] .s-chat-lista { display: grid; gap: var(--s-e1); padding: var(--s-e2); }
  body[data-sector] .s-burbuja { padding: var(--s-e1) var(--s-e2); background: var(--s-superficie); max-width: 85%; }
  body[data-sector] .s-burbuja.cliente { justify-self: end; border: 1px solid var(--s-borde); background: transparent; }
  body[data-sector] .n-hueco { display: inline-block; padding: 0 .4em; border: 1px dashed currentColor; }

  /* Calculadora */
  body[data-sector] .s-calc { display: grid; gap: var(--s-e4); }
  @media (min-width: 760px) { body[data-sector] .s-calc { grid-template-columns: 1fr 1fr; } }
  body[data-sector] .s-calc-campos { display: grid; gap: var(--s-e3); align-content: start; }
  body[data-sector] .s-calc-mes { display: block; font: 700 clamp(2rem, 7vw, 3.25rem)/1.1 var(--s-fuente-titulo); }
  body[data-sector] .s-calc-t, body[data-sector] .s-calc-ano { margin: 0; }
  body[data-sector] .s-nota { margin-top: var(--s-e3); color: var(--s-suave); font-size: .95rem; }

  /* Paquetes */
  body[data-sector] .s-paquetes { display: grid; gap: var(--s-e3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  body[data-sector] .s-paquete { border: 1px solid var(--s-borde); border-radius: var(--s-radio); padding: var(--s-e3); }
  body[data-sector] .s-paquete.destacado { border-width: 3px; border-color: var(--s-acento); }
  body[data-sector] .s-paquete-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-e1); justify-content: space-between; }
  body[data-sector] .s-precio b { font-size: 1.8rem; }
  body[data-sector] .s-precio span { display: block; color: var(--s-suave); font-size: .9rem; }
  body[data-sector] .s-insignia { font-size: .85rem; font-weight: 700; }
  body[data-sector] .s-iva { margin-top: var(--s-e3); color: var(--s-suave); }

  /* FAQ */
  body[data-sector] .s-pregunta { border-top: 1px solid var(--s-borde); }
  body[data-sector] .s-pregunta:last-child { border-bottom: 1px solid var(--s-borde); }
  body[data-sector] .s-pregunta summary { cursor: pointer; padding: var(--s-e2) 0; min-height: 48px; font-weight: 700; }
  body[data-sector] .s-pregunta p { padding-bottom: var(--s-e2); }

  /* Cierre y formulario */
  body[data-sector] .s-final .s-ancho { display: grid; gap: var(--s-e6); }
  @media (min-width: 880px) { body[data-sector] .s-final .s-ancho { grid-template-columns: 1fr 1fr; align-items: start; } }
  body[data-sector] .s-lista { display: grid; gap: var(--s-e1); }
  body[data-sector] .s-form { display: grid; gap: var(--s-e1); align-content: start; }
  body[data-sector] .s-etiqueta-campo { font-weight: 700; margin-top: var(--s-e1); }
  body[data-sector] .s-etiqueta-campo span { font-weight: 400; color: var(--s-suave); }
  body[data-sector] .s-campo { width: 100%; min-height: 48px; padding: 0 var(--s-e2); border: 1px solid var(--s-borde); border-radius: var(--s-radio);
    background: var(--s-fondo); color: var(--s-texto); font: inherit; font-size: 1rem; }
  body[data-sector] .s-campo::placeholder { color: var(--s-suave); opacity: 1; }
  body[data-sector] .s-casilla { display: flex; gap: var(--s-e1); align-items: flex-start; margin: var(--s-e1) 0 var(--s-e2); }
  body[data-sector] .s-casilla input { width: 24px; height: 24px; margin: 4px 0 0; flex: none; accent-color: var(--s-acento); }
  body[data-sector] .s-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Pie */
  body[data-sector] .s-pie { padding-block: var(--s-e4); border-top: 1px solid var(--s-borde); font-size: .95rem; }
  body[data-sector] .s-pie-fila { display: flex; flex-wrap: wrap; gap: var(--s-e2) var(--s-e4); justify-content: space-between; }
  body[data-sector] .s-pie p { margin: 0; }
  body[data-sector] .s-pie ul { display: flex; flex-wrap: wrap; gap: var(--s-e1) var(--s-e3); }
  body[data-sector] .s-pie a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Migas visibles y enlaces a los otros sectores (SEO, 22-oct-2026): fuera de <main>, antes del pie. */
  body[data-sector] .s-otros { padding-block: var(--s-e4); border-top: 1px solid var(--s-borde); font-size: .95rem; }
  body[data-sector] .s-otros .s-ancho { display: grid; gap: var(--s-e2); }
  body[data-sector] .s-migas { display: flex; flex-wrap: wrap; gap: 0 var(--s-e2); margin: 0; padding: 0; list-style: none; color: var(--s-suave); }
  body[data-sector] .s-migas li { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-sector] .s-migas li + li::before { content: "›"; margin-right: var(--s-e2); }
  body[data-sector] .s-otros-t { margin: var(--s-e2) 0 0; font-family: var(--s-fuente-titulo); font-size: 1.05rem; font-weight: 600; }
  body[data-sector] .s-otros-lista { display: flex; flex-wrap: wrap; gap: var(--s-e1) var(--s-e3); margin: 0; padding: 0; list-style: none; }
  body[data-sector] .s-otros a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  /* Equipo Y (23-oct-2026): los otros sectores como tarjetas con foto (imágenes de ejemplo). */
  body[data-sector] .s-otros-lista { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--s-e2); }
  body[data-sector] .s-otros-lista a { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; text-decoration: none; font-weight: 600; line-height: 1.25; }
  body[data-sector] .s-otros-lista img { display: block; width: 100%; height: auto; aspect-ratio: 240 / 297; object-fit: cover; border-radius: 10px; border: 1px solid var(--s-borde); }
  body[data-sector] .s-otros-lista a:hover span, body[data-sector] .s-otros-lista a:focus-visible span { text-decoration: underline; text-underline-offset: .2em; }
  @media (max-width: 1000px) { body[data-sector] .s-otros-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (max-width: 640px) { body[data-sector] .s-otros-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* Móvil (equipo R, 23-oct-2026): enlaces sueltos de 44 px con el dedo (las citas «Fuente» dentro del texto no cuentan) */
@media (pointer: coarse) {
  body[data-sector] a.a-enlace, body[data-sector] a.i-enlace { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-sector] a.s-logo { min-height: 44px; }
}