/* ===================================================================
   VARIABLES GLOBALES
   -------------------------------------------------------------------
   - --lnk, --lnkhov, --chipbg, --chipink, --w se sobreescriben
     desde PHP (inline style en <nav>) según lo que guardas en el admin.
   =================================================================== */
:root{
  --pink:#f472b6; --blue:#2563eb; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff;
  --wa:#25D366; --rad:16px; --shadow:0 12px 28px rgba(17,24,39,.08); --header-h:78px;
  --rose1:#ffeaf3; --rose2:#ffd6ea; --rose3:#ffc2e1;

  /* Colores/peso del MENÚ (se setean desde PHP) */
  --lnk:#0f172a;        /* color enlaces */
  --lnkhov:#111827;     /* color hover / subrayados */
  --chipbg:#f8fafc;     /* fondo “pastilla” */
  --chipink:#0f172a;    /* texto “pastilla” */
  --w:700;              /* peso tipográfico 600|700|800 */
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding-top:var(--header-h);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:var(--bg)}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92vw);margin-inline:auto}
.section{padding:clamp(1.2rem,4vw,2.6rem) 0}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--pink)}
.h2{font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;margin:0 0 .4rem 0;font-weight:900}
.muted{color:var(--muted)}
.mini{font-size:.87rem}

