/* ==========================================================================
   PREMIERLABS.TECH — BRAND KIT
   Premier Tecnología SRL | Big Strategy Tech LLC
   ==========================================================================

   1. LOGOTIPO — "El Rombo Abierto"
   --------------------------------------------------------------------------
   Concepto: un rombo de trazo azul técnico con la arista superior derecha
   desprendida en ámbar. El rombo es el sistema; la arista abierta es el
   resultado que sale hacia el negocio. El punto central es el cliente.
   Comunica "inteligencia aplicada al negocio" sin globos, engranajes,
   circuitos ni órbitas.

   Versiones (SVG inline en el HTML):
   - Horizontal : isotipo + wordmark "PremierLabs" (header)
   - Ícono solo : isotipo cuadrado (favicon / app icon) — favicon.svg
   - Fondo claro: mismo isotipo con trazo #16233A y arista #B87A1E,
                  wordmark #10151D (para documentos y propuestas):

     <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
       <path d="M32 10 10 32l22 22 22-22" fill="none" stroke="#16233A"
             stroke-width="6" stroke-linejoin="round" stroke-linecap="round"/>
       <path d="M40 10.5 53.5 24" fill="none" stroke="#B87A1E"
             stroke-width="6" stroke-linecap="round"/>
       <circle cx="32" cy="34" r="5.5" fill="#B87A1E"/>
     </svg>

   2. PALETA DE COLOR
   --------------------------------------------------------------------------
   #0C0E12  --color-fondo        Fondo principal (azul-noche, no negro puro)
   #14171E  --color-superficie   Cards y paneles
   #1B2029  --color-superficie-2 Paneles elevados, hover de superficie
   #262C38  --color-borde        Bordes y divisores
   #3D7BC4  --color-primario     Azul técnico (derivado de #1F4E79,
                                 ajustado para contraste AA en dark)
   #6FA5DC  --color-primario-claro  Azul para texto sobre fondo oscuro
   #E8A13C  --color-acento       Ámbar Premier — color de acción.
                                 Cálido sobre fondo frío: tecnología con
                                 trato humano. Propio de la marca.
   #F2B45C  --color-acento-claro Hover del acento
   #F4F6F9  --color-texto        Texto primario (contraste 15.8:1)
   #A9B2C0  --color-texto-sec    Texto secundario (contraste 8.1:1)
   #6E7787  --color-texto-muted  Texto atenuado (contraste 4.6:1)

   3. TIPOGRAFÍA
   --------------------------------------------------------------------------
   Display / Hero : "Space Grotesk" 500-700 — geométrica y técnica,
                    con carácter propio. Headlines y nombres de producto.
                    H1 clamp(2.4rem, 6vw, 4.2rem) / lh 1.05 / peso 700
                    H2 clamp(1.6rem, 3.5vw, 2.4rem) / lh 1.15 / peso 700
                    H3 1.25rem / lh 1.3 / peso 500
   Body           : "Instrument Sans" 400-600 — legible y neutra sin ser
                    genérica. Descripciones y texto corrido.
                    Base 1rem / lh 1.6 / peso 400
                    Small 0.875rem / lh 1.5
   Mono / Data    : "IBM Plex Mono" 500 — precios, datos técnicos, etiquetas.
                    Precio card 1.05rem / Precio panel 1.15rem / lh 1.4

   4. ÍCONOS
   --------------------------------------------------------------------------
   Exclusivamente Lucide Icons (lucide.dev, ISC license), inline como
   sprite SVG <symbol> en el HTML para funcionar sin JavaScript y sin
   requests externos. Trazo 2px, tamaño base 24. Cada ícono cumple una
   función: identificar producto, acción o dato de contacto.

   5. FIRMA VISUAL
   --------------------------------------------------------------------------
   La arista desprendida del logo se repite como marcador de sección:
   un trazo diagonal ámbar corto (.marca-seccion) antes de cada título.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  --color-fondo: #0c0e12;
  --color-superficie: #14171e;
  --color-superficie-2: #1b2029;
  --color-borde: #262c38;
  --color-primario: #3d7bc4;
  --color-primario-claro: #6fa5dc;
  --color-acento: #e8a13c;
  --color-acento-claro: #f2b45c;
  --color-texto: #f4f6f9;
  --color-texto-sec: #a9b2c0;
  --color-texto-muted: #6e7787;

  --fuente-display: "Space Grotesk", "Segoe UI", sans-serif;
  --fuente-body: "Instrument Sans", "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", "Consolas", monospace;

  --radio: 10px;
  --radio-grande: 16px;
  --sombra-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --transicion: 200ms ease;
  --ancho-max: 1200px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primario-claro);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Utilidades ---------- */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.icono {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Firma visual: arista del logo como marcador de sección */
.marca-seccion {
  display: inline-block;
  width: 26px;
  height: 4px;
  background: var(--color-acento);
  transform: skewX(-30deg);
  margin-bottom: 1rem;
}

.titulo-seccion {
  font-family: var(--fuente-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.subtitulo-seccion {
  color: var(--color-texto-sec);
  max-width: 46ch;
  margin-top: 0.75rem;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radio);
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  transition: background var(--transicion), border-color var(--transicion),
    color var(--transicion), transform var(--transicion);
}

.btn .icono {
  width: 18px;
  height: 18px;
}

.btn-acento {
  background: var(--color-acento);
  color: #14100a;
}

.btn-acento:hover {
  background: var(--color-acento-claro);
  transform: translateY(-1px);
}

.btn-contorno {
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  background: transparent;
}

.btn-contorno:hover {
  border-color: var(--color-primario);
  color: var(--color-primario-claro);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(12, 14, 18, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-borde);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav a {
  color: var(--color-texto-sec);
  font-size: 0.95rem;
  transition: color var(--transicion);
}

.nav a:hover {
  color: var(--color-texto);
}

.header-ctas {
  display: flex;
  gap: 0.6rem;
}

.header-ctas .btn {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

/* Menú mobile con checkbox (funciona sin JS) */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    display: none;
  }

  .nav a {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-borde);
  }

  .nav-toggle-input:checked ~ .nav {
    display: flex;
  }

  .header-ctas {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 11rem 0 6rem;
}

.hero-eyebrow {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primario-claro);
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-family: var(--fuente-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.hero h1 .resaltado {
  color: var(--color-acento);
}

.hero-sub {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  color: var(--color-texto-sec);
  max-width: 52ch;
}

.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ---------- Tabs de filtro ---------- */
.tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 2rem;
}

.tab {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  color: var(--color-texto-sec);
  font-family: var(--fuente-display);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transicion), border-color var(--transicion),
    background var(--transicion);
}

.tab:hover {
  color: var(--color-texto);
  border-color: var(--color-texto-muted);
}

.tab[aria-selected="true"] {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #14100a;
}

/* ---------- Grid de cards ---------- */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .grid-productos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-productos {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
  transition: transform var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion), opacity var(--transicion);
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-acento);
  box-shadow: var(--sombra-card);
}

.card.oculta {
  display: none;
}

.card.saliendo {
  opacity: 0;
}

.card-cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-icono {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radio);
  background: var(--color-superficie-2);
  color: var(--color-primario-claro);
  flex-shrink: 0;
}

.card h3 {
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
}

.card-target {
  font-size: 0.875rem;
  color: var(--color-texto-muted);
}

.card-resultado {
  color: var(--color-texto-sec);
  font-size: 0.95rem;
  flex-grow: 1;
}

.card-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-borde);
}

.card-precio {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-texto);
}

.card-precio small {
  display: block;
  font-size: 0.7rem;
  color: var(--color-texto-muted);
  font-weight: 400;
}

.btn-detalle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-acento);
  font-family: var(--fuente-display);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.btn-detalle .icono {
  width: 16px;
  height: 16px;
  transition: transform var(--transicion);
}

.card:hover .btn-detalle .icono {
  transform: translateX(3px);
}

/* ---------- Diferencial destacado (producto 10) ---------- */
.card-diferencial {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-superficie-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 0.85rem;
  color: var(--color-texto-sec);
}

.card-diferencial .icono {
  width: 16px;
  height: 16px;
  color: var(--color-acento);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.card-diferencial strong {
  color: var(--color-texto);
}

/* ---------- Badges (producto 11) ---------- */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--fuente-display);
}

