/* =========================================================
   MONCHI BOBA TEA — hoja de estilos principal
   Paleta y tipografía tomadas de la maqueta.
   ========================================================= */

:root{
  --azul:        #01499B;   /* azul institucional (nav, footer, títulos) */
  --azul-fiesta: #00399C;   /* azul del banner de fiesta */
  --azul-claro:  #4B83B4;   /* botón de la sección Donas */
  --rojo:        #FF041B;   /* botón "Ordena ahora" de Favoritos */
  --negro:       #111111;
  --gris-texto:  #3A3A3A;
  --hueso:       #F7F7F9;   /* fondo secciones claras */
  --hueso-2:     #F2F3EB;   /* fondo sección sucursales */
  --blanco:      #FFFFFF;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --texto:   'Poppins', 'Segoe UI', system-ui, sans-serif;

  --radio:   18px;
  --radio-sm: 12px;
  --sombra:  0 10px 30px rgba(1, 73, 155, .10);
  --max:     1240px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  font-family:var(--texto);
  color:var(--gris-texto);
  background:var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto junto a los atributos width/height del HTML evita que la página
   "salte" mientras cargan las imágenes. */
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; }
button{ font:inherit; }

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

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--blanco); color:var(--azul); padding:12px 20px; border-radius:0 0 12px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid #FFD400; outline-offset:3px; border-radius:6px;
}

/* ---------- Tipografía de títulos ---------- */
.h2-blue{
  font-family:var(--display);
  color:var(--azul);
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--texto);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:.85em 2.1em;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--white{ background:var(--blanco); color:var(--azul); box-shadow:0 6px 18px rgba(0,0,0,.16); }
.btn--white:hover{ background:#EAF2FC; box-shadow:0 10px 24px rgba(0,0,0,.22); }

.btn--red{ background:var(--rojo); color:var(--blanco); box-shadow:0 6px 18px rgba(255,4,27,.32); }
.btn--red:hover{ background:#E20017; box-shadow:0 10px 26px rgba(255,4,27,.42); }

.btn--blue{ background:var(--azul-claro); color:var(--blanco); box-shadow:0 6px 18px rgba(1,73,155,.28); }
.btn--blue:hover{ background:var(--azul); box-shadow:0 10px 26px rgba(1,73,155,.38); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--azul);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.header.is-stuck{ box-shadow:0 6px 22px rgba(0,0,0,.20); }

.header__inner{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:0 24px;
  height:var(--header-h);
  display:flex; align-items:center; gap:24px;
}
.header__logo{ flex:0 0 auto; }
.header__logo img{ height:46px; width:auto; }

.nav{ margin-inline:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(18px, 3vw, 46px); }
.nav__link{
  color:var(--blanco);
  font-weight:700; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase;
  position:relative; padding:6px 2px; display:inline-block;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--blanco); border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }

.header__cta{ flex:0 0 auto; }
.nav__cta-mobile{ display:none; }

/* Hamburguesa */
.hamburger{
  display:none;
  width:44px; height:44px; padding:10px;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.hamburger span{
  display:block; height:3px; width:100%; background:var(--blanco); border-radius:3px;
  transition:transform .3s ease, opacity .2s ease;
}
.hamburger.is-open span:nth-child(1){ transform:translateY(10.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-10.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  margin-top:var(--header-h);
  min-height:clamp(420px, 62vw, 720px);
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.38) 100%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin-inline:auto; padding:0 24px;
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right;
  gap:clamp(18px, 3vw, 40px);
}
.hero__title{
  font-family:var(--display);
  color:var(--blanco);
  text-transform:uppercase;
  font-size:clamp(2.6rem, 8.2vw, 6.6rem);
  line-height:.92;
  letter-spacing:.005em;
  text-shadow:0 6px 26px rgba(0,0,0,.42);
}
.hero__btn{ align-self:center; }

/* =========================================================
   NOSOTROS
   ========================================================= */
.nosotros{ background:var(--hueso); padding:clamp(48px, 7vw, 90px) 0 clamp(20px, 3vw, 40px); }
.nosotros__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(24px, 5vw, 70px);
}
.nosotros__text p{
  margin:clamp(16px, 2.4vw, 28px) 0 0;
  max-width:46ch;
  font-size:clamp(.94rem, 1.2vw, 1.06rem);
  font-weight:500;
  line-height:1.7;
  color:var(--negro);
}
.nosotros__media img{
  width:100%;
  max-width:520px;
  margin-inline:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.14));
}

