/* =========================================================================
   SOYNDAS GENERAL SERVICES E.I.R.L. — Hoja de estilos del sitio público
   Paleta tomada del logotipo (índigo SGS + negro vía + amarillo señal)
   y de los acentos cian del brochure corporativo.
   ========================================================================= */
:root {
    --sgs-indigo: #3A44C8;
    --sgs-indigo-deep: #2A3299;
    --sgs-night: #0E1626;
    --sgs-ink: #1B2333;
    --sgs-cyan: #1FA3DC;
    --sgs-road: #F2C200;
    --sgs-paper: #F4F6FA;
    --sgs-slate: #5B6478;
    --sgs-line: #DDE2EC;
    --sk-base: #E6EAF2;
    --sk-shine: #F6F8FC;
    --header-h: 72px;
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-stretch: 100%; }
.font-display { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 118%; letter-spacing: -0.01em; }
.font-condensed { font-stretch: 88%; }

:focus-visible { outline: 3px solid var(--sgs-road); outline-offset: 3px; border-radius: 4px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.modal-glass { background: rgba(14, 22, 38, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ----- Curvas de nivel: el motivo de marca ----- */
.contours-light { background-image: url('../img/contours-light.svg'); background-size: cover; background-position: center; }
.contours-ink { background-image: url('../img/contours-ink.svg'); background-size: cover; background-position: center; }

/* ----- Retícula de estación total (hero) ----- */
.reticle { position: relative; width: 56px; height: 56px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50%; }
.reticle::before, .reticle::after { content: ''; position: absolute; background: rgba(255,255,255,.7); }
.reticle::before { left: 50%; top: -10px; bottom: -10px; width: 1.5px; transform: translateX(-50%); }
.reticle::after { top: 50%; left: -10px; right: -10px; height: 1.5px; transform: translateY(-50%); }
.reticle span { position: absolute; inset: 22px; border-radius: 50%; background: var(--sgs-road); }

/* ----- Logo sobre placa blanca (como en el brochure) ----- */
.logo-tile { background: #fff; border-radius: 12px; padding: 6px 8px; box-shadow: 0 1px 0 rgba(14,22,38,.06), 0 6px 18px -10px rgba(14,22,38,.35); }

/* ----- Hero ----- */
.hero { min-height: calc(100svh - var(--header-h)); }
@supports not (height: 100svh) { .hero { min-height: calc(100vh - var(--header-h)); } }
.hero-slide { transition: opacity 1.2s ease; }
.hero-title { font-size: clamp(2.1rem, 6.2vw, 4.9rem); line-height: .98; }
.hero-title .hero-sub { display: block; font-weight: 300; font-stretch: 100%; }
.hero-dot { width: 28px; height: 3px; background: rgba(255,255,255,.35); border-radius: 2px; transition: background .3s, width .3s; }
.hero-dot.is-active { width: 48px; background: var(--sgs-road); }

/* ----- Lema ----- */
.lema-text { font-size: clamp(1.9rem, 6.4vw, 5.6rem); line-height: 1; font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; }

/* ----- Tarjetas de servicio cotizable ----- */
.svc-card { transition: border-color .25s ease, box-shadow .25s ease; }
.svc-card:hover { border-color: var(--sgs-indigo); box-shadow: 0 18px 40px -24px rgba(42,50,153,.55); }

/* ----- Galería (panel fotográfico) ----- */
.gal-grid { columns: 2; column-gap: 10px; }
@media (min-width: 768px) { .gal-grid { columns: 3; column-gap: 14px; } }
@media (min-width: 1280px) { .gal-grid { columns: 4; } }
.gal-item { break-inside: avoid; margin-bottom: 10px; display: block; width: 100%; }
@media (min-width: 768px) { .gal-item { margin-bottom: 14px; } }
.gal-item[hidden] { display: none; }

/* ----- Chips de filtro (horizontal en móvil) ----- */
.chip { white-space: nowrap; }
.chip.is-active { background: var(--sgs-indigo); color: #fff; border-color: var(--sgs-indigo); }

/* ----- Botón de envío del formulario ----- */
.btn-sending { position: relative; pointer-events: none; color: transparent !important; }
.btn-sending::after {
    content: attr(data-sending); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%) var(--sgs-indigo-deep);
    background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; border-radius: inherit; font-size: .8rem; letter-spacing: .02em;
}

/* =========================================================================
   SISTEMA DE CARGA CON ESQUELETO (skeleton)
   ========================================================================= */
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
    background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; border-radius: 6px;
}
.sk-dark { --sk-base: #1A2438; --sk-shine: #26324B; }
.sk-line { height: 12px; border-radius: 999px; }
.sk-line + .sk-line { margin-top: 10px; }

/* Contenedor de imagen: muestra el esqueleto hasta que la imagen carga */
.sk-box { position: relative; overflow: hidden; }
.sk-box:not(.sk-done) {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
    background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite;
}
.sk-box > img, .sk-box > iframe { opacity: 0; transition: opacity .45s ease; }
.sk-box.sk-done > img, .sk-box.sk-done > iframe, .sk-box > img.is-ready, .sk-box > iframe.is-ready { opacity: 1; }
.sk-box.sk-done > img.hero-slide.opacity-0 { opacity: 0; }

/* Imágenes sueltas (sin contenedor) */
img.sk-img:not(.is-ready) {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
    background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; color: transparent;
}

/* Pantalla esqueleto de página completa (primer render) */
#page-skeleton {
    position: fixed; inset: 0; z-index: 9999; background: #fff; overflow: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
#page-skeleton.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#page-skeleton .ps-top { height: 34px; background: var(--sgs-night); }
#page-skeleton .ps-bar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--sgs-line); }
#page-skeleton .ps-hero { height: calc(100vh - 106px); max-height: 640px; background: var(--sgs-night); padding: 12vh 5vw 0; }
#page-skeleton .ps-hero .sk { --sk-base: #1A2438; --sk-shine: #2A3753; }
#page-skeleton .ps-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 28px 5vw; }
@media (max-width: 767px) { #page-skeleton .ps-top { display: none; } #page-skeleton .ps-hide-sm { display: none; } }

/* Respeto a movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Altura real del header en tablet/escritorio (barra superior + barra principal) */
@media (min-width: 768px) { :root { --header-h: 108px; } }