/** variables de colores **/

:root {
  /* Marca */
  --brand-primary: #275dca;
  --brand-secondary: #e5e7eb;
  --brand-accent: #1e40af;

  /* Texto */
  --text-main: #1f2937;
  --text-light: #6b7280;
  --text-muted: #777;
  --text-soft: #999;
  --font-main: Arial, Helvetica, sans-serif;

  /* Fondos */
  --bg-main: #f8fafc;
  --bg-soft: #f9fafb;
  --bg-card: #ffffff;

  /* Bordes */
  --border-light: #e5e7eb;
  --border-soft: #f0f0f0;

  /* Extras */
  --success: #2ecc71;
  --warning: #f1c40f;

  /* Estrellas */
  --star-color: #f5b301;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

html {
  font-size: clamp(14px, 1vw, 16px);
}


body {
  background:
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 1em,
      rgba(37, 99, 235, 0.08) 0,
      rgba(37, 99, 235, 0.03) 2em,
      transparent 0,
      transparent 1em,
      rgba(37, 99, 235, 0.06) 0,
      rgba(37, 99, 235, 0.04) 4em,
      transparent 0,
      transparent 1em,
      rgba(147, 197, 253, 0.1) 0,
      rgba(147, 197, 253, 0.05) 2em),
    repeating-linear-gradient(45deg,
      transparent,
      transparent 1em,
      rgba(37, 99, 235, 0.08) 0,
      rgba(37, 99, 235, 0.03) 2em,
      transparent 0,
      transparent 1em,
      rgba(37, 99, 235, 0.06) 0,
      rgba(37, 99, 235, 0.04) 4em,
      transparent 0,
      transparent 1em,
      rgba(147, 197, 253, 0.08) 0,
      rgba(147, 197, 253, 0.04) 2em),
    #f3f4f6;

  background-blend-mode: multiply;
  font-family: var(--font-main);
  font-weight: 600;
  /* Para el estilo 'delgado' solicitado */
}

.main-content {
  background: linear-gradient(135deg, #f5f7ff 0%, #eef1ff 100%);
  /* transparencia */

  min-height: 100%;
  background-color: rgba(243, 244, 246, 0.85);

  min-height: 100%;

  margin: 6rem auto 4rem auto;
  /* centrado */
  padding: 3rem 2rem;

  max-width: 80%;
  /* controla ancho en desktop */
  border-radius: 1.5rem;
}

/* Margen de seguridad para que el Navbar fijo no tape los títulos de cada seccióon */
section[id],
div[id].header-container,
#inicio,
#beneficios,
#catalogo,
#entregas,
#disponibilidad,
#faq {
  scroll-margin-top: 5.625rem;
}

/* scroll suave  */
html {
  scroll-behavior: smooth;
}

/*=======Estilos de la sección header==============*/
/*Navbar*/
/* ======= TU DISEÑO ORIGINAL ======= */
.navbar {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 2rem !important; 
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto; 
  margin-right: 0;
}

.navbar-nav .nav-link {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 2.813rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.navbar-brand {
  white-space: nowrap;
  flex-shrink: 1;
  overflow: visible; 
  font-weight: bold;
}

/* ======= TUS MEDIA QUERIES ======= */

@media (max-width: 992px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.8rem 1.5rem !important; 
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 1rem 0 0 0; 
  }

  .navbar-nav .nav-link {
    width: 100%;
    text-align: left;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
  }
}

/* FIX ESPECÍFICO PARA Z FOLD / Z FLIP (PANTALLAS MENORES A 360px) */
@media (max-width: 360px) {
  .navbar {
    padding: 0.6rem 0.5rem !important; /* Reducimos el padding lateral al mínimo para ganar espacio */
  }

  .navbar-brand {
    font-size: 0.8rem; /* Bajamos un poco más la fuente para que la M no choque */
    margin-right: 2px;
  }

  .navbar-toggler {
    padding: 0.2rem 0.4rem; /* Hacemos el botón un pelín más compacto */
    transform: scale(0.9); /* Lo achicamos sutilmente para que entre en la línea */
  }
}

/* Celulares estándar */
@media (min-width: 361px) and (max-width: 480px) {
  .navbar-brand {
    font-size: 0.9rem;
  }
  .navbar {
    padding: 0.6rem 1rem !important;
  }
}

