/* ============================
   1. BASE & TIPOGRAFÍA
   ============================ */

body {
    /* Fondo con un ligero efecto de luz usando el color de fondo de marca */
    background:
            radial-gradient(circle at 0% 0%, rgba(255,255,255,0.35) 0, transparent 55%),
            radial-gradient(circle at 100% 0%, rgba(56,189,248,0.10) 0, transparent 55%),
            var(--brand-fondo);
    color: var(--text-primary);
}

h1, h2 {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
}

h3, h4 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

p {
    line-height: 1.7;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

/* ============================
   2. HERO PRINCIPAL (#inicio)
   ============================ */

section#inicio {
    position: relative;
}

section#inicio h1 {
    font-size: clamp(2.3rem, 3vw, 3rem);
    text-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

section#inicio p {
    max-width: 40rem;
    font-size: 1.02rem;
}

/* Botones hero: aspecto “joyería” */

section#inicio a {
    border-radius: 999px;
    padding-inline: 1.9rem;
    padding-block: 0.9rem;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
            transform 0.18s ease-out,
            box-shadow 0.18s ease-out,
            background-color 0.18s ease-out,
            color 0.18s ease-out;
}

section#inicio a:first-child {
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

section#inicio a:nth-child(2) {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(10px);
}

section#inicio a:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.45);
}

/* ============================
   3. “QUIÉNES SOMOS” (#vidrieros)
   ============================ */

section#vidrieros .prose {
    text-align: justify;
}
section#vidrieros .prose h1,
section#vidrieros .prose h2,
section#vidrieros .prose h3,
section#vidrieros .prose h4 {
    text-align: left;
}

/* ============================
   4. BLOQUES CONCEPTUALES
   Mamparas / Espejos / Barandas / Cerramientos
   ============================ */

section#mamparas,
section#espejos,
section#barandas,
section#cerramientos {
    position: relative;
    padding-top: clamp(3.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(3.5rem, 5vw, 4.5rem);
}

/* Línea fina superior decorativa en cada bloque de servicio */
section#mamparas::before,
section#espejos::before,
section#barandas::before,
section#cerramientos::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.25rem;
    width: 120px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            transparent 0,
            rgba(255,255,255,0.3) 10%,
            var(--brand-secundario) 50%,
            rgba(255,255,255,0.3) 90%,
            transparent 100%
    );
}

/* Título principal de los bloques conceptuales:
   más grande y claramente “cabeza de sección” */

section#mamparas h2,
section#espejos h2,
section#barandas h2,
section#cerramientos h2 {
    font-size: clamp(1.9rem, 2.8vw, 2.4rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Etiqueta sobre el título: “Servicio · …” */

section#mamparas h2::before,
section#espejos h2::before,
section#barandas h2::before,
section#cerramientos h2::before {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

/* Texto de cada bloque conceptual: ancho controlado + justificado */

section#mamparas .prose,
section#espejos .prose,
section#barandas .prose,
section#cerramientos .prose {
    max-width: 58rem;
    margin-inline: auto;
    text-align: justify;
}

/* Textos de headings dentro de la prose siguen alineados a la izquierda */
section#mamparas .prose h1,
section#mamparas .prose h2,
section#mamparas .prose h3,
section#mamparas .prose h4,
section#espejos .prose h1,
section#espejos .prose h2,
section#espejos .prose h3,
section#espejos .prose h4,
section#barandas .prose h1,
section#barandas .prose h2,
section#barandas .prose h3,
section#barandas .prose h4,
section#cerramientos .prose h1,
section#cerramientos .prose h2,
section#cerramientos .prose h3,
section#cerramientos .prose h4 {
    text-align: left;
}

/* Etiquetas específicas para cada servicio */
section#mamparas h2::before {
    content: "Servicio · Mamparas de ducha";
}
section#espejos h2::before {
    content: "Servicio · Espejos a medida";
}
section#barandas h2::before {
    content: "Servicio · Barandas de vidrio";
}
section#cerramientos h2::before {
    content: "Servicio · Cerramientos de vidrio";
}

/* ============================
   5. BLOQUES DE VENTAJAS
   (catalogo anclado en *-ventajas)
   ============================ */

/* Tarjetas glassmorphism */
section[id$="-ventajas"] .grid > * {
    background: radial-gradient(circle at top left,
    rgba(255,255,255,0.9) 0,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0.92) 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 24px 50px rgba(10,3,49,0.18);
    backdrop-filter: blur(14px);
    transition:
            transform 0.2s ease-out,
            box-shadow 0.2s ease-out,
            border-color 0.2s ease-out,
            background 0.2s ease-out;
}

section[id$="-ventajas"] .grid > *:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(10,3,49,0.25);
    border-color: rgba(212,175,55,0.85); /* dorado */
}

/* Icono de ventaja */
section[id$="-ventajas"] svg,
section[id$="-ventajas"] i {
    width: 1.4rem;
    height: 1.4rem;
    margin-bottom: 0.75rem;
    color: var(--brand-secundario);
}

/* Título de la ventaja */
section[id$="-ventajas"] h3,
section[id$="-ventajas"] h4 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