/* =========================================================
   FAVORITOS
   ========================================================= */
.favoritos{ background:var(--hueso); padding:clamp(10px, 2vw, 30px) 0 clamp(40px, 6vw, 80px); }
.favoritos__grid{
  display:grid;
  /* La columna de la izquierda va más estrecha que en el resto del sitio:
     con 26 bebidas, el ancho que suelta se lo llevan las tarjetas y las
     fotos de producto se ven más grandes. */
  grid-template-columns:minmax(220px, .66fr) 2fr;
  gap:clamp(20px, 3.4vw, 46px);
  align-items:start;
}
.favoritos__aside{ position:relative; padding-top:8px; }
.favoritos__intro{
  margin:12px 0 0;
  max-width:28ch;
  font-size:.92rem;
  line-height:1.55;
}
/* La carta son 26 bebidas: en escritorio el título, la mascota y el botón
   se quedan a la vista mientras se recorre la lista. */
@media (min-width: 961px){
  .favoritos__aside{ position:sticky; top:calc(var(--header-h) + 20px); }
}
.favoritos__mascota{
  width:clamp(120px, 13vw, 190px);
  margin:-14px 0 14px auto;
  margin-right:clamp(10px, 5vw, 70px);
  animation:flotar 3.4s ease-in-out infinite;
}
@keyframes flotar{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-12px) rotate(2deg); }
}

.cards{
  display:grid;
  /* auto-fill en vez de repeat(3): si la ventana no da para tres tarjetas
     decentes, baja a dos sola, sin esperar al salto de 720px. */
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:clamp(12px, 1.6vw, 22px);
}

.card{
  background:var(--blanco);
  border:3px solid var(--azul);
  border-radius:var(--radio);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  min-height:150px;
  box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(1,73,155,.20); }

.card__img{
  position:relative;              /* ancla la insignia del número */
  flex:0 0 44%;
  align-self:stretch;
  display:flex; align-items:center; justify-content:center;
}
.card__img img{
  max-height:152px; width:auto; object-fit:contain;
}

/* Número de la bebida. Las fotos del diseñador vienen limpias, sin el
   número encima, así que se dibuja como texto: se ve nítido a cualquier
   tamaño y queda dentro del texto alternativo de la tarjeta. */
.card__num{
  position:absolute; top:-2px; left:-4px; z-index:2;
  display:grid; place-items:center;
  min-width:38px; height:38px; padding:0 7px;
  border-radius:999px;
  background:var(--blanco);
  border:2px solid var(--azul);
  box-shadow:0 4px 12px rgba(1,73,155,.20);
  font-family:var(--display);
  font-size:1.05rem; line-height:1;
  color:var(--azul);
}
.card__body{ flex:1 1 auto; min-width:0; }
.card__desc{
  font-size:.62rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--negro);
  margin:0 0 10px;
}
.card__price{
  font-family:var(--display);
  color:var(--negro);
  font-size:clamp(1.5rem, 2.3vw, 2rem);
  line-height:1;
  display:flex; align-items:flex-start; gap:2px;
}
.card__price sup{
  font-size:.5em; line-height:1; margin-top:.22em; font-family:var(--texto); font-weight:800;
}
.card__note{
  margin:4px 0 0;
  font-size:.55rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8A8A8A;
}

/* =========================================================
   EXTRAS (al pie de la carta)
   ========================================================= */