.badge .icono {
  width: 12px;
  height: 12px;
}

.badge--verde {
  background: rgba(52, 199, 123, 0.1);
  color: #34c77b;
  border: 1px solid rgba(52, 199, 123, 0.25);
}

.badge--acento {
  background: rgba(232, 161, 60, 0.12);
  color: var(--color-acento);
  border: 1px solid rgba(232, 161, 60, 0.25);
}

.badge--azul {
  background: rgba(61, 123, 196, 0.12);
  color: var(--color-primario-claro);
  border: 1px solid rgba(61, 123, 196, 0.25);
}

/* ---------- Aclaración breve (producto 11) ---------- */
.card-aclaracion {
  font-size: 0.78rem;
  color: var(--color-texto-muted);
  border-left: 2px solid var(--color-borde);
  padding-left: 0.7rem;
}

/* ---------- CTA doble en card (producto 11) ---------- */
.card-cta-doble {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-borde);
}

.card-cta-doble .btn {
  flex: 1;
  justify-content: center;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---------- Layout destacado para tabs con pocos productos ---------- */
.grid-productos.featured-single {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

.grid-productos.featured-single .card {
  flex-direction: column;
  padding: 2rem;
}

@media (min-width: 720px) {
  .grid-productos.featured-single .card {
    padding: 2.5rem;
  }

  .grid-productos.featured-single .card-cabecera {
    gap: 1rem;
  }

  .grid-productos.featured-single .card-icono {
    width: 52px;
    height: 52px;
  }

  .grid-productos.featured-single h3 {
    font-size: 1.4rem;
  }

  .grid-productos.featured-single .card-resultado {
    font-size: 1.05rem;
  }
}

/* ---------- Paneles de detalle ---------- */
/* Sin JS: se abren via :target. Con JS: clase .abierto + overlay. */
.panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 1.25rem;
  overflow-y: auto;
  background: rgba(8, 9, 12, 0.78);
}

.panel:target,
.panel.abierto {
  display: grid;
  place-items: center;
}

.panel.abierto .panel-caja {
  animation: panel-entrada 250ms ease both;
}

@keyframes panel-entrada {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-fondo {
  position: absolute;
  inset: 0;
  cursor: default;
}

.panel-caja {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--color-superficie-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 2.25rem;
  box-shadow: var(--sombra-card);
}

.panel-cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-sec);
  transition: color var(--transicion), border-color var(--transicion);
}

.panel-cerrar:hover {
  color: var(--color-texto);
  border-color: var(--color-texto-muted);
}

.panel-caja h3 {
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  padding-right: 3rem;
}

.panel-target {
  margin-top: 0.4rem;
  color: var(--color-texto-muted);
  font-size: 0.9rem;
}

.panel-etiqueta {
  margin-top: 1.75rem;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primario-claro);
}

.panel-caja p {
  margin-top: 0.5rem;
  color: var(--color-texto-sec);
}

.panel-bullets {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.panel-bullets li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-texto-sec);
}

.panel-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 3px;
  background: var(--color-acento);
  transform: skewX(-30deg);
}

.panel-nota {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-texto-muted);
  border-left: 2px solid var(--color-borde);
  padding-left: 0.9rem;
}

.panel-precios {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.precio-opcion {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1rem;
}

.precio-opcion strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: 0.9rem;
  font-weight: 500;
}

.precio-opcion span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--fuente-mono);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-acento);
}

.precio-opcion small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-texto-muted);
}

