/* =============================================================================
   ANDERSON'S GIFT CARD v2 · TIENDA (app shell + pantallas)
   -----------------------------------------------------------------------------
   Escrito MÓVIL PRIMERO. Todo lo que hay antes del bloque 12 es la versión de
   teléfono; el escritorio son unos pocos ajustes al final.

   El flujo son 5 pantallas: las cuatro primeras en un panel angosto y el
   checkout como página completa (entrega + programación + pago + pedido).

   LA IDEA
   -------
   No es una página web con pasos: es una app. Tres reglas que se respetan
   en todo el archivo:

     1. El pulgar manda. La acción principal vive SIEMPRE en una barra fija
        abajo, dentro del alcance del dedo. Nunca hay que estirarse arriba.
     2. Una tarea por pantalla. Nada de formularios largos con scroll infinito.
     3. Las pantallas se deslizan, no parpadean. El usuario siempre sabe si
        avanzó o retrocedió.

   ÍNDICE
     1  Contenedor de la app
     2  Encabezado fijo
     3  Barra de progreso
     4  Pantallas y sus transiciones
     5  Barra de acción fija (abajo)
     6  Botones
     7  Campos de formulario
     8  Selector de dos opciones (segmented)
     9  Catálogo: pestañas y carrusel
    10  Montos y contador
    11  Carrito y resumen
    12  Escritorio
   ============================================================================= */


/* ===========================================================================
   1 · CONTENEDOR DE LA APP
   ---------------------------------------------------------------------------
   En las cuatro primeras pantallas la app se mantiene angosta: en laptop se ve
   como un panel centrado de 760px. El checkout es la excepción y se ensancha a
   1180px, porque ahí hacen falta dos columnas (datos + pedido).
   =========================================================================== */
/* El documento entero es una columna: encabezado · tienda · pie.
   Así el pie siempre queda al fondo aunque el contenido sea corto. */
body{
  display:flex;
  flex-direction:column;
  min-height:100dvh;              /* dvh = alto real, sin la barra del navegador móvil */
}

.app{
  position:relative;
  width:100%;
  max-width:var(--ancho-max);
  margin:0 auto;
  /* deja libre el encabezado fijo del sitio */
  margin-top:calc(var(--nav-h) + var(--safe-top));
  background:var(--bg);
  display:flex;
  flex-direction:column;
  flex:1;
}


/* ===========================================================================
   2 · ENCABEZADO FIJO
   =========================================================================== */
.app-header{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--ancho-max);
  z-index:100;

  height:calc(var(--header-h) + var(--safe-top));
  padding-top:var(--safe-top);     /* respeta el notch */

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-inline:16px;

  background:color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.09);
}

/* Botón de volver: aparece solo cuando hay pantalla anterior */
.btn-volver{
  width:38px; height:38px;
  flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  transition:background var(--t-rapido);
}
.btn-volver:active{ background:rgba(255,255,255,.14) }
.btn-volver svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2;
                 stroke-linecap:round; stroke-linejoin:round }
.btn-volver[hidden]{ display:none }

.app-header .logo{ height:26px; width:auto; margin-inline:auto }

/* Botón del carrito con su globito de cantidad */
.btn-carrito{
  position:relative;
  width:38px; height:38px;
  flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  transition:background var(--t-rapido);
}
.btn-carrito:active{ background:rgba(255,255,255,.14) }
.btn-carrito svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7;
                  stroke-linecap:round; stroke-linejoin:round }

.globito{
  position:absolute; top:2px; right:1px;
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--taupe);
  color:#fff;
  font-size:14px; font-weight:800;
  display:grid; place-items:center;
  border:1.5px solid var(--navy);
  transition:transform var(--t);
}
.globito[hidden]{ display:none }
/* Latido cuando se agrega algo al carrito (lo dispara el JS) */
.globito.late{ animation:latido .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes latido{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.45)} }


/* ===========================================================================
   3 · BARRA DE PROGRESO
   ---------------------------------------------------------------------------
   Una línea finita bajo el encabezado. Sustituye al típico "Paso 2 de 5":
   se entiende de un vistazo y no ocupa espacio.
   =========================================================================== */
/* ⚠️ Va anclada a --nav-h (el encabezado del SITIO, 70px), no a --header-h.
   Estuvo colgada de --header-h (58px), que era la altura de la barra compacta
   de la app: quedaba DENTRO de la franja del nav y, con menos z-index, tapada.
   No se veía en ningún tamaño de pantalla. */
.progreso{
  position:fixed;
  top:calc(var(--nav-h) + var(--safe-top));
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--ancho-max);
  height:2px;
  background:rgba(22,32,47,.10);
  z-index:1001;                  /* por encima del nav, que va en 1000 */
}
.progreso i{
  display:block; height:100%;
  width:0;                                   /* lo mueve el JS */
  background:linear-gradient(90deg,var(--taupe),var(--taupe-2));
  transition:width var(--t-suave);
}


/* ===========================================================================
   4 · PANTALLAS
   ---------------------------------------------------------------------------
   Todas las pantallas viven en el DOM a la vez; solo una tiene .activa.
   Se desplazan lateralmente según la dirección de navegación, que el JS
   marca en el contenedor con data-dir="adelante" | "atras".
   =========================================================================== */
/* El encabezado del sitio es fijo, así que el contenido arranca por debajo. */
.vistas{
  flex:1;
  padding-top:8px;
  position:relative;
}

.vista{
  display:none;
  padding:14px 20px 16px;
  animation:entra var(--t-suave) both;
}
.vista.activa{ display:block }

/* Entrada por la derecha (avanzando) */
@keyframes entra{
  from{ opacity:0; transform:translateX(26px) }
  to  { opacity:1; transform:translateX(0) }
}
/* Entrada por la izquierda (volviendo) */
[data-dir="atras"] .vista.activa{ animation-name:entra-atras }
@keyframes entra-atras{
  from{ opacity:0; transform:translateX(-26px) }
  to  { opacity:1; transform:translateX(0) }
}

/* Encabezado de cada pantalla.
   Centrado: la pregunta es lo único que importa en esa pantalla, y centrada
   se lee antes. Lo de abajo (campos, opciones) sigue alineado a la izquierda,
   que es como se llenan los formularios. */
.vista-cab{
  margin-bottom:22px;
  text-align:center;
}
.vista-cab h1{ margin-top:5px }


/* ===========================================================================
   5 · BARRA DE ACCIÓN FIJA
   ---------------------------------------------------------------------------
   El botón que hace avanzar. Siempre abajo, siempre visible, siempre a la
   misma altura. El degradado evita que el contenido se corte de golpe.
   =========================================================================== */
/* Es `sticky`, no `fixed`, a propósito: mientras haya contenido por debajo el
   botón se queda pegado al borde inferior —el comportamiento de app que
   buscamos— pero al llegar al final del panel se despega y deja ver el pie del
   sitio. Con `fixed` el pie quedaba tapado para siempre. */
.barra-accion{
  position:sticky;
  bottom:0;
  z-index:90;

  padding:14px 20px calc(14px + var(--safe-bottom));
  background:var(--bg);                 /* fondo solido: el subtotal ya no se transparenta al hacer scroll */
  box-shadow:0 -10px 24px -10px rgba(0,0,0,.18);
}
.barra-accion::before{                  /* fade sutil por ENCIMA de la barra, para desvanecer el contenido detras */
  content:"";position:absolute;left:0;right:0;top:-22px;height:22px;
  background:linear-gradient(to top,var(--bg),transparent);pointer-events:none;
}

/* Renglón opcional sobre el botón: total, aviso, letra chica */
.barra-nota{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:11px;
  font-size:14px;
  color:var(--muted);
}
.barra-nota b{ color:var(--text); font-size:17px; font-weight:800 }


/* ===========================================================================
   6 · BOTONES
   =========================================================================== */
.btn{
  width:100%;
  min-height:54px;                 /* cómodo para el pulgar */
  padding:16px 24px;
  border-radius:var(--r-lg);
  font-size:15px;
  font-family:'Quicksand',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:transform var(--t-rapido), background var(--t-rapido), opacity var(--t-rapido);
}
/* Hundir al tocar: el gesto que hace que se sienta app */
.btn:active{ transform:scale(.975) }

.btn-primario{
  background:var(--navy);
  color:#fff;
  box-shadow:var(--sh);
}
.btn-primario:active{ background:#0d1119 }

.btn-secundario{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--border-2);
  min-height:50px;
}

.btn-taupe{
  background:var(--taupe);
  color:#fff;
  box-shadow:0 10px 26px -12px rgba(76,93,112,.75);
}