/* Texto de la ventaja */
section[id$="-ventajas"] p {
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* Títulos de los bloques de ventajas un paso por debajo del título conceptual */
section#mamparas-ventajas h2,
section#espejos-ventajas h2,
section#barandas-ventajas h2,
section#cerramientos-ventajas h2 {
    font-size: clamp(1.5rem, 2.1vw, 2rem);
}

/* ============================
   6. GALERÍAS POR SERVICIO
   (anchors galeria-*)
   ============================ */

section[id^="galeria-"] {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

section[id^="galeria-"] figure {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 22px 50px rgba(15,23,42,0.25);
    background: radial-gradient(circle at top,
    rgba(255,255,255,0.18) 0,
    rgba(15,23,42,1) 70%);
}

section[id^="galeria-"] img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

section[id^="galeria-"] figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to top,
            rgba(10,3,49,0.8),
            rgba(10,3,49,0.0)
    );
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

section[id^="galeria-"] figcaption {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.1rem;
    font-size: 0.9rem;
    color: #f9fafb;
    text-shadow: 0 10px 30px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

section[id^="galeria-"] figure:hover img {
    transform: scale(1.06);
    opacity: 0.95;
}

section[id^="galeria-"] figure:hover::after {
    opacity: 1;
}

section[id^="galeria-"] figure:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   7. FAQ Y FORMULARIO
   ============================ */

section#faq {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

section#faq .grid > * {
    border-radius: 1.25rem;
    border: 1px solid rgba(15,23,42,0.06);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}

/* Contacto */

section#contacto {
    border-top: 1px solid rgba(148,163,184,0.35);
}

section#contacto form {
    border-radius: 1.5rem;
    border: 1px solid rgba(148,163,184,0.6);
    box-shadow: 0 24px 60px rgba(15,23,42,0.18);
}

/* Inputs */
section#contacto input,
section#contacto textarea,
section#contacto select {
    border-radius: 999px;
    border-width: 1px;
    border-color: rgba(148,163,184,0.8);
    padding-inline: 1rem;
    transition:
            border-color 0.16s ease-out,
            box-shadow 0.16s ease-out,
            background-color 0.16s ease-out;
}

section#contacto textarea {
    border-radius: 1rem;
}

section#contacto input:focus,
section#contacto textarea:focus,
section#contacto select:focus {
    outline: none;
    border-color: var(--brand-primario);
    box-shadow: 0 0 0 1px rgba(10,3,49,0.35);
    background-color: rgba(255,255,255,0.98);
}

/* Botón enviar */

section#contacto button[type="submit"] {
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding-inline: 1.8rem;
    padding-block: 0.9rem;
    box-shadow: 0 18px 40px rgba(15,23,42,0.35);
    transition:
            transform 0.18s ease-out,
            box-shadow 0.18s ease-out;
}

section#contacto button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 55px rgba(15,23,42,0.45);
}

/* ============================
   HEADER Y MENÚ
   ============================ */

/* Transiciones suaves del header */
header.site-header {
    transition:
            background-color 0.2s ease-out,
            box-shadow 0.2s ease-out,
            border-color 0.2s ease-out,
            color 0.2s ease-out;
}

/* Estado SCROLLED (o páginas sin hero full-screen) */
header.site-header.scrolled {
    background-color: var(--brand-fondo);
    border-bottom-color: rgba(15,23,42,0.08);
    box-shadow: 0 10px 30px rgba(15,23,42,0.10);
}

/* Estado sobre hero full-screen, arriba del todo */
header.site-header--over-hero:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* ============================
   ENLACES DEL MENÚ
   ============================ */

/* Estado base de todos los enlaces del menú */
header.site-header .menu-link {
    border-radius: 999px;
    color: var(--text-primary);
    transition:
            background-color 0.18s ease-out,
            color 0.18s ease-out,
            box-shadow 0.18s ease-out;
}

/* TEXTO:
   - En páginas normales y estado scrolled → color normal.
*/
header.site-header.scrolled .menu-link,
header.site-header:not(.site-header--over-hero) .menu-link {
    color: var(--text-primary);
}

/* TEXTO:
   - Solo cuando el header está sobre el hero y sin scroll → texto blanco.
*/
header.site-header--over-hero:not(.scrolled) .menu-link {
    color: #f9fafb;
}

/* HOVER EN PÁGINAS NORMALES Y ESTADO SCROLLED
   → fondo oscuro de marca + texto claro
*/
header.site-header.scrolled .menu-link:hover,
header.site-header:not(.site-header--over-hero) .menu-link:hover {
    background-color: var(--brand-primario);
    color: var(--text-on-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* HOVER SOBRE HERO (arriba del todo)
   → pill blanco con texto oscuro (contraste sobre hero oscuro)
*/
header.site-header--over-hero:not(.scrolled) .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--brand-primario);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* Título de marca, si no hay logo */
header.site-header--over-hero:not(.scrolled) .brand-title {
    color: #f9fafb;
}
header.site-header.scrolled .brand-title,
header.site-header:not(.site-header--over-hero) .brand-title {
    color: var(--text-primary);
}

/* Accesibilidad: foco visible */
header.site-header .menu-link:focus-visible {
    outline: 2px solid var(--brand-secundario);
    outline-offset: 2px;
}