/* ===================================================================
   BOTONES GENÉRICOS
   =================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem .95rem;border-radius:999px;background:linear-gradient(135deg,var(--pink),var(--blue));color:#fff;font-weight:800;border:0;cursor:pointer;white-space:nowrap;font-size:.92rem}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn.wa{background:var(--wa);font-size:.85rem;padding:.65rem .9rem}
/* Botón CTA primario para portada */
.btn.primary{background:linear-gradient(135deg,#ff4db8,#3b82f6); color:#fff; border:1px solid transparent; padding:.6rem .95rem; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.18)}

/* Variantes compatibles con el editor (override del base) */
.btn-sm{padding:.42rem .7rem; font-size:.87rem}
.btn-md{padding:.58rem .9rem}
.btn-lg{padding:.78rem 1.1rem; font-size:1.02rem}
.btn-solid{background:linear-gradient(135deg,var(--pink),var(--blue)); color:#fff; border:0}
.btn-outline{background:#fff; color:var(--ink); border:2px solid var(--ink)}
.btn-ghost{background:#fff; color:var(--ink); border:1px dashed #cbd5e1}
.btn-pill{background:#f8fafc; border:1px solid #e5e7eb; border-radius:999px}
.btn-wa{background:var(--wa); color:#fff; border:0}

/* ===================================================================
   HEADER FIJO (GRADIENTE ROSA)
   =================================================================== */
header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:1000;
  /* Permite sobrescribir el fondo de barra desde PHP via --barbg */
  background:var(--barbg, linear-gradient(90deg,var(--rose1) 0%, var(--rose2) 40%, var(--rose3) 100%));
  backdrop-filter:saturate(160%) blur(6px);border-bottom:0;
  box-shadow:0 6px 20px rgba(244,114,182,.15)
}
header::after{
  content:none
}

/* Flush total: sin borde ni franja bajo el header */
header{border-bottom:0 !important}
header::after{display:none !important}

/* Layout del header */
.container.nav{height:100%;display:flex;align-items:center;gap:1rem}
.container.nav .links{flex:1 1 auto;min-width:0} /* El <nav> ocupa el centro */
.brand{display:flex;align-items:center;gap:.7rem;font-weight:900}

/* Bloque derecho: redes + burger */
.right{display:flex;align-items:center;gap:.5rem}

/* Redes (se muestran si header[data-show-social="1"]) */
.socialIcons{display:none;gap:.4rem;align-items:center}
header[data-show-social="1"] .socialIcons{display:flex}
.ico{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#fff;border:1px solid #f7cbe1;box-shadow:0 6px 16px rgba(244,114,182,.18)}
.ico svg{width:18px;height:18px}
.ico:hover{transform:translateY(-1px)}

/* Iconos en barra de menú: diseño glass y compacto */
header .ico{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.18));
  border:1px solid #ffffff66;
  box-shadow:0 8px 20px rgba(255,255,255,.20), inset 0 0 0 1px #ffffff40;
  backdrop-filter:saturate(160%) blur(4px);
}
header .ico svg{width:18px;height:18px}
header .ico:hover{transform:translateY(-1px);filter:saturate(120%)}

/* Drawer móvil */
.burger{display:none;border:1px solid #f7cbe1;padding:.65rem;border-radius:12px;background:#fff}
.burger svg{width:28px;height:28px;stroke:#111827;stroke-width:2;fill:none}
#drawer{position:fixed;top:var(--header-h);right:0;bottom:0;width:min(86vw,380px);background:#fff;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .25s ease;z-index:1001;display:grid;grid-auto-rows:max-content;gap:.6rem;padding:1rem}
#drawer.open{transform:translateX(0)}
#backdrop{position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.25);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}
#backdrop.show{opacity:1;pointer-events:auto}

/* Responsive header */
@media (max-width:980px){
  :root{--header-h:72px}
  body{padding-top:var(--header-h)}
  .container.nav .links{display:none !important} /* los links viajan al drawer */
  .burger{display:inline-flex !important}
  /* Si el toggle está en 1, las redes siguen visibles en móvil */
  header[data-show-social="1"] .socialIcons{display:flex}
}

/* ===================================================================
   HERO (OLEADA)
   =================================================================== */
.heroBanner.heroWave{
  position:relative; color:#fff; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 120% at 80% -10%, #6d28d9 0%, #8b5cf6 40%, #f0abfc 70%, #ffd6b3 100%),
    radial-gradient(60% 60% at -10% 110%, #93c5fd40, transparent 60%);
}
.heroWave .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:min(5vw,2.4rem);align-items:center}
@media (max-width:980px){.heroWave .grid{grid-template-columns:1fr}}
.heroWave::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-10%;
  height:180px; border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:#fff; opacity:.85; filter:blur(10px); z-index:0; pointer-events:none;
}
.headline{margin:.35rem 0 .6rem 0;font-weight:900;font-size:clamp(2.6rem,6.8vw,4.8rem);line-height:1.02;letter-spacing:-.02em;color:#fff;text-shadow:0 10px 36px rgba(0,0,0,.22)}
.headline .hl{
  background:linear-gradient(90deg,#ff4db8 0%, #7c3aed 45%, #22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 12px 32px rgba(36,0,70,.25);
}
.brandTag{display:inline-block;background:#ffffff22;border:1px solid #ffffff45;color:#fff;padding:.45rem .7rem;border-radius:12px;font-weight:800;backdrop-filter:blur(2px)}
.heroWave p{color:#f3f4f6;max-width:58ch;font-weight:700}

/* Tarjeta WA en hero */
.phoneFloat{margin-top:1rem;display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.92);color:#111827;border:1px solid #f7cbe1;border-radius:14px;padding:.55rem .75rem;backdrop-filter:blur(10px) saturate(150%);box-shadow:0 18px 36px rgba(0,0,0,.22)}
.phoneFloat .badge{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#f9a8d4,#93c5fd);border:1px solid #f7cbe1}
.phoneFloat strong{font-weight:900}
.phoneFloat small{color:#6b7280}

/* Paquetería */
.shipTrust{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.shipTrust .badge{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.3rem .55rem;border-radius:10px;border:1px solid #ffffff55;background:#ffffff1e}

/* Imagen hero */
.visualWrap{position:relative}
.visualWrap .glow{position:absolute;inset:-6% -8% -12% -8%;border-radius:40px;background:radial-gradient(65% 65% at 60% 40%, rgba(255,255,255,.7), rgba(255,255,255,.12) 50%, transparent 72%);filter:blur(8px);z-index:0}
.heroImg{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:100%;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}

/* === HERO: Foto lateral (nuevas variantes) === */
.heroBanner.heroSideLeft{position:relative;color:#111827;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 120% at 20% -10%, #a5b4fc 0%, #c4b5fd 40%, #f0abfc 70%, #ffe4e6 100%),
    radial-gradient(60% 60% at 110% 110%, #93c5fd40, transparent 60%);
}
.heroBanner.heroSideRight{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 120% at 80% -10%, #7c3aed 0%, #a78bfa 40%, #fb7185 75%, #fde68a 100%),
    radial-gradient(60% 60% at -10% 110%, #93c5fd40, transparent 60%);
}
.heroSideLeft .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:min(5vw,2.4rem);align-items:center}
.heroSideRight .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:min(5vw,2.4rem);align-items:center}
@media (max-width:980px){.heroSideLeft .grid,.heroSideRight .grid{grid-template-columns:1fr}}
.heroSideLeft .headline{color:#111827}
.heroSideRight .headline{color:#fff}
.heroSideLeft p{color:#374151}
.heroSideRight p{color:#f3f4f6}

/* === HERO: Morado + CTA === */
.heroBanner.heroPurple{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 120% at 10% 0%, #7c3aed 0%, #5b21b6 45%, #4c1d95 70%, #1f2937 100%),
    radial-gradient(60% 60% at 110% 110%, #9333ea40, transparent 60%);
}
.heroPurple .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:min(5vw,2.4rem);align-items:center}
@media (max-width:1180px){.heroPurple .grid{grid-template-columns:1fr}}
.heroPurple .headline{color:#fff}
.heroPurple p{color:#e5e7eb}

/* === HERO: Imagen a fondo === */
.heroBanner.heroImage{position:relative;color:#fff;isolation:isolate;overflow:hidden;background-color:transparent;background-position:top center !important;background-repeat:no-repeat;background-size:cover !important}
.heroBanner.heroImage{margin-left:0;margin-right:0}
.heroImage .grid{display:grid;grid-template-columns:1fr;gap:min(5vw,2.4rem);align-items:center;min-height:clamp(200px, 48vw, 520px)}
@media (max-width:560px){
  .heroImage .grid{min-height:auto !important}
}
.heroImage .headline{color:#fff}
.heroImage p{color:#e5e7eb}

/* Fix: hero pegado al menú en todas las vistas */
.section.heroBanner{padding-top:0 !important}

/* Ajuste móvil: reducir zoom manteniendo ancho completo */
@media (max-width:600px){
  /* Mostrar la imagen completa en móviles (sin recortes) y SIN fondo azul */
  .heroBanner.heroImage{background:none !important}
  /* Contenedor a ancho completo, sin márgenes laterales */
  .heroBanner.heroImage .container{width:100vw;margin:0;padding:0}
  /* Sin separación interna para el bloque del hero */
  .heroBanner.heroImage .grid{gap:0}
  /* Oculta brillo para evitar aparentes bordes */
  .heroBanner.heroImage .glow{display:none}
  /* Altura más compacta para eliminar espacio vacío en Fold y similares */
  .heroImage .grid{min-height:auto !important}
  /* Usar <img> para ocupar 100% del ancho y adaptar alto */
  .heroBanner.heroImage .heroImageMobileWrap{display:block;padding:0;margin:0}
  .heroBanner.heroImage .heroImg.heroImageMobile{width:100vw;max-width:100vw;height:auto;display:block;margin:0;border-radius:0;box-shadow:none;border:0}
}

/* Ajuste específico para pantallas muy pequeñas (<360px) */
@media (max-width:360px){
  .heroBanner.heroImage{background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;background-color:transparent !important}
  .heroImage .grid{min-height:auto !important}
}
/* Tablets y móviles grandes: mantener imagen completa y ajuste suave */
@media (max-width:768px){
  .heroBanner.heroImage{background-size:cover !important;background-position:center center !important;background-color:transparent !important}
  .heroImage .grid{min-height:auto !important}
}

/* Ajuste adicional por orientación para mejor adaptación */
@media (orientation: landscape) and (max-width:900px){
  .heroBanner.heroImage{background-size:cover !important;background-position:center center !important}
  .heroImage .grid{min-height:auto !important}
}

/* Espaciado: acercar las secciones al hero */
.section.heroBanner{padding-bottom:0 !important}
.section.heroBanner{padding-top:0 !important;margin-top:0 !important}
.heroBanner + .section{padding-top:24px !important}

/* Fix: hero pegado al menú en móvil */
@media (max-width:600px){
  .section.heroBanner{padding-top:0 !important}
  .heroBanner + .section{padding-top:30px !important}
}

/* Por defecto, ocultar el bloque de imagen móvil en desktop */
.heroImageMobileWrap{display:none}

/* Animaciones para héroes */
@keyframes pvFadeIn{from{opacity:0}to{opacity:1}}
@keyframes pvSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pvZoomIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pvRise{from{opacity:.5;filter:saturate(.8) blur(4px);transform:translateY(24px)}to{opacity:1;filter:none;transform:none}}
@keyframes pvFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.heroBanner.animFade{animation:pvFadeIn .35s ease both}
.heroBanner.animSlide{animation:pvSlideUp .45s ease both}
.heroBanner.animZoom{animation:pvZoomIn .35s ease both}
.heroBanner.animRise{animation:pvRise .5s ease both}
.heroBanner.animFloat{animation:pvFloat 3s ease-in-out infinite}

/* ===================================================================
   CATÁLOGO / BENEFICIOS / PROCESO / GALERÍA / FOOTER
   (sin cambios de estructura; se dejan como estaban)
   =================================================================== */
.catalogoGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){.catalogoGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.catalogoGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catalogoGrid{grid-template-columns:1fr;gap:.6rem}}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card .barTop{height:4px;background:linear-gradient(135deg,var(--pink),var(--blue))}
.card .media img{width:100%;height:180px;object-fit:cover}
@media (max-width:520px){
  .card .media img{height:160px}
  .card .body{padding:.7rem}
}
.card .body{padding:.8rem;display:grid;gap:.35rem}
.price{font-weight:900}
.shipRow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.shipRow .eta{margin-left:auto;font-weight:800}
.brandIcon{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border);background:#fff;padding:.15rem .35rem}
.footerRow{padding:.8rem}
.btnRow{display:grid;grid-template-columns:1fr;gap:.4rem}

.ledgerBand{background:linear-gradient(180deg,#fff 0%, #f8fafc 100%)}
.ledgerHead{display:grid;gap:.3rem;margin-bottom:.8rem}
.ledgerGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
@media (max-width:980px){.ledgerGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ledgerGrid{grid-template-columns:1fr}}
.ledgerItem{position:relative;background:#fff;border:1px solid #e7e9ee;border-radius:12px;padding:1rem;display:grid;grid-template-columns:40px 1fr;gap:.8rem;align-items:flex-start;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ledgerItem::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:linear-gradient(180deg,var(--pink),var(--blue));border-radius:12px 0 0 12px}
.iCircle{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#f1f5f9;border:1px solid #e5e7eb;color:#334155}
.ledgerTitle{font-weight:900}
.ledgerDesc{color:#64748b}

.railWrap{position:relative}
.rail{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.rail::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:#e5e7eb}
.step{position:relative;display:grid;gap:.5rem;align-content:start}
.bullet{position:relative;z-index:1;width:36px;height:36px;border-radius:999px;border:2px solid #e5e7eb;background:linear-gradient(180deg,#fff,#f8fafc);display:grid;place-items:center;font-weight:800;color:#111827}
.step h4{margin:0;font-size:1rem;font-weight:900}
.sBox{background:#fff;border:1px solid #e5e7ee;border-radius:12px;padding:1rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sBox small{color:#64748b}
@media (max-width:900px){.rail::before{display:none}.rail{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.gallery img{border-radius:14px;border:1px solid var(--border);height:100%;object-fit:cover}
.gallery .tall{grid-row:span 2}
@media (max-width:980px){.gallery{grid-template-columns:1fr}}

.footerPro{position:relative;color:#e5e7eb;background:radial-gradient(120% 120% at 20% -10%, #1f2937, #0b1220 60%, #0b1220 100%)}
.footerPro .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.2rem;padding:1.4rem 0}
@media (max-width:980px){.footerPro .grid{grid-template-columns:1fr 1fr;gap:1rem}}
@media (max-width:620px){.footerPro .grid{grid-template-columns:1fr}}
.footerBrand{display:flex;align-items:center;gap:.8rem}
.fLogo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f9a8d4,#93c5fd);display:grid;place-items:center;box-shadow:0 10px 30px rgba(255,255,255,.08)}
.fLogo svg{color:#fff;width:22px;height:22px}
.fTitle{font-weight:900;color:#fff}
.fList{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.4rem}
.fList a{color:#e5e7eb}
.fList a:hover{color:#fff}
.socialRowFooter{display:flex;gap:.6rem;flex-wrap:wrap}
.socialCircle{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  /* Igual que los iconos del menú (glass/compact) */
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.18));
  border:1px solid #ffffff66;
  box-shadow:0 8px 20px rgba(255,255,255,.20), inset 0 0 0 1px #ffffff40;
  backdrop-filter:saturate(160%) blur(4px);
}
.socialCircle svg{width:18px;height:18px}
.socialCircle:hover{transform:translateY(-1px);filter:saturate(120%)}
.socialCircle.disabled{opacity:.55;filter:grayscale(1);pointer-events:none}
.payRow{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.payBadge{display:inline-flex;align-items:center;justify-content:center;background:#111827;border:1px solid #303846;border-radius:8px;padding:.25rem .45rem;font-size:.8rem;color:#e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.payBadge svg{height:18px;width:auto;display:block}
.payBadge:hover{filter:brightness(1.08)}
.subFooter{border-top:1px solid #1f2937}
.subFooter .row{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:.75rem;flex-wrap:wrap}

/* ===================================================================
   UTILIDADES / ADMIN (PÚBLICO)
   =================================================================== */
.chip{border:1px solid var(--border);background:#fff;border-radius:12px;padding:.6rem .8rem}
.edit-btn{margin-left:.4rem;font-size:.78rem;background:#fff;color:#111827;border:1px dashed #94a3b8;border-radius:999px;padding:.25rem .45rem;cursor:pointer}

/* ===================================================================
   MENÚ PÚBLICO – Alineación + TODOS los DISEÑOS
   -------------------------------------------------------------------
   Mapeo con el ADMIN:
   - Minimal              → .links.simple
   - Línea deslizante     → .links.underline
   - Tabs suaves          → .links.boxed
   - Badges claros        → .links.pill-center
   - Separadores puntuales→ .links.split
   - Marker               → .links.marker
   - Glass                → .links.glass
   - Pill (outline)       → .links.pill
   - Línea que crece      → .links.ulink  (alias: .links.underline-grow)
   - Tabs elevadas        → .links.tabs-raised
   - Brutalista           → .links.brutal
   =================================================================== */

/* Base + alineaciones (usa variables desde PHP) */
.links{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  color:var(--lnk);
}
.links a{
  color:var(--lnk);
  font-weight:var(--w);
  text-decoration:none;
  padding:0; /* cada diseño define su propio padding */
}
.links a:hover{color:var(--lnkhov)}
.links.align-left{justify-content:flex-start}
.links.align-center{justify-content:center}
.links.align-right{justify-content:flex-end}

/* Tipografías extra (desde admin) */
.links.typo-uc a{text-transform:uppercase;letter-spacing:.04em}
.links.typo-ul a{text-decoration:underline}
.links.typo-hov-ul a:hover{text-decoration:underline}

/* ----- Diseños “clásicos” ----- */
.links.simple a{padding:.52rem .78rem !important;border-radius:10px}
.links.simple a:hover{background:#f3f4f6;border:1px solid #e5e7eb}

.links.underline a{position:relative;padding:.52rem .3rem !important}
.links.underline a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.2rem;height:2px;
  background:var(--lnkhov);transition:right .18s ease
}
.links.underline a:hover::after{right:0}

.links.boxed{gap:.2rem;border-bottom:1px solid #e5e7eb}
.links.boxed a{padding:.6rem .9rem !important;border-radius:8px 8px 0 0;background:transparent}
.links.boxed a:hover{background:#f9fafb;border:1px solid #e5e7eb;border-bottom-color:#fff}

.links.pill-center{gap:.5rem}
.links.pill-center a{
  padding:.5rem .9rem !important;border-radius:999px;
  background:var(--chipbg);color:var(--chipink);border:1px solid #e5e7eb
}
.links.pill-center a:hover{filter:saturate(110%)}

.links.split a{padding:.52rem .6rem !important;position:relative}
.links.split a + a::before{content:"·";opacity:.45;margin-right:.5rem}

/* ----- NUEVOS DISEÑOS ----- */

/* Marker (punto a la izquierda) */
.links.marker a{position:relative;padding:.52rem .78rem !important;border-radius:10px}
.links.marker a::before{
  content:"";position:absolute;left:.5rem;top:50%;width:6px;height:6px;border-radius:999px;
  background:var(--lnkhov);transform:translateY(-50%);opacity:.7
}
.links.marker a{padding-left:1.3rem !important}
.links.marker a:hover{background:#f3f4f6;border:1px solid #e5e7eb}

/* Glass (pastillas translúcidas) */
.links.glass a{
  padding:.52rem .78rem !important;border-radius:12px;border:1px solid #ffffff66;
  background:#ffffff40;backdrop-filter:saturate(140%) blur(6px)
}
.links.glass a:hover{background:#ffffff66}

/* Pill (outline clásico, distinto a pill-center) */
.links.pill a{
  padding:.5rem 1rem !important;border-radius:999px;background:transparent;
  color:var(--lnk);border:2px solid var(--lnk)
}
.links.pill a:hover{background:#f9fafb}

/* U-Link / Underline grow (línea que crece) */
.links.ulink a,
.links.underline-grow a{
  position:relative;padding:.52rem .3rem !important;border-bottom:2px solid transparent
}
.links.ulink a:hover,
.links.underline-grow a:hover{border-bottom-color:var(--lnkhov)}

/* Tabs elevadas */
.links.tabs-raised{gap:.2rem;border-bottom:1px solid #e5e7eb}
.links.tabs-raised a{
  padding:.6rem .9rem !important;border-radius:8px 8px 0 0;background:#fff;
  border:1px solid #e5e7eb;border-bottom-color:#fff;box-shadow:0 -2px 0 #e5e7eb inset
}
.links.tabs-raised a:hover{filter:saturate(108%)}

/* Brutalista */
.links.brutal a{
  padding:.5rem .8rem !important;border:2px solid #111827;background:#fff;
  box-shadow:4px 4px 0 #111827;text-transform:uppercase;letter-spacing:.04em;font-weight:800
}
.links.brutal a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #111827}

/* Extensiones extra de estilos (Outline, Gradiente, Neumórfico, Dots, Cinta) */
.links.outline a{
  padding:.5rem .85rem !important; border-radius:999px;
  border:2px solid var(--lnk); background:transparent;
}
.links.outline a:hover{ background:var(--chipbg); color:var(--lnkhov) }

.links.gradient a{
  padding:.5rem .9rem !important; border-radius:999px; color:#fff;
  background:linear-gradient(90deg, var(--lnk), var(--lnkhov));
  box-shadow:0 4px 12px rgba(16,24,40,.12)
}
.links.gradient a:hover{ filter:saturate(110%) }

.links.neumorph a{
  padding:.52rem .9rem !important; border-radius:14px; background:#fff;
  box-shadow:6px 6px 14px rgba(0,0,0,.08), -4px -4px 10px rgba(255,255,255,.7);
  border:1px solid #e5e7eb
}
.links.neumorph a:hover{
  box-shadow:8px 8px 18px rgba(0,0,0,.10), -5px -5px 12px rgba(255,255,255,.9)
}

.links.dots a{ position:relative; padding:.52rem .3rem !important }
.links.dots a::after{
  content:""; position:absolute; left:0; right:100%; bottom:.2rem; height:2px;
  background:radial-gradient(circle,currentColor 1px,transparent 1.5px) repeat-x;
  background-size:6px 2px; transition:right .18s ease
}
.links.dots a:hover::after{ right:0 }

.links.ribbon a{ position:relative; padding:.52rem .8rem !important; border-radius:10px; background:#fff; border:1px solid #e5e7eb }
.links.ribbon a::before{ content:""; position:absolute; left:.4rem; top:.15rem; width:6px; height:60%; background:var(--chipbg); border-radius:2px }
.links.ribbon a:hover{ background:#f9fafb }

/* ============================ FIN MENÚ ============================ */


/* ===== Fix header móvil: empuja iconos totalmente a la derecha ===== */
@media (max-width:980px){
  /* El contenedor del header ocupa 100% y reducimos el margen interno */
  header .container.nav{
    width:100%;
    padding-inline:12px;           /* si lo quieres más al borde pon 6px o 0 */
    gap:.5rem;
  }
  /* El bloque derecho se pega al extremo derecho */
  header .right{ 
    margin-left:auto;              /* empuja a la derecha */
    gap:.4rem;
  }
  /* Asegura que los iconos sociales sí se muestren en móvil */
  header[data-show-social="1"] .socialIcons{ display:flex; }

  /* Opcional: compactar botones para que quepan mejor */
  header .burger{ margin-left:.25rem; }
  header .brand{ margin-right:.25rem; }
}

/* =================================================================== */
/* ================== PÚBLICO: MODELOS DE SECCIONES =================== */
/* =================================================================== */
/* Testimonios (grid simple) */
.section.testimonios .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:980px){.section.testimonios .grid{grid-template-columns:1fr}}
.section.testimonios .card{border:1px solid var(--border);border-radius:14px;padding:1rem;background:#fff;box-shadow:var(--shadow)}
.section.testimonios .quote{font-style:italic;color:#374151}
.section.testimonios .who{margin-top:.35rem;font-weight:800}

/* FAQ acordeón mínimo (si no tienes JS, muéstralo expandido) */
.section.faq details{border:1px solid var(--border);border-radius:12px;background:#fff;padding:.6rem .8rem}
.section.faq details+details{margin-top:.5rem}
.section.faq summary{cursor:pointer;font-weight:800}

/* Tira de marcas */
.section.marcas-strip .row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;justify-content:center}
.section.marcas-strip .logo{height:38px;filter:grayscale(1) contrast(.9);opacity:.75}
.section.marcas-strip .logo:hover{opacity:1;filter:none}

/* CTA band (franja) */
.section.cta-band .band{border:1px solid #f7cbe1;background:linear-gradient(180deg,#fff 0%, #fdf2f8 100%);border-radius:16px;padding:1rem;display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* === Ajustes específicos para móvil (<=600px) — Imagen COMPLETA === */
@media (max-width:600px){
  /* Sin espacios arriba/abajo del hero y cubriendo ancho */
  .section.heroBanner{padding-top:0 !important;padding-bottom:0 !important}
  /* Mostrar imagen completa SIN zoom y SIN fondo azul */
  .heroBanner.heroImage{background-size:contain !important;background-position:top center !important;background-repeat:no-repeat !important;background-color:transparent !important}
  /* 25px de separación con la sección siguiente */
  .heroBanner + .section{padding-top:25px !important}
  /* Altura adaptable del hero para dar espacio a la imagen completa */
  .heroImage .grid{min-height:clamp(230px,62vh,620px)}
}
/* Ajustes adicionales para reducir espacio en héroes en móviles */
@media (max-width:600px){
  .heroBanner{padding-top:1rem;padding-bottom:1rem;margin-bottom:30px !important}
  .heroBanner .grid{gap:.8rem}
  .heroBanner.heroPurple .grid,
  .heroBanner.heroSideLeft .grid,
  .heroBanner.heroSideRight .grid,
  .heroBanner.heroWave .grid{min-height:auto}
  .heroBanner.heroPurple{background-size:contain !important;background-position:top center !important;background-repeat:no-repeat !important}
}

@media (max-width:360px){
  .heroBanner{padding-top:.8rem;padding-bottom:.8rem}
}

/* Catálogo: menor separación vertical entre tarjetas en móviles */
@media (max-width:600px){
  .card{margin-bottom:.6rem}
}

/* ===== OVERRIDE: centrar la sección #galeria ===== */
#galeria{
  /* usar la variable correcta definida en este archivo: --header-h */
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-content: center;                /* centra vertical + horizontalmente el contenido */
  grid-template-columns: none !important; /* anula .gallery{grid-template-columns:2fr 1fr 1fr} */
}

#galeria > .container{
  justify-self: center;                 /* asegura centrado horizontal del contenedor */
  width: min(1100px, 92vw);
}

/* (opcional) si quieres que la grilla interna se mantenga centrada */
#galeria .wrap{ display:grid; place-items:center; }


 /* Aplica a contenedores de imagen: añade class="wm-snap" */
  .wm-snap{ position:relative; }
  .wm-snap::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<?xml version='1.0'?><svg xmlns='http://www.w3.org/2000/svg' width='260' height='160'><text x='0' y='120' font-family='Inter,Segoe UI,Roboto,Arial' font-size='28' fill='rgba(17,24,39,0.16)'>Propiedad de GioClick</text></svg>");
    background-size:260px 160px; background-repeat:repeat;
    transform:rotate(-20deg); opacity:.16; /* sutil siempre (sale en screenshot) */
  }
  /* Más intensa cuando la pestaña pierde foco (posible screenshot) */
  .wm-armed .wm-snap::after{ opacity:.28; }

  /* Dificulta guardar/arrastrar */
  .wm-snap img{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }