/*
==========================
  SAMI1S.A. - Estilos mejorados
==========================
*/

:root {
  --font-family: 'Inter', sans-serif;
  --primary: #248dcf;
  --accent: #92bdec;
  --secondary: #3a3a3a;
  --light: #fff;
  --dark: #212529;
  --muted: #6c757d;
  --border-radius: .6rem;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
  --gradient: linear-gradient(135deg, var(--primary), var(--accent));
  --card-bg: #f9f9f9;
}

/* ============================
   BASE GENERAL
============================ */
body {
  font-family: var(--font-family);
  color: var(--dark);
  background: var(--light);
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
  scroll-behavior: smooth;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--muted); }

.fade-in { animation: fadeIn 1s ease forwards; opacity: 0; }
.fade-in-delayed { animation: fadeIn 1.5s ease .3s forwards; opacity: 0; }
.slide-up { animation: slideUp 1s ease forwards; opacity: 0; transform: translateY(30px); }

/* ============================
   NAVBAR
============================ */
.navbar {
  background: var(--light);
  padding: 1rem 0;
  box-shadow: var(--shadow-sm);
  border-bottom: 2px solid var(--primary);
  position: sticky; top: 0; z-index: 10;
}
.navbar-inner { display: flex; justify-content: space-between; align-items: center; }
.brand img { height: 45px; }
.navbar nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: var(--secondary);
  font-weight: 600;
  position: relative;
  transition: color .2s;
}
.navbar nav a:hover, .navbar nav a.active { color: var(--primary); }
.navbar nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width .3s;
}
.navbar nav a:hover::after, .navbar nav a.active::after {
  width: 100%;
}
/*
==========================
  PRESENTACIÓN - SAMI1S.A.
==========================
*/

.about {
  padding: 1rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  box-shadow: inset 0 8px 15px rgba(0,0,0,0.03);
  animation: fadeInPage 1s ease forwards;
}

/* === Título === */
.about h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 2rem;
  position: relative;
  text-align: center;
}
.about h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: .5rem auto 0;
  border-radius: 2px;
}

/* === Contenedor general === */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* === Texto === */
.about-text {
  font-size: 1.05rem;
  color: var(--secondary);
  line-height: 1.8;
  animation: slideUp 2s ease forwards;
}
.about-text p {
  margin-bottom: 1rem;
}
.about-text strong {
  color: var(--primary);
}
.about-text ul {
  list-style-type: "✓ ";
  padding-left: 1rem;
  color: var(--dark);
  margin-top: 1rem;
}
.about-text li {
  margin-bottom: .4rem;
  transition: transform .2s ease, color .2s ease;
}
.about-text li:hover {
  transform: translateX(5px);
  color: var(--primary);
}

/* === Imagen === */
.about-image {
  text-align: center;
  animation: fadeSlideIn 1.2s ease forwards;
}
.about-image img {
  width: 90%;
  max-width: 400px;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(36,141,207,0.25);
  transition: transform .4s ease, box-shadow .4s ease;
}
.about-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(36,141,207,0.35);
}

/* === Animaciones generales === */
@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Adaptable (responsive) === */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-image img {
    max-width: 300px;
    margin-top: 1.5rem;
  }
}
/* === Adaptable (tablet) === */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .about-image img {
    max-width: 320px;
    margin-top: 1.5rem;
  }
}

/* === Adaptable (celular) === */
@media (max-width: 600px) {
  .about {
    padding: 3rem 1rem;
  }

  .about h1 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }

  .about-text {
    font-size: 0.95rem;
    text-align: justify;
  }

  .about-text ul {
    list-style-type: none;
    padding-left: 0;
  }

  .about-text li::before {
    content: "• ";
    color: var(--primary);
    font-weight: bold;
  }

  .about-image img {
    width: 80%;
    max-width: 260px;
    border-width: 3px;
  }
}
/*
==========================
  CONTACTOS - SAMI1S.A.
==========================
*/