.extras{
  margin-top:clamp(28px, 4vw, 48px);
  background:var(--blanco);
  border:3px solid var(--azul);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  display:grid;
  grid-template-columns:minmax(220px, .85fr) 1.5fr;
  gap:clamp(18px, 3vw, 44px);
  align-items:start;
}
.extras__title{
  font-family:var(--display);
  text-transform:uppercase;
  color:var(--azul);
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  line-height:1;
  margin:0 0 14px;
}
.extras__lista{ display:grid; gap:9px; }
.extras__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:7px;
  border-bottom:1px dashed #D3DAE5;
  font-weight:600; font-size:.9rem; color:var(--negro);
}
.extras__precio{
  font-family:var(--display);
  font-size:1.2rem; line-height:1;
  color:var(--negro);
  white-space:nowrap;
}
.extras__precio sup{ font-size:.5em; font-family:var(--texto); font-weight:800; }
.extras__leche{ margin:0 0 12px; font-size:.95rem; line-height:1.55; color:var(--negro); }
.extras__aviso{ margin:0; font-size:.82rem; line-height:1.65; color:#6C6C6C; }

/* =========================================================
   DONAS
   ========================================================= */
.donas{ background:var(--hueso); padding-bottom:clamp(30px, 5vw, 60px); }
.donas__inner{
  width:100%; max-width:1320px; margin-inline:auto;
  display:grid;
  grid-template-columns:1.05fr .8fr 1fr;
  align-items:center;
  gap:clamp(6px, 1.5vw, 20px);
  padding-inline:24px;
}
.donas__pareja img{
  width:100%; max-width:520px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.16));
}
.donas__animadas{
  width:100%; max-width:330px; justify-self:center;
  margin-left:clamp(-70px, -5vw, 0px);
  animation:flotar-suave 4.2s ease-in-out infinite;
}
@keyframes flotar-suave{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-14px); }
}
.donas__text h2{
  font-family:var(--display);
  text-transform:uppercase;
  color:var(--negro);
  font-size:clamp(1.7rem, 3.4vw, 3rem);
  line-height:1;
}
.donas__text .azul{ color:var(--azul); }
.donas__text .btn{ margin-top:clamp(16px, 2.4vw, 28px); }

/* =========================================================
   CAFÉ
   ========================================================= */
.cafe{
  position:relative;
  background:url("../img/fondo-cafe.webp") center/cover no-repeat;
  padding:clamp(44px, 6vw, 80px) 0;
  isolation:isolate;
}
.cafe::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(20, 9, 4, .30);
}
.cafe__title{
  font-family:var(--display);
  color:var(--blanco);
  text-transform:uppercase;
  text-align:center;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1;
  text-shadow:0 6px 22px rgba(0,0,0,.45);
  margin-bottom:clamp(24px, 3.4vw, 42px);
}
.cards--cafe{ grid-template-columns:repeat(4, 1fr); }
.cards--cafe .card{ min-height:132px; }
.cards--cafe .card__img{ flex:0 0 40%; }
.cards--cafe .card__img img{ max-height:110px; }
.card__name{
  font-family:var(--display);
  text-transform:uppercase;
  color:var(--negro);
  font-size:clamp(.95rem, 1.5vw, 1.3rem);
  line-height:1;
  margin:0 0 8px;
}
/* Monchi Pack: una sola tarjeta, centrada bajo los cuatro cafés. */
.pack{ margin-top:clamp(16px, 2.2vw, 26px); display:flex; justify-content:center; }
.card--pack{ width:100%; max-width:430px; }
.card--pack .card__img{ flex:0 0 34%; }
.card--pack .card__name{ margin-bottom:6px; }
.card--pack .card__desc{ margin-bottom:8px; }

.cafe__cta{ text-align:center; margin-top:clamp(24px, 3vw, 36px); }

/* =========================================================
   GALERÍA / PEDIDOS
   ========================================================= */
.galeria{ background:var(--blanco); }
.galeria__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(8px, 1.2vw, 16px);
  padding:clamp(8px, 1.2vw, 16px);
}
.galeria__item{
  position:relative; margin:0;
  border-radius:var(--radio); overflow:hidden;
}
.galeria__item img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1 / 1.1;
  transition:transform .45s ease;
}
.galeria__item:hover img{ transform:scale(1.04); }

/* Zonas clicables colocadas sobre los logos que ya trae la imagen 2.
   Los porcentajes corresponden a la posición de cada logo dentro de
   galeria-2.webp. */
.galeria__apps{ position:absolute; inset:0; }
.galeria__app{
  position:absolute;
  top:13.5%; height:16.5%;
  border-radius:14px;
  font-size:0;                 /* el rótulo ya está impreso en la imagen */
  transition:box-shadow .2s ease, transform .2s ease;
}
.galeria__app:nth-child(1){ left:3.5%;  width:18%; }   /* Uber Eats */
.galeria__app:nth-child(2){ left:24.5%; width:21%; }   /* Rappi     */
.galeria__app:nth-child(3){ left:46%;   width:19%; }   /* DiDi Food */
.galeria__app:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}

/* =========================================================
   FIESTA
   ========================================================= */
