/* ============================================================
   Pool salina · "estratos de sal" (tema sin dueño, neutro de nicho)
   Tipografía Onest en minúscula rotunda, blanco salino con hairlines
   dobles como estratos, cabecera sticky translúcida, índice numerado
   de categorías, cinta horizontal con scroll-snap para destacadas y
   losas-registro con micro-desplazamiento. El color de marca del
   directorio es la única tinta (var(--brand)/var(--accent)).
   Sin iconos, sin contadores. CSS estático, sin JS.
   ============================================================ */

:root {
    --sa-sal: #fafaf7;
    --sa-sal-2: #f1f0ea;
    --sa-grafito: #22252a;
    --sa-grafito-2: #565b63;
    --sa-bruma: #9298a1;
    --sa-hilo: #dcdad2;
    --sa-marca: var(--brand, #46525e);
    --sa-acento: var(--accent, #6c7a88);
    --sa-tipo: "Onest", "Helvetica Neue", system-ui, sans-serif;
}

body {
    background: var(--sa-sal);
    color: var(--sa-grafito);
    font-family: var(--sa-tipo);
}

::selection { background: var(--sa-marca); color: var(--sa-sal); }

/* ---------- Cabecera estrato (sticky translúcida) ---------- */

.sa-estrato {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--sa-sal) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--sa-hilo);
}

.sa-estrato-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 26px;
    flex-wrap: wrap;
}

.sa-rotulo {
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--sa-grafito);
    text-decoration: none;
}

.sa-rotulo em { font-style: normal; color: var(--sa-marca); }

.sa-veta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }

.sa-veta a {
    position: relative;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sa-grafito-2);
    text-decoration: none;
    transition: color 0.18s ease;
}

.sa-veta a:not(.sa-mando)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: var(--sa-marca);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.sa-veta a:hover { color: var(--sa-grafito); }

.sa-veta a:not(.sa-mando):hover::after { transform: scaleX(1); }

/* ---------- Tecla mineral (botón) ---------- */

.sa-mando {
    display: inline-block;
    background: var(--sa-marca);
    color: var(--sa-sal);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 22px;
    border: 1px solid var(--sa-marca);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sa-mando:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--sa-marca) 28%, transparent); color: var(--sa-sal); }

.sa-mando:active { transform: translateY(0); }

.sa-inverso { background: var(--sa-sal); color: var(--sa-grafito); border-color: var(--sa-sal); }

.sa-inverso:hover { color: var(--sa-grafito); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }

.sa-ancho { width: 100%; }

/* ---------- Portada: hero salobre ---------- */

.sa-salobre {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(56px, 10vw, 120px) 22px clamp(40px, 6vw, 70px);
}

.sa-salobre h1 {
    font-weight: 800;
    font-size: clamp(2.4rem, 6.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-transform: lowercase;
    margin: 0 0 18px;
    max-width: 17ch;
}

.sa-salobre-sub {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    color: var(--sa-grafito-2);
    max-width: 52ch;
    line-height: 1.6;
    margin: 0 0 30px;
}

/* Buscador de línea baja: input desnudo sobre hairline gruesa */

.sa-sonda {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    max-width: 640px;
    border-bottom: 3px solid var(--sa-grafito);
    padding-bottom: 10px;
    transition: border-color 0.2s ease;
}

.sa-sonda:focus-within { border-color: var(--sa-marca); }

.sa-sonda input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--sa-tipo);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--sa-grafito);
    padding: 6px 0;
    outline: none;
}

.sa-sonda input::placeholder { color: var(--sa-bruma); font-weight: 500; }

/* ---------- Capas (secciones de portada) ---------- */

.sa-capa {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 56px) 22px;
    border-top: 1px solid var(--sa-hilo);
}

.sa-epigrafe {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sa-acento);
    margin: 0 0 24px;
}

/* Índice numerado de categorías a dos columnas */

.sa-indice {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 56px;
}

.sa-indice li { break-inside: avoid; }

.sa-indice a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 6px;
    border-bottom: 1px solid var(--sa-hilo);
    text-decoration: none;
    transition: background 0.16s ease, padding-left 0.16s ease;
}

.sa-indice a:hover { background: var(--sa-sal-2); padding-left: 14px; }

.sa-cifra {
    font-weight: 700;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--sa-marca);
}

.sa-indice-nombre {
    font-weight: 700;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    letter-spacing: -0.02em;
    color: var(--sa-grafito);
}

.sa-indice a:hover .sa-indice-nombre { color: var(--sa-marca); }

