/* ==============================================================
   YZA Venta Institucional — styles.css
   Prefijo: yza-vi-   (nunca usar clases genéricas sin prefijo)

   REGLA DE ORO:
   · Todas las imágenes viven AQUÍ vía background-image.
   · Todos los links/redireccionamientos viven en script.js.
   · El HTML no contiene ninguna URL.

   Rutas: relativas → pruebas locales (index.html).
   Al publicar: reemplazar cada url('img/...') por la URL
   absoluta correspondiente en el CDN (https://...).
   ============================================================== */

/* ── VARIABLES ────────────────────────────────────────────────── */
:root {
  --yza-vi-azul-nav:   #0B1D6B;  /* headings, texto oscuro      */
  --yza-vi-azul-med:   #1565C0;  /* botones, acentos            */
  --yza-vi-bg-azul:    #C8DCF0;  /* placeholder azul claro      */
  --yza-vi-bg-mint:    #B5DEC8;  /* placeholder verde menta     */
  --yza-vi-blanco:     #FFFFFF;
  --yza-vi-gris-sec:   #F5F7FA;  /* fondo sección bienestar     */
  --yza-vi-radio:       14px;
  --yza-vi-t:           0.35s ease;
}

/* ── RESET ────────────────────────────────────────────────────── */
.yza-vi-root *,
.yza-vi-root *::before,
.yza-vi-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.yza-vi-root {
  font-family: 'Nunito', sans-serif;
  width: 100%;
  overflow-x: hidden;
  color: var(--yza-vi-azul-nav);
}

/* ── HEADINGS ─────────────────────────────────────────────────── */
.yza-vi-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--yza-vi-azul-nav);
  text-align: center;
  line-height: 1.15;
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  /* estado inicial animación */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.yza-vi-heading.yza-vi-vis {
  opacity: 1;
  transform: none;
}


/* ================================================================
   S1 – HERO
   Base = mobile. Se escala a tablet y desktop.
   ================================================================ */
.yza-vi-hero {
  width: 100%;
  background-image:    url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/b8eb9bfd-9d90-49b7-a221-185f6b311352.png');
  background-size:     100% auto;
  background-repeat:   no-repeat;
  background-position: top center;
  background-color:    var(--yza-vi-bg-azul); /* evita gap gris si hay micro-desfase */
  aspect-ratio:        1;          /* 360 × 360 px exacto */
  overflow:            hidden;
  /* animación entrada */
  opacity: 0;
  transition: opacity 0.9s ease, background-size 0.6s ease;
}
.yza-vi-hero.yza-vi-vis { opacity: 1; }
.yza-vi-hero.yza-vi-vis:hover { background-size: 104% auto; }

@media (min-width: 768px), (orientation: landscape) and (max-height: 600px) {
  .yza-vi-hero {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/250c8daa-30e5-44e0-aa72-fd9c38bc18d0.png');
    aspect-ratio: 2.4;            /* 744 × 310 px exacto */
  }
}
@media (min-width: 1200px) {
  .yza-vi-hero {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/f3bf3610-96dd-49dd-b9c9-cfd668efe62a.png');
    aspect-ratio: 2.41;           /* 2500 × 1039 px exacto */
  }
}


/* ================================================================
   S2 – ENCUENTRA TU ASEGURADORA O BANCO PARTICIPANTE
   ================================================================ */
.yza-vi-aseguradoras {
  background: var(--yza-vi-blanco);
  padding: 1.2rem 1.5rem 2rem;   /* mobile: reducido para eliminar el espacio grande */
  text-align: center;
}

