:root {
    --bg-body: #f7f8f7;
    --bg-clara: #fff;
    --bg-oscura: #14201c;
    --bg-oscura-2: #1f342c;
    --texto-principal: #1f2a2e;
    --texto-secundario: #55645d;
    --texto-claro: #fff;
    --texto-claro-sec: #b9c9c1;
    --borde: #e1e6e3;
    --acento: #7fd6b3;
    --acento-oscuro: #2f7a5c;
    --card-bg: #fff;
    --input-bg: #fff;
    --linea-grilla: rgba(47,122,92,0.055);
}

[data-theme="dark"] {
    --bg-body: #0f1512;
    --bg-clara: #1a2420;
    --bg-oscura: #0a0f0d;
    --bg-oscura-2: #14201c;
    --texto-principal: #e8ece9;
    --texto-secundario: #a3b0aa;
    --texto-claro: #f0f2f0;
    --texto-claro-sec: #8fa39a;
    --borde: #2a3833;
    --acento: #7fd6b3;
    --acento-oscuro: #7fd6b3;
    --card-bg: #1f2b26;
    --input-bg: #14201c;
    --linea-grilla: rgba(127,214,179,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* La cuadrícula del hero se continúa por toda la página: mismo paso de 40px y
   mismo origen (el hero arranca en y=0), así las líneas siguen alineadas al
   pasar del hero al contenido y el fondo deja de cortarse. */
body {
    font-family: 'Segoe UI', sans-serif;
    color: var(--texto-principal);
    background-color: var(--bg-body);
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
   CUADRÍCULA
   =========================================
   Una celda de 40px anclada al borde superior izquierdo de cada bloque. Al
   arrancar en su propio borde, la primera línea cae exactamente donde cambia
   el color de fondo, sea cual sea el alto del bloque de arriba. */
.seccion-clara, .servicio-cuerpo {
    background-color: var(--bg-body);
    background-image:
        linear-gradient(var(--linea-grilla) 0 1px, transparent 1px),
        linear-gradient(90deg, var(--linea-grilla) 0 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    background-origin: border-box;
}
/* Los bloques oscuros son opacos y taparían la cuadrícula: la repiten encima. */
.hero::before, .servicio-hero::before, footer#contacto::before, #intro-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(#7fd6b3 0 1px, transparent 1px),
        linear-gradient(90deg, #7fd6b3 0 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
}
/* Los hero anclan su cuadrícula al borde inferior, que es justo donde cambia el
   color. Así la última fila es entera y el paso de 40px cruza la costura sin
   quebrarse; la fila incompleta queda arriba, detrás del encabezado. */
.hero::before, .servicio-hero::before { background-position: 0 100%; }
a { color: inherit; }

/* NAV */
header { position: fixed; top: 0; width: 100%; background: rgba(20,28,31,0.97); z-index: 100; }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 2rem; max-width: 1200px; margin: 0 auto; }
nav { display: flex; gap: 1.5rem; }
nav a { color: #c9d6d1; text-decoration: none; font-size: 0.88rem; letter-spacing: 0.5px; transition: color 0.2s; }
nav a:hover { color: #7fd6b3; }
.nav-actions { display: flex; align-items: center; }
.menu-toggle { display: none; background: transparent; border: 1px solid rgba(127,214,179,0.45); color: #7fd6b3; width: 38px; height: 38px; border-radius: 6px; cursor: pointer; font-size: 1.25rem; }
.btn-outline { border: 1.5px solid rgba(127,214,179,0.5); color: #7fd6b3; padding: 9px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: border-color 0.2s; }
.btn-outline:hover { border-color: #7fd6b3; }

/* WORDMARK / LOGO */
.wordmark { display:flex; align-items:baseline; gap:0; text-decoration:none; }
.wordmark .letra-serif { font-family:'Times New Roman', Times, serif; font-size:1.6rem; font-weight:700; color:#fff; }
.wordmark .letra-script { font-family:'Mistral', cursive; font-size:2rem; color:#e8c97a; margin-left:2px; }
.wordmark .sol-icon { width:24px; height:24px; margin:0 -2px; align-self:center; display:block; }

/* THEME SWITCH */
.theme-switch {
    background: none;
    border: 1.5px solid rgba(127,214,179,0.4);
    color: var(--acento);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-left: 0.8rem;
    transition: border-color 0.2s, transform 0.2s;
}
.theme-switch:hover { border-color: var(--acento); transform: scale(1.05); }

/* HERO */
.hero { min-height: 100vh; background: linear-gradient(135deg, #14201c 0%, #1f342c 45%, #2c4a3c 100%); display: flex; align-items: center; justify-content: center; text-align: center; padding: 90px 2rem 2rem; position: relative; overflow: hidden; }
.hero .container { position: relative; max-width: 720px; margin: 0 auto; }
.hero-badge { display: inline-block; background: rgba(127,214,179,0.15); border: 1px solid rgba(127,214,179,0.4); color: #7fd6b3; font-size: 0.78rem; padding: 6px 16px; border-radius: 20px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 1rem; }
.hero p { font-size: 1.1rem; color: #b9c9c1; line-height: 1.7; margin-bottom: 2rem; max-width: 520px; margin-left: auto; margin-right: auto; }
.btn-primary { background: #7fd6b3; color: #14201c; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.95rem; display: inline-block; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn-primary:hover { background: #9ae4c8; transform: translateY(-1px); }
.hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(127,214,179,0.2); }
.stat-item { text-align: center; }
.stat-num { font-size: 2rem; font-weight: 800; color: #7fd6b3; }
.stat-label { font-size: 0.78rem; color: #8fa39a; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* SECTIONS */
section { padding: 80px 2rem; }
.container { max-width: 1100px; margin: 0 auto; }
.section-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--acento-oscuro); font-weight: 700; margin-bottom: 0.5rem; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; color: var(--texto-principal); margin-bottom: 1rem; }
.subtitulo { font-size: 1rem; color: var(--texto-secundario); line-height: 1.7; max-width: 580px; margin-bottom: 1rem; }

/* NOSOTROS */
/* Todo el contenido comparte una única superficie (el fondo del body): así el
   fondo no salta de sección en sección. La jerarquía la dan el espaciado, una
   línea divisoria fina y las tarjetas, que quedan levantadas sobre ese fondo. */
.seccion-clara + .seccion-clara { border-top: 1px solid var(--borde); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.grid-2 p { font-size: 1rem; color: var(--texto-secundario); line-height: 1.75; margin-bottom: 1rem; }
.imagen-placeholder { background: linear-gradient(135deg, #1f342c, #2c4a3c); border-radius: 12px; height: 320px; display: flex; align-items: center; justify-content: center; color: #7fd6b3; font-size: 0.95rem; text-align: center; padding: 1rem; }
.imagen-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* PROCESO */
.proceso-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.proceso-paso { border-top: 2px solid var(--acento); padding: 1.1rem 0.8rem 0; }
.proceso-numero { color: var(--acento-oscuro); font-size: .78rem; font-weight: 800; letter-spacing: 1.5px; }
.proceso-paso h3 { font-size: 1rem; margin: .55rem 0; }
.proceso-paso p { color: var(--texto-secundario); font-size: .9rem; line-height: 1.6; }
.recursos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.recurso-card { border: 1px solid var(--borde); border-radius: 10px; padding: 1.35rem; background: var(--card-bg); }
.recurso-card span { color: var(--acento-oscuro); font-size: .76rem; font-weight: 800; letter-spacing: 1px; }
.recurso-card h3 { font-size: 1.05rem; margin: .65rem 0; }
.recurso-card p { color: var(--texto-secundario); font-size: .9rem; line-height: 1.6; }

/* SERVICIOS */
.servicios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.servicio-card { background: var(--card-bg); border: 1px solid var(--borde); border-radius: 12px; padding: 2rem 1.5rem; transition: transform 0.2s, box-shadow 0.2s, background 0.3s, border-color 0.3s; }
.servicio-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20,32,28,0.1); }
.serv-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #1f342c, #2f7a5c); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.2rem; }
.serv-title { font-size: 1.05rem; font-weight: 700; color: var(--texto-principal); margin-bottom: 0.6rem; }
.serv-desc { font-size: 0.87rem; color: var(--texto-secundario); line-height: 1.6; }
.serv-tag { display: inline-block; background: #eaf6ef; color: #2f7a5c; font-size: 0.72rem; padding: 3px 10px; border-radius: 12px; margin-top: 1rem; font-weight: 600; }

/* PROYECTOS (carrusel) */
.carrusel-container { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.carrusel-track-wrapper { overflow: hidden; border-radius: 12px; flex: 1; }
.carrusel-track { display: flex; transition: transform 0.4s ease; }
/* Marco de alto fijo: la foto se ve entera (contain) y los costados se rellenan
   con la misma imagen ampliada y desenfocada, para que verticales, cuadradas y
   apaisadas convivan sin recortes ni saltos de tamaño. */
.carrusel-slide { position: relative; width: 100%; flex-shrink: 0; margin: 0; height: 420px; overflow: hidden; background: #0e1613; }
.carrusel-slide::before { content: ""; position: absolute; inset: 0; background-image: var(--foto); background-size: cover; background-position: center; filter: blur(28px) saturate(1.35) brightness(0.62); transform: scale(1.25); }
.carrusel-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.carrusel-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1rem; color: #fff; font-size: .9rem; line-height: 1.45; text-align: left; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.55) 45%, rgba(0,0,0,0)); }
/* Borde con el color de marca: sobre el fondo claro un borde gris no llegaba
   a distinguirse del fondo (1,06:1). */
.carrusel-btn { background: var(--card-bg); border: 1px solid var(--acento-oscuro); color: var(--acento-oscuro); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.carrusel-btn:hover { background: var(--acento); border-color: var(--acento); color: #14201c; }
.carrusel-cta { text-align: center; margin-top: 2rem; }

/* CALCULADORAS */
.calculadora-ui { background: var(--bg-clara); border: 1px solid var(--borde); border-radius: 12px; padding: 1.8rem; transition: background 0.3s, border-color 0.3s; }
.calculadora-ui h3 { font-size: 1.05rem; color: var(--texto-principal); margin-bottom: 1.2rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.8rem; color: var(--texto-secundario); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.form-group input { width: 100%; background: var(--input-bg); border: 1px solid var(--borde); border-radius: 6px; padding: 10px 14px; font-size: 0.95rem; font-family: inherit; color: var(--texto-principal); }
.form-group input:focus { outline: none; border-color: #2f7a5c; }
.btn-block { width: 100%; margin-top: 0.4rem; }
.resultado-box { margin-top: 1.2rem; background: #eaf6ef; border-left: 3px solid #7fd6b3; border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; font-size: 0.92rem; color: #14201c; }
.resultado-box strong { display: block; margin-top: 4px; font-size: 1.1rem; color: #2f7a5c; }
.calculadora-aviso { color: var(--texto-secundario); font-size: .82rem; line-height: 1.5; margin: 1.25rem 0 0; }
.viga-diagrama { border: 1px solid var(--borde); border-radius: 8px; margin: 1rem 0; padding: .55rem; color: var(--acento-oscuro); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.viga-diagrama svg { display: block; width: 100%; height: 178px; }
.viga-diagrama line, .viga-diagrama path { vector-effect: non-scaling-stroke; }
.carga-distribuida { stroke: currentColor; stroke-width: 1.5; }
.apoyo { fill: none; stroke: var(--texto-principal); stroke-width: 2; }
.suelo { stroke: var(--texto-secundario); stroke-width: 1.3; }
.diagrama-etiqueta { fill: var(--texto-secundario); font: 600 13px 'Segoe UI', sans-serif; }
.calculadoras-grid { align-items: stretch; grid-template-columns: 1fr 1fr; }
.calculadoras-grid .calculadora-ui { display: flex; flex-direction: column; }
.calculadoras-grid .calculadora-aviso:last-child { margin-top: auto; }
.pilote-diagrama svg { height: 220px; }
.pilote-cuerpo { fill: none; stroke: var(--texto-principal); stroke-width: 2; }
.cabezal-rigido { fill: var(--texto-principal); }
.friccion-flecha { stroke: #2f7a5c; stroke-width: 2; }
.punta-flecha { stroke: #d17d47; stroke-width: 2.5; }
.perfil-diagrama { fill: color-mix(in srgb, #d17d47 22%, transparent); stroke: #d17d47; stroke-width: 1.3; }
.resultado-zeevaert { margin-top: 0.6rem; font-weight: 700; font-size: 1rem; color: var(--acento-oscuro); }
.calculadoras-grupo { grid-column: 1 / -1; margin: 1.5rem 0 -0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--acento-oscuro); border-top: 1px solid var(--borde); padding-top: 1.5rem; }
.calculadoras-grid > .calculadoras-grupo:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* FOOTER / CONTACTO */
footer#contacto { background: linear-gradient(135deg, #14201c 0%, #1f342c 100%); text-align: center; padding: 90px 2rem 2.5rem; position: relative; overflow: hidden; }
/* El pie es opaco y taparía la cuadrícula del body: la repite encima. */
footer#contacto .container { position: relative; }
footer#contacto h2 { color: #fff; }
footer#contacto p { color: #b9c9c1; font-size: 1rem; margin-bottom: 0.3rem; }
.btn-whatsapp { display: inline-block; background: #25D366; color: #fff; padding: 14px 34px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.95rem; margin-top: 0.5rem; transition: background 0.2s, transform 0.1s; }
.btn-whatsapp:hover { background: #2fe07a; transform: translateY(-1px); }
.copyright { margin-top: 2.5rem; font-size: 0.8rem; color: #5a6b62; }
.contacto-grid .copyright { grid-column: 1 / -1; text-align: center; margin-top: 0; }
.contacto-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; text-align: left; align-items: start; }
.contacto-grid .section-tag, .contacto-grid h2 { text-align: left; }
.contacto-grid .btn-whatsapp { margin-top: 1.25rem; }
.contacto-form { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; background: rgba(255,255,255,.06); border: 1px solid rgba(127,214,179,.2); padding: 1.25rem; border-radius: 12px; }
.contacto-form label { color: #c9d6d1; font-size: .78rem; text-align: left; display: block; }
.contacto-form input, .contacto-form select, .contacto-form textarea { width: 100%; margin-top: .35rem; border: 1px solid rgba(127,214,179,.25); border-radius: 6px; background: rgba(0,0,0,.15); color: #fff; padding: .7rem; font: inherit; }
.contacto-form textarea, .contacto-form .campo-completo { grid-column: 1 / -1; }
.contacto-form .btn-primary { grid-column: 1 / -1; }

/* WHATSAPP FLOTANTE */
.whatsapp-flotante {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 200;
    transition: transform 0.2s, background 0.2s;
}
.whatsapp-flotante:hover {
    background: #2fe07a;
    transform: scale(1.08);
}

/* INTRO OVERLAY */
@font-face {
    font-family: 'Mistral';
    src: url('fonts/mistral.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
#intro-overlay {
    position:fixed; inset:0; background:#14201c; z-index:999;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#intro-sol {
    width:38vmin; height:38vmin;
    transform-origin: center center;
    position:relative;
}

@media (max-width: 768px) {
  .nav-container { padding: 0 1rem; }
  nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #14201c; padding: .75rem 1rem 1rem; flex-direction: column; gap: 0; border-top: 1px solid rgba(127,214,179,.16); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
  nav.is-open { display: flex; }
  nav a { padding: .85rem .4rem; font-size: 1rem; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: .6rem; }
  .btn-outline { padding: 8px 12px; }
  .grid-2, .contacto-grid { grid-template-columns: 1fr; }
  .proceso-grid { grid-template-columns: 1fr 1fr; }
  .recursos-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.5rem; }
  .carrusel-slide { height: 300px; }
  .carrusel-slide::before { filter: blur(18px) saturate(1.35) brightness(0.62); }
  .carrusel-caption { font-size: .78rem; padding: 2rem .8rem .8rem; }
  .contacto-grid, .contacto-grid .section-tag, .contacto-grid h2 { text-align: center; }
  .contacto-form { grid-template-columns: 1fr; }
  .contacto-form .campo-completo, .contacto-form .btn-primary { grid-column: auto; }
  .whatsapp-flotante { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}

@media (max-width: 430px) {
  .hero { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-stats { gap: .8rem; }
  .stat-num { font-size: 1.45rem; }
  .stat-label { font-size: .65rem; }
  .proceso-grid { grid-template-columns: 1fr; }
  .carrusel-container { gap: .45rem; }
  .carrusel-btn { width: 36px; height: 36px; }
}

/* PAGINA DE SERVICIO INDIVIDUAL */
.servicio-hero {
    background: linear-gradient(135deg, #14201c 0%, #1f342c 100%);
    padding: 110px 2rem 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.servicio-hero .container { position: relative; }
.servicio-hero .volver {
    position: absolute;
    top: 78px;
    left: 2rem;
    color: var(--acento);
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.servicio-hero .volver:hover { opacity: 1; }
.servicio-hero h1 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; }
/* El hero de servicio tiene alto según su contenido (269-343px, no múltiplo de
   40), así que no se puede recortar como el del index sin deformarlo. En vez de
   eso, esta sección dibuja su propia cuadrícula, cuyo origen es su borde
   superior: la primera línea coincide exactamente con el cambio de color. */

.servicio-cuerpo > .container > p { color: var(--texto-secundario); font-size: 1.05rem; line-height: 1.8; max-width: 820px; }
.servicio-detalles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.servicio-detalle { background: var(--card-bg); border: 1px solid var(--borde); border-radius: 10px; padding: 1.2rem; }
.servicio-detalle h2 { font-size: 1rem; margin-bottom: .55rem; }
.servicio-detalle p, .servicio-detalle li { color: var(--texto-secundario); font-size: .9rem; line-height: 1.6; }
.servicio-detalle ul { padding-left: 1rem; }
.servicio-cta { margin-top: 2rem; text-align: center; padding: 1.5rem; background: rgba(127,214,179,.12); border-radius: 12px; }
.servicio-cta p { margin-bottom: 1rem; }

.servicio-nav-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}
.servicio-nav-tag .serv-tag-grande { margin-bottom: 0; }
.servicio-flecha {
    background: rgba(127,214,179,0.12);
    border: 1px solid rgba(127,214,179,0.3);
    color: var(--acento);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
    flex-shrink: 0;
}
.servicio-flecha:hover { background: rgba(127,214,179,0.25); }

@media (max-width: 600px) {
    .servicio-hero .volver { position: static; display: inline-block; margin-bottom: 1.5rem; }
    .servicio-detalles { grid-template-columns: 1fr; }
}

/* Card ahora es un link, mantiene la misma apariencia */
a.servicio-card { text-decoration: none; display: block; cursor: pointer; }