@media (max-width: 720px) {
    .sa-indice { columns: 1; }
}

/* Cinta horizontal de destacadas (scroll-snap) */

.sa-cinta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 320px);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--sa-bruma) transparent;
}

.sa-cinta .sa-losa { scroll-snap-align: start; border: 1px solid var(--sa-hilo); border-top: 3px solid var(--sa-grafito); background: #fff; padding: 20px; grid-template-columns: 1fr; }

.sa-cinta .sa-losa:hover { border-top-color: var(--sa-marca); }

/* ---------- Losa de empresa ---------- */

.sa-losa {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 0.9fr) 2fr auto;
    gap: 8px 26px;
    align-items: baseline;
    padding: 18px 6px;
    border-top: 1px solid var(--sa-hilo);
    transition: background 0.16s ease;
}

.sa-losa:hover { background: var(--sa-sal-2); }

.sa-losa-titulo h3 { margin: 0; font-size: 1.06rem; letter-spacing: -0.02em; }

.sa-losa-titulo a { font-weight: 800; color: var(--sa-grafito); text-decoration: none; transition: color 0.16s ease; }

.sa-losa-titulo a:hover { color: var(--sa-marca); }

.sa-marca-agua {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sa-marca);
}

.sa-losa-meta { margin: 0; font-weight: 600; font-size: 0.82rem; color: var(--sa-bruma); display: flex; flex-wrap: wrap; gap: 2px 10px; }

.sa-losa-meta a { color: var(--sa-acento); text-decoration: none; }

.sa-losa-meta a:hover { text-decoration: underline; }

.sa-losa-nota { margin: 0; font-size: 0.9rem; color: var(--sa-grafito-2); line-height: 1.55; }

.sa-losa-flecha {
    justify-self: end;
    color: var(--sa-bruma);
    font-size: 1.1rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.sa-losa:hover .sa-losa-flecha { transform: translateX(6px); color: var(--sa-marca); }

.sa-vetada { box-shadow: inset 3px 0 0 var(--sa-marca); padding-left: 14px; }

@media (max-width: 860px) {
    .sa-losa { grid-template-columns: 1fr auto; }
    .sa-losa-nota { grid-column: 1 / -1; }
}

/* ---------- Cierre de portada ---------- */

.sa-yacimiento {
    background: var(--sa-grafito);
    color: var(--sa-sal);
    text-align: center;
    padding: clamp(48px, 7vw, 84px) 22px;
    margin-top: 40px;
}

.sa-yacimiento h2 {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    letter-spacing: -0.035em;
    text-transform: lowercase;
    margin: 0 0 24px;
    color: var(--sa-sal);
}

/* ---------- Páginas interiores ---------- */

.sa-cuenca { max-width: 1160px; margin: 0 auto; padding: 26px 22px 60px; }

.sa-frente { border-bottom: 3px double var(--sa-grafito); padding: 18px 0 20px; margin-bottom: 6px; }

.sa-frente h1 {
    font-weight: 800;
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    letter-spacing: -0.04em;
    text-transform: lowercase;
    line-height: 1.05;
    margin: 0;
}

.sa-perfil h1 { text-transform: none; }

.sa-filiacion { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-bruma); margin: 0 0 8px; }

.sa-contrastada { color: var(--sa-marca); }

.sa-ramal { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 10px; }

.sa-ramal a {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--sa-grafito-2);
    text-decoration: none;
    border: 1px solid var(--sa-hilo);
    border-radius: 3px;
    padding: 5px 12px;
    transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sa-ramal a:hover { border-color: var(--sa-marca); color: var(--sa-marca); transform: translateY(-1px); }

.sa-estratos { margin-top: 8px; }

.sa-seco { padding: 26px 6px; color: var(--sa-grafito-2); }

.sa-seco a { color: var(--sa-marca); font-weight: 700; }

.sa-pasada { margin: 28px 0; }

.sa-sedimento { border-top: 1px solid var(--sa-hilo); margin-top: 34px; padding-top: 26px; }

.sa-sedimento h2 { font-weight: 800; letter-spacing: -0.025em; font-size: 1.25rem; margin: 0 0 12px; }

.sa-sedimento div { color: var(--sa-grafito-2); line-height: 1.7; max-width: 75ch; }

/* ---------- Ficha: banda de celdas de contacto ---------- */

.sa-celdas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border: 1px solid var(--sa-hilo);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    margin: 24px 0 8px;
}

