/* ============================================================
Serviasistencias Gold — hoja de estilos compartida
Todas las páginas del sitio cargan este único archivo.
============================================================ */
/* La fuente de Google Fonts se carga desde el de cada página con
+ , no desde @import aquí.
@import bloquea el renderizado porque el navegador debe descargar y parsear
este CSS antes de poder empezar a pedir la fuente; moverlo al HTML permite
que la conexión a fonts.googleapis.com se abra en paralelo con este archivo. */
:root {
--porcelain: #FFFFFF;
--porcelain-mid: #F7F7F7;
--porcelain-deep: #EEEEEE;
--champagne: #FFFFFF;
--mist: #EBEBEA;
--ink: #262626;
--ink-soft: #6B6B6B;
--ink-faint: #A0A0A0;
--gold: #C89B2E;
--gold-light: #F4D989;
--gold-deep: #7A5A0E;
--gold-muted: #E0B94A;
--terracotta: #C17A56;
--terracotta-light: #EAC7AE;
--sage: #8B9B72;
--sage-light: #DAE3CB;
--line: rgba(30,30,30,0.1);
--glass-border: rgba(255,255,255,0.85);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; color: var(--ink); background: var(--porcelain);
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
.sg-serif { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }
.sg-tracked { letter-spacing: 0.24em; }
.sg-tracked-lg { letter-spacing: 0.32em; }
/* ---------- efecto "oro metálico" (texto con brillo, para las palabras/
iniciales doradas más importantes: logo, "GOLD", palabra destacada del Hero) ---------- */
.sg-gold-foil {
background-image: linear-gradient(100deg, #7A5A0E 0%, #E0B94A 18%, #F9E6A8 34%, #C89B2E 48%, #FCEFC0 58%, #97711A 72%, #F4D989 88%, #C89B2E 100%);
background-size: 260% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--gold);
animation: sgGoldFoil 7s linear infinite;
}
@keyframes sgGoldFoil { to { background-position: -260% center; } }
@media (prefers-reduced-motion: reduce) { .sg-gold-foil { animation: none; background-position: 30% center; } }
/* ---------- utilidades de layout (mínimas, sin build step) ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.relative { position: relative; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; }
@media (min-width: 640px) { .sm-flex-row { flex-direction: row; } }
.sg-desktop-only { display: none; }
@media (min-width: 640px) { .sg-desktop-only { display: inline-flex; } }
@media (min-width: 768px) { .md-flex { display: flex; } .md-hidden { display: none; } }
@media (max-width: 767px) { .mobile-hidden { display: none; } }
.sg-container { max-width: 1180px; margin: 0 auto; }
.sg-section { padding: clamp(64px,10vh,120px) clamp(24px,6vw,80px); }
.sg-section-narrow { padding: clamp(48px,8vh,96px) clamp(24px,6vw,80px); }
/* ---------- fondo blanco fijo con destellitos de vidrio, para toda la web ---------- */
.sg-silk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #FFFFFF; pointer-events: none; }
.sg-glass-sparkle {
position: absolute; border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, rgba(255,255,255,0.7) 40%, rgba(225,225,225,0.25) 68%, rgba(225,225,225,0) 82%);
box-shadow: 0 3px 10px rgba(110,110,110,0.24), 0 0 0 1px rgba(205,205,205,0.55), inset 0 1px 1px rgba(255,255,255,1);
animation: sgTwinkleDot 4.6s ease-in-out infinite;
}
.sg-page { position: relative; z-index: 1; }
/* ---------- header / nav ----------
Grid de 3 columnas: 1fr | auto | 1fr. El logo vive en la columna del
medio (auto = su propio ancho) y queda SIEMPRE centrado en la píldora,
sin importar si los grupos de links de los lados están visibles o no
(en mobile se ocultan, pero las columnas 1fr siguen midiendo lo mismo
a cada lado, así que el logo no se mueve). Dos páginas a la izquierda,
dos a la derecha, con el menú hamburguesa al extremo derecho. */
.sg-header-wrap { padding: clamp(11px,1.4vw,16px) clamp(16px,4vw,56px); }
.sg-navpill {
border-radius: 999px; width: 100%; max-width: 1040px; margin: 0 auto;
padding: clamp(7px,0.8vw,9px) clamp(22px,2.6vw,30px);
background: rgba(255,255,255,0); backdrop-filter: blur(0px);
border: 1px solid rgba(255,255,255,0.28);
box-shadow: none;
transition: background .45s ease, backdrop-filter .45s ease, border-color .45s ease, box-shadow .45s ease;
/* En mobile es un flex simple: logo a un lado, menú hamburguesa al otro
(los links de escritorio están display:none, así que flexbox los saca
por completo del cálculo — quedan solo esos 2 elementos en extremos
opuestos). En escritorio pasa a grid 1fr/auto/1fr para el layout
simétrico con 2 páginas a cada lado del logo. */
display: flex; align-items: center; justify-content: space-between; gap: clamp(8px,1.2vw,16px);
}
.sg-navpill:hover, .sg-navpill:focus-within {
background: rgba(255,255,255,0.86); backdrop-filter: blur(22px);
border-color: rgba(255,255,255,0.95);
box-shadow: 0 24px 50px -20px rgba(0,0,0,0.3), 0 4px 16px -6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,1);
}
@media (min-width: 768px) {
.sg-navpill { display: grid; grid-template-columns: 1fr auto 1fr; }
}
.sg-header-wrap .sg-logo { font-size: clamp(22px,2.2vw,28px); font-weight: 500; line-height: 1; white-space: nowrap; color: #fff; transition: color .45s ease; }
.sg-logo span {
background-image: linear-gradient(100deg, #7A5A0E 0%, #E0B94A 18%, #F9E6A8 34%, #C89B2E 48%, #FCEFC0 58%, #97711A 72%, #F4D989 88%, #C89B2E 100%);
background-size: 260% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--gold);
animation: sgGoldFoil 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sg-logo span { animation: none; background-position: 30% center; } }
.sg-navpill:hover .sg-logo, .sg-navpill:focus-within .sg-logo { color: var(--ink); }
@media (min-width: 768px) {
.sg-logo { padding: 0 clamp(20px,2.6vw,32px); border-left: 1px solid var(--gold-light); border-right: 1px solid var(--gold-light); }
}
.sg-nav-links-side { display: none; align-items: center; gap: clamp(20px,2.2vw,36px); min-width: 0; }
@media (min-width: 768px) { .sg-nav-links-side { display: flex; } }
.sg-nav-links-left { justify-content: flex-end; }
.sg-nav-links-right { justify-content: flex-start; }
.sg-navpill-end { display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px,2.2vw,36px); min-width: 0; }
@media (min-width: 768px) { .sg-navpill-end { justify-content: flex-start; } }
.sg-nav-link { position: relative; color: var(--ink-soft); transition: color .4s ease; text-decoration:none; font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; white-space: nowrap; }
.sg-nav-link:hover, .sg-nav-link.active { color: var(--ink); }
.sg-nav-link::after { content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--gold); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.sg-nav-link:hover::after, .sg-nav-link.active::after { width:100%; }
/* Dentro del header (encima del hero/banner negro) los links empiezan
en blanco, ya que la píldora es transparente; al pasar el mouse por
la píldora entera, esta se vuelve blanca y los links pasan a oscuros. */
.sg-header-wrap .sg-nav-link { color: var(--header-text-color, rgba(255,255,255,0.88)); }
.sg-header-wrap .sg-nav-link:hover, .sg-header-wrap .sg-nav-link.active { color: var(--header-text-color, #fff); filter: brightness(1.15); }
.sg-navpill:hover .sg-nav-link, .sg-navpill:focus-within .sg-nav-link { color: var(--ink-soft); }
.sg-navpill:hover .sg-nav-link:hover, .sg-navpill:hover .sg-nav-link.active,
.sg-navpill:focus-within .sg-nav-link:hover, .sg-navpill:focus-within .sg-nav-link.active { color: var(--ink); }
.sg-menu-btn { display: flex; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.6); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sg-header-wrap .sg-menu-btn { color: var(--header-text-color, #fff); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); backdrop-filter: blur(6px); }
.sg-navpill:hover .sg-menu-btn, .sg-navpill:focus-within .sg-menu-btn { background: rgba(255,255,255,0.6); border-color: var(--line); color: var(--ink); }
@media (min-width: 768px) { .sg-menu-btn { display: none; } }
/* ---------- encabezado en color sólido (opcional, desde el Dashboard) ----------
Por defecto la píldora es transparente y se activa en blanco al pasar el
mouse (ver reglas arriba). Si en el Dashboard se elige "color sólido", esta
clase la reemplaza por un color fijo (el que se haya elegido) en todo momento. */
.sg-navpill.sg-navpill-solid,
.sg-navpill.sg-navpill-solid:hover,
.sg-navpill.sg-navpill-solid:focus-within {
background: var(--header-solid-bg, #000000);
border-color: rgba(255,255,255,0.14);
box-shadow: 0 18px 38px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
}
.sg-navpill.sg-navpill-solid .sg-nav-link { color: var(--header-text-color, rgba(255,255,255,0.82)); }
.sg-navpill.sg-navpill-solid .sg-nav-link:hover,
.sg-navpill.sg-navpill-solid .sg-nav-link.active { color: var(--header-text-color, #fff); filter: brightness(1.15); }
.sg-navpill.sg-navpill-solid .sg-logo,
.sg-navpill.sg-navpill-solid:hover .sg-logo,
.sg-navpill.sg-navpill-solid:focus-within .sg-logo { color: var(--header-text-color, #fff); }
.sg-navpill.sg-navpill-solid .sg-menu-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: var(--header-text-color, #fff); }
/* ---------- encabezado al hacer scroll (opcional, desde el Dashboard) ----------
Independiente del modo de arriba (transparente/sólido): apenas se baja un
poco por la página, tanto en mobile (donde no existe :hover) como en
escritorio, la píldora toma el color y el color de letras que se elijan en
el Dashboard. La clase .sg-navpill-scrolled la agrega/quita app.js según
la posición del scroll; al volver arriba del todo, el encabezado vuelve a
su estado normal. */
.sg-navpill.sg-navpill-scrolled,
.sg-navpill.sg-navpill-scrolled:hover,
.sg-navpill.sg-navpill-scrolled:focus-within {
background: var(--header-scroll-bg, #000000);
border-color: rgba(255,255,255,0.14);
box-shadow: 0 18px 38px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
}
.sg-navpill.sg-navpill-scrolled .sg-nav-link { color: var(--header-scroll-text-color, #FFFFFF); }
.sg-navpill.sg-navpill-scrolled .sg-nav-link:hover,
.sg-navpill.sg-navpill-scrolled .sg-nav-link.active { color: var(--header-scroll-text-color, #FFFFFF); filter: brightness(1.15); }
.sg-navpill.sg-navpill-scrolled .sg-logo,
.sg-navpill.sg-navpill-scrolled:hover .sg-logo,
.sg-navpill.sg-navpill-scrolled:focus-within .sg-logo { color: var(--header-scroll-text-color, #FFFFFF); }
.sg-navpill.sg-navpill-scrolled .sg-menu-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: var(--header-scroll-text-color, #FFFFFF); }
.sg-navpill.sg-navpill-scrolled .sg-social-link { color: var(--header-scroll-text-color, rgba(255,255,255,0.82)); }
.sg-navpill.sg-navpill-scrolled .sg-social-link:hover { color: var(--header-scroll-text-color, #FFFFFF); filter: brightness(1.15); }
.sg-mobile-menu { display: none; flex-direction: column; align-items: center; gap: 18px; margin: 0 20px 8px; padding: 20px 0; border-radius: 20px; background: rgba(255,255,255,0.75); backdrop-filter: blur(18px); border: 1px solid var(--glass-border); }
.sg-mobile-menu.open { display: flex; }
/* ---------- íconos de redes sociales en el encabezado ---------- */
.sg-social-link { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; color: var(--header-text-color, rgba(255,255,255,0.88)); transition: color .4s ease, transform .3s ease; }
.sg-social-link:hover { color: var(--header-text-color, #fff); filter: brightness(1.15); transform: translateY(-1px); }
.sg-navpill:hover .sg-social-link, .sg-navpill:focus-within .sg-social-link { color: var(--ink-soft); }
.sg-navpill:hover .sg-social-link:hover, .sg-navpill:focus-within .sg-social-link:hover { color: var(--ink); }
.sg-navpill.sg-navpill-solid .sg-social-link { color: var(--header-text-color, rgba(255,255,255,0.82)); }
.sg-navpill.sg-navpill-solid .sg-social-link:hover { color: var(--header-text-color, #fff); filter: brightness(1.15); }
.sg-mobile-social-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.sg-mobile-social-row .sg-social-link { color: var(--ink-soft); width: 34px; height: 34px; border: 1px solid var(--line); }
.sg-mobile-social-row .sg-social-link:hover { color: var(--ink); border-color: var(--gold-light); }
[data-mobile-social-row][data-social-row-empty] { display: none; }
/* ---------- sección de ubicación (mapa de Google) ---------- */
.sg-map-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: #f2efe8; }
.sg-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---------- tarjetas de reseñas ---------- */
.sg-review-card {
position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px;
padding: 34px 26px 26px; display: flex; flex-direction: column;
box-shadow: 0 20px 40px -30px rgba(0,0,0,0.15);
transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.sg-review-card:hover { transform: translateY(-5px); box-shadow: 0 30px 54px -22px rgba(198,163,88,0.3); border-color: var(--gold-light); }
/* comilla decorativa dorada, marca de agua discreta en la esquina */
.sg-review-card::before {
content: '\201C'; position: absolute; top: 2px; left: 22px; font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 60px; line-height: 1; color: var(--gold-light); opacity: 0.6; pointer-events: none;
}
.sg-review-stars { position: relative; z-index: 1; font-size: 15px; letter-spacing: 2px; }
.sg-review-quote {
position: relative; z-index: 1; margin-top: 14px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; flex: 1;
/* Recorte elegante con puntos suspensivos en vez de dejar que una reseña
larga estire la tarjeta (y en celular termine viéndose cortada a la
fuerza). Todas las tarjetas quedan con una altura consistente. */
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.sg-review-author { position: relative; z-index: 1; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sg-review-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.sg-review-role { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }
.sg-carousel-track > .sg-review-card { scroll-snap-align: start; flex: 0 0 auto; width: clamp(240px,80vw,340px); min-height: 250px; }
@media (min-width: 700px) { .sg-carousel-track > .sg-review-card { width: calc((100% - clamp(16px,2vw,24px) * 2) / 3); } }
/* En celular: tarjeta más compacta y centrada (una por pantalla, en vez de
un recorte incómodo de 80vw), tipografía y comilla ligeramente más
chicas para que se vea cuidado y no como una tarjeta genérica. */
@media (max-width: 640px) {
.sg-carousel-track > .sg-review-card { width: 100%; padding: 28px 22px 22px; border-radius: 22px; min-height: auto; }
.sg-review-card::before { font-size: 48px; top: 0; left: 18px; }
.sg-review-quote { font-size: 14px; -webkit-line-clamp: 6; }
}
/* ---------- botones ---------- */
.sg-btn-fill { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; border-radius: 999px; padding: 15px 28px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; background: linear-gradient(135deg, #F9E6A8 0%, #D9A83B 22%, #A97A17 55%, #E0B94A 78%, #C89B2E 100%); color: #241A03; text-decoration:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -8px 14px -8px rgba(122,90,14,0.55), 0 14px 30px -12px rgba(151,113,26,0.6); transition: all .5s cubic-bezier(.22,.61,.36,1); }
.sg-btn-fill:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -8px 14px -8px rgba(122,90,14,0.6), 0 20px 40px -14px rgba(151,113,26,0.75); }
.sg-btn-fill:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.sg-btn-outline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 999px; padding: 15px 26px; font-size: 12px; font-weight: 500; letter-spacing: 0.13em; border:1px solid var(--line); color:var(--ink); background: rgba(255,255,255,0.45); backdrop-filter: blur(8px); text-decoration:none; transition: all .5s cubic-bezier(.22,.61,.36,1); }
.sg-btn-outline:hover { border-color:var(--gold); background: rgba(255,255,255,0.75); transform: translateY(-2px); }
.sg-focusable:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 999px; }
.sg-input { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.75); font-size: 14px; outline: none; color: var(--ink); width: 100%; font-family: inherit; }
/* ---------- eyebrow / títulos ---------- */
.sg-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.sg-eyebrow-line { width: 28px; height: 1px; background: var(--line); }
.sg-eyebrow-text { font-size: 11px; color: var(--gold); font-weight: 500; letter-spacing: 0.32em; }
.sg-section-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px,3.6vw,46px); color: var(--ink); font-weight: 400; line-height: 1.18; max-width: 22ch; margin: 0 auto; text-align: center; }
/* ---------- tarjetas de vidrio ---------- */
.sg-tile {
position: relative; overflow: hidden; text-align: center;
padding: 30px 20px; border-radius: 24px;
background: rgba(255,255,255,0.5); backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.85);
box-shadow: 0 18px 34px -22px rgba(90,90,90,0.22), inset 0 0 20px rgba(255,255,255,0.4);
transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), border-color .5s ease;
}
.sg-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -20px rgba(198,163,88,0.32), inset 0 0 24px rgba(255,255,255,0.55); border-color: var(--gold-light); }
.sg-tile-icon {
width: 48px; height: 48px; margin: 0 auto; border-radius: 50%;
display:flex; align-items:center; justify-content:center;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), var(--gold-light) 170%);
border: 1px solid rgba(255,255,255,0.85);
}
.sg-tile:nth-of-type(3n+2) .sg-tile-icon { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), var(--terracotta-light) 170%); }
.sg-tile:nth-of-type(3n) .sg-tile-icon { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), var(--sage-light) 170%); }
.sg-tile-round { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.sg-tile-round:hover { transform: translateY(-5px); }
.sg-service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(18px,2.4vw,30px); max-width: 980px; margin: clamp(40px,6vh,64px) auto 0; }
@media (min-width: 640px) { .sg-service-grid { grid-template-columns: repeat(4,1fr); } }
.sg-service-card {
position: relative; display: flex; flex-direction: column; align-items: center;
gap: 14px; padding: 0; border-radius: 0;
background: transparent; border: none; box-shadow: none;
cursor: pointer; transition: transform .45s cubic-bezier(.22,.61,.36,1); text-decoration: none; color: var(--ink);
}
.sg-service-card:hover { transform: translateY(-5px); }
.sg-service-card-icon {
position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(165deg, #1a1a1a 0%, #000000 100%);
border: 1px solid var(--gold-light);
box-shadow: 0 24px 42px -26px rgba(0,0,0,0.5);
transition: border-color .45s ease, box-shadow .45s ease;
}
.sg-service-card-icon svg { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.sg-service-card:hover .sg-service-card-icon { border-color: var(--gold); box-shadow: 0 30px 54px -22px rgba(198,163,88,0.45); }
.sg-service-card:hover .sg-service-card-icon svg { transform: scale(1.12); }
/* destello dorado: barrido de brillo al pasar el cursor */
.sg-service-card-icon::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(115deg, transparent 22%, rgba(244,217,137,0) 38%, rgba(244,217,137,0.6) 50%, rgba(255,255,255,0.18) 55%, transparent 68%);
transform: translateX(-140%);
transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.sg-service-card:hover .sg-service-card-icon::before { transform: translateX(140%); }
/* destello dorado: chispa fija que titila, como una joya */
.sg-card-sparkle { position: absolute; z-index: 1; top: 14%; right: 15%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px 3px rgba(244,217,137,0.6); animation: sgTwinkleDot 3.1s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sg-card-sparkle { animation: none; opacity: .8; } }
.sg-service-card > span.sg-tracked { transition: color .35s ease; }
.sg-service-card:hover > span.sg-tracked { color: var(--gold-deep); }
.sg-featured-card { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(88px,10vw,108px); padding: clamp(16px,2vw,20px) 8px 14px; border-radius: clamp(20px,2.4vw,26px); background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.34)); backdrop-filter: blur(14px); border: 1px solid var(--glass-border); box-shadow: 0 18px 34px -20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.95); font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; cursor: pointer; text-decoration: none; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.sg-featured-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -18px rgba(0,0,0,0.16); border-color: var(--gold-light); }
.sg-featured-card-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.98), rgba(255,255,255,0.4)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 8px 18px -10px rgba(0,0,0,0.12); }
/* ---------- flyers de profesionales: ahora reutilizan el estilo de sg-service-card ---------- */
/* ---------- carrusel horizontal genérico (profesionales / servicios) ---------- */
.sg-carousel-wrap { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.sg-carousel-track { display: flex; gap: clamp(16px,2vw,24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 6px 2px 8px; scrollbar-width: none; cursor: grab; }
.sg-carousel-track::-webkit-scrollbar { display: none; }
.sg-carousel-track.sg-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.sg-carousel-track > .sg-service-card { scroll-snap-align: start; scroll-snap-stop: always; flex: 0 0 auto; width: calc((100% - clamp(16px,2vw,24px)) / 2); }
@media (min-width: 480px) { .sg-carousel-track > .sg-service-card { width: calc((100% - clamp(16px,2vw,24px) * 2) / 3); } }
@media (min-width: 700px) { .sg-carousel-track > .sg-service-card { width: calc((100% - clamp(16px,2vw,24px) * 3) / 4); } }
.sg-carousel-arrow {
position: absolute; top: 38%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--gold-light);
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.72));
backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 16px 30px -18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease, background .35s ease;
z-index: 2;
}
.sg-carousel-arrow:hover {
border-color: var(--gold); transform: translateY(-50%) translateY(-2px);
background: rgba(255,255,255,0.98);
box-shadow: 0 22px 38px -18px rgba(198,163,88,0.4), inset 0 1px 0 rgba(255,255,255,1);
}
.sg-carousel-arrow[data-carousel-prev] { left: -6px; }
.sg-carousel-arrow[data-carousel-next] { right: -6px; }
/* En móvil las flechas viven en su propio carril, fuera de las tarjetas:
se le da más aire a los costados del carrusel (en vez del gutter angosto
de siempre) para que la flecha quede flotando junto al borde, nunca
encima de la primera/última tarjeta. */
@media (max-width: 780px) {
.sg-carousel-wrap { padding: 0 46px; }
.sg-carousel-arrow { width: 32px; height: 32px; top: 34%; box-shadow: 0 10px 20px -14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9); }
.sg-carousel-arrow[data-carousel-prev] { left: 2px; }
.sg-carousel-arrow[data-carousel-next] { right: 2px; }
}
/* ---------- ondas divisoras ---------- */
.sg-wave { position: relative; width: 100%; height: clamp(70px,10vw,130px); overflow: hidden; line-height: 0; margin: -1px 0; }
.sg-wave.flip { transform: scaleY(-1); }
.sg-wave-track { position: absolute; top: -3px; left: 0; right: 0; bottom: -3px; width: 200%; animation: sgWaveFlow 15s linear infinite; }
@keyframes sgWaveFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- animaciones de entrada ---------- */
@keyframes sgFadeUp { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform: translateY(0);} }
@keyframes sgFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes sgScaleIn { from { opacity:0; transform: scale(0.94);} to { opacity:1; transform: scale(1);} }
@keyframes sgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sgScroll { 0% { transform: translateY(0); opacity:0.9;} 60% { opacity:0.25;} 100% { transform: translateY(12px); opacity:0;} }
.sg-float { animation: sgFloat 7.5s ease-in-out infinite; }
.sg-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.sg-reveal.in { opacity: 1; transform: translateY(0); }
/* ---------- modal (descripción / carrito / formularios) ---------- */
.sg-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(42,39,34,0.32); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: sgFadeIn .3s ease both; }
.sg-modal-panel { width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.95); border-radius: clamp(20px,3vw,28px); padding: clamp(22px,3.4vw,32px); box-shadow: 0 40px 80px -30px rgba(40,40,40,0.4); animation: sgScaleIn .35s cubic-bezier(.22,.61,.36,1) both; text-align: left; }
.sg-modal-close { background: transparent; border: none; cursor: pointer; padding: 6px; color: var(--ink-soft); }
/* ---------- botón flotante "me interesan" (selección de servicios) ----------
Fijo en la esquina, siempre visible mientras hay servicios marcados.
Al tocarlo abre el resumen (sg-modal-panel ya existente) con la lista,
opción de quitar cada uno, y el formulario para enviar por WhatsApp. */
.sg-cart-fab {
position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 55;
display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer;
border-radius: 999px; padding: 15px 22px 15px 18px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
background: linear-gradient(135deg, #F9E6A8 0%, #D9A83B 22%, #A97A17 55%, #E0B94A 78%, #C89B2E 100%); color: #241A03;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 40px -14px rgba(151,113,26,0.65), 0 4px 14px -4px rgba(0,0,0,0.2);
animation: sgScaleIn .35s cubic-bezier(.22,.61,.36,1) both;
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.sg-cart-fab:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 24px 48px -14px rgba(151,113,26,0.75), 0 6px 18px -4px rgba(0,0,0,0.24); }
.sg-cart-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 640px) { .sg-cart-fab { right: 14px; bottom: 14px; padding: 13px 18px 13px 15px; font-size: 12px; } }
/* ---------- secciones oscuras (alternancia con las blancas) ---------- */
.sg-dark-section { background: #000000; position: relative; overflow: hidden; }
.sg-dark-section .sg-eyebrow-text { color: var(--gold-light); }
.sg-dark-section .sg-eyebrow-line { background: rgba(255,255,255,0.18); }
.sg-dark-section .sg-section-title { color: #F5F1E8; }
.sg-dark-section h1, .sg-dark-section h2, .sg-dark-section h3 { color: #F5F1E8; }
.sg-dark-section p { color: var(--gold-muted); }
.sg-dark-section .sg-nav-link { color: var(--gold-muted); }
@keyframes sgTwinkleDot { 0%,100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.3); } }
.sg-dark-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sg-dark-sparkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); animation: sgTwinkleDot 3.2s ease-in-out infinite; }
/* ---------- blobs de color y destellos para secciones claras (le dan vida) ---------- */
.sg-color-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sg-color-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; }
.sg-color-blob-gold { background: radial-gradient(circle, var(--gold-light), transparent 70%); }
.sg-color-blob-terracotta { background: radial-gradient(circle, var(--terracotta-light), transparent 70%); }
.sg-color-blob-sage { background: radial-gradient(circle, var(--sage-light), transparent 70%); }
.sg-light-sparkle { position: absolute; width: 4px; height: 4px; border-radius: 50%; animation: sgTwinkleDot 3.4s ease-in-out infinite; }
/* ---------- banner de página (Servicios / Afiliación / Nosotros / Contacto) ----------
La imagen de fondo va por debajo del encabezado (que queda superpuesto, con su propia
píldora translúcida) y el título de la página aparece en la parte baja del banner.
El fondo oscuro por defecto se queda SIEMPRE ahí debajo; la foto real es una capa
aparte que se precarga en memoria y solo se desvanece hacia adentro (opacity, que sí
se puede animar) cuando ya terminó de descargar — así nunca se ve el salto brusco ni
una foto a medio cargar. */
.sg-page-banner { position: relative; overflow: hidden; min-height: clamp(260px,38vh,400px); display: flex; flex-direction: column; background: #000000; }
.sg-page-banner-bg { position: absolute; inset: 0; z-index: 0; }
.sg-page-banner-bg.sg-page-banner-default { background: #000000; }
.sg-page-banner-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.045); transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.22,.61,.36,1); }
.sg-page-banner-bg.has-image .sg-page-banner-img { opacity: 1; transform: scale(1); }
.sg-page-banner-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,18,18,0.18) 0%, rgba(18,18,18,0.32) 45%, rgba(18,18,18,0.78) 100%); opacity: 0; transition: opacity 1s ease; }
.sg-page-banner-bg.has-image::after { opacity: 1; }
.sg-page-banner > .sg-header-wrap { position: relative; z-index: 3; }
.sg-page-banner > .sg-mobile-menu { position: relative; z-index: 3; }
.sg-page-banner-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 10px 24px clamp(30px,5vh,48px); }
.sg-page-banner-content .sg-eyebrow-text { color: var(--gold-light); }
.sg-page-banner-content .sg-eyebrow-line { background: rgba(255,255,255,0.32); }
.sg-page-banner-title { color: #fff; font-size: clamp(34px,5vw,58px); font-weight: 400; text-shadow: 0 4px 26px rgba(0,0,0,0.35); }
.sg-breadcrumb { margin-top: 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.05em; color: rgba(255,255,255,0.72); }
.sg-breadcrumb a { color: rgba(255,255,255,0.72); text-decoration: none; transition: color .3s ease; }
.sg-breadcrumb a:hover { color: #fff; }
.sg-breadcrumb .sg-breadcrumb-sep { color: var(--gold-light); }
.sg-breadcrumb .sg-breadcrumb-current { color: var(--gold-light); }
/* ---------- imagen de fondo del Hero (opcional) ----------
Cubre todo el Hero, detrás del menú, el texto y los botones. Igual que el
banner de las páginas internas: la foto se precarga y se revela con un
desvanecido + zoom suave — nunca aparece de golpe. */
.sg-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sg-hero-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.045); transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.22,.61,.36,1); }
.sg-hero-bg.has-image .sg-hero-bg-img { opacity: 1; transform: scale(1); }
.sg-hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s ease, background 0.3s ease; background: linear-gradient(180deg, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 12%, transparent) 0%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 6%, transparent) 38%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 60%, transparent) 78%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 94%, transparent) 92%, var(--hero-gradient-color, #000000) 100%); }
.sg-hero-bg.has-image::after { opacity: 1; }
/* En celular la foto suele ser más ancha que alta; si se fuerza a cubrir un
contenedor de 100vh (muy angosto y alto) el "cover" termina mostrando solo
una franja vertical muy recortada del centro de la imagen. Bajamos la
altura mínima del Hero en pantallas chicas para que el recorte lateral
sea mucho menor y se note la foto completa, y priorizamos el tercio
superior de la imagen (donde suele estar lo importante de la composición). */
@media (max-width: 640px) {
.sg-hero-onyx { min-height: 78vh !important; }
.sg-hero-bg-img { background-position: center 28%; }
/* El texto del Hero va centrado, pero la foto de fondo casi siempre
tiene su sujeto (persona, objeto) más hacia un lado. En celular, con
tan poco ancho, ese sujeto queda "cortado" justo al borde, compitiendo
con el texto y viéndose descuidado. Este viñeteado oscurece los bordes
izquierdo/derecho (sin tocar el centro, donde está el texto) para que
cualquier foto que se suba se funda con el fondo en vez de quedar
recortada a la mitad. */
.sg-hero-bg::after {
background:
linear-gradient(90deg, var(--hero-gradient-color, #000000) 0%, transparent 26%, transparent 74%, var(--hero-gradient-color, #000000) 100%),
linear-gradient(180deg, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 12%, transparent) 0%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 6%, transparent) 38%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 60%, transparent) 78%, color-mix(in srgb, var(--hero-gradient-color, #0A0A0A) 94%, transparent) 92%, var(--hero-gradient-color, #000000) 100%);
}
}
/* ---------- Hero negro, dorado y blanco ---------- */
.sg-hero-onyx { background: var(--hero-gradient-color, #000000); }
/* Color del texto del Hero (título, "SERVIASISTENCIAS", enlace secundario) —
configurable desde el Dashboard para que combine con la imagen de fondo
que se suba; --gold y el efecto "oro metálico" no se ven afectados. */
.sg-hero-onyx { --hero-text-color: #F5F1E8; }
/* ---------- animación de entrada del Hero (al cargar la página) ---------- */
@keyframes sgHeroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sgHeroInSoft { from { opacity: 0; } to { opacity: 1; } }
.sg-hero-anim { opacity: 0; animation: sgHeroIn .95s cubic-bezier(.22,.61,.36,1) forwards; }
.sg-hero-anim-1 { animation-delay: .1s; }
.sg-hero-anim-2 { animation-delay: .24s; }
.sg-hero-anim-3 { animation-delay: .4s; }
.sg-hero-anim-4 { animation-delay: .56s; }
.sg-hero-anim-5 { animation-delay: .72s; }
.sg-hero-fade-in { opacity: 0; animation: sgHeroInSoft 1.6s ease .3s forwards; }
.sg-footer { padding: clamp(40px,6vh,56px) clamp(24px,6vw,80px) 32px; }
.sg-footer-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; }
@media (min-width: 640px) { .sg-footer-inner { flex-direction: row; } }
.sg-footer-links { display: flex; align-items: center; gap: clamp(16px,3vw,32px); flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* El bloque del logo (iniciales de texto o imagen) empieza invisible y
solo se muestra cuando ya se sabe con certeza qué va ahí — así nunca
se alcanza a ver el texto un instante antes de que cargue la imagen
del logo real. Ver assets/boot.js (agrega la clase sg-logo-ready). */
[data-logo-block] { opacity: 0; }
[data-logo-block].sg-logo-ready { opacity: 1; transition: opacity .25s ease; }