/* Deshabilitado: se ve apagado pero NO se esconde, para que no salte el layout */
.btn[disabled]{
  opacity:.36;
  pointer-events:none;
}

/* Botón de texto, sin caja */
.btn-texto{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:10px;
}


/* ===========================================================================
   7 · CAMPOS DE FORMULARIO
   =========================================================================== */
.campo{ margin-bottom:18px }

.campo label{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-bottom:7px;
}

/* Sin relleno de color: el campo se reconoce por el borde, no por un bloque
   pintado. Dentro de un card blanco el relleno se veía como una mancha. */
.campo input,
.campo textarea{
  width:100%;
  padding:14px 16px;
  background:transparent;
  border:2px solid var(--border-2);
  border-radius:var(--r);

  /* 16px es el mínimo que evita que iOS haga zoom al enfocar un campo.
     No bajar de aquí. */
  font-size:16px;

  transition:border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--muted-2) }

.campo input:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--taupe);
  box-shadow:none;
}

.campo textarea{ min-height:112px; resize:vertical; line-height:1.5 }

/* ---------------------------------------------------------------------------
   Dos campos en una fila
   ---------------------------------------------------------------------------
   En el teléfono van uno debajo del otro; a partir de 768px, lado a lado.
   La regla de escritorio está en el bloque 12.
   -------------------------------------------------------------------------- */
.fila-2{ display:grid; gap:0 18px }

/* Ayuda bajo el campo */
/* Indicativos a 12px: son apoyo, no contenido principal. */
.campo .ayuda{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* Estado de error — lo enciende el JS agregando .con-error al .campo */
.campo.con-error input,
.campo.con-error textarea{
  border-color:var(--error);
  box-shadow:none;
}
.campo .msg-error{
  display:none;
  font-size:12px;
  font-weight:700;
  color:var(--error);
  margin-top:6px;
}
.campo.con-error .msg-error{ display:block }

/* Contador de caracteres del mensaje */
.contador{
  text-align:right;
  font-size:12px;
  color:var(--muted-2);
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}


/* ===========================================================================
   8 · SELECTOR DE DOS OPCIONES
   ---------------------------------------------------------------------------
   Para "¿Regalo o para mí?" y "¿Correo o link?". Es un segmented control:
   se lee de un golpe y se toca sin apuntar.
   =========================================================================== */
.seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:22px;
}

.seg-op{
  padding:15px 14px;
  background:transparent;
  border:2px solid var(--border-2);
  border-radius:var(--r);
  text-align:left;
  transition:border-color var(--t-rapido), background var(--t-rapido), transform var(--t-rapido);
}
.seg-op:active{ transform:scale(.975) }

.seg-op b{ display:block; font-size:15px; font-weight:800 }
.seg-op span{ display:block; font-size:14px; color:var(--muted); margin-top:3px }

/* Seleccionada */
/* Seleccionado = BORDE taupe, sin relleno. Mismo criterio que los campos:
   lo elegido se marca con el borde, no pintando el bloque entero. El doble
   trazo (borde + línea interior) lo hace inconfundible sin ensuciar. */
.seg-op[aria-checked="true"]{
  border-color:var(--taupe);
  background:transparent;
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--taupe);
}
.seg-op[aria-checked="true"] span{ color:var(--muted) }


/* ===========================================================================
   9 · CATÁLOGO: PESTAÑAS Y CARRUSEL
   =========================================================================== */

/* --- Estructura de la pantalla de diseño ---------------------------------
   Teléfono : desplegable de categorías arriba + tarjeta debajo.
   Escritorio: categorías en columna a la izquierda, tarjeta a la derecha.
   En los dos casos todo cabe sin scroll.
   ------------------------------------------------------------------------ */
.diseno-layout{ display:block }

.diseno-main{
  min-width:0;               /* deja que el carrusel se encoja dentro del grid */
}

/* --- Categorías · desplegable (teléfono) --------------------------------- */
.cats{ display:none }        /* la lista en columna es solo de escritorio */

