/* tienda.css — capa de marca de alesdreams.com sobre el tema «default» de Paymenter (2026-10-21).
   Se sirve tal cual desde public/alesdreams/, sin Vite: no hace falta compilar el tema.
   Los colores base del tema van en layouts/colors.blade.php; aquí, la fuente y los componentes
   propios (clases .ale-*). Nunca «ad-»: EasyList Spanish trae ##.ad-cabecera y ##.ad, y los
   bloqueadores de anuncios ocultaban la cabecera entera (2026-10-21). Va sin @layer a propósito: así gana a las utilidades de Tailwind,
   que el CSS compilado mete en capas. Tokens y medidas copiados de sitio.css de la web. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('bricolage-grotesque.woff2') format('woff2-variations'), url('bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
}

:root {
  --noche: #16182E;
  --superficie: #1E2140;
  --linea: #33366A;
  --pasto: #6FBF3F;
  --pasto-claro: #86D457;
  --pasto-borde: #4C8A28;
  --antorcha: #F0B44C;
  --luna: #ECEAF6;
  --niebla: #A4A7C6;
  --tinta: #12141F;
  --rojo: #F08A8A;
  --fuente: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-sans: var(--fuente);
}

body.ale { background: var(--noche); color: var(--luna); font-family: var(--fuente); font-optical-sizing: auto; font-variant-numeric: tabular-nums; }
.ale h1, .ale h2, .ale h3 { letter-spacing: -0.02em; }
.ale :focus-visible { outline: 3px solid var(--antorcha); outline-offset: 3px; border-radius: 4px; }
.ale input:focus, .ale select:focus, .ale textarea:focus { outline: 2px solid var(--antorcha); outline-offset: 1px; border-color: var(--linea); box-shadow: none; }
.ale ::selection { background: var(--pasto); color: var(--tinta); }
.ale-envoltura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Botones: el verde solo para la acción principal, con borde inferior más oscuro. */
.ale-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 6px; font: 700 .98rem/1.2 var(--fuente); text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; transition: none; }
.ale-boton--principal { background: var(--pasto); color: var(--tinta); border-bottom-color: var(--pasto-borde); }
.ale-boton--principal:hover { background: var(--pasto-claro); }
.ale-boton--principal svg { fill: var(--tinta); }
.ale-boton--secundario { background: transparent; color: var(--luna); border-color: var(--linea); }
.ale-boton--secundario:hover { border-color: var(--niebla); }
.ale-boton--peligro { background: transparent; color: var(--rojo); border-color: #6B3A4A; border-bottom-color: #6B3A4A; }
.ale-boton--peligro:hover { background: transparent; border-color: var(--rojo); }
.ale-enlace { color: var(--pasto); text-decoration: underline; text-underline-offset: 3px; }
.ale-enlace:hover { color: var(--pasto-claro); }

/* Cabecera (fija, 64 px: el <main> del layout lleva mt-16). */
.ale-cabecera { background: var(--noche); border-bottom: 1px solid var(--linea); }
.ale-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--luna); text-decoration: none; font: 800 1.15rem var(--fuente); letter-spacing: -0.01em; white-space: nowrap; }
/* La altura del logo va aquí y no en una clase de Tailwind: el CSS compilado solo trae las
   que ya usaba el tema (h-8 sí, h-7 no), y sin altura el logo sale a tamaño natural. */
.ale-marca img { height: 30px; width: auto; }
.ale-marca-sub { font: 700 .8rem var(--fuente); letter-spacing: 0; color: var(--niebla); border: 1px solid var(--linea); border-radius: 6px; padding: 2px 8px; }
.ale-menu a, .ale-menu span { color: var(--niebla); font: 500 .98rem var(--fuente); }
.ale-menu a:hover, .ale-menu span:hover { color: var(--luna); }
/* El enlace activo del componente navigation.link lleva text-primary: en la cabecera, el verde
   se reserva a las acciones, así que el activo va en Luna con subrayado. */
