:root {
  --color-primario: #4A4A4A;
  --color-primario-oscuro: #2F3136;
  --color-secundario: #F5F6F7;
  --color-texto: #1B1B1B;
  --color-bordes: #E3E6EA;
  --color-fondo: #FFFFFF;
  --layout-max: 1440px;
  --layout-reading: 1280px;
  --page-gutter: clamp(16px, 2.5vw, 32px);

  --sombra-suave: 0 2px 10px rgba(0,0,0,0.08);
  --sombra-nav: 0 6px 20px rgba(0,0,0,0.06);
  --transicion-rapida: all 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--color-texto);
  background-color: var(--color-secundario);
  overflow-x: hidden;
}

/* ===== NAV ===== */
.nav-header { position: sticky; top: 0; z-index: 1000; background: var(--color-fondo); box-shadow: var(--sombra-nav); }
.nav-bar { width: min(calc(100% - (var(--page-gutter) * 2)), var(--layout-max)); margin: 0 auto; height: 68px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-brand img { height: 42px; width: auto; display: block; }
.menu-toggle { display: none; cursor: pointer; font-size: 24px; padding: 8px 12px; color: var(--color-primario); border: 1px solid var(--color-bordes); border-radius: 8px; background: #fff; }
.menu { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.menu li a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: var(--color-primario); font-weight: 600; transition: var(--transicion-rapida); }
.menu li a:hover, .menu li a:focus { background: #F1F2F4; color: var(--color-primario-oscuro); outline: none; }

/* ===== CARRUSEL ===== */
#carousel { position: relative; width: min(calc(100% - (var(--page-gutter) * 2)), var(--layout-max)); margin: 20px auto; overflow: hidden; border-radius: 12px; box-shadow: var(--sombra-suave); height: 500px; background: var(--color-fondo); }
.slides { display: flex; transition: transform 0.5s ease-in-out; width: 100%; height: 100%; }
.slides img { width: 100%; height: 100%; flex-shrink: 0; object-fit: contain; background-color: var(--color-secundario); }
.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #fff; border: none; padding: 10px; cursor: pointer; z-index: 10; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; transition: var(--transicion-rapida); }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
.prev { left: 20px; } .next { right: 20px; }
.dots-container { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255,255,255,0.55); cursor: pointer; transition: var(--transicion-rapida); }
.dot.active { background-color: #fff; transform: scale(1.2); }

/* Botón de pausa del carrusel */
.pause{
  position:absolute; right:50%; transform:translateX(50%); bottom:20px;
  background: rgba(0,0,0,.35);
  color:#fff; border:1px solid rgba(255,255,255,.6);
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; z-index:10;
  backdrop-filter: blur(2px);
  transition: var(--transicion-rapida);
}
.pause:hover{ background: rgba(0,0,0,.65); }

/* ===== PRODUCTOS ===== */
#productos { padding: clamp(40px, 5vw, 72px) var(--page-gutter); background-color: var(--color-fondo); text-align: center; }
#productos h2 { margin-bottom: 30px; color: var(--color-primario); font-size: 2rem; letter-spacing: .2px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2vw, 32px); justify-items: stretch; margin: 0 auto; width: min(100%, var(--layout-max)); }
.producto-card { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-suave); transition: var(--transicion-rapida); text-decoration: none; color: var(--color-texto); border: 1px solid var(--color-bordes); }
.producto-card:hover { transform: translateY(-8px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.producto-card img { width: 100%; height: clamp(220px, 24vw, 340px); object-fit: contain; padding: clamp(20px, 2vw, 30px); transition: var(--transicion-rapida); }
.producto-info { padding: 15px; background-color: var(--color-primario); color: #fff; font-weight: bold; text-align: center; transition: var(--transicion-rapida); }
.producto-card:hover .producto-info { background-color: var(--color-primario-oscuro); }

/* ===== MINI CARRUSEL ===== */
#mini-carrusel { padding: clamp(40px, 5vw, 72px) var(--page-gutter); background-color: var(--color-secundario); text-align: center; }
#mini-carrusel h3 { margin-bottom: 20px; color: var(--color-primario); }
.mini-slides { display: flex; overflow-x: auto; gap: 15px; padding: 15px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; width: min(100%, var(--layout-max)); margin: 0 auto; }
.mini-slides img { height: 150px; width: auto; cursor: pointer; scroll-snap-align: center; border-radius: 10px; box-shadow: var(--sombra-suave); transition: var(--transicion-rapida); object-fit: cover; background:#fff; }
.mini-slides img:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }

/* ===== NUEVA SECCIÓN: CATÁLOGO ===== */
#catalogo-destacado{ padding: 24px var(--page-gutter) 40px; background: var(--color-secundario); }
.catalogo-card{ width: min(100%, var(--layout-max)); margin: 0 auto; background: #fff; border:1px solid var(--color-bordes); border-radius: 12px; display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: clamp(18px, 2.5vw, 28px); box-shadow: var(--sombra-suave); }
.catalogo-textos h3{ color: var(--color-primario); margin: 0 0 6px; }
.catalogo-textos p{ color:#555; margin: 0; }
@media (max-width: 720px){ .catalogo-card{ flex-direction: column; align-items: flex-start; } }

/* ===== CONTACTO ===== */
#contacto-info { padding: clamp(40px, 5vw, 72px) var(--page-gutter); background-color: var(--color-fondo); }
.contacto-container { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 2vw, 32px); margin: 0 auto 40px; width: min(100%, var(--layout-max)); }
.neumorphism { background: var(--color-fondo); box-shadow: var(--sombra-suave); border:1px solid var(--color-bordes); border-radius: 12px; }
.contacto-form, .contacto-datos { flex: 1 1 380px; min-width: min(100%, 320px); max-width: 680px; padding: clamp(20px, 2.5vw, 32px); }
.contacto-form h3, .contacto-datos h3 { color: var(--color-primario); margin-bottom: 20px; text-align: center; }
.contacto-form input, .contacto-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid var(--color-bordes); border-radius: 8px; font-family: inherit; transition: var(--transicion-rapida); }
.contacto-form input:focus, .contacto-form textarea:focus { border-color: var(--color-primario); outline: none; box-shadow: 0 0 0 3px rgba(74,74,74,.12); }
.contacto-form textarea { height: 120px; resize: vertical; }
.btn, .btn-enviar { background-color: var(--color-primario); color: #fff; border: none; padding: 12px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: var(--transicion-rapida); letter-spacing: .2px; }
.btn:hover, .btn-enviar:hover { background-color: var(--color-primario-oscuro); transform: translateY(-2px); }
.contacto-item { display: flex; align-items: center; margin-bottom: 15px; }
.contacto-item img { width: 24px; height: 24px; margin-right: 10px; }
.horario { margin-top: 25px; padding-top: 15px; border-top: 1px dashed var(--color-bordes); }
.horario h4 { color: var(--color-primario); margin-bottom: 10px; }
.mapa-container { width: min(100%, var(--layout-reading)); margin: 0 auto; text-align: center; }
.mapa-container h3 { color: var(--color-primario); margin-bottom: 20px; }
iframe { width: 100%; height: clamp(320px, 42vw, 520px); border: none; border-radius: 12px; box-shadow: var(--sombra-suave); background:#fff; }

/* ===== BOTONES FLOTANTES ===== */
.botones-flotantes { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.botones-flotantes a { display: grid; place-items:center; width: 56px; height: 56px; border-radius: 50%; color: white; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: var(--transicion-rapida); position: relative; background: var(--color-primario); }
.botones-flotantes a:hover { transform: scale(1.08) translateY(-4px); }
.botones-flotantes a img { width: 28px; height: 28px; }
#chat-boton { background-color: #25D366; }
#email-boton { background-color: #EA4335; }
.botones-flotantes a::after { content: attr(aria-label); position: absolute; right: 70px; white-space: nowrap; background-color: var(--color-primario); color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: var(--transicion-rapida); }
.botones-flotantes a:hover::after { opacity: 1; right: 60px; }

/* ===== MODALES ===== */
.modal { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; animation: fadeIn .3s; }
.modal-content {
  background-color: var(--color-fondo);
  padding: 30px;
  border-radius: 14px;
  width: min(92%, 700px);           /* ancho controlado */
  max-height: 90vh;                 /* ALTO CONTROLADO */
  overflow: auto;                   /* SCROLL INTERNO */
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.modal-content h2 { color: var(--color-primario); margin-bottom: 16px; text-align: center; font-size: 1.5rem; }

/* GRID del formulario dentro del modal (solo este, no otros forms) */
#formulario-contacto .modal-content form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
#formulario-contacto .modal-content form input,
#formulario-contacto .modal-content form textarea{
  width: 100%;
  border:1px solid var(--color-bordes);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  transition: box-shadow .25s ease, border-color .25s ease;
  font: inherit;
}
#formulario-contacto .modal-content form textarea{
  min-height: 130px;
  resize: vertical;
  grid-column: 1 / -1;
}
#formulario-contacto .modal-content form input:focus,
#formulario-contacto .modal-content form textarea:focus{
  border-color: var(--color-primario);
  outline:none;
  box-shadow: 0 0 0 3px rgba(74,74,74,.12);
}
#formulario-contacto .modal-content .btn{ grid-column: 1 / -1; }

/* Fila de datos alternos dentro del modal (íconos no deforman) */
.contacto-info-modal p{
  display:flex; align-items:center; gap:8px; color:#555; margin-top:10px;
}
.contacto-info-modal img{ width:20px; height:20px; object-fit:contain; }

/* Botón cerrar del modal */
.close-modal {
  position: absolute; top: 12px; right: 14px; font-size: 26px; cursor: pointer;
  color: var(--color-primario); transition: var(--transicion-rapida); background: none; border: 1px solid var(--color-bordes);
  width: 36px; height: 36px; border-radius: 8px; display:grid; place-items:center;
}
.close-modal:hover { background:#F1F2F4; color: var(--color-primario-oscuro); transform: rotate(90deg); }

/* ===== FOOTER ===== */
footer { background-color: var(--color-primario); color: #fff; padding: 40px 20px 20px; margin-top: 40px; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; width: min(calc(100% - (var(--page-gutter) * 2)), var(--layout-max)); margin: 0 auto; gap: 30px; }
.footer-logo img { max-height: 80px; filter: brightness(0) invert(1); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #fff; text-decoration: none; transition: var(--transicion-rapida); }
.footer-links a:hover { text-decoration: underline; color: #f0f0f0; }
.footer-social { display: flex; gap: 15px; }
.footer-social a img { width: 30px; height: 30px; transition: var(--transicion-rapida); }
.footer-social a:hover img { transform: translateY(-3px); }
.footer-copyright { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); }

/* ===== ANIMACIONES & RESPONSIVE ===== */
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
.animate-on-scroll,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }

.producto-card,
.catalogo-card,
.contacto-form,
.contacto-datos,
.tarjeta,
.producto,
.stock-card,
.admin-card,
.contacto-box,
.formulario-contacto {
  will-change: transform;
}

.producto-card:hover,
.catalogo-card:hover,
.tarjeta:hover,
.producto:hover,
.stock-card:hover,
.contacto-box:hover {
  transform: translateY(-7px);
}

.btn,
.btn-enviar,
.btn-alt,
.btn-soft,
.btn-danger,
button {
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}

.btn:hover,
.btn-enviar:hover,
.btn-alt:hover,
.btn-soft:hover,
.btn-danger:hover,
button:hover {
  transform: translateY(-2px);
}

.modal {
  animation: modalBackdropIn .22s ease;
}

.modal .modal-content {
  animation: modalPanelIn .28s ease both;
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .menu {
    display: none; flex-direction: column; width: 100%;
    position: absolute; left: 0; top: 68px; background: #fff; padding: 10px; border-top: 1px solid var(--color-bordes); box-shadow: var(--sombra-nav);
  }
  .menu.active { display: flex; }
  .menu li a { border-radius: 10px; }
}
@media (max-width: 720px){
  #formulario-contacto .modal-content form{ grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .nav-bar { height: 64px; }
  #carousel { margin-top: 16px; }
  .prev, .next { width: 34px; height: 34px; }
}

/* ========================================================= */
/* === AJUSTES (SOLO LO PEDIDO): R1/R2 + PRODUCTOS 2x2     === */
/* ========================================================= */

/* Mostrar R1 y R2 completos (antes carrusel tenía altura fija y recortaba) */
#carousel{
  height: auto;
  overflow: visible;
}

#carousel img{
  width: 100%;
  height: auto;
  display: block;
}

/* Separación responsive entre R1 y R2 */
#carousel img:first-child{
  margin-bottom: 16px; /* móvil */
}

@media (min-width: 768px){
  #carousel img:first-child{
    margin-bottom: 40px; /* escritorio */
  }
}

/* Productos en 2 columnas x 2 filas y más grandes */
#productos .galeria{
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}

/* Tarjetas e imágenes más grandes */
.producto-card img{
  height: clamp(240px, 24vw, 360px);
  padding: clamp(20px, 2.5vw, 30px);
}

.producto-info{
  font-size: 1.1rem;
  padding: 20px;
}

/* En móvil: 1 columna */
@media (max-width: 768px){
  #productos .galeria{
    grid-template-columns: 1fr;
  }
  .producto-card img{
    height: 260px;
  }
}

/* ========================================================= */
/* === LÍNEAS CORPORATIVAS (CONTACTO + FINAL DE PÁGINA)   === */
/* ========================================================= */

/* Colores de las líneas: negro + morado corporativo */
:root{
  --ravasa-linea-negro: #1B1B1B;
  --ravasa-linea-morado: #6B2EA4;
  --ravasa-linea-alto: 24px; /* 2 líneas (12px + 12px) */
}

/* Línea al final de la sección de contacto */
#contacto-info{
  position: relative;
  padding-bottom: calc(40px + var(--ravasa-linea-alto));
}
#contacto-info::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ravasa-linea-alto);
  background: linear-gradient(
    to bottom,
    var(--ravasa-linea-negro) 0%,
    var(--ravasa-linea-negro) 50%,
    var(--ravasa-linea-morado) 50%,
    var(--ravasa-linea-morado) 100%
  );
}

/* Línea al final absoluto de la página (después del footer) */
footer{
  position: relative;
  padding-bottom: calc(20px + var(--ravasa-linea-alto));
}
footer::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ravasa-linea-alto);
  background: linear-gradient(
    to bottom,
    var(--ravasa-linea-negro) 0%,
    var(--ravasa-linea-negro) 50%,
    var(--ravasa-linea-morado) 50%,
    var(--ravasa-linea-morado) 100%
  );
}