/* Nuriplast — páginas de servicio (/servicios/{slug}). Mismo lenguaje que la portada. */

/* ═══ Cabecera ═══════════════════════════════════════════════════════════════════════ */
.servicio-cabecera { padding-bottom: clamp(3.5rem, 8vh, 6rem); }
.servicio-miga {
    display: flex; flex-wrap: wrap; gap: .45rem;
    margin-bottom: clamp(1.8rem, 4vh, 3rem);
    font-size: .8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.servicio-miga a { transition: color .3s ease; }
.servicio-miga a:hover { color: var(--verde); }
.servicio-miga [aria-current] { color: var(--verde); }
.servicio-cabeza { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 980px) { .servicio-cabeza { grid-template-columns: minmax(0, 1fr) auto; } }
.servicio-cabeza h1 { max-width: 16ch; margin-bottom: 1.2rem; }
.servicio-lema { font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); color: rgba(255, 255, 255, .8); max-width: 48ch; }
.servicio-botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.servicio-cabecera .boton--fantasma { --b-tinta: var(--blanco); }
.servicio-cabecera .boton--fantasma .flecha svg { color: var(--negro); }
.servicio-sello {
    display: none;
    width: clamp(150px, 16vw, 230px); aspect-ratio: 1;
    border-radius: 50%;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, rgba(159, 193, 112, .28), rgba(159, 193, 112, .04) 70%);
    box-shadow: inset 0 0 0 1px rgba(159, 193, 112, .35);
    color: var(--verde);
    animation: sello 14s ease-in-out infinite;
}
@media (min-width: 980px) { .servicio-sello { display: grid; } }
.servicio-sello svg { width: 42%; height: 42%; }
@keyframes sello { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* ═══ Qué es ═════════════════════════════════════════════════════════════════════════ */
.servicio-intro-rejilla { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 980px) { .servicio-intro-rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.servicio-texto { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--tinta-2); }
.servicio-texto::first-line { color: var(--tinta); }
.servicio-puntos { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.servicio-puntos li {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: var(--gris-tarjeta);
    font-weight: 600;
    transition: transform .45s var(--curva), background-color .35s ease, color .35s ease;
}
.servicio-puntos li:hover { transform: translateX(6px); background: var(--verde); color: var(--blanco); }
.servicio-puntos svg { width: 22px; height: 22px; flex: none; color: var(--verde-hondo); transition: color .35s ease; }
.servicio-puntos li:hover svg { color: var(--blanco); }
.servicio-foto { margin: 0; border-radius: var(--radio-m); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--gris-tarjeta); }
.servicio-foto img { width: 100%; height: 114%; object-fit: cover; transform: translate3d(0, var(--paralaje-img, 0px), 0); }
@media (max-width: 979px) { .servicio-foto { aspect-ratio: 4 / 3; } }

/* ═══ Cómo lo hacemos: cronología de pasos ═══════════════════════════════════════════ */
.servicio-pasos h2 { max-width: 20ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pasos {
    position: relative;
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 2.2rem;
}
@media (min-width: 900px) {
    .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
    .pasos::before { /* la línea que une los pasos */
        content: ''; position: absolute; left: 0; right: 0; top: 74px; height: 1px;
        background: linear-gradient(90deg, var(--verde), rgba(255, 255, 255, .15));
    }
}
.paso { position: relative; }
.paso-num {
    display: block;
    font-family: var(--f-titular); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; font-weight: 300;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
    transition: color .6s ease, -webkit-text-stroke-color .6s ease;
}
.paso.visible .paso-num { color: var(--verde); -webkit-text-stroke-color: transparent; transition-delay: calc(var(--retraso, 0ms) + 300ms); }
.paso-punto {
    display: block; width: 13px; height: 13px; border-radius: 50%;
    margin: .9rem 0 1.3rem;
    background: var(--negro); box-shadow: inset 0 0 0 2px var(--verde), 0 0 0 6px rgba(159, 193, 112, .15);
}
.paso h3 { margin: 0 0 .6rem; }
.paso p { color: var(--gris); margin: 0; }

/* ═══ Fotos, preguntas, productos, otros servicios y cierre ══════════════════════════ */
.servicio-mas { padding-bottom: clamp(5rem, 9vw, 8rem); }
.servicio-galeria { display: grid; gap: 40px; margin-bottom: clamp(4rem, 8vw, 7rem); }
@media (min-width: 760px) { .servicio-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.servicio-galeria figure { margin: 0; border-radius: var(--radio-m); overflow: hidden; aspect-ratio: 3 / 2; }
.servicio-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.servicio-galeria figure:hover img { transform: scale(1.05); }

.servicio-preguntas { display: grid; gap: 2rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
@media (min-width: 980px) { .servicio-preguntas { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; } }
.preguntas { border-top: 1px solid var(--negro); }
.pregunta { border-bottom: 1px solid var(--negro); }
.pregunta summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.35rem 0;
    cursor: pointer; list-style: none;
    font-family: var(--f-titular); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.45rem); line-height: 1.35; font-weight: 500;
    transition: color .3s ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--verde-hondo); }
.pregunta summary svg { width: 24px; height: 24px; flex: none; transition: transform .45s var(--curva), color .3s ease; }
.pregunta[open] summary svg { transform: rotate(45deg); color: var(--verde-hondo); }
.pregunta p { margin: 0 0 1.4rem; color: var(--tinta-2); font-size: 1rem; }

.servicio-bloque-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.servicio-bloque-cabeza h2 { margin: 0; }
.servicio-productos { margin-bottom: clamp(4rem, 8vw, 7rem); }
.servicio-productos-rejilla { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.servicio-producto { display: block; border-radius: 24px; overflow: hidden; background: var(--gris-tarjeta); transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.servicio-producto:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(2, 2, 2, .5); }
.servicio-producto-foto { display: block; aspect-ratio: 3 / 2; background: #151515; overflow: hidden; }
.servicio-producto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.servicio-producto:hover img { transform: scale(1.06); }
.servicio-producto-nombre { display: block; padding: 1rem 1.2rem 1.2rem; font-weight: 600; }

.servicio-otros { margin-bottom: clamp(4rem, 8vw, 7rem); }
.servicio-otros h2 { margin-bottom: 2rem; }
.servicio-otros-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.servicio-otro { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.4rem; border-radius: 22px; font-weight: 600; }
.servicio-otro svg { width: 28px; height: 28px; flex: none; transition: color .4s ease, transform .5s var(--curva); }
.servicio-otro:hover svg { transform: rotate(-10deg) scale(1.1); }

.servicio-cierre {
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-radius: var(--radio);
    background: linear-gradient(rgba(2, 2, 2, .9), rgba(2, 2, 2, .9)), url('/img/planos/sobre-negro.svg') center / 1400px auto, var(--negro);
    color: var(--blanco);
    --tinta-2: rgba(255, 255, 255, .78);
}
.servicio-cierre h2 { max-width: 18ch; margin-bottom: 1rem; }
.servicio-cierre .boton--fantasma { --b-tinta: var(--blanco); }
.servicio-cierre .boton--fantasma .flecha svg { color: var(--negro); }

/* ═══ Castilla y León: las nueve provincias ═══════════════════════════════════════════ */
.region-lista { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; margin: clamp(1.8rem, 4vw, 2.6rem) 0 1.8rem; padding: 0; }
.region-lista li {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.25rem; border-radius: var(--pildora, 999px);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.05rem; font-weight: 500;
    transition: border-color .3s ease, background-color .3s ease;
}
.region-lista li:hover { border-color: var(--verde); }
.region-lista svg { width: 18px; height: 18px; color: var(--verde); flex: none; }
.region-lista .region-casa { background: var(--verde); border-color: transparent; color: var(--negro); }
.region-lista .region-casa svg { color: var(--negro); }
.region-texto { max-width: 58rem; color: rgba(255, 255, 255, .8); }
.region-pasos-titulo { margin-top: clamp(3.5rem, 7vw, 6rem); }