.fiesta{ background:var(--azul-fiesta); line-height:0; }
.fiesta__link{ display:block; position:relative; }
.fiesta__link img{ width:100%; height:auto; }
.fiesta__link::after{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background-color .25s ease;
}
.fiesta__link:hover::after{ background:rgba(255,255,255,.07); }

/* Versión móvil de la sección — sólo se muestra bajo 720px, donde el
   banner panorámico haría el texto ilegible (ver media query). */
.fiesta__resumen{ display:none; }
.fiesta__mascota{ width:120px; margin:0 auto 14px; }
.fiesta__resumen h2{
  font-family:var(--display);
  text-transform:uppercase;
  color:var(--blanco);
  font-size:clamp(1.9rem, 9vw, 2.6rem);
  line-height:.98;
  margin-bottom:16px;
}
.fiesta__sabores{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  margin-bottom:20px;
}
.fiesta__sabores li{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:6px 14px;
  font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blanco);
}

/* =========================================================
   SUCURSALES
   ========================================================= */
.sucursales{ background:var(--hueso-2); padding:clamp(44px, 6vw, 80px) 0; }
.sucursales__title{
  font-family:var(--display);
  text-transform:uppercase; text-align:center;
  color:var(--negro);
  font-size:clamp(1.8rem, 4.4vw, 3.1rem);
  line-height:1;
  margin-bottom:clamp(24px, 3.4vw, 40px);
}
.sucursales__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 2vw, 26px);
}
.sucursal{ text-align:center; }
.sucursal__foto{
  border-radius:var(--radio-sm); overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  aspect-ratio:4 / 3; background:var(--blanco);
}
.sucursal__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.sucursal:hover .sucursal__foto img{ transform:scale(1.06); }
.sucursal__nombre{
  font-family:var(--display);
  text-transform:uppercase;
  color:var(--azul);
  font-size:clamp(.9rem, 1.45vw, 1.25rem);
  line-height:1.1;
  margin:14px 0 4px;
}
.sucursal__dir{
  font-size:.74rem; font-weight:500; color:#6C6C6C; margin:0 0 8px;
}
.sucursal__mapa{
  display:inline-block;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--azul); border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .2s ease;
}
.sucursal__mapa:hover{ border-color:var(--azul); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--azul); color:var(--blanco); }
.footer__inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(18px, 3vw, 46px);
  padding-block:clamp(22px, 3vw, 34px);
}
.footer__logo img{ height:58px; width:auto; }
.footer__delivery{ height:54px; width:auto; }
.footer__nav{
  display:flex; gap:clamp(16px, 2.6vw, 40px); margin-inline:auto;
}
.footer__nav a{
  font-weight:700; font-size:.8rem; letter-spacing:.11em; text-transform:uppercase;
  opacity:.92; transition:opacity .2s ease;
}
.footer__nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:5px; }
.footer__social{ display:flex; gap:14px; }
.footer__social a{
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--blanco); transition:transform .2s ease, opacity .2s ease;
}
.footer__social svg{ width:100%; height:100%; }
.footer__social a:hover{ transform:translateY(-3px) scale(1.06); }

.footer__legal{
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.74rem; text-align:center; padding-block:14px;
}
.footer__legal p{ margin:0; opacity:.82; }
.footer__legal a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:var(--blanco);
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float svg{ width:34px; height:34px; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 32px rgba(0,0,0,.34); }

