/* ============================================================
   INGEMETRO E.I.R.L. - ESTILOS PRINCIPALES
   Diseno: Mobile-first, corporativo, tienda profesional
   Tipografia: Inter (Google Fonts)
   ============================================================ */

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
  --color-primary: #0a1628;
  --color-primary-light: #13203d;
  --color-accent: #1a73e8;
  --color-accent-hover: #1557b0;
  --color-white: #ffffff;
  --color-off-white: #f5f7fa;
  --color-gray-50: #f8fafc;
  --color-gray-100: #e8ecf1;
  --color-gray-200: #c5cdd8;
  --color-gray-300: #9aa4b4;
  --color-gray-400: #6b7685;
  --color-gray-500: #4a5568;
  --color-gray-600: #2d3748;
  --color-gray-700: #1a202c;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1da851;
  --color-whatsapp-dark: #128C7E;
  --color-star: #f59e0b;
  --color-red: #e53e3e;

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --container-max: 1200px;
  --container-padding: 1.25rem;
  --header-height: 72px;
}

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height);-webkit-text-size-adjust:100%}
body{font-family:var(--font-primary);font-size:1rem;line-height:1.65;color:var(--color-gray-700);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
ul{list-style:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:3px}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}

/* ---------- TOP BAR ---------- */
.topbar{background-color:var(--color-primary);color:var(--color-gray-200);font-size:0.8125rem;font-weight:500;display:none;border-bottom:1px solid rgba(255,255,255,0.06)}
.topbar__inner{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-xl);padding-top:0.5rem;padding-bottom:0.5rem}
.topbar__link{display:inline-flex;align-items:center;gap:0.4rem;color:var(--color-gray-200);transition:color var(--transition-fast);white-space:nowrap}
.topbar__link:hover{color:var(--color-white)}
.topbar__link--whatsapp:hover{color:var(--color-whatsapp)}

/* ---------- HEADER ---------- */
.header{position:sticky;top:0;z-index:1000;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-100);height:var(--header-height);box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.header__logo{display:flex;align-items:center;flex-shrink:0}
.header__logo img{width:auto;height:44px;max-width:160px;object-fit:contain}

/* ---------- NAV ---------- */
.nav{position:fixed;top:var(--header-height);left:0;width:100%;height:0;overflow:hidden;background-color:var(--color-white);transition:height var(--transition-base);z-index:999;border-bottom:1px solid transparent}
.nav--open{height:calc(100vh - var(--header-height));border-bottom-color:var(--color-gray-100);overflow-y:auto}
.nav__list{display:flex;flex-direction:column;padding:var(--spacing-lg) var(--container-padding);gap:0.25rem}
.nav__item{border-bottom:1px solid var(--color-gray-100)}
.nav__link{display:block;padding:0.85rem 0.5rem;font-size:1rem;font-weight:500;color:var(--color-gray-700);transition:color var(--transition-fast),background-color var(--transition-fast);border-radius:var(--radius-sm)}
.nav__link:hover,.nav__link:focus-visible{color:var(--color-accent);background-color:var(--color-off-white)}
.nav__link--activo{color:var(--color-accent)!important;font-weight:600}
.btn--header{display:none}