.panel-ctas {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- Botones flotantes ---------- */
.flotantes {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.flotante {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 0.9rem;
  box-shadow: var(--sombra-card);
  transition: transform var(--transicion), background var(--transicion);
}

.flotante:hover {
  transform: translateY(-2px);
}

.flotante-whatsapp {
  background: var(--color-acento);
  color: #14100a;
}

.flotante-whatsapp:hover {
  background: var(--color-acento-claro);
}

.flotante-agenda {
  background: var(--color-superficie-2);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
}

@media (max-width: 640px) {
  .flotante {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }

  .flotante span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Banner CTA al final de las tarjetas ---------- */
.cta-banner {
  margin-top: 2.5rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-banner h3 {
  font-family: var(--fuente-display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 30ch;
}

.cta-banner p {
  margin-top: 0.4rem;
  color: var(--color-texto-sec);
}

.cta-banner-acciones {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- Demos visuales animadas ---------- */
/* Escenas SVG inline animadas con CSS. La animación es decorativa:
   el estado base de cada elemento es visible, por lo que con
   prefers-reduced-motion la demo queda como ilustración estática. */
.card-demo {
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  background: linear-gradient(160deg, var(--color-superficie-2), #0f1218);
  overflow: hidden;
}

.card-demo svg {
  width: 100%;
  height: auto;
}

.demo * {
  transform-box: fill-box;
  transform-origin: center;
}

.d-paso {
  animation: demo-aparece 6s ease infinite;
}

.d-pop {
  animation: demo-pop 6s ease infinite;
}

.d-dot {
  animation: demo-parpadeo 1.2s ease infinite;
}

.d-ping {
  animation: demo-ping 3s ease-out infinite;
}

.d-cae {
  animation: demo-cae 4s linear infinite;
}

.d-cel {
  animation: demo-celda 6s ease infinite;
}

.d-trazo {
  stroke-dasharray: 620;
  animation: demo-trazo 7s ease infinite;
}

@keyframes demo-aparece {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes demo-pop {
  0%, 45% { opacity: 0; transform: scale(0.6); }
  55%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes demo-parpadeo {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes demo-ping {
  0% { opacity: 0.7; transform: scale(0.4); }
  70%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes demo-cae {
  0% { opacity: 0; transform: translateY(-12px); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(104px); }
}

@keyframes demo-celda {
  0%, 100% { opacity: 0.15; }
  35%, 75% { opacity: 1; }
}

@keyframes demo-trazo {
  0% { stroke-dashoffset: 620; }
  45%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 620; }
}

/* ---------- Sección Nosotros ---------- */
.nosotros {
  padding: 5rem 0;
  border-top: 1px solid var(--color-borde);
  margin-top: 5rem;
}

.nosotros-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.nosotros-card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
}

.nosotros-card h3 {
  font-family: var(--fuente-display);
  font-size: 1.1rem;
  font-weight: 500;
}

.nosotros-card p {
  margin-top: 0.4rem;
  color: var(--color-texto-sec);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-borde);
  padding: 3.5rem 0 8rem;
  margin-top: 5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-slogan {
  margin-top: 0.9rem;
  font-family: var(--fuente-display);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-texto-sec);
}

.footer-contacto {
  display: grid;
  gap: 0.6rem;
}

.footer-contacto li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-texto-sec);
  font-size: 0.92rem;
}

.footer-contacto .icono {
  width: 17px;
  height: 17px;
  color: var(--color-primario-claro);
}

.footer-links {
  display: grid;
  gap: 0.5rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-texto-sec);
  font-size: 0.92rem;
  transition: color var(--transicion);
}

.footer-links a:hover {
  color: var(--color-texto);
}

.footer-links .icono {
  width: 16px;
  height: 16px;
}

.footer-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-borde);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-texto-muted);
}

/* ---------- Página de catálogo extendido ---------- */
.pagina-interna {
  padding: 10rem 0 4rem;
}

.placeholder-catalogo {
  margin-top: 2rem;
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-texto-muted);
}