.contact-section {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  border-top: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  box-shadow: inset 0 5px 15px rgba(0,0,0,0.03);
  padding: 4rem 1rem;
  animation: fadeInContact 1s ease forwards;
}

/* === Título y subtítulo === */
.contact-section h1 {
  font-size: 2.4rem;
  color: var(--primary);
  text-align: center;
  font-weight: 800;
  margin-bottom: .5rem;
}
.contact-section p {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

/* === Contenedor formulario === */
.contact-form {
  background: #fff;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(36,141,207,0.15);
  border: 2px solid #e2e8f0;
  transition: transform .4s ease, box-shadow .4s ease;
}
.contact-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(36,141,207,0.25);
}

/* === Campos === */
.contact-form label {
  display: block;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .4rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 2px solid #cbd5e1;
  border-radius: var(--border-radius);
  padding: .7rem 1rem;
  font-size: 1rem;
  font-family: var(--font-family);
  margin-bottom: 1.2rem;
  transition: border-color .3s ease, box-shadow .3s ease;
  background: #f9fafc;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36,141,207,0.15);
  outline: none;
  background: #fff;
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* === Botón === */
.contact-form .btn.primary {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: .8rem 2rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 10px rgba(36,141,207,0.2);
}
.contact-form .btn.primary:hover {
  background: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(36,141,207,0.35);
}

/* === Animaciones === */
@keyframes fadeInContact {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Responsive === */
@media (max-width: 768px) {
  .contact-section {
    padding: 3rem 1rem;
  }
  .contact-form {
    padding: 1.5rem;
  }
  .contact-section h1 {
    font-size: 1.9rem;
  }
}
@media (max-width: 480px) {
  .contact-form {
    padding: 1.2rem;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: .95rem;
    padding: .6rem .8rem;
  }
  .contact-section h1 {
    font-size: 1.7rem;
  }
}


/* ============================
   HERO (HOME)
============================ */
.hero-home {
  position: relative;
  background: var(--gradient);
  color: white;
  padding: 5rem 0;
  overflow: hidden;
}
.hero-home .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hero-text { max-width: 550px; }
.hero-text h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: .5rem 0;
  line-height: 1.2;
}
.hero-text span { font-family:Calisto MT; color: var(--light); }
.hero-buttons { margin-top: 1.5rem; display: flex; gap: 1rem; ;}
.hero-image img {
  width: 300px;
  border-radius: var(--border-radius);
  filter: drop-shadow(0 0 15px rgba(0,0,0,0.3));
}

/* ============================
   FEATURES
============================ */
.features {
  text-align: center;
  padding: 4rem 1rem;
}
.features h2 {
  font-size: 2rem;
  color: var(--dark);
  margin-bottom: 2rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.feature {
  padding: 2rem 1rem;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.feature .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* =============================
   CATÁLOGO - CABECERA Y FILTROS
============================= */
.catalog-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* se adapta en pantallas pequeñas */
}

.catalog-header .section-title {
  margin: 0;
  line-height: 1;
  font-size: 1.8rem;
  color: var(--primary);
}

.catalog-header .btn.secondary {
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  background-color: var(--primary);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;
}

main.container {
  margin-top: 2rem; 
}

.catalog-header .btn.secondary:hover {
  background-color: var(--accent);
}

/* === Filtros lado a lado === */
.filter-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.3rem;
}

.form-control {
  padding: 0.4rem 0.6rem;
  border: 1.8px solid #d0d7de;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: var(--font-family);
  background-color: #fff;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36, 141, 207, 0.15);
}

/* Responsive */
@media (max-width: 600px) {
  .catalog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .filter-controls {
    flex-direction: column;
    gap: 0.8rem;
  }

  .catalog-header .btn.secondary {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
  }
}

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

/* =============================
   TARJETA PRINCIPAL DE PRODUCTO
============================= */
.product-card {
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border: 2px solid #248dcf;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(36, 141, 207, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 1rem;

  /* Estado base */
  transform: scale(1);
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    filter 0.35s ease;
}

.product-card:hover {
  transform: scale(1.07); /* 💥 más notorio */
  border-color: #6fbdf3;
  box-shadow: 0 10px 25px rgba(36, 141, 207, 0.35);
  filter: brightness(1.04);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Permite combinar fadeSlideIn con scale */
.product-card {
  animation-fill-mode: forwards;
  will-change: transform;
}


/* Imagen superior y badge */
.product-top {
  position: relative;
  background: var(--light);
}
.category-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: var(--primary);
  color: #fff;
  font-size: .8rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.product-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  transition: transform .3s ease;
  background: #f5f7fa;
  padding: .8rem;
}
.product-card:hover .product-image {
  transform: scale(1.1);
}

/* =============================
   INFORMACIÓN DEL PRODUCTO
============================= */
.product-info {
  padding: 1.2rem 1rem 1rem;
  text-align: center;
}

/* Proveedor (más discreto) */
.product-info .product-pack {
  font-size: 0.85rem;
  color: #6b7280; /* gris medio */
  font-weight: 600;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Nombre del producto (más grande y fuerte) */
.product-info .product-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0.4rem 0 0.6rem;
}

/* Precio (más destacado) */
.product-info .product-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: #248dcf;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(36,141,207,0.25);
}

/* =============================
   ACCIONES
============================= */
.product-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1rem;
  background: #e9f4ff;
  border-top: 2px solid #c8e0f5;
}
.quantity-input {
  width: 60px;
  text-align: center;
  border-radius: var(--border-radius);
  border: 1px solid #ccc;
  padding: .3rem;
}
.btn.primary {
  background: var(--primary);
  color: white;
  transition: background .3s, transform .2s;
}
.btn.secondary {
  background: var(--primary);
  color: rgb(0, 0, 0);
  transition: background .3s, transform .2s;
}
.btn.primary:hover {
  background: var(--accent);
  transform: scale(1.05);
}

/* =============================
   MENSAJE AL AGREGAR PRODUCTO
============================= */
.added-message {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: .4rem;
  animation: fadePop 1.5s ease forwards;
}
@keyframes fadePop {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.95); }
}
@keyframes CardAnimation {
  0% { opacity: 1; transform:  scale(1); }
  100% { opacity: 1; transform:  scale(1.05); }
}


/* ============================
   BOTONES GENERALES
============================ */
.btn {
  display: inline-block;
  padding: .6rem 1.2rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: .3s;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--accent); transform: translateY(-2px); 
}
/*
=================================
  ADMIN - PEDIDOS • SAMI1S.A.
=================================
*/

body {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  color: var(--dark);
}

/* =============================
   LOGIN FORM
============================= */
#login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  text-align: center;
  animation: fadeInAdmin 1s ease forwards;
}

#login-form .section {
  background: #fff;
  padding: 3rem 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 25px rgba(36,141,207,0.15);
  border: 2px solid #e0eaf3;
  max-width: 420px;
  width: 100%;
  transition: transform .4s ease, box-shadow .4s ease;
}
#login-form .section:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(36,141,207,0.25);
}

#login-form h1 {
  color: var(--primary);
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 1rem;
}

#login-form p {
  color: var(--muted);
  margin-bottom: 2rem;
}

#login-form .form-group {
  text-align: left;
  margin-bottom: 1rem;
}

#login-form label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--secondary);
}

#login-form input {
  width: 100%;
  padding: .8rem;
  border: 2px solid #d1d9e6;
  border-radius: var(--border-radius);
  background: #f9fbfd;
  font-family: var(--font-family);
  transition: border-color .3s ease, box-shadow .3s ease;
}
#login-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36,141,207,0.2);
  outline: none;
  background: #fff;
}

#login-form button {
  margin-top: 1.2rem;
  font-size: 1.1rem;
}