@keyframes pulso-infinito {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/*Fin navbar*7
/*Titulo y slogan*/
/* Contenedor principal de la sección */
/* Contenedor principal de la sección */
.header-container {
  padding-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centra los bloques en la pantalla */
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Fila del título adaptable */
.header-title-grid {
  display: flex;
  flex-wrap: wrap;            /* ¡ESTO EVITA QUE SE ROMPA!: Permite que el logo baje si no hay espacio */
  align-items: center;        /* Centra verticalmente el logo con las letras */
  justify-content: center;    /* Mantiene todo el conjunto centrado */
  gap: 2.5rem;                /* Espaciado elegante entre título y logo */
  margin-bottom: 2rem;        
  width: 100%;
}

/* El h2 se adapta fluidamente al tamaño de la pantalla */
.header-container h2 {
  margin: 0 !important;
  text-align: left !important; /* Mantiene la lectura natural a la izquierda cuando se quiebra */
  max-width: 100%;             /* No permite que se desborde del contenedor */
  display: inline-block;
}

/* Control estricto y responsivo del tamaño del logo */
.header-logo {
  /* En PC se mantendrá en un tamaño intermedio excelente */
  width: 11rem;               
  max-width: 100%;            /* Evita que se salga en pantallas miniaturas */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;             /* Evita que se aplaste o se deforme */
}

/* Párrafo descriptivo centrado abajo */
.header-description {
  text-align: center !important;
  max-width: 600px;           /* Un ancho máximo fijo en px es más estable que % en pantallas medianas */
  width: 100%;
  margin: 0 auto;
  display: block;
  line-height: 1.6;
}

/* ====== RESPONSIVE (Celulares y Tablets en vertical) ====== */
@media (max-width: 991px) {
  .header-title-grid {
    gap: 1.5rem;              /* Reduce la separación en pantallas medianas/chicas */
  }
  
  .header-container h2 {
    text-align: center !important; /* Centra el texto solo cuando el espacio es reducido */
  }
  
  .header-logo {
    width: 9rem;               /* Hace el logo un poco más compacto en móviles/tablets */
  }
}

/*Fin titulo y slogan*/

/*Video*/
.video-container {
  position: relative;
  text-align: center;
  padding-bottom: 2.5rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container video {
  width: 100%;
  max-width: 40rem;
  border-radius: 0.938rem;
  cursor: pointer;
  transition: transform 0.3s ease;

  box-shadow: 0 0.625rem 2rem rgba(60, 72, 200, 0.15);
}

/* ================= BOTÓN ================= */

.video-btn {
  position: absolute;
  z-index: 10;

  width: 5rem;
  height: 5rem;

  border: none;
  border-radius: 50%;

  background: linear-gradient(135deg, #3c48c8, #6a75ff);
  color: white;

  font-size: 2rem;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: 0 0.5rem 1.5rem rgba(60, 72, 200, 0.4);

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;

  opacity: 1;
  visibility: visible;
}

.hide-btn {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

/* ANIMACIÓN SUAVE */

.video-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0.75rem 2rem rgba(60, 72, 200, 0.5);
}

.video-btn:active {
  transform: scale(0.95);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 48rem) {
  .video-btn {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
  }

  .video-container video {
    max-width: 100%;
  }
}

/*Fin video*/

/*================Estilos de la sección beneficios====================*/
/* Sección */

.benefits {
  text-align: center;
}

.benefits h2 {
  margin-bottom: 1rem;
  color: var(--brand-primary);
}

.benefits p {
  max-width: 37.5rem;
  margin: 0 auto 2rem;
}

/* Grid */
.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-bottom: 4.5rem;
  max-width: 71rem;
  margin: 0 auto;
}

.card {
  padding: 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border: 0.063rem solid #e1e8f0;
  color: #2c3e50;
  text-align: left;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card h3 {
  color: #275dca;
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
}

.card p {
  color: #5a6a85;
  font-size: 0.95rem;
}

.card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.938rem 2.188rem rgba(39, 93, 202, 0.1);
  border-color: #275dca;
}

/*=========Fin de los estilos de la sección beneficios================*/

/* seccion de productos*/

.product-section {
  margin-bottom: 2rem;
  margin-top: -6rem;
  padding: 4rem 1rem;
}

.product-section .row {
  row-gap: 2rem;
}

/* PRODUCT CARD */

.product-card {
  position: relative;

  overflow: hidden;

  padding:
    6rem 2rem 2rem 2rem;

  height: 100%;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(106, 117, 255, 0.15);

  isolation: isolate;

  transform: translateZ(0);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

  /* NUEVO FONDO */
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(235, 240, 255, 0.95) 35%,
      rgba(220, 228, 255, 0.92) 100%
    );

  box-shadow:
    0 15px 35px rgba(60, 72, 200, 0.08),
    0 5px 15px rgba(106, 117, 255, 0.06);

  border-radius:
    3rem 1rem 4rem 1rem;
}

.product-card::after {
  content: "";

  position: absolute;

  width: 22rem;
  height: 22rem;

  background:
    radial-gradient(circle,
      rgba(106, 117, 255, 0.18),
      transparent 70%);

  top: -10rem;
  right: -10rem;

  z-index: -1;

  border-radius: 50%;
}

/* brillo */
.product-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.45) 0%,
      transparent 35%
    );

  pointer-events: none;
}

