/* =====================================================================
   🍔 COMBOS EN TARJETAS — assets/css/combos-cards.css
   =====================================================================
   2026-09-24 · Sale de locacion.css porque ahora lo usan DOS páginas:
     · las unidades con tienda (partials/seccion-combos-cards-usa.php),
       6 de USA y 4 de México, cada una con los combos de su país;
     · la home, con el selector USA · México (partials/seccion-combos-home.php).
   La home es HTML generado que no carga locacion.css: por eso archivo propio.
   ===================================================================== */

/* ═════════════ 🍔 COMBOS EN TARJETAS · sólo USA (2026-08-25) ═════════════
   Carlos, 2ª vuelta: "quita ese borde y todo eso, deja sólo los card, haz un
   título… quiero que se vea como los card de blogs".
   Así que esta sección es la MISMA anatomía que «Our Blog» de más abajo
   (.lblog): cabecera con antetítulo + título + botón a la derecha, y debajo
   la rejilla de tarjetas sueltas. Ni panel, ni marco, ni franja azul.
   Clases propias `lcc-` porque el carrusel del blog lo mueve un JS que busca
   .lblog-grid: compartir nombres le daría a manejar una rejilla ajena.
   🎨 Se queda el turquesa que ya tenía el bloque: encima está la galería
   (azul) y debajo los nachos (rojo), y es el respiro que pide la ley de
   ritmo §4.1 entre dos efectos pesados.                                    */
.lcc{background:linear-gradient(180deg,#07333c 0%,#052730 100%);
  padding:clamp(56px,8vh,96px) 0;color:#fff;position:relative;z-index:1}
/* 2026-09-24 · Carlos: «cambiamos el color de fondo si cambio de país para
   que se note la diferencia». USA se queda en su turquesa; México lleva el
   suyo en una capa encima que entra con opacidad (un degradado no se puede
   animar, la opacidad sí). data-pais lo pone el PHP en las locaciones y el
   selector en la home. */
.lcc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--lcc-mx,linear-gradient(180deg,#4a0d1c 0%,#2c0611 100%));
  opacity:0;transition:opacity .45s ease}
.lcc[data-pais="mx"]::before{opacity:1}
.lcc > .wrap{position:relative}
@media (prefers-reduced-motion:reduce){ .lcc::before{transition:none} }

/* ── cabecera · calcada de .lblog-head ── */
.lcc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:clamp(24px,3.4vh,38px)}
.lcc-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:3px;font-size:13px;color:var(--amarillo);margin:0 0 6px}
.lcc .sec-titulo{color:#fff;margin:0}
.lcc-todos{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:0 20px;border-radius:999px;text-decoration:none;
  font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:13px;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);transition:background .2s,border-color .2s,color .2s}
.lcc-todos:hover{background:var(--amarillo);border-color:var(--amarillo);color:#062b4e}
.lcc-todos:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ── la rejilla y la tarjeta ── */
.lcc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,30px)}
/* 2026-09-24 · México vende DOS combos, no tres. 1ª vuelta: tres columnas
   fijas (misma tarjeta que en USA, con un hueco a la derecha). */
/* …y en la 2ª vuelta (mismo día), Carlos: «solo esos dos card pero a todo
   lo ancho, como si fueran 3». Dos columnas a todo el ancho; la foto pasa a
   2:1 para que la tarjeta no mida el doble de alto que las de USA. */
.lcc-grid--par{grid-template-columns:repeat(2,minmax(0,1fr))}
.lcc-grid--par .lcc-foto{aspect-ratio:2/1}
/* «MXN» junto al precio: la tienda de México lo dice en cada producto */
.lcc-precio .lcc-moneda{font-size:11px;font-weight:600;letter-spacing:.8px;
  margin:3px 0 0 5px;color:rgba(255,255,255,.7)}
.lcc-card{display:flex;flex-direction:column;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
.lcc-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,0,.34)}

/* La foto: las de la propia tienda, que traen su fondo de estudio (turquesa,
   azul y rojo). Van A SANGRE —`cover`, sin padding— porque el fondo es parte
   de la foto: dejarlas en `contain` habría metido un marco muerto alrededor.
   ⚠️ El recuadro es 4/3 y no el 16/10 del blog: las tres vienen en 857×705,
   1553×1163 y 1450×1085, o sea 4/3 clavado. Con 16/10 se les comía una franja
   de arriba y otra de abajo, y en la del Happy Belly se perdía el plato. */