/*
=================================
  ADMIN - PEDIDOS • SAMI1S.A.
=================================
*/

body {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  color: var(--dark);
  font-family: var(--font-family);
}

/* =============================
   LOGIN FORM
============================= */
#login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  text-align: center;
  animation: fadeInAdmin 1s ease forwards;
}

#login-form .section {
  background: #fff;
  padding: 3rem 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 25px rgba(36,141,207,0.15);
  border: 2px solid #e0eaf3;
  max-width: 420px;
  width: 100%;
  transition: transform .4s ease, box-shadow .4s ease;
}
#login-form .section:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(36,141,207,0.25);
}

#login-form h1 {
  color: var(--primary);
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 1rem;
}

#login-form p {
  color: var(--muted);
  margin-bottom: 2rem;
}

#login-form .form-group {
  text-align: left;
  margin-bottom: 1rem;
}

#login-form label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--secondary);
}

#login-form input {
  width: 100%;
  padding: .8rem;
  border: 2px solid #d1d9e6;
  border-radius: var(--border-radius);
  background: #f9fbfd;
  font-family: var(--font-family);
  transition: border-color .3s ease, box-shadow .3s ease;
}
#login-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36,141,207,0.2);
  outline: none;
  background: #fff;
}

#login-form button {
  margin-top: 1.2rem;
  font-size: 1.1rem;
  width: 100%;
}

/* =============================
   PANEL ADMIN
============================= */
#admin-content {
  padding: 2rem 0;
  animation: fadeInAdmin .8s ease forwards;
}

.section-title {
  color: var(--primary);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.table-container {
  overflow-x: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 15px rgba(36,141,207,0.1);
  background: #fff;
  border: 2px solid #e2e8f0;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  background: var(--primary);
  color: #fff;
}
.table th, .table td {
  padding: .9rem 1rem;
  text-align: left;
}
.table th {
  font-weight: 700;
  font-size: .95rem;
}
.table tbody tr {
  border-bottom: 1px solid #e5e9f2;
  transition: background .2s ease;
}
.table tbody tr:hover {
  background: #f1f7fc;
}

/* Estado badge */
.table td:nth-child(4) {
  font-weight: 600;
}
.status {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
}
.status.pendiente { background: #f0ad4e; }
.status.enviado { background: #5bc0de; }
.status.entregado { background: #5cb85c; }
.status.cancelado { background: #d9534f; }

/* Botones acciones */
.action-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: .4rem .8rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: .9rem;
  transition: background .2s ease, transform .2s ease;
}
.action-btn:hover {
  background: var(--accent);
  transform: scale(1.05);
}

/* =============================
   MODAL DETALLE
============================= */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  justify-content: center;
  align-items: center;
  z-index: 100;
  animation: fadeInModal .3s ease;
}

.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 600px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  position: relative;
  animation: scaleIn .4s ease forwards;
  display: flex;
  flex-direction: column;
  max-height: 80vh; /* evita que se desborde */
  overflow: hidden;
}

.close-btn {
  position: absolute;
  top: .8rem;
  right: 1rem;
  font-size: 1.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}
.close-btn:hover { color: var(--primary); }

.modal-content h2 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

/* Contenido scrollable */
#order-detail-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid #e2e8f0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) #e9f2fa;
}

/* Scrollbar personalizada */
#order-detail-content::-webkit-scrollbar {
  width: 8px;
}
#order-detail-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}
#order-detail-content::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 2px solid #f1f5f9;
}
#order-detail-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

/* =============================
   ANIMACIONES
============================= */
@keyframes fadeInAdmin {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 768px) {
  .table th, .table td {
    padding: .7rem;
    font-size: .9rem;
  }
  #login-form .section {
    padding: 2rem 1.5rem;
  }
  .modal-content {
    width: 95%;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .table-container {
    font-size: .85rem;
  }
  .section-title {
    font-size: 1.6rem;
  }
  #login-form h1 {
    font-size: 1.8rem;
  }
}