.ale-cabecera .text-primary, .ale-menu a.text-primary { color: var(--luna); text-decoration: underline; text-decoration-color: var(--pasto); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.ale-cabecera .ale-boton { min-height: 38px; padding: 0 14px; font-size: .92rem; }
.ale-moneda { background: var(--superficie); color: var(--luna); border: 1px solid var(--linea); border-radius: 6px; min-height: 38px; padding: 0 28px 0 10px; font: 500 .92rem var(--fuente); cursor: pointer; }
.ale-moneda--fija { display: inline-flex; align-items: center; padding: 0 10px; color: var(--niebla); cursor: default; }
/* Menú desplegable de categorías y panel móvil */
.ale .bg-background-secondary.border-neutral { border-color: var(--linea); }

/* Cabeza de página: texto a la izquierda sobre el cielo de la portada de la web (2026-10-21):
   estrellas pixeladas y colinas de bloques cuya capa delantera es del color de la página,
   así que se funden con lo que viene debajo. */
/* Escenas por juego (2026-10-21), las mismas que la web: dibujo propio en pixel art, sin
   recursos de los juegos (las normas de Mojang y las demás marcas no permiten usar su arte).
   Se generan con brand/generador_escenas.py. La clase va por el slug de la categoría; sin
   ella (inicio, carrito…) queda la noche de Minecraft. */
.escena-minecraft, .escena-minecraft-premium { --cielo: linear-gradient(#13152A, #1C1F3C); --escena: url('colinas.svg'); --escena-tam: 384px 96px; --astro: url('astro-luna.svg'); }
.escena-counter-strike-2 { --cielo: linear-gradient(#1B1530, #4A2A30); --escena: url('escena-cs2.svg'); --escena-tam: 480px 128px; --astro: url('astro-sol.svg'); }
.escena-terraria { --cielo: linear-gradient(#0F1B26, #183330); --escena: url('escena-terraria.svg'); --escena-tam: 480px 128px; --astro: url('astro-luna-llena.svg'); }
.escena-project-zomboid { --cielo: linear-gradient(#17131F, #3A1D27); --escena: url('escena-zomboid.svg'); --escena-tam: 480px 128px; --astro: url('astro-luna-llena.svg'); }
.escena-7-days-to-die { --cielo: linear-gradient(#1C1018, #4A1C16); --escena: url('escena-7dtd.svg'); --escena-tam: 480px 128px; --astro: url('astro-luna-roja.svg'); }
.escena-unturned { --cielo: linear-gradient(#111B2C, #1F3348); --escena: url('escena-unturned.svg'); --escena-tam: 480px 128px; --astro: url('astro-luna.svg'); }
.escena-hytale { --cielo: linear-gradient(#0F1736, #24345E); --escena: url('escena-hytale.svg'); --escena-tam: 480px 128px; --astro: url('astro-luna-llena.svg'); }
.ale-cabeza { position: relative; overflow: hidden; padding: 56px 0 144px; background: var(--cielo, linear-gradient(#13152A, #1C1F3C)); }
.ale-cabeza::before { content: ''; position: absolute; inset: 0; background: var(--astro, url('astro-luna.svg')) right 12% top 44px no-repeat, url('estrellas.svg') 0 0 / 320px 240px; -webkit-mask-image: linear-gradient(#000 30%, transparent 85%); mask-image: linear-gradient(#000 30%, transparent 85%); pointer-events: none; }
.ale-cabeza::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: var(--escena, url('colinas.svg')) 0 100% / var(--escena-tam, 384px 96px) repeat-x; image-rendering: pixelated; pointer-events: none; }
.ale-cabeza > .ale-envoltura { position: relative; z-index: 1; }
.ale-cabeza h1, .ale-pedido h1 { font: 800 clamp(2.1rem, 4.6vw, 3.3rem)/1.08 var(--fuente); letter-spacing: -0.02em; margin-bottom: 16px; max-width: 24ch; text-wrap: balance; overflow-wrap: anywhere; }
.ale-entradilla { color: var(--niebla); font-size: 1.1rem; max-width: 62ch; }
/* Textos que vienen de la tienda (descripciones, texto de inicio): no se controlan desde el
   repositorio, así que llevan overflow-wrap por si traen una URL larga. */
.ale-prosa { overflow-wrap: anywhere; }
.ale-prosa p, .ale-prosa ul, .ale-prosa ol { margin-bottom: .8em; }
.ale-prosa p:last-child { margin-bottom: 0; }
.ale-prosa ul, .ale-prosa ol { padding-left: 1.3em; list-style: disc; }
.ale-prosa a { color: var(--pasto); text-decoration: underline; text-underline-offset: 3px; }
.ale-prosa strong { color: var(--luna); }
.ale-cabeza .ale-prosa h1, .ale-cabeza .ale-prosa h2 { font: 800 clamp(2.1rem, 4.6vw, 3.3rem)/1.08 var(--fuente); letter-spacing: -0.02em; margin-bottom: 16px; max-width: 24ch; text-wrap: balance; }
.ale-cabeza .ale-prosa > p { color: var(--niebla); font-size: 1.1rem; max-width: 62ch; }
.ale-claves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ale-claves a { border: 1px solid var(--linea); border-radius: 6px; padding: 6px 12px; color: var(--niebla); font-size: .92rem; text-decoration: none; }
.ale-claves a:hover { color: var(--luna); border-color: var(--niebla); }
.ale-claves a[aria-current="page"] { background: var(--luna); border-color: var(--luna); color: var(--tinta); font-weight: 700; }

.ale-seccion { padding-top: 48px; padding-bottom: 24px; }
.ale-h2 { font: 800 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--fuente); margin-bottom: 8px; }

/* Lista de juegos en filas (inicio y subcategorías), como servidores.html. */
.ale-lista { list-style: none; border-top: 1px solid var(--linea); margin-top: 20px; }
.ale-lista li { border-bottom: 1px solid var(--linea); }
.ale-lista a { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 6px 28px; align-items: baseline; padding: 22px 0; text-decoration: none; color: var(--luna); }
.ale-lista a:hover .ale-lista-nombre { color: var(--pasto); }
.ale-lista-nombre { font: 800 1.3rem var(--fuente); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ale-lista-lema { color: var(--niebla); overflow-wrap: anywhere; }
.ale-lista-ir { color: var(--niebla); font-weight: 700; white-space: nowrap; }
.ale-lista a:hover .ale-lista-ir { color: var(--luna); }
.ale-lista--sub { margin: 0 0 40px; }

/* Juegos del inicio en tarjetas, como «También alojamos» de la web. */
.ale-juegos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ale-juegos a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px 18px; height: 100%; padding: 20px; color: var(--luna); text-decoration: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; transition: transform .15s ease, border-color .15s ease; }
.ale-juegos a:hover { transform: translateY(-3px); border-color: var(--pasto-borde); }
.ale-juegos a:hover .ale-lista-nombre { color: var(--pasto); }
.ale-juegos a:hover .ale-lista-ir { color: var(--luna); }
.ale-juego-texto { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* Tres líneas como máximo, cortadas por CSS y no a media palabra con Str::limit. */
.ale-juego-texto .ale-lista-lema { font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ale-juego-pie { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.ale-desde { color: var(--niebla); font-size: .95rem; }
.ale-desde strong { color: var(--antorcha); font: 800 1.15rem var(--fuente); }
.ale-desde--no { color: var(--rojo); }
/* Sigla del juego en un cuadro de color: sin logos de terceros. */
.ale-sigla { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 6px; background: var(--sigla, #3C3F73); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); color: #fff; font: 800 1.2rem/1 var(--fuente); letter-spacing: -0.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .ale-juegos a { transition: none; } .ale-juegos a:hover { transform: none; } }
/* La escena del juego a media escala al fondo de su tarjeta, desvanecida hacia el texto. */
/* Carátulas de juego (2026-10-22), como en la web: el cielo, las estrellas y el paisaje del
   juego a tamaño completo, y el precio con «Ver planes» en una franja justo encima del paisaje.
   La etiqueta lleva grid-column: auto: con una columna puesta, un hijo absoluto de una rejilla
   se coloca respecto a esa celda y no a la tarjeta. */
.ale-juegos a[class*='escena-'] { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; align-content: start; padding: 22px 22px 190px; background: url('estrellas.svg') 0 0 / 320px 240px, var(--cielo, linear-gradient(#13152A, #1C1F3C)); }
.ale-juegos a[class*='escena-']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; z-index: -1; background: var(--escena) 50% 100% / var(--escena-tam, 480px 128px) repeat-x; image-rendering: pixelated; pointer-events: none; }
.ale-juegos a[class*='escena-'] .ale-juego-pie { grid-column: auto; position: absolute; left: 16px; right: 16px; bottom: 124px; z-index: 1; padding: 8px 12px; border-top: 0; border-radius: 6px; background: rgba(22, 24, 46, .85); }
.ale-juegos a[class*='escena-'] .ale-lista-nombre { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.ale-juegos a[class*='escena-'] .ale-lista-lema { color: var(--luna); opacity: .85; }

/* Planes en filas */
.ale-tabla { border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.ale-fila { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 200px 190px; gap: 24px; align-items: center; padding: 22px 24px; }
.ale-fila + .ale-fila, .ale-carrito-fila + .ale-carrito-fila { border-top: 1px solid var(--linea); }
.ale-fila-nombre { font: 800 1.45rem/1.15 var(--fuente); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ale-fila-nombre a { color: var(--luna); text-decoration: none; }
.ale-fila-nombre a:hover { color: var(--pasto); }
.ale-fila-specs { color: var(--niebla); font-size: .98rem; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.ale-fila-nota { margin-top: 8px; font-size: .9rem; line-height: 1.45; }
/* El plan recomendado de la categoría (products/index.blade.php). */
.ale-fila--destacada { background: linear-gradient(90deg, rgba(111, 191, 63, .10), rgba(111, 191, 63, 0) 70%); box-shadow: inset 4px 0 0 var(--pasto); }
.ale-tabla > .ale-fila--destacada:first-child { border-radius: 10px 10px 0 0; }
.ale-tabla > .ale-fila--destacada:last-child { border-radius: 0 0 10px 10px; }
.ale-recomendado { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 4px; background: var(--pasto); color: var(--tinta); font: 700 .75rem/1.5 var(--fuente); letter-spacing: .05em; text-transform: uppercase; }

/* Datos del plan (components/ale-specs): casillas de RAM y datos en etiquetas. */
.ale-specs { display: grid; gap: 10px; }
.ale-casillas { display: grid; grid-template-columns: repeat(var(--total, 8), 1fr); gap: 3px; max-width: calc(var(--total, 8) * 22px); }
.ale-casillas i { aspect-ratio: 1; border: 2px solid #3C3F73; background: var(--noche); }
.ale-casillas i.llena { background: var(--pasto); border-color: var(--pasto-borde); }
.ale-fila--sin-stock .ale-casillas i.llena { background: #4A4D7E; border-color: #4A4D7E; }
.ale-datos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ale-datos li { border: 1px solid var(--linea); border-radius: 6px; padding: 2px 9px; color: var(--luna); font-size: .88rem; white-space: nowrap; }
.ale-specs--ficha { margin-bottom: 20px; }
.ale-specs--ficha .ale-datos li { font-size: .95rem; padding: 4px 11px; }
.ale-fila .ale-boton { width: 100%; }
.ale-sin-stock { display: block; color: var(--rojo); font-weight: 700; margin-top: 4px; }
.ale-fila--sin-stock .ale-precio, .ale-fila--sin-stock .ale-fila-nombre a { color: var(--niebla); }

.ale-precio { font: 800 1.6rem/1.2 var(--fuente); color: var(--antorcha); letter-spacing: -0.01em; }
.ale-precio small { font: 400 .95rem var(--fuente); color: var(--niebla); letter-spacing: 0; }
.ale-precio-iva { display: block; font: 400 .84rem/1.4 var(--fuente); color: var(--niebla); letter-spacing: 0; margin-top: 2px; }
.ale-precio-nota { display: none; font: 400 .84rem/1.4 var(--fuente); color: var(--niebla); letter-spacing: 0; margin-top: 2px; }

/* La nota solo con una moneda referencial; data-moneda lo pone app.blade.php. */
body[data-moneda]:not([data-moneda="CLP"]) .ale-precio-nota { display: block; }

/* Ficha de producto */
.ale-ficha--imagen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ale-ficha-img { width: 100%; max-height: 360px; object-fit: contain; }
.ale-volver { display: inline-block; color: var(--niebla); text-decoration: none; margin-bottom: 14px; }
.ale-volver::before { content: '‹ '; }
.ale-volver:hover { color: var(--luna); }
.ale-estado { display: inline-block; color: var(--pasto); border: 1px solid var(--pasto-borde); border-radius: 6px; padding: 2px 10px; font-size: .9rem; font-weight: 700; margin-bottom: 18px; }
.ale-estado--no { color: var(--rojo); border-color: #6B3A4A; }
.ale-ficha-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linea); }

/* «Qué incluye» (components/ale-incluye): en la ficha, rejilla; en el pedido, lista compacta. */
.ale-incluye ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px 32px; margin-top: 22px; }
.ale-incluye li { position: relative; padding-left: 30px; color: var(--niebla); font-size: .95rem; line-height: 1.5; }
.ale-incluye li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 4px; background: var(--pasto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2312141F' stroke-width='2.4'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ale-incluye strong { display: block; color: var(--luna); font: 700 1.05rem var(--fuente); margin-bottom: 2px; }
.ale-incluye--compacto { border-top: 1px solid var(--linea); padding-top: 4px; }
.ale-incluye--compacto ul { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.ale-incluye--compacto strong { display: inline; font-size: .95rem; margin-right: 6px; }

/* Período de pago en tarjetas (products/checkout.blade.php). La radio se oculta a la vista
   pero sigue siendo el control: teclado y lector de pantalla funcionan igual. */
.ale-periodos { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ale-periodos legend { color: var(--luna); font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.ale-periodo { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--superficie); border: 2px solid var(--linea); border-radius: 8px; cursor: pointer; }
.ale-periodo:hover { border-color: var(--niebla); }
.ale-periodo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ale-periodo:has(input:checked) { border-color: var(--pasto); background: linear-gradient(rgba(111, 191, 63, .10), rgba(111, 191, 63, .02)); }
.ale-periodo:has(input:focus-visible) { outline: 3px solid var(--antorcha); outline-offset: 3px; }
.ale-pedido-config .ale-periodo-nombre { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--luna); font: 700 1rem var(--fuente); }
.ale-periodo-ahorro { background: var(--pasto); color: var(--tinta); border-radius: 4px; padding: 1px 7px; font: 700 .78rem/1.5 var(--fuente); }
.ale-periodo-precio { color: var(--antorcha); font: 800 1.35rem/1.2 var(--fuente); }
.ale-periodo-precio small { color: var(--niebla); font: 400 .9rem var(--fuente); }
.ale-pedido-config .ale-periodo-nota { color: var(--niebla); font-size: .84rem; font-weight: 400; line-height: 1.4; }

/* Franja de confianza bajo el botón de pago. */
.ale-confianza { list-style: none; display: grid; gap: 6px; padding: 12px 0 0; border-top: 1px solid var(--linea); }
.ale-confianza li { position: relative; padding-left: 24px; color: var(--luna); font-size: .88rem; }
.ale-confianza li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pasto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2312141F' stroke-width='2.4'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* Configuración del pedido y carrito: opciones a la izquierda, resumen a la derecha. */
.ale-pedido { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-top: 48px; }
.ale-pedido-config { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ale-pedido h1 { margin-bottom: 0; }
.ale-pedido-desc { display: flex; gap: 16px; color: var(--niebla); max-width: 68ch; }
.ale-pedido-config label { color: var(--luna); font-weight: 600; font-size: .95rem; }
.ale-pedido-config select, .ale-pedido-config input[type="text"], .ale-pedido-config input[type="number"], .ale-pedido-config input[type="email"], .ale-pedido-config input[type="password"] { background: var(--noche); border-color: var(--linea); border-radius: 6px; font-size: 1rem; min-height: 46px; }
.ale-pedido-config p.text-xs { color: var(--niebla); }
.ale-resumen { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 22px; }
.ale-resumen h2 { font: 800 1.35rem var(--fuente); margin-bottom: 4px; }
.ale-resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--luna); border-top: 1px solid var(--linea); padding-top: 12px; }
.ale-resumen-fila h4 { color: var(--niebla); font-weight: 400; }
.ale-resumen-total { font: 800 1.45rem var(--fuente); color: var(--antorcha); }
.ale-resumen-total h4 { font-size: 1rem; color: var(--luna); font-weight: 700; }
.ale-resumen-nota { color: var(--niebla); font-size: .84rem; line-height: 1.45; }
.ale-resumen .ale-boton { width: 100%; min-height: 48px; font-size: 1.02rem; }
.ale-resumen label, .ale-resumen .text-primary-100 { color: var(--luna); }
.ale-resumen input[type="radio"], .ale-resumen input[type="checkbox"] { accent-color: var(--pasto); }
.ale-aviso { border-left: 3px solid var(--niebla); background: var(--noche); border-radius: 0 6px 6px 0; padding: 12px 14px; font-size: .88rem; line-height: 1.5; color: var(--niebla); }
.ale-aviso strong { color: var(--luna); }
.ale-cupon { display: flex; align-items: flex-end; gap: 8px; }
.ale-cupon input { background: var(--noche); min-height: 44px; }
.ale-cupon .ale-boton { width: auto; min-height: 44px; }
.ale-carrito-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 20px 22px; }
.ale-carrito-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ale-carrito-acciones .ale-precio { font-size: 1.4rem; }
.ale-vacio { border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); padding: 28px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; color: var(--niebla); }

/* Pie, como el de la web */
.ale-pie { border-top: 1px solid var(--linea); padding: 56px 0 40px; margin-top: 88px; color: var(--niebla); font-size: .95rem; }
.ale-pie-columnas { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 40px; }
.ale-pie h3 { color: var(--luna); font: 800 1rem var(--fuente); letter-spacing: 0; margin-bottom: 12px; }
.ale-pie ul { list-style: none; display: grid; gap: 8px; }
.ale-pie li { overflow-wrap: anywhere; }
.ale-pie a { text-decoration: none; }
.ale-pie a:hover { color: var(--luna); }
.ale-pie-marca p { margin: 14px 0 0; max-width: 32ch; }
.ale-pie-legal { border-top: 1px solid var(--linea); padding-top: 24px; font-size: .88rem; display: grid; gap: 6px; }
.ale-pie-legal strong { color: var(--luna); font-weight: 600; }
.ale-paymenter { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; width: fit-content; color: var(--niebla); }
.ale-paymenter-logo { height: 12px; width: auto; }

/* Resto del área de cliente (facturas, servicios, tickets): solo se ajusta lo que no
   resuelven los colores del tema. */
.ale .card { border-radius: 10px; }
.ale .prose { --tw-prose-invert-body: var(--niebla); --tw-prose-invert-headings: var(--luna); --tw-prose-invert-links: var(--pasto); --tw-prose-invert-bold: var(--luna); }

@media (max-width: 900px) {
  .ale-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre nombre' 'specs specs' 'precio boton'; gap: 12px 16px; }
  .ale-fila-nombre { grid-area: nombre; } .ale-fila-specs { grid-area: specs; }
  .ale-fila .ale-precio { grid-area: precio; } .ale-fila .ale-boton { grid-area: boton; width: auto; }
  .ale-lista a { grid-template-columns: minmax(0, 1fr) auto; }
  .ale-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ale-lista-lema { grid-column: 1 / -1; grid-row: 2; }
  .ale-pedido { grid-template-columns: 1fr; gap: 28px; }
  .ale-resumen { position: static; }
  .ale-ficha--imagen { grid-template-columns: 1fr; gap: 28px; }
  .ale-pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ale-envoltura { padding: 0 16px; }
  .ale-cabeza { padding: 40px 0 136px; }
  .ale-cabeza::before { background: url('estrellas.svg') 0 0 / 320px 240px; }
  .ale-juegos { grid-template-columns: 1fr; }
  .ale-juegos a { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .ale-juegos a[class*='escena-'] { min-height: 280px; padding: 16px 16px 180px; }
  .ale-sigla { width: 48px; height: 48px; font-size: 1.05rem; }
  .ale-juego-pie { grid-column: 1 / -1; }
  .ale-fila { padding: 18px 16px; }
  .ale-carrito-fila { padding: 18px 16px; }
  .ale-carrito-acciones { align-items: flex-start; }
  .ale-pedido { padding-top: 32px; }
  .ale-pie { margin-top: 64px; }
  .ale-marca-sub { display: none; }
}
@media (max-width: 480px) {
  .ale-fila { grid-template-areas: 'nombre nombre' 'specs specs' 'precio precio' 'boton boton'; }
  .ale-fila .ale-boton { width: 100%; }
  .ale-pie-columnas { grid-template-columns: 1fr; }
}