.lcc-foto{display:block;aspect-ratio:4/3;overflow:hidden;background:#062229}
.lcc-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lcc-card:hover .lcc-foto img{transform:scale(1.06)}

.lcc-body{padding:16px;display:flex;flex-direction:column;flex:1}
.lcc-tag{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.6px;
  font-size:12px;color:var(--amarillo);margin:0 0 8px}
.lcc-titulo{margin:0;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;font-size:clamp(17px,1.6vw,21px);line-height:1.2}
.lcc-titulo a{color:#fff;text-decoration:none}
.lcc-titulo a:hover{color:var(--amarillo)}
.lcc-titulo a:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* margin-top:auto → los pies quedan alineados entre tarjetas (ley E) */
.lcc-pie{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.lcc-precio{margin:0;display:inline-flex;align-items:flex-start;line-height:1;
  font-family:"Oswald",sans-serif;font-weight:700;color:#fff;font-size:27px}
.lcc-precio sup,.lcc-precio sub{font-size:13px;font-weight:700;margin-top:3px;
  vertical-align:baseline;bottom:0;color:var(--amarillo)}
.lcc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 20px;border-radius:999px;text-decoration:none;
  font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;font-size:12.5px;color:#fff;background:var(--verde);
  transition:transform .18s ease,filter .18s ease}
.lcc-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.lcc-btn:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.lcc-nota{font-family:"Museo Sans Rounded",sans-serif;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.6);text-align:center;margin:clamp(18px,2.4vh,26px) 0 0}

/* ── MÓVIL: carrusel, como el blog de la locación ──
   Apiladas, tres tarjetas dejan una columna larguísima. Mismo patrón que
   «Our Blog»: scroll-snap nativo, sin JS, con la vecina asomando para que se
   vea que hay más. El aire se lo quita el .wrap y lo pone la pista, para no
   abrir scroll horizontal en la página (la lección del 2026-08-01). */
@media (max-width:900px){
  /* 2026-08-25 · Carlos: "título de un lado y el botón del otro, cada uno en su
     extremo". Apilados se comían dos líneas de alto y el botón quedaba suelto
     bajo el título. En fila: el texto manda a la izquierda y el botón se pega a
     la derecha sin encoger. El título ya baja de tamaño con su clamp, y el
     botón se aprieta un poco para que quepan los dos hasta en 360px. */
  .lcc-head{flex-direction:row;align-items:flex-end;justify-content:space-between;
    gap:12px;flex-wrap:nowrap}
  .lcc-head > div{min-width:0}
  .lcc-todos{flex:0 0 auto;padding:0 14px;font-size:11.5px;letter-spacing:.6px}
  .lcc-eyebrow{font-size:11.5px;letter-spacing:2px}
  .lcc .wrap{padding-inline:0}
  .lcc-head,.lcc-nota{padding-inline:var(--m-aire,24px)}
  .lcc-grid{display:flex;grid-template-columns:none;min-width:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px;padding-inline:var(--m-aire,24px);
    scroll-padding-inline:var(--m-aire,24px);scrollbar-width:none}
  .lcc-grid::-webkit-scrollbar{display:none}
  .lcc-card{flex:0 0 78%;scroll-snap-align:start}
  .lcc-card:hover{transform:none;box-shadow:none}
}

/* 2026-08-25 · Carlos: "los legales, después de valid va abajo en mobile".
   El aviso se partía por donde cabía y dejaba «units.» / «de USA.» solos en la
   última línea. Ahora la segunda frase baja entera a su propia línea, y cada
   una se equilibra por su cuenta: ni viudas ni cortes a media idea. */
.lcc-nota span{text-wrap:pretty}
@media (max-width:900px){
  .lcc-nota .lcc-nota-usa{display:block}
}


/* ═════════════ 🇺🇸🇲🇽 SELECTOR DE PAÍS · sólo la home (2026-09-24) ═════════════
   Carlos eligió el «switch USA / México» para la home: el slider 3D sigue
   siendo el de USA, y este banner cambia tarjetas, precios, aviso y tienda
   según el país. Mismo lenguaje que el .seg de la tienda de Gift Card:
   píldora con la opción activa en amarillo. */
.lcc-acciones{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lcc-pais{display:inline-flex;padding:4px;gap:4px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.lcc-pais button{min-height:38px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.78);
  font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:12.5px;letter-spacing:1px;transition:background .2s,color .2s}
.lcc-pais button:hover{color:#fff}
.lcc-pais button[aria-pressed="true"]{background:var(--amarillo);color:#062b4e}
.lcc-pais button:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.lcc-panel[hidden]{display:none}
@media (max-width:900px){
  /* en móvil el título y «Go to the store» siguen en su fila; el selector
     baja a una fila propia, a todo el ancho, para que se toque cómodo */
  .lcc--pais .lcc-head{flex-wrap:wrap;row-gap:16px}
  .lcc--pais .lcc-acciones{display:contents}
  .lcc--pais .lcc-pais{order:3;width:100%}
  .lcc--pais .lcc-pais button{flex:1;min-height:42px}
}
/* Por debajo de 360px (iPhone SE) título y «Go to the store» no caben en
   una fila en la home —su Oswald sale ~25% más ancho que en las locaciones—
   y el botón caía a la izquierda, bajo el título. Se aprieta el título. */
@media (max-width:359px){
  .lcc--pais .sec-titulo{font-size:22px}
}
/* en móvil las tarjetas van en carrusel al 78%: ahí la foto vuelve a 4:3 */
@media (max-width:900px){
  .lcc-grid--par .lcc-foto{aspect-ratio:4/3}
}