/* Base compartida por las páginas secundarias (tienda). La portada mantiene
   sus estilos propios; aquí van los mismos colores y componentes para que
   todo se vea igual. */
:root{
  --ink:#0a1220;
  --surface:#101b2e;
  --surface-2:#16223a;
  --line:#24344f;
  --line-strong:#324566;
  --electric:#4db2ff;
  --electric-dim:#2c7bc4;
  --amber:#ff8a34;
  --teal:#2fd9c4;
  --violet:#b18bfa;
  --paper:#eef2f8;
  --muted:#93a4c3;
  --muted-2:#64749b;
  --ok:#4ac48a;
  --whatsapp:#25d366;
  --whatsapp-ink:#06210f;
  --shadow:0 20px 60px -20px rgba(0,0,0,0.6);
  --radius-pill:999px;
  --radius:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --ink:#f2f4f8;--surface:#ffffff;--surface-2:#e8ecf3;--line:#cfd8e6;--line-strong:#aeb9cf;
    --electric:#1c6fb0;--electric-dim:#125081;--amber:#c9631c;--teal:#0f8a78;--violet:#6d4fd6;
    --paper:#0d1526;--muted:#48597c;--muted-2:#6c7a99;--ok:#237356;
    --shadow:0 16px 40px -18px rgba(20,30,50,0.25);
    color-scheme:light;
  }
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
/* el desplazamiento suave lo hace /js/scroll-suave.js (el del navegador
   recorre la página entera y da sensación de atasco) */
html{scroll-behavior:auto;}
section[id], [id]{scroll-margin-top:92px;}
@media (max-width:720px){section[id], [id]{scroll-margin-top:76px;}}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:0.01em;line-height:1.05;
  margin:0;overflow-wrap:break-word;
}
/* Margen lateral único, como variable, para que ninguna regla posterior
   pueda borrarlo con un "padding" en forma corta. */
:root{--gutter:24px;}
@media (max-width:900px){:root{--gutter:22px;}}
@media (max-width:640px){:root{--gutter:20px;}}
@media (max-width:380px){:root{--gutter:16px;}}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

/* --btn-ink es el borde y la sombra maciza (la "segunda capa") de cada
   botón. En negro no se veía sobre el fondo azul oscuro, así que cada
   botón lleva un tono oscuro de SU PROPIO color. */
.btn{
  --btn-ink:#2a3d5e;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:0.95rem;letter-spacing:0.03em;
  font-weight:700;color:#fff;
  text-transform:uppercase;padding:14px 28px;border-radius:var(--radius-pill);
  border:2.5px solid var(--btn-ink,#2a3d5e);cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:4px 4px 0 var(--btn-ink,#2a3d5e);
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--btn-ink,#2a3d5e);}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--btn-ink,#2a3d5e);}
.btn-primary{--btn-ink:#14568f;background:linear-gradient(180deg,#8fd2ff,var(--electric) 55%,var(--electric-dim));color:#fff;}
.btn-primary:hover{background:linear-gradient(180deg,#a3daff,var(--electric) 55%,var(--electric-dim));}
/* El "ghost" lleva relleno propio: transparente se confundía con la cabecera. */
.btn-ghost{--btn-ink:#46608f;background:linear-gradient(180deg,var(--line),var(--surface-2));border-color:var(--btn-ink);color:var(--paper);}
.btn-ghost:hover{background:linear-gradient(180deg,var(--line-strong),var(--line));color:var(--paper);}
.btn-whatsapp{--btn-ink:#0f7a3b;background:linear-gradient(180deg,#5df09b,var(--whatsapp) 60%,#1cab52);color:#fff;}
/* El carrito lleva su propio color (violeta): en gris se perdía dentro de
   la cabecera y no parecía un botón. */
.btn.cart-btn{
  --btn-ink:#452a99;
  background:linear-gradient(180deg,#c3a9ff,var(--violet) 50%,#6d4fd6);
  border-color:var(--btn-ink);color:#fff;
}
.btn.cart-btn:hover{background:linear-gradient(180deg,#d2c0ff,var(--violet) 50%,#6d4fd6);color:#fff;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--btn-ink,#2a3d5e);}
/* Los SVG dentro de un botón necesitan medida explícita: sin ella, en un
   contenedor flex se encogen hasta desaparecer (por eso el carrito se
   quedaba en un círculo con el número y sin dibujo). */
.btn svg{width:19px;height:19px;flex:none;}
@media (max-width:400px){.btn{white-space:normal;text-align:center;}}

/* cabecera */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
/* sin desenfoque: rehacerlo en cada fotograma del scroll llegaba a
   congelar la página en equipos con gráfica integrada */
.site-header{transform:translateZ(0);}
.site-header .wrap{
  max-width:1600px;display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  padding-top:16px;padding-bottom:16px;
  padding-left:clamp(18px,3vw,56px);padding-right:clamp(18px,2.4vw,44px);
}
.site-brand{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;
  font-size:clamp(1.25rem, 0.3rem + 1.4vw, 2rem);text-transform:uppercase;
  text-decoration:none;color:var(--paper);min-width:0;flex:0 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-right:auto;
}
/* En móvil la marca crece con la pantalla y, si hace falta, se parte en
   dos líneas antes que encogerse hasta no poder leerse. */
@media (max-width:720px){
  .site-brand{
    white-space:normal;line-height:0.95;overflow:visible;
    font-size:clamp(1.4rem, 6.4vw, 2rem);
  }
}
.site-nav{margin-right:auto;display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);}
.site-nav > a{
  position:relative;padding:4px 0;
  font-family:'IBM Plex Mono',monospace;font-size:0.95rem;text-transform:uppercase;
  letter-spacing:0.02em;color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .15s ease;
}
/* la misma línea que crece bajo los enlaces del menú de la portada */
.site-nav > a::after, .nav-drop-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--electric);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .22s ease;
}
.site-nav > a:hover{color:var(--electric);}
.site-nav > a:hover::after{transform:scaleX(1);}
.nav-drop-btn:hover::after, .nav-drop-btn[aria-expanded="true"]::after{transform:scaleX(1);}

/* ---- desplegable de SERVICIOS (se abre al pulsar, nunca solo al pasar) ---- */
.nav-drop-wrap{position:relative;display:flex;align-items:center;}
.nav-drop-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:0.95rem;text-transform:uppercase;
  letter-spacing:0.02em;color:var(--muted);white-space:nowrap;transition:color .15s ease;
}
.nav-drop-btn .chev{width:15px;height:15px;flex:none;transition:transform .22s ease;}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"]{color:var(--electric);}
.nav-drop-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.nav-drop{
  position:absolute;top:calc(100% + 18px);left:-14px;z-index:70;
  display:flex;flex-direction:column;width:330px;padding:10px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:18px;box-shadow:var(--shadow);
  animation:dropIn .18s ease;
}
/* puente invisible entre el botón y el panel, para que al bajar el ratón
   por el hueco no se cierre el menú */
.nav-drop::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.nav-drop a{
  position:relative;
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--paper);text-decoration:none;font-size:1rem;
  transition:background .16s ease, color .16s ease;
}
.nav-drop a svg{width:22px;height:22px;flex:none;color:var(--accent,var(--electric));}
.nav-drop a span{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.nav-drop a b{font-weight:600;font-size:0.99rem;}
.nav-drop a em{font-style:normal;color:var(--muted-2);font-size:0.83rem;
  font-family:'IBM Plex Mono',monospace;}
.nav-drop a:hover{background:var(--surface-2);}
/* la línea de color que crece bajo cada servicio */
.nav-drop a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background:var(--accent,var(--electric));border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.nav-drop a:hover::after{transform:scaleX(1);}
.nav-drop .nav-drop-all{
  margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;
  padding-top:13px;justify-content:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;font-size:0.86rem;text-transform:uppercase;
  color:var(--muted);
}
.nav-drop .nav-drop-all:hover{color:var(--electric);background:transparent;}
.c-amber{--accent:var(--amber);}
.c-electric{--accent:var(--electric);}
.c-teal{--accent:var(--teal);}
.c-violet{--accent:var(--violet);}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;}

/* ---------- menú de la cabecera en móvil ---------- */
.site-burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:14px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--paper);
  transition:border-color .15s ease, color .15s ease;
}
.site-burger svg{width:22px;height:22px;}
.site-burger:hover, .site-burger.is-open{border-color:var(--electric);color:var(--electric);}

/* El menú del móvil va por bloques: los servicios se despliegan al pulsar,
   los enlaces de la web en dos columnas y abajo los botones de contacto,
   con el de llamar en su propio color. */
.site-menu{border-top:1px solid var(--line);background:var(--surface);}
.mm-scroll{
  max-height:calc(100dvh - 76px);overflow-y:auto;
  padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
}
.mm-label{
  margin:4px 0 0;font-family:'IBM Plex Mono',monospace;font-size:0.76rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);
}
.mm-drop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:15px 17px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  color:var(--paper);font-family:'IBM Plex Mono',monospace;
  font-size:1rem;text-transform:uppercase;letter-spacing:0.02em;
}
.mm-drop .chev{width:18px;height:18px;flex:none;color:var(--electric);transition:transform .22s ease;}
.mm-drop[aria-expanded="true"]{border-color:var(--electric);}
.mm-drop[aria-expanded="true"] .chev{transform:rotate(180deg);}
.mm-sub{display:flex;flex-direction:column;gap:8px;padding:2px 0 4px 10px;
  border-left:2px solid var(--line);margin-left:6px;}
.mm-sub a{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);text-decoration:none;color:var(--paper);font-size:0.98rem;
}
.mm-sub a svg{width:20px;height:20px;flex:none;color:var(--accent,var(--electric));}
.mm-sub a:active{background:var(--surface-2);}
.mm-sub .mm-sub-all{
  justify-content:center;border-style:dashed;color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:0.85rem;text-transform:uppercase;
}
.mm-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mm-links a{
  display:flex;align-items:center;justify-content:center;padding:15px 10px;
  border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  text-decoration:none;color:var(--paper);font-family:'IBM Plex Mono',monospace;
  font-size:0.92rem;text-transform:uppercase;letter-spacing:0.02em;
}
.mm-links a:active{border-color:var(--electric);color:var(--electric);}
.mm-cta{display:flex;flex-direction:column;gap:9px;margin-top:6px;
  padding-top:14px;border-top:1px solid var(--line);}