/* =========================================================
   ANIMACIÓN DE ENTRADA
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .cards--cafe{ grid-template-columns:repeat(2, 1fr); }
  .sucursales__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 960px){
  :root{ --header-h:66px; }

  .header__cta{ display:none; }
  .hamburger{ display:flex; margin-left:auto; }

  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:var(--azul);
    margin:0;
    display:grid; gap:8px;
    padding:18px 24px 26px;
    box-shadow:0 18px 30px rgba(0,0,0,.24);
    transform:translateY(-130%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  /* Mientras está cerrado, js/main.js le pone el atributo `inert`: eso lo
     saca del orden de tabulación y del árbol de accesibilidad, de modo que
     no se puede tabular hasta enlaces que están fuera de pantalla. */
  .nav[inert]{ pointer-events:none; }
  .nav.is-open{ transform:translateY(0); }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:4px; }
  .nav__link{ display:block; width:100%; padding:12px 2px; font-size:.95rem; }
  .nav__cta-mobile{ display:inline-flex; margin-top:10px; align-self:flex-start; }

  .hero__content{ align-items:center; text-align:center; }
  /* En escritorio el texto va a la derecha y basta un degradado lateral.
     Centrado sobre la foto necesita un velo uniforme para que el blanco
     mantenga contraste sobre la carta clara del fondo. */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.28) 0%, rgba(0,0,0,.46) 48%, rgba(0,0,0,.22) 100%);
  }

  .nosotros__grid{ grid-template-columns:1fr; }
  .nosotros__media{ order:-1; }
  .nosotros__media img{ max-width:360px; }
  .nosotros__text p{ max-width:none; }

  .favoritos__grid{ grid-template-columns:1fr; }
  .favoritos__aside{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:10px 18px; margin-bottom:22px;
  }
  .favoritos__aside .h2-blue{ grid-column:1; }
  .favoritos__intro{ grid-column:1; max-width:none; font-size:.86rem; margin-top:0; }
  .favoritos__mascota{ grid-column:2; grid-row:1 / span 2; margin:0; width:120px; }
  .favoritos__aside .btn{ grid-column:1; justify-self:start; }

  .donas__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .donas__pareja img{ max-width:420px; }
  .donas__animadas{ margin-left:0; max-width:250px; }

  .galeria__grid{ grid-template-columns:1fr; }
  .galeria__item img{ aspect-ratio:4 / 3; }
  .galeria__item--pedidos img{ aspect-ratio:auto; }
}

@media (max-width: 720px){
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .card{ min-height:0; flex-direction:column; text-align:center; padding:16px 12px; }
  /* Con la tarjeta en columna la foto manda el alto, y las del diseñador
     aguantan bastante más que el tope de antes. */
  .card__img{ flex:0 0 auto; }
  .card__img img{ max-height:155px; }
  .cards--cafe .card__img img{ max-height:130px; }
  .card__price{ justify-content:center; }

  /* El banner de fiesta es muy panorámico: a este ancho su texto quedaría
     ilegible, así que se sustituye por la misma información compuesta con
     texto real. En escritorio se sigue mostrando el banner original. */
  .fiesta__link{ display:none; }
  .fiesta__resumen{
    display:block;
    text-align:center;
    line-height:normal;
    padding:34px 24px 40px;
  }

  .footer__inner{ justify-content:center; text-align:center; }
  .footer__nav{ order:3; width:100%; justify-content:center; flex-wrap:wrap; margin:0; }
  .footer__social{ order:4; width:100%; justify-content:center; }
}

@media (max-width: 520px){
  .cards, .cards--cafe{ grid-template-columns:1fr; }
  .card{ flex-direction:row; text-align:left; }
  .card__price{ justify-content:flex-start; }
  .sucursales__grid{ grid-template-columns:1fr; }
  .hero__title{ font-size:clamp(2.2rem, 12vw, 3.4rem); }

  /* Aquí había un tope de 78 px de alto para las fotos de producto: eran
     recortes de la maqueta con ~100 px de detalle real, y un celular, que
     pinta 3 píxeles por punto de pantalla, dejaba la ampliación a la vista.
     Las fotos del diseñador (600x1000 px) sí tienen detalle de sobra, así
     que se pintan al tamaño que les toca. Ver README, "Fotos de producto". */
  .card__img{ flex:0 0 32%; }
  .card__img img{ max-height:132px; }
  .cards--cafe .card__img img{ max-height:112px; }

  /* La tarjeta la manda el texto, como en una carta de menú. */
  .card, .cards--cafe .card{ min-height:0; padding:14px; }
  .card__desc{ font-size:.76rem; margin-bottom:8px; }
  .card__note{ font-size:.62rem; }
  .card__name{ font-size:.92rem; }
  .card__num{ min-width:32px; height:32px; font-size:.9rem; top:-6px; left:-8px; }

  .extras{ grid-template-columns:1fr; padding:20px; }
}

/* =========================================================
   PÁGINA DE DESCARGA (descargar.html)
   Uso interno: la usan las sucursales para instalar el punto
   de venta en una computadora nueva.
   ========================================================= */
/* Cabecera sin menú: el único botón se va al extremo derecho, donde en el
   sitio queda "Ordena ahora". */
.header--simple .header__cta{ margin-left:auto; display:inline-flex; }