.cats-movil{
  position:relative;
  margin-bottom:16px;
}
.cats-movil select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  padding:14px 42px 14px 16px;
  background:transparent;
  border:2px solid var(--border-2);
  border-radius:var(--r);
  font-size:15px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
}
.cats-movil select:focus{
  outline:none;
  border-color:var(--taupe);
  box-shadow:none;
}
.cats-movil svg{
  position:absolute;
  right:15px; top:50%;
  transform:translateY(-50%);
  width:19px; height:19px;
  pointer-events:none;
  stroke:var(--muted); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- Carrusel de diseños -------------------------------------------------
   UNA sola tarjeta al frente. Nada de asomar la siguiente: distraía y hacía
   que la tarjeta elegida se viera chica.

   Se pasa de dos maneras, las dos funcionan siempre:
     · con las flechas de los lados
     · deslizando con el dedo (scroll con imán)

   La tarjeta que queda centrada ES la seleccionada — no hay que tocarla
   además. El JS sincroniza la selección al terminar el desplazamiento.
   ------------------------------------------------------------------------ */
.carrusel-wrap{
  position:relative;
  /* Deja el hueco de las flechas a los lados para que no se encimen */
  padding:0 42px;
  margin:0 auto;

  /* La tarjeta no necesita ser enorme para elegirla; con este tope se ve
     completa y la pantalla entera cabe sin scroll. */
  max-width:320px;
}

/* Con un solo diseño en la categoría no hay nada que pasar: fuera flechas
   y puntos, y la tarjeta ocupa todo el ancho disponible. */
.diseno-main[data-uno] .nav-carrusel,
.diseno-main[data-uno] .puntos{ display:none }
.diseno-main[data-uno] .carrusel-wrap{ padding:0 }

.carrusel{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 0 6px;

  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carrusel::-webkit-scrollbar{ display:none }

/* Cada tarjeta ocupa TODO el ancho disponible: solo se ve una */
.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;         /* no se salta tarjetas de un manotazo */
  position:relative;
}

/* Flechas de los lados */
.nav-carrusel{
  position:absolute;
  top:calc(50% - 22px);            /* centrada sobre la tarjeta, no sobre el pie */
  transform:translateY(-50%);
  z-index:4;

  width:36px; height:36px;
  border-radius:50%;
  background:var(--surf);
  border:1px solid var(--border);
  box-shadow:var(--sh-sm);
  display:grid; place-items:center;
  color:var(--text);
  transition:all var(--t-rapido);
}
.nav-carrusel.izq{ left:0 }
.nav-carrusel.der{ right:0 }
.nav-carrusel:active{ transform:translateY(-50%) scale(.88) }
.nav-carrusel svg{ width:18px; height:18px; stroke:currentColor; fill:none;
                   stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* Al llegar al extremo la flecha se apaga, pero sigue ocupando su lugar
   para que la tarjeta no brinque */
.nav-carrusel[disabled]{ opacity:.28; pointer-events:none }

/* Palomita de seleccionado */
.slide .marca-sel{
  position:absolute; top:9px; right:9px;
  width:25px; height:25px;
  border-radius:50%;
  background:var(--navy);
  display:grid; place-items:center;
  opacity:0; transform:scale(.5);
  transition:all var(--t);
  z-index:3;
}
.slide.sel .marca-sel{ opacity:1; transform:scale(1) }
.slide .marca-sel svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:3;
                       stroke-linecap:round; stroke-linejoin:round }

/* Pie del slide: nombre del diseño */
.slide-pie{
  text-align:center;
  margin-top:9px;
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
}

/* Puntitos indicadores bajo el carrusel */
.puntos{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:4px;
}
.punto{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--border-2);
  transition:all var(--t);
}
.punto.on{ background:var(--taupe); width:18px; border-radius:3px }

/* Contador "3 / 17" para cuando hay demasiados diseños para puntitos */
.puntos.es-contador{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}

/* Aviso de que la tarjeta sirve en todos lados */
.aviso{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:var(--surf-2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:13px 14px;
  margin-top:18px;
  font-size:14px;
  color:var(--muted);
}
.aviso svg{ width:17px; height:17px; flex:none; margin-top:1px;
            stroke:var(--taupe); fill:none; stroke-width:2;
            stroke-linecap:round; stroke-linejoin:round }


/* ===========================================================================
   10 · MONTOS Y CONTADOR
   =========================================================================== */

/* --- Montos --------------------------------------------------------------
   Ya no hay campo de monto libre: solo los importes sugeridos. Se quitó para
   bajar la altura de la pantalla. Para reactivarlo habría que devolver el
   input y sus manejadores en index.html y js/tienda.js.
   ---------------------------------------------------------------------- */

/* --- Montos sugeridos ---------------------------------------------------- */
.montos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:26px;
}
.monto-op{
  padding:13px 6px;
  background:transparent;
  border:2px solid var(--border-2);
  border-radius:var(--r-sm);
  font-size:14.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:all var(--t-rapido);
}
.monto-op:active{ transform:scale(.95) }
.monto-op[aria-pressed="true"]{
  background:transparent;
  border-color:var(--taupe);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--taupe);
}