.sa-celda {
    padding: 16px 18px;
    border-left: 1px solid var(--sa-hilo);
    border-top: 1px solid var(--sa-hilo);
    margin: -1px 0 0 -1px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--sa-grafito);
    line-height: 1.5;
}

.sa-celda span {
    display: block;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sa-bruma);
    margin-bottom: 5px;
}

.sa-celda a { color: var(--sa-marca); text-decoration: none; }

.sa-celda a:hover { text-decoration: underline; }

.sa-accion { display: flex; align-items: center; }

.sa-tramo { border-top: 1px solid var(--sa-hilo); margin-top: 30px; padding-top: 24px; }

.sa-veta-texto { line-height: 1.75; color: var(--sa-grafito-2); max-width: 75ch; white-space: normal; }

.sa-jornadas { max-width: 460px; }

.sa-jornada {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 8px 4px;
    border-bottom: 1px solid var(--sa-hilo);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sa-grafito-2);
}

.sa-hoy { color: var(--sa-grafito); background: var(--sa-sal-2); }

.sa-hoy span:first-child { color: var(--sa-marca); }

.sa-partida { padding: 14px 4px; border-bottom: 1px solid var(--sa-hilo); }

.sa-partida h3 { margin: 0 0 2px; font-size: 1rem; display: inline; }

.sa-partida h3 a { font-weight: 700; color: var(--sa-grafito); text-decoration: none; }

.sa-partida h3 a:hover { color: var(--sa-marca); }

.sa-partida-precio { float: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sa-marca); }

.sa-partida p { margin: 6px 0 0; font-size: 0.9rem; color: var(--sa-grafito-2); }

.sa-mineral { display: grid; gap: 10px; }

.sa-mineral a { font-weight: 700; font-size: 0.92rem; color: var(--sa-grafito); text-decoration: none; transition: color 0.16s ease; }

.sa-mineral a:hover { color: var(--sa-marca); }

/* ---------- Formulario ---------- */

.sa-form { max-width: 560px; display: grid; gap: 16px; }

.sa-campo label { display: block; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sa-grafito-2); margin-bottom: 6px; }

.sa-campo input[type="text"], .sa-campo input[type="email"], .sa-campo input[type="tel"], .sa-campo textarea {
    width: 100%;
    border: 1px solid var(--sa-hilo);
    border-radius: 4px;
    background: #fff;
    font-family: var(--sa-tipo);
    font-size: 0.95rem;
    color: var(--sa-grafito);
    padding: 11px 13px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.sa-campo input:focus, .sa-campo textarea:focus {
    outline: none;
    border-color: var(--sa-marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-marca) 16%, transparent);
}

.sa-consent { display: flex; gap: 10px; align-items: flex-start; }

.sa-consent label { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 0.85rem; }

.sa-consent a { color: var(--sa-marca); }

.sa-error { display: block; margin-top: 5px; font-weight: 600; font-size: 0.8rem; color: #b3261e; }

.sa-form-ok { font-weight: 700; color: var(--sa-marca); background: var(--sa-sal-2); border-left: 3px solid var(--sa-marca); padding: 14px 16px; }

/* ---------- Pie salino ---------- */

.sa-poso { border-top: 3px double var(--sa-grafito); margin-top: 60px; background: var(--sa-sal-2); }

.sa-poso-inner { max-width: 1160px; margin: 0 auto; padding: 40px 22px 30px; }

.sa-poso-cabeza { margin-bottom: 22px; }

.sa-poso-marca { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; text-transform: lowercase; margin: 0 0 6px; }

.sa-poso-lema { font-weight: 500; color: var(--sa-grafito-2); margin: 0; max-width: 60ch; }

.sa-poso-indice { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 20px; }

.sa-poso-indice a { font-weight: 600; font-size: 0.86rem; color: var(--sa-grafito-2); text-decoration: none; transition: color 0.16s ease; }

.sa-poso-indice a:hover { color: var(--sa-marca); }

.sa-poso-legal { font-weight: 500; font-size: 0.78rem; color: var(--sa-bruma); margin: 0; }

.sa-poso-legal a { color: inherit; }

/* ---------- Parciales centrales ---------- */

.breadcrumb { font-weight: 600; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: lowercase; color: var(--sa-bruma); }

.breadcrumb a { color: var(--sa-bruma); }

.faq { border-bottom: 1px solid var(--sa-hilo); }

.faq summary { font-family: var(--sa-tipo); font-weight: 700; color: var(--sa-grafito); }

.faq .answer { color: var(--sa-grafito-2); line-height: 1.7; }

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .sa-cinta { scroll-behavior: auto; }
}