/* ===================== ESTILOS BÁSICOS ===================== */
*{                                  
  box-sizing:border-box;               /* el ancho incluye padding y borde, evita desbordes */
}
body{
  margin:0;                            /* quita el margen por defecto del cuerpo */
  font-family:Poppins, Arial, sans-serif;  
  color:#0e1320;                       
  background:#fff;                     
}
a{
  color:inherit;                       /* los enlaces heredan el color de la clase contenedora*/
  text-decoration:none;                /* quita el subrayado de los enlaces */
}
img{
  display:block;                       /* las imágenes se comportan como bloque uno debajo del otro*/
  max-width:100%;                      
}
main h1{
  font-size:32px;                      
  margin-top:0;                        
  margin-bottom:16px;                  
}
main h2{
  font-size:24px;                      
  margin-top:24px;                   
  margin-bottom:8px;                 
}
main h3{
  font-size:18px;                      
  margin-top:18px;                    
  margin-bottom:6px;                 
}
main p{
  line-height:1.6;                 /*tamaño de cada linea del texto*/                     
  color:#1f2933;                      
}


/* ======= ANIMACIONES EXTRA (no slider) ======= */
/* Aparición suave del bloque principal de historia. */
@keyframes animAparecer{               
  from{                                /* estado inicial */
    opacity:0;                          /* invisible al inicio */
    transform:translateY(14px)           /* empieza 14px más abajo */
  }
  to{                                   /* estado final */
    opacity:1;                          /* totalmente visible */
    transform:translateY(0)             /* en su posición final */
  }
}

@keyframes animSubirTarjeta{           
  from{
    opacity:0;                          
    transform:translateY(18px);         
  }
  to{
    opacity:1;                          
    transform:translateY(0);           
  }
}

@keyframes slideIzquierda {            /* animación: entra desde la izquierda */
  from { opacity: 0; transform: translateX(-70px); }  /* empieza invisible y 70px a la izq */
  to   { opacity: 1; transform: translateX(0); }        /* termina visible en su sitio */
}

@keyframes slideDerecha {               /* animación: entra desde la derecha */
  from { opacity: 0; transform: translateX(70px); }   /* empieza 70px a la derecha */
  to   { opacity: 1; transform: translateX(0); }       /* termina en su posición */
}

@keyframes anuncio{                    /* animación del texto que se desplaza (barra ofertas) */
  from{transform:translateX(0)}        /* empieza en su posición */
  to{transform:translateX(-100%)}      /* se mueve a la izquierda su propio ancho */
}

/* Movimiento de Slider. */
/* Los porcentajes matienen quieta la foto (por ejemplo:0% al 8%)*/
/*El ultimo porcentaje -10,-20 etc, es la siguiente foto que del 1000% van restandole 10%*/            
@keyframes animaSlider{                 
  0%,    8%  { transform: translateX(0); } 
  10%,  18%  { transform: translateX(-10%); }   
  20%,  28%  { transform: translateX(-20%); }   
  30%,  38%  { transform: translateX(-30%); }   
  40%,  48%  { transform: translateX(-40%); }   
  50%,  58%  { transform: translateX(-50%); }   
  60%,  68%  { transform: translateX(-60%); }   
  70%,  78%  { transform: translateX(-70%); }  
  80%,  88%  { transform: translateX(-80%); }   
  90%, 100%  { transform: translateX(-90%); }   
}


/* ==================== MEDIA QUERY 1: PANTALLA HASTA 3500px ===================*/
@media (max-width:3500px){              

  /* ==== BARRA DE ARRIBA ==== */
  .barra-arriba{
    background:linear-gradient(90deg,#0E7CFB,#00439C);  /* degradado azul de izquierda a derecha */
    color:#fff;                         
    font-size:14px;                     
    overflow:hidden;                    /* oculta lo que se salga del contenedor */
    white-space:nowrap;                 /* el texto no salta de línea */
  }
  .barra-arriba .oferta{                
    display:inline-block;               /* se comporta como bloque pero en horizontal a diferencia del "block" que lo hace vertical*/
    padding-left:100%;                  /* empieza fuera desde afuera a la derecha para la animacion del anuncio */
    animation:anuncio 20s linear infinite;  /* usa la animacion anuncio, 20s, repetida */
  }

  /* ======= CABECERA ======= */
  .header1{
    position:sticky;                   /* la cabecera se queda fija al hacer scroll */
    top:0;                             /* pegada arriba */
    background:#fff;                    
    border-bottom:1px solid #e8ecf5;   /* línea gris clara debajo */
    z-index:10;                        /* por encima de otros elementos */
  }
  .header1 .barra-menu{                /* contenedor interno del header */
    max-width:1200px;                  /* ancho máximo para no estirar en pantallas grandes */
    margin:0 auto;                     /* centrado horizontal */
    padding:12px 16px;                 /* espacio interno */
    display:flex;                      
    align-items:center;                /* centra verticalmente */
    justify-content:space-between;     /* logo a la izquierda, menú a la derecha */
  }
  .logo{
    display:flex;                      
    align-items:center;                /* alineación vertical */
    gap:10px;                          /* espacio entre imagen y texto */
    font-weight:700;                   /* texto en negrita */
    letter-spacing:.4px;               /* pequeño espacio entre letras */
  }
  .logo img{
    width:56px;                        /* ancho fijo del logo */
    height:36px;                       /* alto fijo */
    border-radius:8px;                 /* esquinas redondeadas */
  }

  /* ==== MENU DESPLEGABLE ==== */
  .menu-desplegable-input, .menu-desplegable-label{  /* en escritorio no se ve el menú desplegable */
    display: none;                     /* oculta checkbox y botón */
  }

  /* ==== MENÚ ==== */
  .menu{
    list-style:none;                   /* quita las viñetas de la lista */
    display:flex;                     
    flex-wrap: wrap;                   /* si no caben, pasan a la siguiente línea */
    gap:16px;                          /* espacio entre ítems */
    margin:0;                          /* sin margen */
    padding:0;                         /* sin relleno */
  }
  .menu  li{
    position:relative;                 /* para posicionar el submenú debajo */
  }
  .menu  li  a{
    display:block;                     /* el enlace ocupa todo el espacio del ítem */
    padding:8px;                       /* espacio interno */
    border-radius:8px;                 
  }
  .menu  li  a:hover{
    color:#00439C;                     /* color azul al pasar el ratón */
  }

  /* ==== SUBMENÚ ==== */
  .submenu ul{
    display:none;                      /* submenú oculto por defecto */
    position:absolute;                 /* se posiciona respecto al ítem del menú */
    top:100%;                          /* justo debajo del ítem*/
    left:0;                            /* alineado a la izq */
    background:#fff;                   
    border:1px solid #e8ecf5;          
    border-radius:10px;                
    min-width:200px;                   
    box-shadow:0 10px 30px rgba(0,0,0,.08);  /* sombra suave */
    padding:6px;                      
    list-style:none;                   /* sin viñetas */
    margin:0;                          /* sin margen */
  }
  .submenu:hover ul, .submenu:focus-within ul{  /* al pasar el ratón, se muestra */
    display:block;                     /* hace visible el submenú */
  }
  .submenu ul a{
    display:block;                     /*hace que cada enlace ocupe toda la línea */
    padding:10px;                      
    border-radius:8px;                 
  }
  .submenu ul a:hover{                  /*hace que el el fondo se pinte al pasar el raton*/
    background:#f6f9ff;              
    color:#00439C;                     
  }

  /* ======= SLIDER CONTINUO ====== */
  .slider1{
    position: relative;               /*para que quede un objeto al lado del otro*/
    width:100%;                       /* ocupa todo el ancho del contenedor */
    overflow:hidden;                  /* oculta las diapositivas que salen del borde */
    border-radius: 12px;              /* esquinas redondeadas */
  }
  
  .slider2{
    display:flex;                     /* las diapositivas en fila horizontal */
    height:100%;                      /* ocupa todo el alto del slider1 */
    width: 1000%;                     /* 10 slides × 100% = 1000% para que quepan 10 */
    animation: animaSlider 22s ease-in-out infinite;  /* animación continua, 22 segundos */
  }

  .slider2:hover{
    animation-play-state: paused;     /* al pasar el ratón la animación se pausa */
  }
  .slide{
    width: 10%;                       /* cada slide ocupa 10% del 1000% anterior */
    position: relative;               /*Para que este al lado de otros items*/
    display:flex;                     
  }
  .slide-imagen{
    width: 50%;                       /* mitad del slide para la imagen */
  }
  .slide-imagen img{
    width:100%;                       /* imagen al 100% del ancho de su contenedor */
    height:100%;                      /* ocupa todo el alto disponible */
    object-fit:cover;                 /* recorta la imagen para llenar sin deformar */
    object-position: center;          /* centra el recorte */
    min-height: 400px;                /* altura mínima para que se vea bien */
  }
  .slide-texto{
    width: 50%;                       /* mitad del slide para el texto */
    padding:32px;                     /* espacio interno del bloque de texto */
    background:#0b1120;              
    color:#fff;                      
    display:flex;                    
    flex-direction:column;           
    justify-content:center;           
  }
  .slide-texto h3{
    margin:0 0 6px;                  /* sin margen arriba,izquierdo/derecho,  6px abajo */
    font-size:18px;                  /* tamaño del título del slide */
  }
  .slide-texto p{
    margin:0;                        
    font-size:14px;                  
    line-height:1.5;                 /* espacio entre líneas */
    color: #cfd6e6;                  
  }

  /* ======= SECCIONES - MAINS ======= */
  .contenedor{
    max-width:1200px;                 /* ancho máximo del contenido principal */
    margin:0 auto;                    /* centrado en la página */
    padding:26px 16px;                /* espacio interno arriba/abajo y laterales */
  }
  .descripcion{
    font-size:16px;                   
    line-height:1.6;                  /* altura de línea */
    color:#2e3b47;                    
    text-align:center;                /* texto centrado */
    margin-top:26px;                  /* espacio arriba */
    margin-bottom:26px;               /* espacio abajo */
  }
  .grid-inicio{
    display:grid;                     /*permite organizar elementos en filas y columnas*/
    grid-template-columns:repeat(12,1fr);  /* 12 columnas iguales */
    gap:16px;                         /* espacio entre celdas */
  }
  .caja-grid{
    grid-column:span 6;                /* cada caja ocupa 6 columnas */
    border:1px solid #e8ecf5;        
    border-radius:12px;               
    overflow:hidden;                  /* la imagen no se sale del borde */
    background:#fff;                  
  }
  .caja-grid a img{
    width:100%;                        /* imagen al 100% del ancho */
    max-height:450px;                  /* altura máxima para no hacer la caja gigante */
    object-fit:contain;               /* la imagen se ajusta sin recortar */
    border-radius:6px;                /* esquinas redondeadas */
  }
  .caja-grid .cuerpo{
    padding:12px;                     /* espacio interno del texto de la caja */
  }
  .caja-grid h3{
    margin:0 0 6px;                   /* poco margen debajo del título */
  }
  .caja-grid p{
    margin:0;                         /* sin margen */
    color:#475569;                    
  }


  /* ======= BLOQUES DE CONTENIDO GENERALES  ======= */
  .bloque-texto{
    margin-bottom:26px;                 /* espacio debajo del bloque */
    padding:18px;                       /* espacio interno */
    border-radius:12px;                /* esquinas redondeadas */
    border:1px solid #e8ecf5;           
    background:#fbfcff;                 
  }
  .bloque-texto ul{
    padding-left:20px;                  /* sangría de la lista */
  }
  .bloque-texto li{
    margin-bottom:4px;                  /* espacio entre ítems de la lista */
  }
  .caja-grid2{
    display:grid;                       /* cuadrícula de 2 columnas */
    grid-template-columns:repeat(2,minmax(0,1fr));  /* 2 columnas iguales */
    gap:18px;                           /* espacio entre celdas */
  }
  .caja-grid3{
    display: grid;                      /* cuadrícula de 3 columnas */
    gap:18px;                           /* espacio entre celdas */
    grid-template-columns: repeat(3, 1fr);  /* 3 columnas iguales */
  }
  .tarjeta-simple{
    border-radius:12px;                 /* esquinas redondeadas */
    border:1px solid #e8ecf5;           /* borde gris */
    padding:16px;                       /* espacio interno */
    background:#fff;                    /* fondo blanco */
  }
  .tarjeta-simple img{
    border-radius:10px;                 /* esquinas redondeadas en la imagen */
    margin-bottom:10px;                 /* espacio debajo de la imagen */
  }
  .tarjeta-simple img:hover{
    transform: scale(1.05);             /* al pasar el ratón la imagen crece un 5% */
    transition: transform 0.3s ease;     /* animación suave de 0.3 segundos */
  }
  .tarjeta-simple h3{
    margin-top:0;                       /* sin margen arriba del título */
  }

  .tarjeta-animacion{
    /* Animación para que las tarjetas parezcan subir desde abajo de forma suave. */
    animation:animSubirTarjeta 1.2s ease-out both;  /* animación de subir al aparecer */
  }
  .mov-izquierda{
    animation: slideIzquierda 600ms ease-out both;  /* entra desde la izquierda */
  }
  .mov-derecha{
    animation: slideDerecha 600ms ease-out both;     /* entra desde la derecha */
  }

  .caja-grid4{
    grid-column:span 6;                  /* ocupa 6 columnas (mitad del grid de 12) */
    border:1px solid rgb(199, 188, 188); /* borde gris */
    border-radius:12px;                 /* esquinas redondeadas */
    overflow:hidden;                     /* contenido no se sale */
    background:#fff;                    
  }
  .caja-grid4 a img{
    width:100%;                          
    max-height:450px;                    /* altura máxima */
    object-fit:contain;                  /* se ajusta sin recortar */
    border-radius:6px;                  /* esquinas redondeadas */
  }
  .caja-grid4 .cuerpo{
    padding:12px;                        /* espacio interno del texto */
  }
  .caja-grid4 h3{
    margin:0 0 6px;                      /* poco margen debajo del título */
  }
  .caja-grid4 p{
    margin:0;                            /* sin margen */
    color:#475569;                      
  }
  .hero-historia{
    padding:20px 18px;                   /* espacio interno */
    border-radius:14px;                 /* esquinas redondeadas */
    background:linear-gradient(120deg,#0a2a6b,#0b5fff);  /* degradado azul */
    color:#fff;                         /* texto blanco */
    margin-bottom:26px;                 /* espacio debajo */
    animation:animAparecer 1.2s ease-out both;  /* aparece suavemente al cargar */
  }
  .hero-historia p{
    color:#e5edff;                      
  }
  /* Arreglo de imagenes para ACCESORIOS */
  .caja-img {
    display: flex;                       
    justify-content: space-around;       /* espacio repartido entre las imágenes */
  }
  .caja-img img{
    max-height: 300px;                  /* altura máxima de cada imagen */
    border-radius: 12px;                /* esquinas redondeadas */
  }
  .caja-img img:hover{
    transform: scale(1.05);              /* al hover la imagen crece un 5% */
    transition: transform 0.3s ease;     /* transición suave */
  }

  /* ======= FORMULARIO ======= */
  .form1{
    max-width:820px;                   /* ancho máximo del formulario */
    margin:0 auto;                     /* centrado */
    background:#fff;                   
    border:1px solid #e8ecf5;           
    border-radius:12px;                /* esquinas redondeadas */
    padding:18px;                      /* espacio interno */
  }
  .form1 .bloque-form{
    display:grid;                      /* cuadrícula para poner campos en 2 columnas */
    grid-template-columns:repeat(2,1fr);  /* 2 columnas iguales */
    gap:12px;                          /* espacio entre campos */
  }
  .form1 .bloque-form2{
    display:grid;                      /* una sola columna */
    grid-template-columns:1fr;         /* todo el ancho en una columna */
    gap:12px;                          /* espacio entre filas */
  }
  .form1 label{
    font-weight:600;                   /* etiquetas en negrita */
    font-size:14px;                    /* tamaño de la etiqueta */
  }
  .form1 input[type=text], .form1 input[type=email], .form1 select, .form1 textarea{
    width:100%;                        /* los campos ocupan todo el ancho disponible */
    padding:10px 12px;                 /* espacio interno del campo */
    border:1px solid #cfd6e6;          
    border-radius:8px;                 /* esquinas redondeadas */
  }
  .form1 textarea{
    min-height:140px;                  /* altura mínima del área de texto */
  }
  .fieldset1{
    border:none;                       /* quita el borde del fieldset */
    margin-top:10px;                   /* espacio arriba */
    padding:0;                         /* sin relleno */
  }
  .botones{
    display:flex;                     
    gap:10px;                         /* espacio entre botones */
    margin-top:12px;                  /* espacio arriba del grupo de botones */
  }
  .boton1{
    height:40px;                       /* altura del botón principal */
    padding:0 16px;                    /* espacio horizontal interno */
    border-radius:8px;                 /* esquinas redondeadas */
    border:1px solid transparent;      /* borde invisible */
    font-weight:700;cursor:pointer;    /* negrita y cursor de mano */
    background:#00439C;                
    color:#fff;                        
  }
  .boton2{
    height:40px;                      /* altura del botón secundario */
    padding:0 16px;                    /* espacio interno */
    border-radius:8px;                 /* esquinas redondeadas */
    border:1px solid #cfd6e6;          
    background:#fff;                   
  }

  /* ======= PIE DE PÁGINA ======= */
  .footer1{
    border-top:1px solid #e8ecf5;     /* línea que separa el footer del contenido */
    background:#fff;                   
    margin-top:32px;                   /* espacio arriba del footer */
  }
  .footer1 .contenedor{
    display:flex;                      
    justify-content:space-between;     /* espacio repartido entre columnas */
    flex-wrap:wrap;                    /* si no caben, pasan a la siguiente línea */
    gap:40px;                          /* espacio entre columnas */
    margin-bottom:10px;                /* margen debajo */
  }
  .footer1 .columna{
    grid-column:span 6;                /* cada columna ocupa 6 espacios en el grid */
  }
  .footer1 h4{
    margin:0 0 8px;                    /* poco margen debajo del título de columna */
    font-size:14px;                    /* tamaño del título */
    text-transform:uppercase;          /* título en mayúsculas */
    letter-spacing:1px;                /* espacio entre letras */
  }
  .footer1 .columna a{
    display:block;                     /* cada enlace en una línea */
    margin-bottom:6px;                 /* espacio entre enlaces */
  }
  .footer1 .legal{
    grid-column:span 12;               /* texto legal ocupa todo el ancho */
    color:#64748b;                     /* gris para el texto legal */
    font-size:14px;                    /* tamaño */
    margin-bottom: 30px;               /* espacio debajo */
    text-align:center;                 /* centrado */
  }
  .piefinal{
    display:flex;                      
    flex-wrap: wrap;                   /* pueden pasar de línea si no caben */
    justify-content:center;            /* centrados */
    gap:20px;                          /* espacio entre enlaces */
    margin-bottom: 30px;               /* espacio debajo */
  }
  .piefinal1{
    font-size:14px;                    /* tamaño de los enlaces */
  }
  .piefinal1 a{
    color:#64748b;                     
  }
  .piefinal1 a:hover{
    color:#00439C;                     /* azul al pasar el ratón */
  }

}

/* ======= MEDIA QUERY 2: PANTALLA HASTA 600px (modo móvil) =====================*/
@media(max-width:600px){                /

  .logo{
    display: flex;                      
    flex-wrap: wrap;                    /* puede pasar de línea si no cabe */
  }
  .header1 .barra-menu{
    flex-direction: row;                /* logo y menú en fila horizontal */
    align-items: center;                /* centrados verticalmente */
    justify-content: space-between;     /* logo a la izq, desplegable a la derecha */
    gap: 8px;                           /* espacio entre elementos */
  }

  /* --- DESPLEGABLE PRINCIPAL: menú que se abre/cierra con el icono de tres lineas  --- */
  .menu-desplegable-input {
    position: absolute;                 /* lo sacamos para no ocupar sitio */
    opacity: 0;                         /* invisible pero sigue allí */
    pointer-events: none;               /* no recibe clics; el label sí */
  }
  .menu-desplegable-input:checked ~ .menu {
    display: flex;                      /* cuando el checkbox está marcado, se muestra el menú */
  }
  .menu-desplegable-label {
    display: flex;                      /* el botón es un flex */
    flex-direction: column;             /* las tres barras en columna */
    justify-content: center;            /* centrado vertical */
    gap: 5px;                           /* espacio entre las barras */
    width: 32px;                        /* ancho del botón */
    height: 32px;                       /* alto del botón */
    padding: 4px;                       /* espacio interno */
    cursor: pointer;                    /* cursor de mano al pasar por encima */
    border-radius: 8px;                 /* esquinas redondeadas */
    border: 1px solid #e8ecf5;          /* borde gris claro */
    background: #fff;                   
  }
  .menu-desplegable-label:hover {
    background: #f6f9ff;                /* fondo azul muy claro al hover */
    border-color: #cfd6e6;              /* borde un poco más visible */
  }
  /* Las tres barras del icono. */
  .menu-desplegable-label span {
    display: block;                     /* cada barra es un bloque */
    width: 100%;                        /* ancho completo del botón */
    height: 3px;                        /* grosor de la barra */
    background: #00439C;                /* color azul */
    border-radius: 2px;                 /* esquinas redondeadas */
    transition: transform 0.25s ease, opacity 0.25s ease;  /* animación al abrir/cerrar */
  }
  /* Animación al abrir: la barra de en medio se oculta, las otras forman una X. */
  .menu-desplegable-input:checked ~ .menu-desplegable-label span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);   /* primera barra: baja y gira 45° */
  }
  .menu-desplegable-input:checked ~ .menu-desplegable-label span:nth-child(2) {
    opacity: 0;                         /* barra del medio: invisible */
  }
  .menu-desplegable-input:checked ~ .menu-desplegable-label span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);  /* tercera barra: sube y gira -45° */
  }

  .menu {
    display: none;                      /* por defecto el menú está oculto en móvil */
    flex-direction: column;             /* cuando se muestra, los ítems en columna */
    width: 100%;                        /* ocupa todo el ancho */
    margin: 0;                         /* sin margen */
    padding: 12px 0 0;                 /* poco padding arriba */
    gap: 0;                             /* sin espacio extra entre ítems */
    list-style: none;                   /* sin viñetas */
    border-top: 1px solid #e8ecf5;      /* línea que separa del header */
    margin-top: 8px;                    /* espacio entre header y menú */
  }
  .menu li {
    width: 100%;                        /* cada ítem ocupa todo el ancho */
    border-bottom: 1px solid #e8ecf5;   /* línea entre ítems */
  }
  .menu li:last-child {
    border-bottom: none;                 /* el último ítem sin línea debajo */
  }
  .menu li a {
    display: block;                     /* el enlace ocupa toda la fila */
    padding: 12px 8px;                  /* espacio interno */
    border-radius: 8px;                 /* esquinas redondeadas */
  }

  /* --- SUBMENÚS SIEMPRE VISIBLES --- */
  .menu li.submenu {
    position: relative;                  /* contexto para el submenú */
  }
  .submenu ul {
    display: block;                     /* en móvil el submenú siempre visible (no hover) */
    position: static;                   /* en flujo normal, debajo del ítem */
    width: 100%;                        /* ancho completo */
    min-width: 0;                       /* permite que se ajuste */
    margin: 0 0 8px 0;                  /* margen abajo */
    padding: 8px 0 8px 12px;            /* espacio interno, sangría izquierda */
    background: #f6f9ff;                
    border: 1px solid #e8ecf5;          
    border-radius: 10px;                
    box-shadow: 0 4px 12px rgba(0,0,0,.06);  /* sombra suave */
    list-style: none;                   /* sin viñetas */
    border-left: 3px solid #00439C;     /* barra azul a la izquierda */
  }
  .submenu ul li {
    list-style: none;                   /* sin viñetas en cada ítem */
    margin: 0;                         /* sin margen */
  }
  .submenu ul a {
    display: block;                     /* cada enlace en bloque */
    padding: 10px 8px;                  /* espacio interno */
    border-radius: 8px;                 /* esquinas redondeadas */
  }
  .submenu ul a:hover {
    background: #e8ecf5;                /* fondo al pasar el ratón */
    color: #00439C;                     /* texto azul */
  }
  

  /* Slider: en móvil la imagen arriba y el texto debajo. */
  .slide{
    flex-direction:column;              /* imagen arriba, bloque negro debajo */
  }
  .slide-imagen, .slide-texto {
      width: 100%;                      /* ambos ocupan todo el ancho del slider */
  }
  .slide-imagen img {
      height: 250px;                    /* altura fija para todas las imágenes en móvil */
  }
  .slide-texto {
      padding: 24px;                    /* espacio interno del bloque de descripción */
      text-align: center;               /* texto centrado */
  }
  

  .caja-grid, .caja-grid4{
    grid-column:span 12;                /* en móvil cada caja ocupa toda la fila (12 columnas) */
  }       
  .caja-grid2, .caja-grid3{
    grid-template-columns:1fr;          /* una sola columna en lugar de 2 o 3 */
  }    
  .caja-img{
    flex-direction: column;             /* imágenes de accesorios en columna */
    align-items: center;                /* centradas */
  }

  
  .footer1 .contenedor{
    display:flex;                       
    justify-content:space-between;      /* reparte columnas a lo ancho del footer */
    flex-wrap:wrap;                     /* pueden pasar de línea si no entra */
    gap:20px;                           /* espacio entre columnas */
    margin-bottom: 30px;                /* espacio debajo */
  }
  .footer1 .columna{
    grid-column:span 6;                 /* cada columna en el grid */
  }
}