/* ============================
   GALERÍA
============================ */
.gallery {
  background: #f2f7fb;
  padding: 4rem 0;
  text-align: center;
}
.gallery h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.gallery-grid img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease;
}
.gallery-grid img:hover { transform: scale(1.05); }

/* ============================
   CTA
============================ */
.cta {
  background: var(--gradient);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
}
.cta h2 { font-size: 2rem; margin-bottom: 1rem; }
.cta p { font-size: 1.1rem; margin-bottom: 1.5rem; }

/* ============================
   FOOTER
============================ */
.footer {
  background: var(--dark);
  color: var(--light);
  padding: 2rem 0;
  border-top: 3px solid var(--primary);
}
.footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ============================
   ANIMACIONES
============================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/*
==========================
  SAMI1S.A. - Estilos mejorados (Responsive optimizado)
==========================
*/

/* === CONTENIDO ORIGINAL INTACTO === */
/* (por brevedad aquí no se repite todo el CSS original del usuario)
   En el archivo final se mantienen todas las secciones originales,
   solo se reemplazan las media queries finales por las siguientes mejoras. */

/* =============================
   RESPONSIVE - TABLET
============================= */
@media (max-width: 768px) {
  .navbar-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .navbar nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }
  .navbar nav a {
    font-size: 0.95rem;
    padding: 0.3rem 0.6rem;
  }
  .about-grid, .catalog-grid, .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .section-title {
    font-size: 1.5rem;
  }
  .table th, .table td {
    padding: .7rem;
    font-size: .9rem;
  }
  .contact-form {
    width: 90%;
    padding: 1.5rem;
  }
}

/* =============================
   RESPONSIVE - CELULAR
============================= */
@media (max-width: 480px) {
  /* Navbar más compacta y centrada */
  .navbar-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }
  .navbar nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }
  .navbar nav a {
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
  }

  /* Formularios y botones */
  .form-control {
    font-size: 0.9rem;
    padding: 0.35rem 0.6rem;
  }
  .btn {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
  }

  /* Tablas */
  .table-container {
    overflow-x: auto;
    font-size: 0.85rem;
  }
  .table th, .table td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }

  /* Grillas y cards */
  .about-grid, .catalog-grid, .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .product-card, .feature {
    margin: 0.5rem auto;
    width: 95%;
  }
  .product-image {
    height: 160px;
  }

  /* Textos y títulos */
  .section-title, .about h1, .contact-section h1 {
    font-size: 1.5rem;
  }
  .about-text, .contact-section p {
    font-size: 0.95rem;
  }

  /* Hero y CTA */
  .hero-text h1 {
    font-size: 2rem;
  }
  .cta h2 {
    font-size: 1.6rem;
  }
}

/* ======================================
   INTRO ANIMADA SAMI1S.A.
====================================== */
#intro-loader {
  position: fixed;
  inset: 0;
  background: #fff; /* fondo blanco limpio */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1s ease-out;
}

/* Logo */
.intro-logo img {
  width: 100vw;         /* ocupa todo el ancho de pantalla */
  height: 100vh;        /* ocupa todo el alto */
  object-fit: contain;  /* mantiene proporciones sin recortar */
  animation: logoZoomOut 2s ease-in-out forwards;
}

/* Animación: el logo se achica y desvanece */
@keyframes logoZoomOut {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }

  10% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(0.1);
    opacity: 0;
  }
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-box {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: fadeIn 0.2s ease;
}
.modal-box h3 { margin-top: 0; color: #248dcf; font-weight: 800; text-align: center; }
.modal-box label { display: block; font-weight: 600; margin-top: 0.8rem; }
.modal-box input { width: 100%; padding: 0.5rem 0.7rem; border-radius: 6px; border: 1px solid #ccc; font-size: 0.95rem; }
.modal-actions { display: flex; justify-content: space-between; margin-top: 1.5rem; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }