@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lobster&display=swap');

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

.container {
  max-width: 1920px;
  margin: auto;
}

img {
  width: 100%;
}

.flexi{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    }

nav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}

header{background-color:  #7A9EA8;}

nav{
    padding: 5px;
}
nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 10px;
}

nav ul li a{
    font-family: "inter";
    font-size: 20px;
    color:#F5F2EB;
    padding:  20px;
    text-decoration: none;


}


h1{
    font-family:"Lobster";
    font-size: 70px;
    color: rgb(72, 72,72)
}

h2{
    font-family:"Inter";
    font-size: 40px;
    color: rgb(15, 15, 15)
}


h3{
    font-family:"Inter";
    font-size: 40px !important;
    color: rgb(15, 15, 15)
}

p{
   font-family:"Inter";
    font-size: 18px;
    color: black;

}

.logo1{font-size: 35px;}
.logo2{font-size: 18px;}
.start{text-align: start;}
.n{ color: black;}
.sus{
  font-family: "inter" !important;
  font-size: 30px !important;
  
}

.caja{
  padding: 30px 30px;
 background-color: rgba(248, 220, 5, 0.15);
}

.flexi{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    }

.w80{
    width: 80%;
    margin: auto;
}

.w60{
    width: 60%;
    margin: auto;
}

.w50{
    width: 50%;
    margin: auto;
}

.carrito{ width: 30px;
margin-top: -5px;}
.logo{ width: 60px;}
.l{color: #F5F2EB;}
.menos{margin-top: -5px;}
.centrar{ text-align: center;
}
.centrar2{
  text-align: center!important;;
  align-items: center !important;
}

.centrarf {
    display: flex;
    flex-direction: column; /* Coloca los elementos uno debajo de otro */
    align-items: center;    /* Centra horizontalmente todos los elementos hijos */
    text-align: center;     /* Asegura que el texto interno también se centre */
}



.patop250{padding-top: 250px;}

.ev{
  font-family: "lobster";
  font-size: 70px;
}
.lo{font-family: "Lobster";}

.ev3{
  font-family: "lobster";
  font-size: 40px;
}
.ev2{
  font-family: "lobster";
  font-size: 100px;
}

.pt{padding: 50px 50px;}
.f20{font-size: 20px;
font-family: "inter";}
.rs{ width: 40px;}


/* Contenedor general adaptado a pantallas grandes */
.slider-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto; /* Centra el slider si la pantalla es de más de 1920px */
    position: relative;
    overflow: hidden;
    
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 900px; /* Ajusta la altura que quieras para tu banner */
}

/* Capa de texto por ENCIMA de las imágenes */
.slider-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Asegura que quede arriba */
    text-align: center;
    color: #ffffff; /* Color de texto blanco */
    
}

.slider-content h1 {
    font-size: 100px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: "Lobster";
}
.padree {
  position: relative;
  display: inline-block; /* O 'block' según el diseño */
}

.btnhijo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Ajusta el eje exacto del botón al centro */
  z-index: 10;
}

.btn-descubrir {
    display: inline-block;
    padding: 12px 30px;
    background-color: #F3B61F;
    color: #F5F2EB;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease;
    font-family: "inter";
    align-items: center;
}

.btn-descubrir:hover {
    background-color: #e0e0e0;
}

.btn-login {
    background-color: #F3B61F; /* Color azul de fondo */
    color: white;               /* Color del texto */
    padding: 10px 10px;         /* Espaciado interno (alto y ancho) */
    border: none;               /* Quita el borde por defecto */
    border-radius: 4px;         /* Bordes redondeados */
    font-size: 16px;            /* Tamaño de la letra */
    cursor: pointer;            /* Cambia el cursor a la manito */
    width: 50%;                /* Opcional: hace que ocupe todo el ancho disponible */
    transition: background 0.2s;/* Suaviza el cambio de color */
}

/* Efecto al pasar el mouse por arriba */
.btn-login:hover {
    background-color: #0056b3; /* Un azul más oscuro */
}

/* Contenedor del Carrusel */
.slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Oculta la barra de scroll */
    scroll-behavior: smooth;
}
.slider-container-mobile {
  display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Oculta la barra de scroll */
    scroll-behavior: smooth;
}

/* Estilos de las imágenes */
.slider-container img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover; /* Mantiene la proporción de la foto sin deformar */
}


/* Ocultamos el slider de móvil */
.slider-container-mobile {
    display: none;
}

.mt50{margin-top: 50px;}
.mt250{margin-top: 250px;}
.pt2{ padding-right: 20px;}


.fondo{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo2{
background-image: url(imagenes/otras/i7.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo3{

background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo4{

background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 400px 0px;
}

.fondo5{
background-image: url(imagenes/otras/n1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo6{
background-image: url(imagenes/otras/p1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo7{
background-image: url(imagenes/blog/n5.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 200px 0px;
}

.fondo8{
background-image: url(imagenes/tienda/t2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width:100%;
height:100%;

}

footer a{
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
    display: block;
    margin:  0px 10px;
    margin-bottom: 20px;
    padding:0px 10px ;
    margin-bottom: 20px;
    text-decoration: none;
}
footer{

    background-color: #7A9EA8;
    text-align: center;
    padding: 50px 0px;
}


/* Hacemos que el contenedor sea el punto de referencia */
.contenedor-fotos {
    position: relative; 
    display: flex; /* Asegura que tus col-6 sigan alineadas de lado a lado */
}

/* Estilos para clavar el h1 justo en el centro */
.titulo-centrado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Lo pone por encima de las imágenes */
    
    /* Estilos estéticos (puedes cambiarlos a tu gusto) */
    margin: 0;
    font-size: 2.5rem;
    color: #ffffff; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para que se lea bien sobre las fotos */
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas si es largo */
    font-size: 100px;
}

/* Asegura que las imágenes mantengan su posición de fondo */
.contenedor-fotos {
    position: relative;
    display: flex;
}
.a{color: #F3B61F;}
.tit100{
  font-size: 100px !important;
}
.mb20{margin-bottom: 20px;}

.mt20{margin-top: 20px;}

.tit2{
  font-size: 30px !important;
}

.p2{
  font-size: 20px !important;
}

.centrara{align-items: centrar;}

/* Clava el bloque completo exactamente en el centro matemático */
.bloque-central {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Lo pone por encima de las imágenes */
    
    /* Configuración para alinear los textos uno abajo del otro */
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    /* Ajustes estéticos */
    width: 40%; /* Limita el ancho para que el texto no toque los bordes de las fotos */
    text-align: center;
    color: #ffffff; /* Color de texto blanco (cambia si lo necesitas) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra para garantizar legibilidad */
}

/* Estilos individuales opcionales para dar espacio */
.bloque-central h1 {
    font-size: 2.8rem;
    margin: 0 0 15px 0; /* Margen inferior para separarlo del párrafo */
    text-transform: uppercase;
}

.bloque-central p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
}

.menu-checkbox, .hamburguesa {
  display: none;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

header {
 
  backdrop-filter: blur(12px); /* Desenfoca el fondo */
  -webkit-backdrop-filter: blur(12px); /* Compatibilidad con Safari */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea brillante muy fina abajo */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

.btn-descubrir {
  display: inline-block;
  padding: 14px 36px; /* Un poco más amplio para verse sofisticado */
  background-color: #F3B61F;
  color: #151515; /* Texto oscuro sobre fondo claro suele leerse más premium */
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px; /* Espaciado elegante entre letras */
  border-radius: 4px; /* Bordes ligeramente menos redondeados (estilo minimalista) */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Curva de animación suave */
  box-shadow: 0 4px 15px rgba(243, 182, 31, 0.2); /* Sutil resplandor del color del botón */
}

.btn-descubrir:hover {
  background-color: #151515;
  color: #F5F2EB;
  transform: translateY(-3px); /* Levanta el botón al pasar el mouse */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Sombra más profunda al flotar */
}

nav ul li a {
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

nav ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 10px;
  left: 0;
  background-color: #F3B61F;
  transform-origin: bottom center;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

nav ul li a:hover {
  color: #F3B61F;
}

nav ul li a:hover::after {
  transform: scaleX(0.6); /* La línea se expande elegantemente al 60% del ancho */
}

.fondo {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(imagenes/otras/e1.png);
}

.fondo2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(imagenes/otras/i7.png);
}

/* Sección de Instagram corregida */
.w80.mt50 .flexi .col-3 img {
    border-radius: 15px; /* Controla qué tan redondeadas quieres las esquinas */
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse por encima */
.w80.mt50 .flexi .col-3 img:hover {
    transform: scale(1.04); /* Un sutil zoom hacia adelante */
    filter: brightness(1.1); /* Le da un toque más vivo a la foto */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra suave para dar profundidad */
}

.centrar.mt50.w80 .flexi .col-3 {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.centrar.mt50.w80 .flexi .col-3:hover {
    transform: translateY(-5px); /* Levanta la tarjeta del producto */
}

.centrar.mt50.w80 .flexi .col-3 img {
    border-radius: 8px; /* Redondea también la foto del skate */
    margin-bottom: 15px;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: #F3B61F; /* Cambia al amarillo de tu paleta cuando pasan el mouse */
}

footer .rs {
    transition: transform 0.3s ease;
}

footer .rs:hover {
    transform: translateY(-3px); /* Levanta levemente los logos de tus redes sociales */
}

html {
    scroll-behavior: smooth;
}
.slider-content p.l {
    font-family: "Inter";
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase; /* Mayúsculas tipo póster de skate */
    color: #fff; /* Texto blanco limpio */
    background-color: #E05A47; /* Fondo rosa/rojo neón (estilo Thrasher) */
    padding: 8px 16px;
    display: block; /* Ajusta el fondo solo al tamaño del texto */
    margin: 15px 0;
    letter-spacing: 1px;
    
    /* Efecto sticker/urbano */
    transform: skewX(-8deg); /* Inclina el texto para darle dinamismo */
    box-shadow: 5px 5px 0px #F3B61F; /* Sombra negra sólida sin difuminar */
}

/* Estilos para el nuevo bloque de suscripción */
.form-suscripcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 400px; /* Para que no se estire de más en pantallas grandes */
    margin-left: auto;
    margin-right: auto;
}

.inputs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.input-mail, 
.select-frecuencia {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    background-color: #fff;
    color: #333;
}

.input-mail:focus, 
.select-frecuencia:focus {
    border-color: #000; /* Cambialo por el color principal de tu marca */
}

/* Ajuste para que el botón se comporte como tal y no como un enlace */
.form-suscripcion .btn-descubrir {
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.efecto-tipeo {
  font-family: 'Courier New', Courier, monospace; /* Tipografía estilo máquina */
  display: inline-block;
  white-space: nowrap;          /* Evita que el texto salte de línea */
  border-right: 3px solid #000; /* Simula el cursor que parpadea */
  overflow: hidden;             /* Oculta las letras antes de que aparezcan */
  font-size: 10px;
  /* Animaciones: una para escribir y otra para el parpadeo del cursor */
  /* El 'ch' representa el número exacto de caracteres (38 en tu frase) */
  width: 30ch; 
  animation: 
    tipeo 2s steps(38) 1s normal both,
    parpadeo-cursor 750ms steps(38) infinite;
}

/* Contenedor de cada par (Imagen + Texto) */
.tarjeta-fila {
  display: flex; /* Centra el texto verticalmente con la imagen automáticamente */
  gap: 30px;           /* Espacio de separación entre columna y columna */
  margin-bottom: 50px; /* Separación entre el bloque de arriba y el de abajo */
}

/* Forzamos a que las columnas ocupen el mismo ancho dentro del flex */
.tarjeta-fila .col-6 {
  flex: 1;
}

/* Estilo para que las imágenes se vean impecables */
.img-adaptable {
  width: 100%;
  height: 350px;       /* Altura fija para que sean simétricas */
  object-fit: cover;   /* Evita que las fotos se estiren o distorsionen */
  border-radius: 6px;  /* Un toque redondeado moderno */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave para dar relieve */
}


.img-adaptable2 {
  width: 60%;
  height: 600px;       /* Altura fija para que sean simétricas */
  object-fit: cover;   /* Evita que las fotos se estiren o distorsionen */
  border-radius: 6px;  /* Un toque redondeado moderno */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave para dar relieve */
}
/* Estilo del texto por si quieres refinarlo */
.tarjeta-fila p.a {
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 0 20px;     /* Espacio interno para que no pegue al borde */
}

/* Contenedor alineado */
.compra-contenedor {
  display: flex;
  align-items: center;
  gap: 15px; /* Espacio entre los elementos */
  font-family: sans-serif;
}

.cantidad-label {
  font-weight: bold;
  color: #333;
}

/* Estilo para el Select */
.select-carrito {
  padding: 10px 15px;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
}

/* Cambio de color al hacer clic en el select */
.select-carrito:focus {
  border-color: #000; /* Color negro moderno al activarse */
}

/* Estilo para el Botón */
.btn-carrito {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  background-color: #F3B61F; /* Verde éxito, puedes cambiarlo por tu color de marca */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Efecto Hover para el botón */
.btn-carrito:hover {
  background-color: #7A9EA8;
}

/* Efecto de clic */
.btn-carrito:active {
  transform: scale(0.98);
}

.mtn20{
  margin-top: -50px;
}

/* --- Formulario --- */
form {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #4a5568;
    font-size: 0.95rem;
}

form input[type="text"],
form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #f8fafc;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

form textarea {
    height: 120px;
    resize: vertical;
}

form input[type="text"]:focus,
form textarea:focus {
    border-color: #3182ce;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
    outline: none;
}

form input[type="submit"] {
    background-color: #F3B61F;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

form input[type="submit"]:hover {
    background-color: #7A9EA8;
}

form input[type="submit"]:active {
    transform: scale(0.98);
}

/* --- Texto de contador e info --- */


/* --- Tabla de Comentarios --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

th, td {
    padding: 14px 18px;
    text-align: left;
    font-size: 0.95rem;
}

th {
    background-color: #edf2f7;
    color: #4a5568;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

td {
    color: #2d3748;
    border-bottom: 1px solid #e2e8f0;
}

tr:last-child td {
    border-bottom: none;
}

.plf{
  padding-left: 10px;
}

/* Animación para revelar el texto letra por letra */
@keyframes tipeo {
  from { width: 0; }
  to { width: 38ch; }
}

/* Animación para que el cursor parpadee */
@keyframes parpadeo-cursor {
  from, to { border-color: transparent; }
  50% { border-color: #F3B61F; } /* Cambiá el color según tu fondo */
}


/* Estilos base de la sección */
.seccion-persiana {
  position: relative;
  overflow: hidden; /* Evita que la persiana se salga de los bordes */
}

/* La capa oscura que está oculta a la izquierda */
.capa-persiana {
  position: absolute;
  top: 0;
  left: -100%; /* Empieza completamente afuera */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Color de la cortina */
  transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

/* Aseguramos que el texto y el botón queden por encima de la persiana */
.contenido-persiana, .boton-persiana {
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

/* EFECTO HOVER: Deslizamiento */

/* Al pasar el mouse, la persiana cubre todo el fondo */
.seccion-persiana:hover .capa-persiana {
  left: 0;
}

/* El texto se desplaza sutilmente hacia la derecha */
.seccion-persiana:hover .contenido-persiana {
  transform: translateX(10px);
}

/* El botón cambia de color y acompaña el movimiento */
.seccion-persiana:hover .boton-persiana {
  background-color: #F3B61F;
  color: #000;
  transform: translateX(10px);
}

/* Preparamos los títulos con una transición fluida */
.mover-derecha, .mover-izquierda {
  display: block; /* Asegura que el transform funcione correctamente */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* EFECTO HOVER: Al apoyar el cursor en la sección */

/* El primer h2 se desliza 15 píxeles a la derecha */
.seccion-comunidad:hover .mover-derecha {
  transform: translateX(15px);
}

/* El segundo h2 se desliza 15 píxeles a la izquierda */
.seccion-comunidad:hover .mover-izquierda {
  transform: translateX(-15px);
}


.titulo-subrayado {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

/* Creamos la línea abajo del título (empieza con ancho 0) */
.titulo-subrayado::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #000; /* Reemplazá por el color principal de tu web */
  transition: width 0.4s ease;
}

/* Preparamos la imagen */
.foto-blog {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  width: 100%;
  display: block;
  padding-left:10px;
}


/* --- EFECTO HOVER --- */

/* Al pasar el mouse por la sección del blog, la línea se estira al 100% */
.seccion-blog:hover .titulo-subrayado::after {
  width: 100%;
}

/* La imagen sube un poco simulando un salto/pop */
.seccion-blog:hover .foto-blog {
  transform: translateY(-8px);
 
}

.pt150{padding-top: 150px;}


.imgblog{ width:100%; border-radius: 20px;}
.mb50{ margin-bottom: 50px;}
.mt100{ margin-top: 100px;}
.mtn100{ margin-top: -100px;}
.mtn150{ margin-top: -150px;}
.mt150{ margin-top: 150px;}
.btnne{
  margin-top: -20px;
}

.btnpo{
  margin-top: 20px;
}

.btnde{
  padding-left: 20px;  
}

.radio{border-radius: 30px;}

    .tabla-productos {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            background-color: #ffffff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden; /* Para que los bordes redondeados funcionen */
        }

        .tabla-productos thead {
            background-color: #2c3e50;
            color: #ffffff;
        }

        .tabla-productos th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            font-size: 0.95rem;
            text-transform: uppercase;
        }

        .tabla-productos td {
            padding: 15px;
            vertical-align: middle;
            border-bottom: 1px solid #eceff1;
        }

        /* --- Elementos dentro de la Tabla --- */
        .img-producto {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .btn-quitar {
            width: 24px;
            height: 24px;
            transition: transform 0.2s ease;
            vertical-align: middle;
        }

        .btn-quitar:hover {
            transform: scale(1.15);
        }

        /* --- Filas de Totales --- */
        .fila-totales {
            background-color: #f8f9fa;
        }

        .total-texto {
            text-align: right;
            font-weight: bold;
            color: #7f8c8d;
            font-size: 1.1rem;
        }

        .total-valor {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
        }

        /* Destacar la fila final del TOTAL */
        .tabla-productos tr:last-child .total-texto,
        .tabla-productos tr:last-child .total-valor {
            color: #e74c3c;
            font-size: 1.3rem;
        }

        /* --- Botones de Acción --- */
        .contenedor-botones {
            margin-top: 30px;
        }

        .centrar {
            text-align: center;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 25px;
            text-transform: uppercase;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .btn-vaciar {
            background-color: #fff;
            color: #e74c3c;
            border: 2px solid #e74c3c;
            margin-right: 15px;
        }

        .btn-vaciar:hover {
            background-color: #e74c3c;
            color: #fff;
        }

        .btn-comprar {
            background-color: #2ecc71;
            color: #fff;
            border: 2px solid #2ecc71;
        }

        .btn-comprar:hover {
            background-color: #27ae60;
            border-color: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
        }


        /* Contenedor principal en Grid para dos columnas */
    .contacto-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 1200px;
        margin: 2rem auto;
        padding: 1rem;
        font-family: sans-serif; /* O la tipografía de tu web */
    }

    /* Columna de información */
    .contacto-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Clases específicas para no tocar p ni h globales */
    .contacto-titulo {
        margin-bottom: 0.5rem;
    }

    .contacto-descripcion {
        color: #666;
        margin-bottom: 1.5rem;
    }

    .contacto-detalles .contacto-item {
        margin-bottom: 1rem;
    }

    .contacto-detalles .contacto-item strong {
        display: block;
        color: #333;
        margin-bottom: 0.2rem;
    }

    .contacto-detalles .contacto-item p {
        margin: 0; /* Resetea solo el margen de este p específico */
    }

    /* Columna del mapa */
    .contacto-mapa {
        width: 100%;
        min-height: 350px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .contacto-mapa iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: flex;
    }
    .mt200{margin-top: 140px;}

    /* --- Tarjeta de Contacto --- */
.tarjeta-contacto {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;

    max-width: 500px;
    transition: transform 0.3s ease;

}

.tarjeta-contacto:hover {
    transform: translateY(-5px);
}

/* Header de la tarjeta */
.contacto-header {
    text-align: center;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.avatar-info h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #2c3e50;
}

.avatar-info p {
    margin: 5px 0 0 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* Cuerpo de la tarjeta */
.contacto-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-contacto {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: #4a4a4a;
}

.item-contacto .icono {
    font-size: 1.3rem;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.item-contacto p {
    margin: 0;
}

.btn-contacto {
    display: inline-block;
    background-color: #e06377;
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-contacto:hover {
    background-color: #c84b60;
    box-shadow: 0 4px 10px rgba(224, 99, 119, 0.4);
}

/* --- Sección del Mapa --- */
.mapa-contenedor {
    width: 100%;
    text-align: center;
}

.mapa-contenedor h2 {
    font-size: 1.5rem;
    color: #333;
}

.mapa-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 40%; /* Relación de aspecto panorámica para pantallas grandes */
    min-height: 300px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mapa-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wpc{ width: 40%;}

/*Estilos de GRID*/
.col-1{ width: 7.33%;}
.col-2{ width: 15.66%;}
.col-3{ width: 24%;}
.col-4{ width: 32.33%;}
.col-5{ width: 40.66%;}
.col-6{ width: 50%;}
.col-7{ width: 57.33%;}
.col-8{ width: 65.66%;}
.col-9{ width: 74%;}
.col-10{ width: 82.33%;}
.col-11{ width: 90.66%;}
.col-12{ width: 100%;}

.col50{	width: 50%;}
.col25{width: 25%;}

@media (max-width:1024px){
    
	.col-t-1{ width: 7.33%;}
	.col-t-2{ width: 15.66%;}
	.col-t-3{ width: 24%; }
	.col-t-4{ width: 32.33%;}
	.col-t-5{ width: 40.66%;}
	.col-t-6{ width: 49%;}
	.col-t-7{ width: 57.33%;}
	.col-t-8{ width: 65.66%;}
	.col-t-9{ width: 74%;}
	.col-t-10{ width: 82.33%;}
	.col-t-11{ width: 90.66%;}
	.col-t-12{ width: 100%;}

	.bloque-central {
    width: 70%; /* Ampliamos el ancho del cuadro de texto en tablets */
  }

  .mtn100{ margin-top: 0px;}
  .mt100{ margin-top: 0px;}
}


@media (max-width: 768px) {
    

	.col-m-1{ width: 7.33%;}
	.col-m-2{ width: 15.66%;}
	.col-m-3{ width: 24%;}
	.col-m-4{ width: 32.33%;}
	.col-m-5{ width: 40.66%;}
	.col-m-6{ width: 49% !important;}
	.col-m-7{ width: 57.33%;}
	.col-m-8{ width: 65.66%;}
	.col-m-9{ width: 74%;}
	.col-m-10{ width: 82.33%;}
	.col-m-11{ width: 90.66%;}
	.col-m-12{ width: 100%;}


.titm4{font-size: 75px !important;}
.titm1{font-size: 70px !important;}
.titm2{font-size: 50px !important;}
.titm3{font-size: 30px !important;}
.ptm{padding: 0px;}
.ptm2{padding: 10px 10px;}
.ptmn{margin-top: -10px;}
.wm100{width: 100% !important;}
.mbm20{margin-bottom: 20px !important;}
.mbm50{margin-bottom: 50px !important;}
.centrarm{text-align: center !important;
align-items: center !important;}

.contenedor-fotos {
    position: relative; 
    width: 100%;
    display: flex; /* Asegura que tus col-6 sigan alineadas de lado a lado */
}

.btn-descubrir2 {
    display: inline-block;
    padding: 12px 30px;
    background-color: #F3B61F;
    color: #F5F2EB;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease;
    font-family: "inter";
    align-items: center;
    margin-top: -5px;
}

.fixed {
 
  top: -20px;
  left: 0;
  width: 100%;
  z-index: 1000;
}




nav {
    position: relative;
    min-height: 50px;
    margin-top: -45px;
    width: 100%;
  }

  .hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 100;
  }

  .hamburguesa span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #F5F2EB;
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  .menu-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #7A9EA8;
    position: absolute;
    top: 50px;
    left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99;
  }

  .menu-links li {
    width: 100%;
    text-align: center;
  }

  .menu-links li a {
    display: block;
    padding: 15px 0;
    width: 100%;
  }

  .menu-checkbox:checked ~ .menu-links {
    max-height: 450px;
  }

  .menu-checkbox:checked ~ .hamburguesa span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-checkbox:checked ~ .hamburguesa span:nth-child(2) {
    opacity: 0;
  }

  .menu-checkbox:checked ~ .hamburguesa span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .mtm50{margin-top: 50px; }

  .plm20{ padding-left: 20px; }
  .mtm10{ margin-top: -10px;}

  .slider-container{ display: none;}

  .slider-container-mobile {
        display: flex; /* o 'flex' */
    }

    .tarjeta-fila {
    flex-direction: column; /* Apila los elementos en vertical */
    gap: 15px;
  }

  /* Evita que en móvil queden los dos textos juntos. 
     Hace que se vea: Imagen 1 -> Texto 1 -> Imagen 2 -> Texto 2 */
  .tarjeta-fila.orden-movil {
    flex-direction: column-reverse;
  }

  .img-adaptable {
    height: 240px; /* Más bajas en pantallas pequeñas */
  }

  .w80 {
                width: 95%;
                margin-top: 20px;
            }

            /* Transformar la tabla en bloques independientes */
            .tabla-productos, 
            .tabla-productos thead, 
            .tabla-productos tbody, 
            .tabla-productos th, 
            .tabla-productos td, 
            .tabla-productos tr { 
                display: block; 
            }
            
            /* Ocultar los encabezados de escritorio */
            .tabla-productos thead tr { 
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            
            .tabla-productos tr { 
                border: 1px solid #ddd;
                margin-bottom: 15px;
                border-radius: 6px;
                background: #fff;
                padding: 10px 0;
            }
            
            .tabla-productos td { 
                border: none;
                border-bottom: 1px solid #eee; 
                position: relative;
                padding-left: 45%; 
                text-align: right;
            }

            .tabla-productos td:last-child {
                border-bottom: none;
            }
            
            /* Insertar los nombres de columna usando el atributo data-label */
            .tabla-productos td:before { 
                content: attr(data-label);
                position: absolute;
                left: 15px;
                width: 40%; 
                padding-right: 10px; 
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
                color: #7f8c8d;
            }

            /* Ajustes especiales para las filas de totales en el celular */
            .tabla-productos .fila-totales td {
                padding-left: 15px;
                text-align: right;
            }

            .tabla-productos .fila-totales td:before {
                display: none; /* Quita el duplicado en móviles para los totales */
            }

            .total-texto {
                display: inline-block;
                text-align: left;
                float:left;
            }

            /* Botones verticales que ocupan todo el ancho en móviles */
            .btn {
                display: block;
                width: 100%;
                margin-right: 0;
                margin-bottom: 15px;
                box-sizing: border-box;
            }

    .slider-content p.l {
    font-family: "Inter";
    font-size: 14px; 
    text-transform: uppercase;
    color: #fff;
    background-color: #E05A47;
    padding: 8px 16px;
    display: block;
    margin: 18px 0;
    letter-spacing: 0px;
    transform: skewX(-8deg);
    box-shadow: 5px 5px 0px #F3B61F;
}

  .ptem{ padding: 5px 5px;}
  .radio{border-radius: 5px;}
  .pt150m{padding-top: -0px;}

  .contacto-container {
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            padding: 2rem;
    }


.mtm100{ margin-top: 100px;}
.txt20{ font-family: 20px;}
.pme{ padding: 20px;}

        }