/* ---------- HAMBURGER ---------- */
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}
.hamburger:hover{background-color:var(--color-off-white)}
.hamburger__line{display:block;width:24px;height:2px;background-color:var(--color-primary);border-radius:2px;transition:transform var(--transition-base),opacity var(--transition-base)}
.hamburger--active .hamburger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger--active .hamburger__line:nth-child(2){opacity:0}
.hamburger--active .hamburger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1.5rem;font-family:var(--font-primary);font-size:0.9375rem;font-weight:600;line-height:1.4;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-align:center}
.btn--primary{background-color:var(--color-whatsapp);color:var(--color-white);border-color:var(--color-whatsapp)}
.btn--primary:hover{background-color:var(--color-whatsapp-hover);border-color:var(--color-whatsapp-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--primary-lg{padding:0.9rem 2rem;font-size:1rem}
.btn--secondary{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--secondary:hover{background-color:var(--color-primary);color:var(--color-white);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--whatsapp{background-color:var(--color-whatsapp);color:var(--color-white);border-color:var(--color-whatsapp)}
.btn--whatsapp:hover{background-color:var(--color-whatsapp-hover);border-color:var(--color-whatsapp-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--whatsapp-dark{background-color:var(--color-whatsapp-dark);color:var(--color-white);border-color:var(--color-whatsapp-dark);padding:1rem 2rem;font-size:1.0625rem;border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(18,140,126,0.3)}
.btn--whatsapp-dark:hover{background-color:#0d7468;transform:translateY(-2px);box-shadow:0 6px 24px rgba(18,140,126,0.4)}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{background-color:var(--color-gray-50);border-bottom:1px solid var(--color-gray-100);padding:0.75rem 0}
.breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.25rem;font-size:0.8125rem}
.breadcrumb__item{display:flex;align-items:center;color:var(--color-gray-400)}
.breadcrumb__item:not(:last-child)::after{content:'/';margin-left:0.5rem;color:var(--color-gray-300)}
.breadcrumb__item a{color:var(--color-gray-500);transition:color var(--transition-fast)}
.breadcrumb__item a:hover{color:var(--color-accent)}
.breadcrumb__item--activo{color:var(--color-gray-700);font-weight:500}

/* ---------- SECCIONES ---------- */
.section{padding:var(--spacing-3xl) 0}
.section--light{background-color:var(--color-off-white)}
.section--gray{background-color:var(--color-gray-50)}
.section__header{text-align:center;margin-bottom:var(--spacing-2xl)}
.section__title{font-size:1.75rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm);letter-spacing:-0.02em}
.section__subtitle{font-size:0.9375rem;color:var(--color-gray-400);max-width:600px;margin:0 auto}
.section__header--left{text-align:left}
.section__header--flex{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-md)}

/* ---------- HERO ---------- */
.hero{padding:var(--spacing-2xl) 0 var(--spacing-3xl);background-color:var(--color-primary);color:var(--color-white);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.03) 0%,transparent 50%);pointer-events:none}
.hero__grid{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--spacing-2xl)}
.hero__content{display:flex;flex-direction:column;gap:var(--spacing-lg)}
.hero__title{font-size:1.75rem;font-weight:700;line-height:1.25;letter-spacing:-0.03em}
.hero__subtitle{font-size:1rem;color:var(--color-gray-200);line-height:1.7;max-width:560px}
.hero__actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-sm)}
.hero__image{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background-color:var(--color-primary-light);min-height:220px;display:flex;align-items:center;justify-content:center}
.hero__image img{width:100%;height:100%;object-fit:cover}

/* ---------- ABOUT ---------- */
.about{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}
.about__text{font-size:0.9375rem;color:var(--color-gray-600);line-height:1.75;text-align:center}

/* ---------- CARDS SERVICIOS ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.card-servicio{background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);padding:var(--spacing-xl);transition:transform var(--transition-fast),box-shadow var(--transition-fast);text-align:center}
.card-servicio:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-servicio__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background-color:var(--color-primary);color:var(--color-white);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);transition:transform var(--transition-fast)}
.card-servicio:hover .card-servicio__icon{transform:scale(1.08)}
.card-servicio__title{font-size:1.0625rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm)}
.card-servicio__desc{font-size:0.875rem;color:var(--color-gray-500);line-height:1.65}

/* ═══════════════════════════════════════════
   CARRUSEL DE PRODUCTOS DESTACADOS
   ═══════════════════════════════════════════ */
.carrusel{position:relative;overflow:hidden;padding:0}
.carrusel__pista{display:flex;transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1);will-change:transform}
.carrusel__slide{flex:0 0 100%;padding:var(--spacing-sm);display:flex}
.carrusel__slide>*{width:100%}