.product-card:hover {
  transform:
    translateY(-10px) rotate(-1deg);

  border-color:
    rgba(106, 117, 255, 0.35);

  box-shadow:
    0 25px 50px rgba(60, 72, 200, 0.18),
    0 10px 25px rgba(106, 117, 255, 0.12);
}

.product-card:hover .img-circle {
  transform:
    rotate(8deg) scale(1.05);
}

/* IMAGE CIRCLE */

.img-circle {
  width: 13rem;
  height: 13rem;

  margin:
    -4rem auto 1rem auto;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.55));


  box-shadow:
    0 15px 35px rgba(0, 0, 0, .08);

  transition:
    transform .5s ease;

  /* FORMA ORGÁNICA */
  border-radius:
    63% 37% 54% 46% / 55% 48% 52% 45%;
}

.blue-card {
  background:
    linear-gradient(
      145deg,
      rgba(240, 251, 255, 0.96),
      rgba(214, 246, 255, 0.92)
    );
}

.green-card {
  background:
    linear-gradient(
      145deg,
      rgba(249, 255, 232, 0.96),
      rgba(229, 245, 180, 0.92)
    );
}

.orange-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 244, 233, 0.96),
      rgba(255, 219, 186, 0.92)
    );
}

/* colores círculos */

.blue-card .img-circle {
  background:
    linear-gradient(135deg,
      #d8f8f4,
      #a9ece5);
}

.green-card .img-circle {
  background:
    linear-gradient(135deg,
      #eef6cb,
      #d8e78d);
}

.orange-card .img-circle {
  background:
    linear-gradient(135deg,
      #ffe5cf,
      #ffc998);
}

/* PRODUCT IMAGE */

.product-img {
  width: 9rem;
  max-width: 100%;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.product-card:hover .product-img {
  transform: scale(1.05) rotate(-2deg);
}

/* TITLE products */

.title {
  font-size:
    clamp(1.9rem, 3vw, 2.4rem);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.04em;

  margin-bottom: 1.2rem;

  text-align: left;
}

.title span {
  font-weight: 400;
}

.blue-card .title {
  color: #04a9a4;
}

.green-card .title {
  color: #a1ac31;
}

.orange-card .title {
  color: #e79052;
}

/* TABS */

.product-tabs {
  display: flex;

  gap: .6rem;

  background: #eef2f7;

  padding: .4rem;

  border-radius: 1rem;

  margin: 1.5rem 0;
}

.tab-btn {
  flex: 1;

  border: none;

  padding: .85rem;

  border-radius: .8rem;

  background: transparent;

  font-size: .9rem;
  font-weight: 700;

  cursor: pointer;

  transition: all .3s ease;

  color: #4b5563;

  -webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
  background: white;

  color: #111827;

  transform: translateY(-2px);

  box-shadow:
    0 5px 15px rgba(0, 0, 0, .08);
}

.unitalla-btn {
  background: white;
}

/* CONTENT */

.tab-content {
  margin-top: .5rem;
  flex-grow: 1;
}

.tab-panel {
  display: none;

  animation: fadeUp .35s ease;
}

.tab-panel.active {
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TEXTS */

.subtitle {
  font-size: 1rem;

  line-height: 1.8;

  color: #5b6472;

  margin-bottom: 1.2rem;

  text-align: center;
}

.aling-precios {
  text-align: left;

  font-weight: 700;

  color: #111827;

  margin-top: 1rem;
}

.features {
  padding-left: 1.2rem;

  margin: .8rem 0;
}

.features li {
  font-size: .98rem;

  line-height: 1.7;

  margin-bottom: .9rem;

  color: #374151;

  text-align: left;
}

/* bullets */

.blue-card .features li::marker {
  color: #04a9a4;
}

.green-card .features li::marker {
  color: #b7c242;
}

.orange-card .features li::marker {
  color: #f5a46c;
}

.extra {
  margin-top: 1.2rem;

  font-size: .95rem;

  line-height: 1.6;

  color: #6b7280;

  text-align: left;
}

/*BUTTON */

.btn-wsp {
  width: 100%;

  padding: 1rem 1.2rem;

  border: none;

  border-radius: 1.3rem;

  margin-top: auto;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .02em;

  color: white;

  cursor: pointer;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

  text-align: center;
}

.blue-card .btn-wsp {
  background:
    linear-gradient(135deg,
      #04a9a4,
      #18c7c1);
}

.green-card .btn-wsp {
  background:
    linear-gradient(135deg,
      #b7c242,
      #cedb58);
}

.orange-card .btn-wsp {
  background:
    linear-gradient(135deg,
      #f5a46c,
      #ffbb8c);
}

.btn-wsp:hover {
  transform: translateY(-3px);

  box-shadow:
    0 10px 20px rgba(0, 0, 0, .15);
}
/* TABLETS */

@media (max-width: 768px) {

  .product-section {
    padding: 3rem 1rem;
  }

  .product-card {

    padding:
      4.5rem 1.4rem 1.5rem 1.4rem;

    border-radius:
      2.5rem 1.5rem 3rem 1.5rem;
  }

  .img-circle {
    width: 9.5rem;
    height: 9.5rem;

    margin:
      -3.5rem auto 1.2rem auto;
  }

  .product-img {
    width: 7rem;
  }

  .title {
    font-size: 1.8rem;

    text-align: center;

    margin-bottom: 1rem;
  }

  .subtitle {
    font-size: .98rem;

    line-height: 1.7;

    text-align: left;

    margin-bottom: 1rem;
  }

  .aling-precios {
    font-size: .9rem;

    text-align: left;
  }

  .features {
    padding-left: 1rem;
  }

  .features li {
    font-size: .95rem;

    line-height: 1.6;

    text-align: left;
  }

  .extra {
    font-size: .92rem;

    line-height: 1.6;

    text-align: left;
  }

  .product-tabs {
    gap: .5rem;

    padding: .4rem;
  }

  .tab-btn {
    font-size: .82rem;

    padding: .75rem .5rem;
  }

  .btn-wsp {
    font-size: .95rem;

    padding: .95rem;
  }
}

/* CELULARES */

@media (max-width: 480px) {

  .product-section {
    padding: 2rem .3rem;
  }

  .product-card {

    padding:
      4rem 1.1rem 1.3rem 1.1rem;

    border-radius:
      2rem 1rem 2.5rem 1rem;
  }

  .img-circle {
    width: 8rem;
    height: 8rem;

    margin:
      -3rem auto 1rem auto;
  }

  .product-img {
    width: 6rem;
  }

  .title {
    font-size: 1.55rem;

    line-height: 1.1;
  }

  .subtitle {
    font-size: .92rem;

    line-height: 1.65;
  }

  .features li {
    font-size: .9rem;

    margin-bottom: .7rem;
  }

  .extra {
    font-size: .88rem;
  }

  .product-tabs {
    gap: .35rem;
  }

  .tab-btn {
    font-size: .75rem;

    padding: .65rem .4rem;

    border-radius: .9rem;
  }

  .btn-wsp {
    font-size: .9rem;

    padding: .9rem;

    border-radius: 1rem;
  }
}

/* delivery seccion */

.delivery-hero {
  width: 100%;
  padding-top: -4rem;
  padding-bottom: 8rem;
  display: flex;
  justify-content: center;
}

.delivery-wrapper {
  width: 90%;
  max-width: 75rem;
  height: 31.25rem;
  position: relative;
}

.delivery-header {
  text-align: center;
  margin-bottom: 3rem;
}

.delivery-header h2 {
  color: #3b3b9f;
  margin-bottom: 0.5rem;
}

.delivery-header p {
  color: #6b7280;
}

.delivery-card {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.delivery-card.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.card-content {
  display: flex;
  height: 100%;
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 5px 10px rgba(59, 59, 159, 0.05);
  border: 1px solid #e5e7eb;
  transition: transform 0.4s ease;
  position: relative;
}

.image-box {
  flex: 1.2;
  /* La imagen es un poco más grande que el texto */
  position: relative;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(1.02);
}

.badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 0.938rem;
  border-radius: 3.125rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: #2ecc71;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.text-box {
  flex: 1;
  padding: 3rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: linear-gradient(135deg,
      #ffffff 0%,
      #f9fafb 100%);
}

.stars span {
  font-size: 1.6rem;
  color: #f5b301;
  margin-right: 4px;
  animation: glow 1.5s infinite alternate;
}

.stars span:nth-child(2) {
  animation-delay: 0.2s;
}

.stars span:nth-child(3) {
  animation-delay: 0.4s;
}

.stars span:nth-child(4) {
  animation-delay: 0.6s;
}

.stars span:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px rgba(245, 179, 1, 0.4);
  }

  to {
    text-shadow: 0 0 15px rgba(245, 179, 1, 1);
  }
}

.testimonial {
  font-size: 1.8rem;
  /* Letra grande y legible */
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 1.563rem;
  font-weight: 500;
}

.author {
  font-size: 1rem;
  color: #6b7280;
}


/* Responsivo para tablets/celulares delivery seccion*/
@media (max-width: 992px) {
  .delivery-hero {
    padding: 3rem 0;
  }

  .delivery-wrapper {
    height: auto;
    min-height: 400px;
    /* Asegura un espacio mínimo */
  }

  /* IMPORTANTE: Sacamos las cartas del modo absoluto para que ocupen espacio real */
  .delivery-card {
    position: relative;
    display: none;
    /* Ocultamos todas por defecto */
    width: 100%;
    height: auto;
    transform: none;
    visibility: visible;
    /* Reset de visibilidad */
    opacity: 1;
    /* Reset de opacidad para manejarlo con display */
  }

  .delivery-card.active {
    display: block;
    /* Solo la activa se muestra y empuja el contenido */
    animation: fadeIn 0.5s ease-in-out;
  }

  .card-content {
    flex-direction: column;
    height: auto;
  }

  .image-box {
    height: 20rem;
    flex: none;
  }

  .text-box {
    padding: 2.5rem 1.5rem;
    text-align: center;
    flex: none;
  }

  .testimonial {
    font-size: 1.5rem;
  }
}

/* Para celulares (Ajustes finos sobre lo anterior) */
@media (max-width: 576px) {
  .image-box {
    height: 15rem;
  }

  .testimonial {
    font-size: 1.2rem;
  }

  .text-box {
    padding: 2rem 1rem;
  }
}

@media (max-width: 768px) {
  .delivery-hero {
    padding: 2rem 0;
  }

  .delivery-wrapper {
    width: 95%;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .delivery-card {
    /* IMPORTANTE: Volvemos a relative pero ocultamos del flujo las que no se usan */
    position: relative;
    display: none;
    width: 100%;
    height: auto;
    transform: none;
  }

  .delivery-card.active {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.5s ease-in-out;
  }

  .card-content {
    flex-direction: column;
    height: auto;
  }

  .image-box {
    height: 15rem;
    flex: none;
  }

  .text-box {
    padding: 2rem 1.25rem;
    flex: none;
  }

  .testimonial {
    font-size: 1.3rem;
  }
}

/* Animación opcional para que el cambio no sea brusco */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Estilos generales de la sección */
.faq-section {
  padding: 4rem 1.5rem;
  text-align: center;
}

.faq-section .subtitle {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2.5rem;
}

/* --- FAQ CENTRAR --- */
.faq-container {
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

/* -------------------------- */

/* Estilos para cada ítem de pregunta/respuesta */
.faq-item {
  background: rgba(255, 255, 255, 0.6);
  /* Más transparencia */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.6);
  /* Más transparencia */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;

}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.938rem 2.188rem rgba(39, 93, 202, 0.2);
  border-color: var(--brand-primary);
}

/* Estilos para el botón de la pregunta */
.faq-question {
  width: 100%;
  padding: 1.3rem 1.5rem;
  padding: 1.3rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  text-align: left;
  color: #2d3aa0;
  color: #2d3aa0;
}

.icon {
  font-size: 1.5rem;
  /* Tamaño del icono */
  transition: transform 0.3s ease;
  /* Transición suave para la rotación */
}

/* Estilos para la respuesta (oculta por defecto) */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 1.5rem;
  color: #555;
  line-height: 1.6;
  transition: max-height 0.4s ease;
  padding: 0 1.5rem;
  color: #555;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 1.2rem;
  max-height: 300px;
  padding-bottom: 1.2rem;
}

/* Cuando .faq-item tiene la clase .active, el icono rota */
.faq-item.active .icon {
  transform: rotate(45deg);
  /* Rota el icono 45 grados */
}

/*================Estilos de la sección Disponibilidad====================*/
.availability-section {
  padding: 0.625rem 1.25rem;
  margin-top: 2.2rem;
}

.availability {
  max-width: 68.75rem;
  margin: 0 auto;
  text-align: center;
}

.availability h2 {
  font-size: 2.2rem;
  color: #333;
  margin-bottom: 0.625rem;
}

.availability p {
  color: #666;
  max-width: 37.5rem;
  margin: 0 auto 2.5rem;
}

/* Layout Grid */
.availability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.875rem;
  text-align: left;
}

/* Card Cobertura (Izquierda) */
.card-cobertura {
  background: white;
  border-radius: 1.5rem;
  padding: 1.875rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.05);
  border: 0.063rem solid #f0f0f0;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.icon-map {
  color: #00b4ff;
  font-size: 1.2rem;
}

.card-cobertura h3 {
  margin: 0;
  color: #1a1a1a;
  font-size: 1.3rem;
}

.subtitle {
  color: #999;
  font-size: 0.9rem;
  margin-top: 0.313rem;
}

.table-container {
  margin-top: 1.563rem;
}

.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.125rem 0;
  border-bottom: 0.063rem solid #f2f2f2;
}

.no-border {
  border-bottom: none;
}

.row-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.check-icon {
  color: #00b4ff;
  border: 0.094rem solid #00b4ff;
  border-radius: 50%;
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.688rem;
}

.zona-nombre {
  color: #444;
  font-weight: 500;
}

.row-status {
  display: flex;
  align-items: center;
  gap: 0.938rem;
}

.time-text {
  color: #888;
  font-size: 0.85rem;
}

/* Badges */
.badge {
  padding: 0.313rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: bold;
}

.badge-activo {
  background-color: #e6f9ed;
  color: #2ecc71;
}

.badge-consulta {
  background-color: #fff8e1;
  color: #f1c40f;
}

.badge-disponible {
  background-color: #f0f2f5;
  color: #95a5a6;
}

/* Columna Reseñas (Derecha) */
.column-reviews {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-card {
  background: white;
  border-radius: 1.5rem;
  padding: 1.563rem;
  box-shadow: 0 0.5rem 1.563rem rgba(0, 0, 0, 0.04);
  border: 0.063rem solid #f0f0f0;
  position: relative;
}

.quote-mark {
  color: #ccefff;
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: -0.625rem;
}

.review-text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 0.938rem;
}

.review-video {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.author-info strong {
  display: block;
  color: #333;
  font-size: 0.95rem;
}

.author-info span {
  color: #999;
  font-size: 0.8rem;
}

.stars {
  color: var(--star-color);
  /* Asegúrate que #f5b301 sea el definitivo */
  text-shadow: none;
  /* Si el cliente siente que 'brilla' mucho, quita la animación de glow */
}

/*================Fin estilos de la sección Disponibilidad====================*/

/*=============RESPONSIVE==================*/
/*================Navbar, Header y video===================*/
/* Tablets */
@media (max-width: 992px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 1rem 0 0 0;
  }

  .navbar-nav .nav-link {
    width: 100%;
    text-align: left;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
  }

  .header-container {
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    text-align: center;
  }

  .video-container video {
    width: 90%;
    max-width: 500px;
  }
}

/* Celulares */
@media (max-width: 768px) {
  .header-container {
    padding: 1.5rem 1rem;
  }

  .video-container video {
    max-width: 80%;
    border-radius: 0.625rem;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  .navbar-brand {
    font-size: 1.1rem;
  }

  .header-container {
    padding-bottom: 1rem;
  }
}

/* Animación de pulso */
@keyframes pulso-infinito {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Responsive */
@media (max-width: 600px) {

  /* 1. Arreglamos el menú para que no se vea desordenado */
  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px;
    /* Más espacio entre filas y columnas */
    padding: 20px 0;
  }

  /* 2. Ajustamos el botón para que suba más y no tape nada */
  .btn-flotante {
    right: 15px;
    /* Un poco más a la orilla */
    bottom: 20px;
    z-index: 9999;
    /* Aseguramos que siempre esté arriba */
  }

  /* Esta es la clave: súbelo más para que libre los iconos y el menú */
  .btn-flotante.subir {
    bottom: 320px;
    transform: scale(0.9);
    opacity: 0.9;
    /* Un poco de transparencia al estar sobre el footer queda elegante */
  }
}

/* estilo footer seccion */
.footer {
  background-color: rgba(255, 255, 255, 0.09) !important;
  /* transparencia */
  backdrop-filter: blur(1rem);
  /* efecto vidrio */
  -webkit-backdrop-filter: blur(1rem);

  width: 100%;
  padding: 3.125rem 0 0 0;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-content {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 75rem;
}

/* --- 1. ICONOS SOCIALES --- */
.social-icons {
  display: flex;
  gap: 1.875rem;
  /* 30px */
  margin-bottom: 2.1875rem;
  /* 35px */
  justify-content: center;
}

.icon-link {
  text-decoration: none;
  width: 3.75rem;
  /* 60px */
  height: 3.75rem;
  /* 60px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.3125rem 0.625rem rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.icon-link:hover {
  transform: translateY(-0.75rem) scale(1.2);
  /* -12px */
}

.icon-link:hover img {
  transform: rotate(10deg);
  filter: drop-shadow(0 0.75rem 1.25rem rgba(0, 0, 0, 0.2));
}

/* --- 2. MENÚ (DESKTOP: LÍNEA RECTA) --- */
.footer-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.875rem;
  /* 30px */
  margin: 0 auto 2.5rem auto;
  /* 40px bottom */
  list-style: none;
  padding: 0;
}

.footer-menu li a {
  text-decoration: none;
  color: var(--text-light);
  font-size: 1.0625rem;
  /* 17px */
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.footer-menu li a:hover {
  color: var(--brand-accent);
}

/* --- 3. COPYRIGHT --- */
.footer-bottom {
  background-color: #f9f9f9;
  padding: 1.5625rem 0;
  /* 25px */
  text-align: center;
  width: 100%;
  border-top: 0.0625rem solid #eee;
}

.footer-bottom p {
  font-size: 0.875rem;
  /* 14px */
  color: #666;
  margin: 0;
}

.designer-name {
  font-weight: bold;
}

/* --- 4. RESPONSIVE (PIRÁMIDE 3-2) --- */
@media (max-width: 48rem) {

  /* 768px */
  .footer {
    padding-top: 1.875rem;
    /* 30px */
  }

  .icon-link {
    width: 3.125rem;
    /* 50px */
    height: 3.125rem;
  }

  .footer-menu {
    flex-wrap: wrap;
    max-width: 21.875rem;
    /* 350px - fuerza el salto de línea */
    gap: 0.9375rem 0.3125rem;
    /* 15px 5px */
  }

  /* Fila superior: 3 elementos */
  .footer-menu li:nth-child(1),
  .footer-menu li:nth-child(2),
  .footer-menu li:nth-child(3) {
    flex: 0 1 30%;
    text-align: center;
  }

  /* Fila inferior: 2 elementos centrados */
  .footer-menu li:nth-child(4),
  .footer-menu li:nth-child(5) {
    flex: 0 1 45%;
    text-align: center;
  }

  .footer-menu li a {
    font-size: 0.9375rem;
    /* 15px */
  }
}

/*================Beneficios===================*/
/* Tablets */
@media (max-width: 1024px) {
  .cards-container {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 0 1.5rem 3rem;
  }

  .card {
    padding: 1.8rem;
  }
}

/* Celulares grandes */
@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1.2rem 3rem;
  }

  .benefits h2 {
    font-size: 1.6rem;
  }

  .benefits p {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .card {
    padding: 1.5rem;
  }

  .card h3 {
    font-size: 1.2rem;
  }

  .card p {
    font-size: 0.9rem;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  .benefits {
    padding: 2rem;
  }

  .benefits h2 {
    font-size: 1.4rem;
  }

  .card {
    padding: 1.3rem;
    border-radius: 1.2rem;
    margin-top: -0.5rem;
  }

  .cards-container {
    gap: 1.2rem;
  }
}

/*================Disponibilidad===================*/

@media (max-width: 768px) {
  .availability-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== OVERRIDES DE COLORES (NO BORRAR LO DEMÁS) ====== */

h2 {
  font-size: clamp(2.2rem, 3vw, 3.2rem);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -0.04em;

  text-align: center;

  margin-bottom: 1.8rem;

  position: relative;

  display: inline-block;

  color: #1e3a8a;

  background: linear-gradient(135deg,
      #1e40af,
      #3b82f6,
      #60a5fa);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2::before {
  content: "";

  position: absolute;

  inset: -20px;

  background:
    radial-gradient(circle,
      rgba(96, 165, 250, .15),
      transparent 70%);

  z-index: -1;

  filter: blur(20px);
}

p {
  font-size: clamp(.98rem, 1.4vw, 1.3rem);

  line-height: 1.8;

  color: #4b5563;
}

.benefits h2 {
  color: var(--brand-primary);
}

.benefits p {
  color: var(--text-light);
}

.card {
  color: var(--text-main);
  border-color: var(--border-light);
}

.card h3 {
  color: var(--brand-primary);
}

.card p {
  color: var(--text-light);
}

.product-card p {
  color: var(--text-light);
}

.tab-btn {
  background: var(--bg-soft);
  color: var(--text-main);
}

.unitalla-btn {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-light);
}

.subtitle {
  color: var(--text-muted);
}

.features li {
  color: var(--text-main);
}

.extra {
  color: var(--text-light);
}

.delivery-header h2 {
  color: var(--brand-accent);
}

.delivery-header p {
  color: var(--text-light);
}

.testimonial {
  color: var(--text-main);
}

.author {
  color: var(--text-light);
}

.faq-section h2 {
  color: var(--brand-accent);
}

.faq-section .subtitle {
  color: var(--text-light);
}

.faq-question {
  color: var(--brand-accent);
}

.faq-answer {
  color: var(--text-main);
}

.availability h2 {
  color: var(--text-main);
}

.availability p {
  color: var(--text-light);
}

.card-cobertura h3 {
  color: var(--text-main);
}

.zona-nombre {
  color: var(--text-main);
}

.time-text {
  color: var(--text-soft);
}

.review-text {
  color: var(--text-light);
}

.author-info strong {
  color: var(--text-main);
}

.author-info span {
  color: var(--text-soft);
}

.footer-menu li a {
  color: var(--text-main);
}

.footer-bottom p {
  color: var(--text-light);
}

.stars span,
.stars {
  color: var(--star-color);
  /* Asegúrate que #f5b301 sea el definitivo */
  text-shadow: none;
  /* Si el cliente siente que 'brilla' mucho, quita la animación de glow */
}

.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  /* Posición inicial */
  right: 1.5rem;
  background: #5ebbbe;
  color: white;
  padding: 0.8rem 1.2rem;
  border-radius: 1.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  animation: pulso-infinito 2s infinite;

  /* UNA SOLA TRANSICIÓN PARA TODO */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Contenedor de texto: fuerza la pregunta arriba y respuesta abajo */
.whatsapp-text-container {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Imagen de WhatsApp fija a la izquierda */
.whatsapp-float img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  flex-shrink: 0;
  /* Evita que la imagen se deforme si el texto es largo */
}

.pregunta-whats {
  font-family: 'Arial', sans-serif;
  /* Ajustado a la tipografía base solicitada */
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0;
  transition: color 0.3s ease;
}

.respuesta-whats {
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  /* Estilo delgado solicitado */
  margin: 0;
  opacity: 0.9;
  transition: color 0.3s ease;
}

/* EFECTO HOVER */
.whatsapp-float:hover {
  background: #25d366;
  transform: scale(1.05);
}

/* Las letras cambian a negro en el hover */
.whatsapp-float:hover .pregunta-whats,
.whatsapp-float:hover .respuesta-whats {
  color: #000000;
  opacity: 1;
}

.whatsapp-float.subir {
  bottom: 300px !important;
  /* Forzamos la subida */
  transform: scale(0.95);
  opacity: 0.9;
}

/* Ajuste universal para dispositivos móviles (Tablets y Celulares) */
@media (max-width: 1024px) {
  .whatsapp-float {
    /* Reducimos el tamaño general con padding y escala */
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem 0.9rem;
    /* Botón más delgado */
    gap: 0.5rem;
    /* Menos espacio entre icono y texto */
    transform: scale(0.9);
    /* Escala ligeramente todo el botón */
    border-radius: 1.2rem;
  }

  .whatsapp-float img {
    width: 1.8rem;
    /* Icono más pequeño */
    height: 1.8rem;
  }

  .pregunta-whats {
    font-size: 0.8rem;
    /* Letra de pregunta más pequeña */
    line-height: 1.1;
  }

  .respuesta-whats {
    font-size: 0.7rem;
    /* Letra de respuesta más pequeña */
  }
}

/* Ajuste específico para teléfonos muy pequeños (iPhone SE, etc.) */
@media (max-width: 380px) {
  .whatsapp-float {
    right: 0.5rem;
    transform: scale(0.85);
    /* Un poco más pequeño para no tapar el centro */
    max-width: 90%;
  }
}

.card,
.product-card,
.review-card,
.card-cobertura {
  border-radius: 24px;
  transition: all 0.35s ease;
  overflow: hidden;
}

.card:hover,
.product-card:hover,
.review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.header-container h2,
.beneficios h2,
.product-section h2,
.entrega h2,
.availability-section h2,
.faq-section h2 {
  display: inline-block; /* El truco clave: el h2 ahora mide lo que mide el texto */
  position: relative;
  padding-bottom: 1rem;
}

/* Necesitas centrar el contenedor padre del h2 en tu HTML para que el título no se pegue a la izquierda */
.header-container, .beneficios, .product-section, .entrega, .availability-section, .faq-section {
  text-align: center;
}

.header-container h2::after,
.beneficios h2::after,
.product-section h2::after,
.entrega h2::after,
.availability-section h2::after,
.faq-section h2::after {
  content: "";
  display: block;
  
  width: 100%;       /* Medirá exactamente lo mismo que el h2 (osea, el texto) */
  height: 0.3rem;
  
  position: absolute;
  bottom: 0;
  left: 0;

  background: linear-gradient(90deg, #3c48c8, #6a75ff);
  border-radius: 20px;
}

@media (max-width: 480px) {
  .prod-titulo{
    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
    .prod-titulo{
    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}