/* --- Contador de cantidad ------------------------------------------------ */
.contador-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 16px;
  background:var(--surf);
  border:1.5px solid var(--border);
  border-radius:var(--r);
}
.contador-fila .et{ font-size:14.5px; font-weight:700 }
.contador-ctrl{ display:flex; align-items:center; gap:14px }
.contador-ctrl .val{
  min-width:26px;
  text-align:center;
  font-size:17px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.contador-ctrl button{
  width:36px; height:36px;
  border-radius:50%;
  border:1.5px solid var(--border-2);
  display:grid; place-items:center;
  font-size:20px; line-height:1;
  transition:all var(--t-rapido);
}
.contador-ctrl button:active{ transform:scale(.88) }
.contador-ctrl button[disabled]{ opacity:.3; pointer-events:none }


/* ===========================================================================
   11 · EL PEDIDO (dentro del checkout)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   CHECKOUT · página completa
   ---------------------------------------------------------------------------
   Los cuatro primeros pasos viven en un panel angosto, uno-a-la-vez. El
   checkout no: ahí el cliente necesita ver TODO junto —a quién le llega,
   cuándo, cómo paga y qué está comprando— así que deja de ser un panel
   flotante y pasa a ser una página normal, a todo el ancho.

   El JS pone data-checkout en el contenedor al entrar a esa pantalla.
   -------------------------------------------------------------------------- */
.app[data-checkout]{
  max-width:1180px;

  /* Sin recorte: cualquier overflow en un ancestro anula el position:sticky
     del pedido y se iría con el scroll. */
  overflow:visible;
}

/* Mismo motivo, un nivel más arriba */
html:has(.app[data-checkout]){ overflow-x:visible }
body:has(.app[data-checkout]){ overflow-x:visible }

/* Y como aquí no se recorta nada, la pantalla entra sin deslizamiento
   lateral: solo se funde. Si no, asomaría una barra horizontal. */
.app[data-checkout] .vista{ animation-name:aparece }
@keyframes aparece{ from{opacity:0} to{opacity:1} }

/* Bloques del checkout: entrega · programación · pago */
.bloque{
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  margin-bottom:16px;
}
.bloque-tit{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.3px;
  margin-bottom:16px;
}
/* Dentro de un bloque blanco los campos van en hueso, para que se distingan */
.bloque .seg-op{ background:transparent }
.bloque .seg-op[aria-checked="true"]{ background:transparent }

/* --- Medios de pago + sello de compra segura ------------------------------
   Traído tal cual de Frogs Shop (css/frogs.css · .pd-pay), incluidas las
   medidas: 28px de alto la fila, 26px máximo cada logo y 32px el sello.
   Los logos a la izquierda, el sello a la derecha, separados por una línea.
   ---------------------------------------------------------------------- */
.pd-pay{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
}
/* `display:contents` hace que los logos sean hijos directos del flex de
   arriba, así se reparten junto con el sello sin una caja intermedia. */
.pd-pay__cards{ display:contents }

.pay-card{
  flex:0 0 auto;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pay-card img,
.pay-card svg{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:26px;
  object-fit:contain;
}

/* Visa un 15% más chico que el resto: su SVG no trae aire alrededor, así que
   con el mismo max-height se veía notablemente más grande que Mastercard y
   Amex, que sí lo traen. 26 × 0.85 ≈ 22px. */
.pay-card img[alt="Visa"]{ max-height:22px }

.pd-pay__secure-img{ height:32px; width:auto }

/* En el TELÉFONO el botón de pagar del card sobra: ahí manda la barra fija de
   abajo, que está siempre al alcance del pulgar. Tener los dos sería repetir
   la misma acción dos veces en la misma pantalla.
   En escritorio es al revés: la barra se esconde y vale el del card. */
@media (max-width:767px){
  #btnPagar{ display:none }
}


/* Lo que la gift card garantiza, bajo el total */
.promesa{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  color:var(--muted);
  padding-top:14px;
  border-top:1px solid var(--border);
}
.promesa svg{
  width:15px; height:15px; flex:none; margin-top:3px;
  stroke:var(--taupe); fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}


/* --- Dos columnas: datos + resumen --------------------------------------
   El checkout lleva el pedido al lado, como cualquier checkout: el cliente ve
   qué está comprando mientras llena sus datos.

   Teléfono  : una columna. Datos arriba, resumen al final.
   Escritorio: datos a la izquierda, resumen a la derecha acompañando el
               scroll. La regla del grid está en el bloque 12.
   ---------------------------------------------------------------------- */
.cols{ display:block }
.col-datos{ min-width:0 }

.col-resumen{
  margin-top:22px;
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:17px;
}
.col-resumen:empty{ display:none }

/* Encabezado del resumen */
.col-resumen h3{
  font-size:14.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}

/* --- Línea del pedido ------------------------------------------------------
   La tarjeta va GRANDE arriba, con el monto encima, y los datos debajo.
   Es lo que la persona acaba de elegir: verlo en pequeño no aportaba nada.
   ------------------------------------------------------------------------ */
.item{
  padding:0 0 18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.item:last-of-type{ border-bottom:0; margin-bottom:8px }

.item-tarjeta{ margin-bottom:14px }

/* Quién la recibe · a dónde va */
.item-pie{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.item-quien{ min-width:0 }
.item-quien b{
  display:block;
  font-size:15px;
  font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-quien span{
  display:block;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.item-acciones{
  display:flex;
  gap:14px;
  flex:none;
  font-size:14px;
  font-weight:700;
}
.item-acciones button{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.item-acciones button:hover{ color:var(--text) }
.item-acciones button.quitar{ color:var(--error) }

.item-cantidad{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.col-resumen .fila{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:var(--muted);
  padding:13px 0;
  border-bottom:1px solid var(--border);
}
.resumen .fila b,
.col-resumen .fila b{
  color:var(--text);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.col-resumen .total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:20px 0 16px;
}
.col-resumen .total span{
  font-size:15px;
  font-weight:800;
  letter-spacing:1.4px;
  color:var(--text);
}
.col-resumen .total b{
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}

/* Carrito vacío */
.vacio{
  text-align:center;
  padding:56px 20px;
  color:var(--muted);
}
.vacio svg{
  width:52px; height:52px;
  margin:0 auto 16px;
  stroke:var(--border-2); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}


/* ===========================================================================
   12 · ESCRITORIO
   ---------------------------------------------------------------------------
   La app se queda angosta y centrada; solo se le pone un marco y sombra para
   que no parezca una columna suelta en medio de la pantalla.
   =========================================================================== */
@media (min-width:768px){

  /* En escritorio el marco se ensancha: se ve como un panel horizontal,
     no como un teléfono estirado. La tarjeta del carrusel gana tamaño,
     que es lo que importa en esta pantalla. */
  :root{ --ancho-max:760px }

  body{
    background:var(--navy);       /* el fondo alrededor del panel */
  }

  .app{
    margin-top:calc(var(--nav-h) + 32px);   /* encabezado del sitio + aire */
    margin-bottom:44px;
    border-radius:var(--r-xl);
    box-shadow:var(--sh-lg);
    flex:0 0 auto;                          /* que no se estire: el pie va debajo */

    /* El panel se ajusta a lo que tenga dentro. Antes tenía una altura mínima
       de 700px y en las pantallas con poco contenido —"Para mí", que esconde
       los dos campos— quedaba un hueco enorme entre el último elemento y el
       botón. El mínimo de ahora es solo para que no se vea diminuto. */
    min-height:340px;

    /* `clip` recorta lo que se salga del borde redondeado —la barra de
       progreso asomaba por encima de la esquina— SIN romper el
       `position:sticky` del botón, cosa que `hidden` sí haría. */
    overflow:clip;
  }

  /* Que no se estire para empujar el botón hasta el fondo: el botón va
     justo después del contenido. */
  .vistas{ flex:0 0 auto }

  /* Nombre de quien recibe y de quien envía, lado a lado: son dos datos
     cortos del mismo tipo y en una fila se leen como uno solo. */
  .fila-2{ grid-template-columns:1fr 1fr; align-items:start }

  /* --- Dos columnas en el checkout ------------------------------------- */
  .cols{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:34px;
    align-items:start;
  }

  /* El pedido acompaña el scroll pegándose bajo el encabezado del sitio.
     SIN scroll interno a propósito: se probó con `max-height` + `overflow`
     y la barrita partía la tarjeta por un lado. El pedido crece lo que
     necesite; con que no se pierda entero hacia arriba es suficiente. */
  .col-resumen{
    margin-top:0;
    position:sticky;
    top:calc(var(--nav-h) + 26px);
  }

  /* Compacto a propósito: cuanto más bajo sea el pedido, más recorrido tiene
     para quedarse pegado mientras se llena el formulario de al lado. */
  .col-resumen{ padding:16px }
  .col-resumen #btnOtraTarjeta{ min-height:44px; font-size:14px }

  /* El checkout deja de verse como panel flotante: sin fondo propio, sin
     esquinas redondeadas y sin sombra. Es una página del sitio. */
  .app[data-checkout]{
    background:transparent;
    border-radius:0;
    box-shadow:none;
    margin-top:calc(var(--nav-h) + 26px);
  }

  /* En el checkout el fondo de la página es HUESO, no el navy que rodea al
     panel de los primeros pasos. Los cards blancos se apoyan sobre él. */
  body:has(.app[data-checkout]){ background:var(--bg) }
  .app[data-checkout] .vista{ padding-inline:0 }

  /* Sobre el hueso, el encabezado va en tinta oscura como en el resto. */
  .app[data-checkout] .vista-cab h1{ color:var(--text) }
  .app[data-checkout] .vista-cab .kicker{ color:var(--taupe) }
  /* En el checkout el botón de pagar está dentro del pedido, así que la
     barra de acción de los pasos anteriores sobra. */
  .app[data-checkout] .barra-accion{ display:none }
  .app[data-checkout] .app-header{ display:none }

  /* El contenido respira más dentro del panel ancho.
     Poco aire arriba: el encabezado del panel ya empieza cerca del borde. */
  .vista{ padding:22px 44px 18px }
  .barra-accion{
    padding:16px 44px 26px;
    border-radius:0 0 var(--r-xl) var(--r-xl);   /* acompaña la esquina del panel */
  }

  /* --- Pantalla de diseño en escritorio ---------------------------------
     Las categorías pasan a una columna a la izquierda y la tarjeta se
     queda a la derecha. Se lee de un vistazo y no hay que deslizar
     pestañas para ver qué hay.
     -------------------------------------------------------------------- */
  .diseno-layout{
    display:grid;
    grid-template-columns:186px 1fr;
    gap:26px;
    align-items:start;
  }

  .cats-movil{ display:none }        /* el desplegable es solo del teléfono */

  .cats{
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .cat{
    text-align:left;
    padding:11px 14px;
    border-radius:var(--r-sm);
    font-size:15px;
    font-weight:700;
    color:var(--muted);
    transition:all var(--t-rapido);
  }
  .cat:hover{ background:rgba(0,0,0,.04); color:var(--text) }
  .cat[aria-selected="true"]{
    background:transparent;
    color:var(--text);
    box-shadow:inset 0 0 0 2px var(--taupe);
  }

  /* La tarjeta se muestra a 368px: un 20% menos que el ancho que tomaba
     antes (460px). Para elegir un diseño no hace falta verla enorme, y así
     la pantalla respira. */
  .carrusel-wrap{ padding:0 46px; max-width:368px }

  /* Ya no hay barra compacta de app: el contenido empieza arriba del panel */
  .vistas{ padding-top:26px }

  /* Sin barra de progreso en escritorio.
     Pegada al borde superior redondeado del panel se leía como una raya
     dorada suelta, no como progreso: el carril no contrasta contra el fondo
     hueso y la esquina curva la corta a la mitad. Aquí no hace falta —el
     antetítulo ya dice "Paso 3 de…"— así que se queda solo en el teléfono,
     donde va bajo la banda navy del encabezado y ahí sí se entiende. */
  .progreso{ display:none }

  /* La barra de acción sigue siendo `sticky` (definida arriba): así se queda
     pegada al pie del panel mientras hay scroll y deja ver el pie del sitio
     al final. NO ponerla en `absolute` aquí: la sacaría del flujo y perdería
     tanto el ancho como el comportamiento pegajoso. */

  /* Con ratón sí tiene sentido el hover */
  .btn-primario:hover  { background:#0d1119 }
  .btn-secundario:hover{ border-color:var(--taupe); color:var(--taupe) }
  .monto-op:hover:not([aria-pressed="true"]),
  .seg-op:hover:not([aria-checked="true"]){ border-color:var(--taupe) }
  .slide{ cursor:pointer }
}