/* Navegacion carrusel */
.carrusel__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border-radius:50%;background-color:var(--color-white);border:1px solid var(--color-gray-100);color:var(--color-primary);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:all var(--transition-fast)}
.carrusel__flecha:hover{background-color:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-lg)}
.carrusel__flecha--prev{left:0}
.carrusel__flecha--next{right:0}

/* Indicadores (dots) */
.carrusel__dots{display:flex;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}
.carrusel__dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-gray-200);border:none;cursor:pointer;transition:all var(--transition-fast);padding:0}
.carrusel__dot--activo{background-color:var(--color-accent);width:28px;border-radius:999px}

/* ═══════════════════════════════════════════
   TARJETA DE PRODUCTO (estilo tienda)
   ═══════════════════════════════════════════ */
.producto-card{background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;display:flex;flex-direction:column;height:100%;position:relative}
.producto-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.1);border-color:var(--color-gray-200)}
.producto-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.producto-card__imagen{width:100%;aspect-ratio:4/3;overflow:hidden;background-color:var(--color-off-white);position:relative}
.producto-card__imagen img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.producto-card:hover .producto-card__imagen img{transform:scale(1.06)}

/* Badge de destacado */
.producto-card__badge{position:absolute;top:10px;right:10px;background-color:var(--color-accent);color:var(--color-white);font-size:0.7rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:999px;text-transform:uppercase;letter-spacing:0.05em;z-index:2;box-shadow:0 2px 8px rgba(26,115,232,0.3)}

.producto-card__contenido{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:0.4rem;flex:1}
.producto-card__categoria{font-size:0.7rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.06em;order:-1}
.producto-card__nombre{font-size:1rem;font-weight:700;color:var(--color-gray-700);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast)}
.producto-card:hover .producto-card__nombre{color:var(--color-accent)}
.producto-card__desc-corta{font-size:0.8125rem;color:var(--color-gray-400);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.producto-card__precio{font-size:1.25rem;font-weight:700;color:var(--color-gray-700);margin-top:auto;padding-top:var(--spacing-sm)}
.producto-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-sm)}
.producto-card__link{font-size:0.8125rem;font-weight:600;color:var(--color-accent);display:inline-flex;align-items:center;gap:0.25rem;transition:gap var(--transition-fast),color var(--transition-fast)}
.producto-card__link::after{content:'\2192';transition:transform var(--transition-fast)}
.producto-card:hover .producto-card__link{gap:0.5rem;color:var(--color-accent-hover)}
.producto-card:hover .producto-card__link::after{transform:translateX(3px)}

/* ═══════════════════════════════════════════
   CATALOGO - FILTROS Y BUSCADOR
   ═══════════════════════════════════════════ */
.catalogo-toolbar{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-gray-100);box-shadow:var(--shadow-xs)}
.catalogo-buscador{position:relative;flex:1}
.catalogo-buscador__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-gray-300);pointer-events:none;display:flex}
.catalogo-buscador__input{width:100%;padding:0.7rem 1rem 0.7rem 2.5rem;border:2px solid var(--color-gray-100);border-radius:var(--radius-md);font-family:var(--font-primary);font-size:0.9375rem;color:var(--color-gray-700);background-color:var(--color-gray-50);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.catalogo-buscador__input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(26,115,232,0.1);background-color:var(--color-white)}
.catalogo-buscador__input::placeholder{color:var(--color-gray-300)}
.catalogo-filtros{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}
.catalogo-filtro{padding:0.45rem 1rem;font-family:var(--font-primary);font-size:0.8125rem;font-weight:500;color:var(--color-gray-500);background-color:var(--color-gray-50);border:1px solid var(--color-gray-100);border-radius:999px;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.catalogo-filtro:hover{background-color:var(--color-gray-100);color:var(--color-gray-700)}
.catalogo-filtro--activo{background-color:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}
.catalogo-filtro--activo:hover{background-color:var(--color-primary);color:var(--color-white)}
.catalogo-orden{display:flex;align-items:center;gap:var(--spacing-sm)}
.catalogo-orden__label{font-size:0.8125rem;font-weight:500;color:var(--color-gray-400);white-space:nowrap}
.catalogo-orden__select{padding:0.5rem 2rem 0.5rem 0.75rem;font-family:var(--font-primary);font-size:0.8125rem;font-weight:500;color:var(--color-gray-700);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);background-color:var(--color-white);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7685' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;transition:border-color var(--transition-fast)}
.catalogo-orden__select:focus{outline:none;border-color:var(--color-accent)}

/* Grid catalogo */
.productos-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.productos-vacio{text-align:center;padding:var(--spacing-3xl) 0;color:var(--color-gray-400)}

/* ═══════════════════════════════════════════
   PAGINA DE PRODUCTO - FICHA PROFESIONAL
   ═══════════════════════════════════════════ */
.producto-detalle{display:grid;grid-template-columns:1fr;gap:var(--spacing-2xl)}
.producto-detalle__galeria{position:sticky;top:calc(var(--header-height) + 1rem);align-self:start}
.producto-detalle__imagen-principal{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-off-white);border:1px solid var(--color-gray-100);margin-bottom:var(--spacing-md)}
.producto-detalle__imagen-principal img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.producto-detalle__miniaturas{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}
.producto-detalle__miniatura{width:68px;height:68px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--color-gray-100);cursor:pointer;background:none;padding:0;transition:border-color var(--transition-fast),opacity var(--transition-fast);opacity:0.7}
.producto-detalle__miniatura img{width:100%;height:100%;object-fit:cover}
.producto-detalle__miniatura--activa{border-color:var(--color-accent);opacity:1}
.producto-detalle__miniatura:hover{border-color:var(--color-gray-300);opacity:1}

.producto-detalle__info{display:flex;flex-direction:column;gap:var(--spacing-md)}
.producto-detalle__categoria-badge{display:inline-block;font-size:0.75rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.06em;background-color:rgba(26,115,232,0.08);padding:0.3rem 0.75rem;border-radius:999px;width:fit-content}
.producto-detalle__nombre{font-size:1.75rem;font-weight:700;color:var(--color-primary);line-height:1.25;letter-spacing:-0.02em}
.producto-detalle__precio{font-size:1.625rem;font-weight:700;color:var(--color-gray-700)}
.producto-detalle__precio--consultar{color:var(--color-gray-500);font-size:1.25rem}
.producto-detalle__disponibilidad{font-size:0.875rem;font-weight:500;color:var(--color-gray-500);display:inline-flex;align-items:center;gap:0.4rem}
.producto-detalle__disponibilidad::before{content:'';width:8px;height:8px;border-radius:50%;background-color:var(--color-whatsapp);display:inline-block}
.producto-detalle__descripcion{font-size:0.9375rem;color:var(--color-gray-600);line-height:1.75}
.producto-detalle__seccion-titulo{font-size:1rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-gray-100)}

/* Caracteristicas */
.producto-detalle__caracteristicas{display:grid;grid-template-columns:1fr;gap:0.5rem}
.producto-detalle__caracteristica{display:flex;align-items:flex-start;gap:var(--spacing-sm);font-size:0.875rem;color:var(--color-gray-600);line-height:1.5}
.producto-detalle__caracteristica svg{flex-shrink:0;margin-top:2px;color:var(--color-accent)}

/* Especificaciones */
.producto-detalle__especificaciones{background-color:var(--color-gray-50);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-gray-100)}
.producto-detalle__especificacion{display:flex;padding:0.75rem 1rem;font-size:0.875rem;border-bottom:1px solid var(--color-gray-100)}
.producto-detalle__especificacion:last-child{border-bottom:none}
.producto-detalle__especificacion-etiqueta{font-weight:600;color:var(--color-gray-700);min-width:130px;flex-shrink:0}
.producto-detalle__especificacion-valor{color:var(--color-gray-500)}

/* Acciones */
.producto-detalle__acciones{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--color-gray-100)}

/* Producto no encontrado */
.producto-no-encontrado{text-align:center;padding:var(--spacing-4xl) 0}
.producto-no-encontrado h2{font-size:1.5rem;color:var(--color-primary);margin-bottom:var(--spacing-md)}
.producto-no-encontrado p{color:var(--color-gray-400);margin-bottom:var(--spacing-xl)}

/* ---------- FEATURES ---------- */
.features{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.feature{text-align:center;padding:var(--spacing-lg)}
.feature__icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;background-color:var(--color-off-white);color:var(--color-accent);border-radius:50%;margin-bottom:var(--spacing-md);transition:transform var(--transition-base)}
.feature:hover .feature__icon{transform:scale(1.08)}
.feature__title{font-size:1.0625rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm)}
.feature__desc{font-size:0.875rem;color:var(--color-gray-500);line-height:1.65;max-width:300px;margin:0 auto}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:var(--color-white);padding:var(--spacing-3xl) 0;text-align:center}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}
.cta__title{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em}
.cta__text{font-size:0.9375rem;color:var(--color-gray-200);max-width:560px;line-height:1.7}
.cta__actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-sm)}

/* ---------- CONTACTO ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-2xl)}
.contact-info{background-color:var(--color-primary);color:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-xl)}
.contact-info__title{font-size:1.125rem;font-weight:700;margin-bottom:var(--spacing-lg);letter-spacing:-0.01em}
.contact-info__list{display:flex;flex-direction:column;gap:var(--spacing-md)}
.contact-info__item{display:flex;align-items:center;gap:var(--spacing-md);font-size:0.9375rem;color:var(--color-gray-200)}
.contact-info__item a{color:var(--color-gray-200);transition:color var(--transition-fast)}
.contact-info__item a:hover{color:var(--color-white)}
.contact-info__item svg{flex-shrink:0;color:var(--color-gray-300)}

/* ---------- FORMULARIO ---------- */
.contact-form{display:flex;flex-direction:column;gap:var(--spacing-md)}
.contact-form__group{display:flex;flex-direction:column;gap:0.35rem}
.contact-form__label{font-size:0.8125rem;font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.04em}
.contact-form__input{font-family:var(--font-primary);font-size:0.9375rem;padding:0.75rem 1rem;border:2px solid var(--color-gray-100);border-radius:var(--radius-md);background-color:var(--color-white);color:var(--color-gray-700);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}
.contact-form__input::placeholder{color:var(--color-gray-300)}
.contact-form__input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(26,115,232,0.12)}
.contact-form__input--textarea{resize:vertical;min-height:120px}
.contact-form__submit{margin-top:var(--spacing-sm);align-self:flex-start}

/* ---------- FOOTER ---------- */
.footer{background-color:var(--color-primary);color:var(--color-gray-200);padding-top:var(--spacing-3xl)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);border-bottom:1px solid rgba(255,255,255,0.08)}
.footer__brand img{width:auto;height:42px;object-fit:contain;margin-bottom:var(--spacing-md)}
.footer__desc{font-size:0.875rem;color:var(--color-gray-300);line-height:1.6;max-width:280px}
.footer__heading{font-size:0.9375rem;font-weight:700;color:var(--color-white);margin-bottom:var(--spacing-md)}
.footer__nav{display:flex;flex-direction:column;gap:0.6rem}
.footer__nav a{font-size:0.875rem;color:var(--color-gray-300);transition:color var(--transition-fast)}
.footer__nav a:hover{color:var(--color-white)}
.footer__bottom{padding:var(--spacing-lg) 0;text-align:center}
.footer__bottom p{font-size:0.8125rem;color:var(--color-gray-300)}

/* ═══════════════════════════════════════════
   CATALOGO - HERO SECUNDARIO
   ═══════════════════════════════════════════ */
.hero--catalogo{background-color:var(--color-primary);color:var(--color-white);padding:var(--spacing-2xl) 0;text-align:center}
.hero--catalogo__titulo{font-size:1.75rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:var(--spacing-sm)}
.hero--catalogo__subtitulo{font-size:0.9375rem;color:var(--color-gray-200)}