.mm-cta a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 14px;border-radius:var(--radius-pill);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:1rem;
  text-transform:uppercase;letter-spacing:0.03em;
}
.mm-cta a svg{width:19px;height:19px;flex:none;}
.mm-call{background:var(--amber);color:#2b1400;font-weight:600;}
.mm-wa{background:var(--whatsapp);color:var(--whatsapp-ink);font-weight:600;}
.mm-quote{background:transparent;border:1px solid var(--electric);color:var(--electric);}

@media (max-width:820px){
  .site-nav{display:none;}
  .site-burger{display:flex;}
}
@media (min-width:821px){
  .site-menu{display:none !important;}
}

/* En móvil el botón del carrito se queda solo con el icono y el número,
   para que la marca no tenga que encogerse hasta hacerse ilegible. */
@media (max-width:560px){
  .cart-btn-text{display:none;}
  .cart-btn{padding:12px 15px;gap:8px;}
  .header-actions{gap:8px;}
  .site-burger{width:44px;height:44px;}
}

/* ============ MIGAS DE PAN ============
   Estaban solo en el CSS de la tienda, así que en las páginas de servicio
   salían como enlaces subrayados y pegados unos a otros. */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:26px 0 4px;
  font-family:'IBM Plex Mono',monospace;font-size:0.88rem;color:var(--muted-2);
}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .16s ease;}
.breadcrumb a:hover{color:var(--electric);}
.breadcrumb > *:not(:last-child)::after{content:"/";margin-left:10px;color:var(--line-strong);}
.breadcrumb .current{color:var(--paper);overflow-wrap:anywhere;}

/* ============ PIE (el mismo en toda la web) ============ */
.site-footer{border-top:1px solid var(--line);padding:72px 0 44px;}
.site-footer .wrap{max-width:1180px;display:block;}
.site-footer .footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px 32px;
  padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:26px;
}
@media (max-width:980px){
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:36px 26px;}
  .site-footer .footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .site-footer .footer-col a{font-size:0.95rem;}
}
@media (max-width:360px){.site-footer .footer-top{grid-template-columns:1fr;gap:26px;}}
.site-footer .footer-brand{display:flex;flex-direction:column;gap:16px;max-width:42ch;}
.site-footer .footer-marca{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;
  font-size:clamp(1.9rem, 0.9rem + 2.2vw, 2.9rem);line-height:0.95;
  text-transform:uppercase;letter-spacing:0.01em;
  text-decoration:none;color:var(--paper);
}
.site-footer .footer-claim{color:var(--muted);font-size:1rem;margin:0;line-height:1.6;}
.site-footer .footer-contacto{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.site-footer .footer-contacto a{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:0.95rem;
  color:var(--paper);padding:10px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);overflow-wrap:anywhere;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .footer-contacto a svg{width:17px;height:17px;flex:none;}
.site-footer .fc-tel svg{color:var(--amber);}
.site-footer .fc-tel:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px);}
.site-footer .fc-wa svg{color:var(--whatsapp, #25d366);}
.site-footer .fc-wa:hover{border-color:var(--whatsapp, #25d366);color:var(--whatsapp, #25d366);transform:translateY(-2px);}
.site-footer .fc-mail svg{color:var(--electric);}
.site-footer .fc-mail:hover{border-color:var(--electric);color:var(--electric);transform:translateY(-2px);}
.site-footer .footer-col h4{
  font-family:'IBM Plex Mono',monospace;font-size:0.8rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 16px;font-weight:500;
}
.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.site-footer .footer-col a{text-decoration:none;color:var(--muted);font-size:1rem;transition:color .18s ease;}
.site-footer .footer-col a:hover{color:var(--electric);}
.site-footer .footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  color:var(--muted-2);font-size:0.92rem;font-family:'IBM Plex Mono',monospace;
}
@media (max-width:640px){.site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}}
.site-footer .footer-admin{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;font-size:0.88rem;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .footer-admin:hover{border-color:var(--electric);color:var(--electric);transform:translateY(-2px);}

/* ============ ANIMACIONES DE ENTRADA ============
   La clase "has-reveal" la pone /js/animaciones.js: si el JavaScript
   fallara, no se oculta nada y la página se ve entera igual. */
.has-reveal .reveal{
  opacity:0;
  transform:translateY(44px);
  transition:opacity .55s ease, transform .85s cubic-bezier(.16,.84,.32,1.06);
  transition-delay:var(--rd, 0ms);
}
.has-reveal .reveal[data-anim="left"]{transform:translateX(-56px);}
.has-reveal .reveal[data-anim="right"]{transform:translateX(56px);}
.has-reveal .reveal[data-anim="zoom"]{transform:scale(.9);}
.has-reveal .reveal[data-anim="card"]{transform:translateY(52px) scale(.94);}
.has-reveal .reveal.in{opacity:1;transform:none;}
/* la tarjeta de reseñas entra más rápida: es grande y se hacía larga */
.has-reveal .review-card.reveal{
  transform:translateY(26px) scale(.98);
  transition:opacity .28s ease, transform .38s cubic-bezier(.2,.7,.3,1);
  transition-delay:0ms;
}
@media (prefers-reduced-motion:reduce){
  .has-reveal .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* El margen lateral, al final y ganando siempre (ver nota en index.html) */
.wrap{padding-left:var(--gutter) !important;padding-right:var(--gutter) !important;}