.yza-vi-logos-grid {
  width: 100%;
  max-width: 420px;
  margin: 1.8rem auto 0;
  border-radius: var(--yza-vi-radio);
  background-repeat:   no-repeat;
  background-position: top center;
  background-size:     100% auto;
  background-image:    url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/0f316d03-813d-4cf3-88a8-5e06863f6aa1.png');
  background-color:    transparent;
  aspect-ratio:        1.12;      /* 344 × 306 px exacto */
  min-height:          unset;
  /* animación */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.yza-vi-logos-grid.yza-vi-vis { opacity: 1; transform: none; }

@media (min-width: 768px), (orientation: landscape) and (max-height: 600px) {
  .yza-vi-aseguradoras { padding: 2.8rem 2rem 3.2rem; }
  .yza-vi-logos-grid {
    background-image:  url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/c3dc5c84-8eb2-4954-a441-b7aa8e4b6026.png');
    background-color:  transparent;
    max-width:         720px;
    aspect-ratio:      3.13;      /* 680 × 217 px exacto */
    min-height:        unset;
  }
}
@media (min-width: 1200px) {
  .yza-vi-logos-grid {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/1600b4dd-0086-4c04-8748-9f385d5e54bc.png');
    max-width:        1100px;
    aspect-ratio:     3.15;      /* 2260 × 717 px exacto */
  }
}


/* ================================================================
   S3 – MÁS BIENESTAR CERCA DE TI
   Estrategia responsive:
     Mobile   → 4 cards individuales, columna única
     Tablet   → 2 imágenes de par (Group 346 / Group 347)
     Desktop  → 4 cards individuales, grid 2 × 2
   ================================================================ */
.yza-vi-bienestar {
  background: var(--yza-vi-gris-sec);
  padding: 2.8rem 1.5rem 3.2rem;
  text-align: center;
}

/* ── Grid wrapper ── */
.yza-vi-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 400px;
  margin: 1.8rem auto 0;
}

/* ── Mobile: mostrar individuales, ocultar pares ── */
.yza-vi-bento-pair { display: none; }

.yza-vi-bento-card {
  background-size:     100% auto;
  background-repeat:   no-repeat;
  background-position: top left;
  border-radius:       var(--yza-vi-radio);
  aspect-ratio:        2.54;      /* 328 × 129 px mobile exacto */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow 0.3s ease;
}
.yza-vi-bento-card.yza-vi-vis { opacity: 1; transform: none; }
.yza-vi-bento-card.yza-vi-vis:hover {
  transform:  translateY(-4px);
  box-shadow: 0 10px 28px rgba(11, 29, 107, 0.15);
}

/* Stagger de entrada */
.yza-vi-bento-agil      { transition-delay: 0s;    }
.yza-vi-bento-red       { transition-delay: 0.08s; }
.yza-vi-bento-productos { transition-delay: 0.16s; }
.yza-vi-bento-beneficios{ transition-delay: 0.24s; }