/* ---------- UTILIDADES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.no-scroll{overflow:hidden}
img[loading="lazy"]{background-color:var(--color-off-white)}

/* ═══════════════════════════════════════════
   ANIMACIONES DE ENTRADA
   ═══════════════════════════════════════════ */
.fade-in{animation:fadeIn 0.6s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp 0.5s ease forwards}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   MEDIA QUERIES
   ═══════════════════════════════════════════ */

/* 480px+ */
@media(min-width:480px){
  .hero__actions,.cta__actions{flex-direction:row;flex-wrap:wrap}
  .producto-detalle__acciones{flex-direction:row;flex-wrap:wrap}
  .catalogo-toolbar{flex-direction:row;align-items:center}
}

/* 640px+ */
@media(min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .productos-grid{grid-template-columns:repeat(2,1fr)}
  .producto-detalle__caracteristicas{grid-template-columns:repeat(2,1fr)}
}

/* 768px+ (Tablet) */
@media(min-width:768px){
  :root{--container-padding:2rem;--header-height:80px}
  .topbar,.btn--header{display:block}
  .btn--header{display:inline-flex}
  .section{padding:var(--spacing-4xl) 0}
  .section__title{font-size:2rem}
  .section__subtitle{font-size:1rem}
  .hero{padding:var(--spacing-3xl) 0 var(--spacing-4xl)}
  .hero__title{font-size:2.25rem}
  .hero__subtitle{font-size:1.0625rem}
  .hero__actions{flex-direction:row}
  .hero__image{min-height:320px}
  .about__text{font-size:1rem}
  .cta__title{font-size:1.75rem}
  .cta__actions{flex-direction:row}
  .contact-grid{grid-template-columns:1fr 1.5fr}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr}
  .hero--catalogo{padding:var(--spacing-3xl) 0}
  .hero--catalogo__titulo{font-size:2.25rem}

  .nav{position:static;width:auto;height:auto;overflow:visible;background-color:transparent;border-bottom:none}
  .nav--open{height:auto;overflow-y:visible;border-bottom-color:transparent}
  .nav__list{flex-direction:row;padding:0;gap:0.25rem}
  .nav__item{border-bottom:none}
  .nav__link{padding:0.5rem 0.85rem;font-size:0.9375rem}
  .hamburger{display:none}

  .carrusel__slide{flex:0 0 50%}
  .carrusel__flecha{display:flex}
  .producto-detalle{grid-template-columns:1fr 1fr;align-items:start}
  .producto-detalle__nombre{font-size:2rem}
}

/* 1024px+ (Desktop) */
@media(min-width:1024px){
  :root{--container-padding:2.5rem}
  .hero__grid{flex-direction:row;align-items:center;gap:var(--spacing-3xl)}
  .hero__content{flex:1;max-width:540px}
  .hero__image{flex:1;min-height:380px}
  .hero__title{font-size:2.625rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:repeat(4,1fr)}
  .productos-grid{grid-template-columns:repeat(3,1fr)}
  .carrusel__slide{flex:0 0 25%}
  .producto-detalle__nombre{font-size:2.125rem}
  .producto-detalle__caracteristicas{grid-template-columns:repeat(2,1fr)}
}

/* 1200px+ */
@media(min-width:1200px){
  :root{--container-padding:3rem}
  .hero__title{font-size:3rem}
  .section__title{font-size:2.25rem}
  .hero__image{min-height:420px}
  .productos-grid{grid-template-columns:repeat(4,1fr)}
}

/* 1366px+ */
@media(min-width:1366px){
  .hero{padding:var(--spacing-4xl) 0}
  .hero__image{min-height:460px}
}

/* ---------- IMPRESION ---------- */
@media print{
  .header,.topbar,.hamburger,.footer,.cta,.btn,.carrusel__flecha,.carrusel__dots{display:none!important}
  body{color:#000;background:#fff}
}