.descarga{
  padding-top:calc(var(--header-h) + clamp(40px, 6vw, 72px));
  padding-bottom:clamp(56px, 8vw, 96px);
  background:var(--hueso);
  min-height:100vh;
}
.descarga__inner{ max-width:760px; }

.descarga__kicker{
  margin:0 0 10px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--azul-claro);
}
.descarga__title{
  font-family:var(--display);
  color:var(--azul);
  font-size:clamp(2.1rem, 6vw, 3.6rem);
  line-height:.98;
  text-transform:uppercase;
}
.descarga__lead{
  margin:18px 0 0;
  font-size:clamp(1rem, 2.2vw, 1.1rem);
  line-height:1.6;
  max-width:56ch;
}

/* ---------- Tarjeta de descarga ---------- */
.descarga__card{
  margin-top:clamp(28px, 4vw, 40px);
  background:var(--blanco);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:clamp(22px, 3.4vw, 30px);
  display:flex; align-items:center; flex-wrap:wrap; gap:20px;
}
.descarga__meta{ flex:1 1 240px; min-width:0; }
.descarga__version{
  margin:0;
  font-family:var(--display);
  font-size:1.5rem; letter-spacing:.02em; text-transform:uppercase;
  color:var(--azul);
}
.descarga__detalle{ margin:6px 0 0; font-size:.86rem; opacity:.75; }
.descarga__btn{ flex:0 0 auto; }

/* Cuando no se pudo consultar la versión, el botón lleva a la lista de
   publicaciones en vez de al archivo: se dice, para que nadie espere que
   empiece a bajar solo. */
.descarga__card--manual .descarga__btn::after{
  content:' en GitHub';
  font-weight:400; text-transform:none; letter-spacing:.02em;
}

.descarga__auto{
  margin:14px 0 0;
  font-size:.82rem; line-height:1.6; opacity:.72;
}
.descarga__auto a{
  font-weight:700; color:var(--azul);
  text-decoration:underline; text-underline-offset:3px;
}

.descarga__nota{
  margin:18px 0 0;
  font-size:.9rem; line-height:1.6;
  background:#FFF8E1;
  border-left:4px solid #FFC400;
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  padding:14px 18px;
}
.descarga__nota strong{ color:var(--negro); }

/* ---------- Pasos ---------- */
.descarga__h2{
  margin:clamp(44px, 6vw, 64px) 0 0;
  font-family:var(--display);
  color:var(--azul);
  font-size:clamp(1.5rem, 3.4vw, 2.1rem);
  text-transform:uppercase;
  line-height:1.05;
}
.pasos{ counter-reset:paso; margin:24px 0 0; padding:0; list-style:none; }
.paso{
  counter-increment:paso;
  position:relative;
  padding:0 0 0 58px;
  margin-top:22px;
}
.paso::before{
  content:counter(paso);
  position:absolute; left:0; top:0;
  width:38px; height:38px; border-radius:50%;
  background:var(--azul); color:var(--blanco);
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.15rem;
}
.paso h3{
  font-size:1.02rem; font-weight:700; color:var(--negro);
  margin:6px 0 4px;
}
.paso p{ margin:0; font-size:.94rem; line-height:1.6; }

/* ---------- Avisos ---------- */
.avisos{ margin-top:clamp(36px, 5vw, 52px); display:grid; gap:14px; }
.aviso{
  margin:0;
  background:var(--blanco);
  border-radius:var(--radio-sm);
  padding:16px 20px;
  font-size:.92rem; line-height:1.6;
  border-left:4px solid var(--azul-claro);
}
.aviso strong{ color:var(--azul); }
.aviso--ojo{ border-left-color:var(--rojo); }
.aviso--ojo strong{ color:var(--rojo); }

/* ---------- Enlace discreto en el pie del sitio ---------- */
.footer__interno{
  opacity:.62;
  font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  transition:opacity .2s ease;
}
.footer__interno:hover{ opacity:1; }
.footer__interno-linea{ margin:6px 0 0; }

@media (max-width: 560px){
  .descarga__card{ flex-direction:column; align-items:stretch; text-align:center; }
  /* Sin esto el bloque de la versión se estira y deja un hueco enorme
     entre el texto y el botón. */
  .descarga__meta{ flex:0 0 auto; }
  .descarga__btn{ width:100%; }
}