/* Imágenes mobile */
.yza-vi-bento-agil       { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/d5d5ca98-4083-40bc-85ca-505d622786e6.png'); }
.yza-vi-bento-red        { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/cef00846-194c-4f3b-a25c-57d1e3aa7882.png'); }
.yza-vi-bento-productos  { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/17214bd0-56bd-474f-b34e-6235e8480772.png'); }
.yza-vi-bento-beneficios { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/9b8ca5bb-8de6-48e3-bb2a-01d08f9bb269.png'); }

/* ── Tablet: mostrar pares, ocultar individuales ── */
@media (min-width: 768px), (orientation: landscape) and (max-height: 600px) {
  .yza-vi-bento-grid {
    max-width: 720px;
    gap: 14px;
  }
  .yza-vi-bento-card { display: none; }
  .yza-vi-bento-pair {
    display: block;
    background-size:     100% auto;
    background-repeat:   no-repeat;
    background-position: top left;
    border-radius:       var(--yza-vi-radio);
    aspect-ratio:        5.64;    /* 541 × 96 px exacto */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease,
                box-shadow 0.3s ease;
  }
  .yza-vi-bento-pair.yza-vi-vis { opacity: 1; transform: none; }
  .yza-vi-bento-pair.yza-vi-vis:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 28px rgba(11, 29, 107, 0.15);
  }
  .yza-vi-bento-pair-top    {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/ee996819-462d-4ff4-a1e8-8446f75c56fb.png');
    transition-delay: 0s;
  }
  .yza-vi-bento-pair-bottom {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/9c7505d9-3e48-454e-a35d-2f9f5ea6306d.png');
    transition-delay: 0.12s;
  }
}

/* ── Desktop: individuales en grid 2 × 2 ── */
@media (min-width: 1200px) {
  .yza-vi-bento-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 960px;
    gap: 18px;
  }
  .yza-vi-bento-card    { display: block; aspect-ratio: 2.56; } /* 752 × 294 px exacto */
  .yza-vi-bento-pair    { display: none; }
  .yza-vi-bento-agil       { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/7815a42d-f9de-4c6e-b0d4-30e878df2363.png'); }
  .yza-vi-bento-red        { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/24fa3295-3585-46b4-9d7a-8d2f6cf44d8f.png'); }
  .yza-vi-bento-productos  { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/8bf8d625-43f7-4de7-8e90-2efec2097216.png'); }
  .yza-vi-bento-beneficios { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/918dd857-8a4b-4e1c-b72c-b039659ac721.png'); }
}


/* ================================================================
   S4 – TEN A LA MANO LA SIGUIENTE INFORMACIÓN
   Layout: tarjeta trámite (izq/arriba) + carrusel (der/abajo)
   ================================================================ */
.yza-vi-info {
  background: var(--yza-vi-blanco);
  padding: 2.8rem 1.5rem 3.2rem;
}

.yza-vi-info-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 400px;
  margin: 1.8rem auto 0;
  align-items: start;
}

/* ── Tarjeta estática: Tu trámite es más rápido ── */
.yza-vi-tramite-card {
  background-image:    url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/25bce141-338c-49ac-a99b-6ce5acc6d01d.png');
  background-size:     100% auto;
  background-repeat:   no-repeat;
  background-position: top center;
  border-radius:       var(--yza-vi-radio);
  aspect-ratio:        1.11;      /* 328 × 296 px exacto */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.yza-vi-tramite-card.yza-vi-vis { opacity: 1; transform: none; }

/* ── Carrusel ── */
.yza-vi-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.18s, transform 0.6s ease 0.18s;
}
.yza-vi-carousel.yza-vi-vis { opacity: 1; transform: none; }

/* Fila con flechas + viewport */
.yza-vi-carousel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.yza-vi-carousel-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: var(--yza-vi-radio);
}

.yza-vi-carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.yza-vi-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1.12;             /* 1120 × 1000 / 328 × 293 px exacto */
  background-size:     100% auto;
  background-repeat:   no-repeat;
  background-position: top center;
  border-radius:       var(--yza-vi-radio);
}

/* Imágenes del carrusel — mobile */
.yza-vi-slide-receta    { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/5900c0a0-47b6-4645-8b7f-dc515f0a139b.png'); }
.yza-vi-slide-credencial { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/88410998-e7d1-4ef8-977c-b4b338c91ffa.png'); }
.yza-vi-slide-ine       { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/1358e55c-f124-4d65-bfe9-065fe1bcd07a.png'); }

/* ── Botones de flecha ── */
.yza-vi-carousel-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--yza-vi-azul-med);
  background: var(--yza-vi-blanco);
  color: var(--yza-vi-azul-med);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--yza-vi-t), color var(--yza-vi-t), transform var(--yza-vi-t);
}
.yza-vi-carousel-btn:hover {
  background: var(--yza-vi-azul-med);
  color: var(--yza-vi-blanco);
  transform: scale(1.1);
}
.yza-vi-carousel-btn:focus-visible {
  outline: 2px solid var(--yza-vi-azul-med);
  outline-offset: 2px;
}

/* ── Puntos indicadores ── */
.yza-vi-carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.yza-vi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C8D0E0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.yza-vi-dot.yza-vi-dot-act {
  background: var(--yza-vi-azul-med);
  transform: scale(1.35);
}

/* ── Tablet layout ── */
@media (min-width: 768px), (orientation: landscape) and (max-height: 600px) {
  .yza-vi-info-layout {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    align-items: center;          /* carrusel centrado verticalmente con tarjeta tramite */
  }
  /* Tramite: PLACEHOLDER — imagen tablet pendiente */
  .yza-vi-tramite-card {
    background-image:  url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/e696dcc2-0afe-4e6e-a08c-c09c35caf36d.png');
    background-color:  transparent;
    aspect-ratio:      1.11;      /* 303 × 273 px exacto */
    transform:         translateX(-20px);
  }
  .yza-vi-tramite-card.yza-vi-vis { transform: none; }
  /* Carrusel */
  .yza-vi-carousel { transform: translateX(20px); }
  .yza-vi-carousel.yza-vi-vis { transform: none; }
  .yza-vi-slide-receta {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/391b35d0-0eb5-4bf7-9f44-6a18a022c182.png');
    background-color: transparent;  /* 303 × 271 px exacto */
  }
  .yza-vi-slide-credencial { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/0f118e26-56d4-402d-94df-eafd4b8327ad.png'); }
  .yza-vi-slide-ine        { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/b1ece229-a2cf-43d0-a58d-9f8fdf2b87c7.png'); }
}

/* ── Desktop layout ── */
@media (min-width: 1200px) {
  .yza-vi-info-layout {
    max-width: 960px;
    gap: 24px;
    align-items: center;
  }
  .yza-vi-tramite-card {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/531f5a3b-759e-437e-8621-a82d4510530e.png');
    background-color: transparent;
    aspect-ratio:     1.11;       /* 1106 × 995 px exacto */
    transform:        translateX(-24px);
  }
  .yza-vi-tramite-card.yza-vi-vis { transform: none; }
  .yza-vi-carousel { transform: translateX(24px); }
  .yza-vi-carousel.yza-vi-vis { transform: none; }
  /* Carrusel imágenes desktop */
  .yza-vi-slide-receta    {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/b94e017d-671a-4b07-8d62-cd6b53421413.png');
    background-color: transparent;
  }
  .yza-vi-slide-credencial { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/4c52908c-2fd1-4f6e-b8a4-36720cb89bb8.png'); }
  .yza-vi-slide-ine        { background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/c3c89fcb-4a06-4e57-a629-a263bfd625af.png'); }
  .yza-vi-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.7rem;
  }
}


/* ================================================================
   S5 – ENCUENTRA TU FARMACIA MÁS CERCANA (MAPA)
   ================================================================ */
.yza-vi-mapa {
  position: relative;
  width: 100%;
  background-image:    url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/d2a98650-2881-43a7-88c1-72f12b080152.png');
  background-size:     100% auto;
  background-repeat:   no-repeat;
  background-position: top center;
  aspect-ratio:        0.9;       /* 328 × 364 px exacto */
  opacity: 0;
  transition: opacity 0.7s ease;
}
.yza-vi-mapa.yza-vi-vis { opacity: 1; }

/* Botón invisible posicionado sobre el visual "Encuéntrala" de la imagen.
   SOLO este elemento responde al clic — el resto de la imagen es inerte.
   Si la imagen cambia, ajustar top / left / width / height. */
.yza-vi-mapa-btn {
  position:      absolute;
  background:    transparent;
  border:        none;
  cursor:        pointer;
  border-radius: 50px;
  /* Mobile: botón centrado — ajustar top si no coincide exactamente */
  left:      50%;
  top:       42%;
  width:     64%;
  height:    10%;
  transform: translateX(-50%);
}
.yza-vi-mapa-btn:focus-visible {
  outline:        2px solid var(--yza-vi-azul-med);
  outline-offset: 3px;
  border-radius:  50px;
}

@media (min-width: 768px), (orientation: landscape) and (max-height: 600px) {
  .yza-vi-mapa {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/8aeae934-196b-4e23-8e10-04961c335e4f.png');
    aspect-ratio:     2.68;       /* 680 × 254 px exacto */
  }
  /* Tablet: botón en zona izquierda-inferior — ajustar top/left si no coincide */
  .yza-vi-mapa-btn {
    left:      3%;
    top:       72%;
    width:     23%;
    height:    18%;
    transform: none;
  }
}
@media (min-width: 1200px) {
  .yza-vi-mapa {
    background-image: url('https://image.farmaciasyza.mx/lib/fe2f117171640675761075/m/1/1a5e3b3c-b6de-41fb-9fac-b94b8b5fce35.png');
    aspect-ratio:     2.68;       /* 2260 × 842 px exacto */
  }
  /* Desktop: botón en zona izquierda-inferior — ajustar top/left si no coincide */
  .yza-vi-mapa-btn {
    left:   2.5%;
    top:    73%;
    width:  17%;
    height: 12%;
  }
}