/* SURESTE · quiz a pantalla completa.
   La idea central: cada pantalla es una foto y una sola pregunta.
   El gesto propio: marcar un diseño con el fierro del toro, al rojo vivo y luego frio. */

:root {
  --carbon: #141412;
  --crudo: #EFE8DA;
  --caqui: #B9A47E;
  --olivo: #5E6146;
  --marino: #1F2A3A;
  --brasa: #FF6A1F;
  --vidrio: rgba(20, 20, 18, .58);
  --vidrio-claro: rgba(239, 232, 218, .14);
  --filo: rgba(239, 232, 218, .2);
  --titulos: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --curva: cubic-bezier(.22, .8, .2, 1);
  --u: min(1vw, 4.8px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #0B0B0A; }
html.quiz, html.quiz body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; color: var(--crudo); font-family: var(--texto); font-size: 16px; line-height: 1.35; background: #0B0B0A; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, video { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--caqui); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100vw, 480px); transform: translateX(-50%); overflow: hidden; background: var(--carbon); }
.escena { position: absolute; inset: 0; }

.cinta { position: absolute; z-index: 40; top: 0; left: 0; right: 0; padding: 3px 10px; background: var(--brasa); color: var(--carbon); font-size: 12px; font-weight: 600; text-align: center; }

/* ---------- Barra superior ---------- */
.sup { position: absolute; z-index: 20; top: 0; left: 0; right: 0; padding: env(safe-area-inset-top) 0 0; pointer-events: none; }
.avance { height: 3px; background: rgba(239, 232, 218, .24); }
.avance span { display: block; height: 100%; width: 0; background: var(--crudo); transition: width .5s var(--curva); }
.sup__fila { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px 0; }
.sup__fila > * { pointer-events: auto; }
.sup__logo { width: 84px; height: auto; justify-self: center; pointer-events: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55)); }
.sup__nota { width: 40px; font-size: 10px; line-height: 1.05; text-align: right; color: rgba(239, 232, 218, .86); text-shadow: 0 1px 4px rgba(0, 0, 0, .8); pointer-events: none; }
.circulo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--crudo); background: var(--vidrio); border: 1px solid var(--filo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- Pantallas y transiciones ---------- */
.pantalla { position: absolute; inset: 0; overflow: hidden; background: var(--carbon); will-change: transform; }
.pantalla.entra-adelante { animation: entra-der .46s var(--curva) both; }
.pantalla.sale-adelante { animation: sale-izq .46s var(--curva) both; }
.pantalla.entra-atras { animation: entra-izq .46s var(--curva) both; }
.pantalla.sale-atras { animation: sale-der .46s var(--curva) both; }
@keyframes entra-der { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
@keyframes sale-izq { to { transform: translate3d(-26%, 0, 0); opacity: .4; } }
@keyframes entra-izq { from { transform: translate3d(-26%, 0, 0); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sale-der { to { transform: translate3d(100%, 0, 0); } }

.fondo { position: absolute; inset: 0; overflow: hidden; }
.fondo img, .fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fondo img { animation: acercar 8s ease-out both; }
@keyframes acercar { from { transform: scale(1.07); } to { transform: none; } }
.velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 20, 18, .62) 0, rgba(20, 20, 18, .14) 20%, rgba(20, 20, 18, .34) 38%, rgba(20, 20, 18, .88) 66%, var(--carbon) 100%); }

.contenido { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 76px 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.contenido > * { flex: none; }
.contenido > *, .hoja > *, .encabezado > * { animation: subir .5s var(--curva) both; }
.contenido > *:nth-child(2), .hoja > *:nth-child(2) { animation-delay: .06s; }
.contenido > *:nth-child(3), .hoja > *:nth-child(3) { animation-delay: .12s; }
.hoja > *:nth-child(4) { animation-delay: .18s; }
@keyframes subir { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Texto ---------- */
.titulo { margin: 0; font-family: var(--titulos); font-weight: 400; font-size: calc(var(--u) * 11.6); line-height: 1.06; letter-spacing: .012em; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0, 0, 0, .62); }
.titulo:focus { outline: none; }
.titulo--xl { font-size: calc(var(--u) * 19.5); line-height: 1.04; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--caqui); }
.ayuda { margin: 4px 0 0; font-size: 15px; color: var(--crudo); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.encabezado .eyebrow { color: var(--crudo); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.con-cinta .sup { top: 22px; }
.con-cinta .portada__logo { top: 32px; }
.con-cinta .es-tiras .encabezado, .con-cinta .pantalla--color .encabezado { padding-top: 88px; }
.con-cinta .contenido { padding-top: 96px; }
.nota { margin: 0; font-size: 13px; color: rgba(239, 232, 218, .72); }
.legal { margin: 0; font-size: 11.5px; line-height: 1.3; color: rgba(239, 232, 218, .62); }
.encabezado { padding: 0 6px; }

/* ---------- Vidrio ---------- */
.hoja { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 28px; background: var(--vidrio); border: 1px solid var(--filo); -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
.etiqueta { margin: 2px 0 -2px; font-size: 14px; font-weight: 600; }
.etiqueta small { font-size: 13px; font-weight: 400; color: rgba(239, 232, 218, .72); }

/* ---------- Botones ---------- */
.pill { display: block; width: 100%; min-height: 54px; padding: 14px 22px; border-radius: 999px; font-size: 17px; font-weight: 600; text-align: center; text-decoration: none; transition: transform .16s var(--curva), background-color .2s, color .2s; }
.pill:active { transform: scale(.97); }
.pill--primaria { background: var(--crudo); color: var(--carbon); }
.pill--vidrio { background: var(--vidrio-claro); border: 1px solid var(--filo); color: var(--crudo); }
.pill--opcion { background: var(--vidrio-claro); border: 1px solid var(--filo); color: var(--crudo); text-align: left; font-weight: 500; line-height: 1.2; border-radius: 22px; }
.pill--opcion[aria-pressed="true"] { background: var(--crudo); color: var(--carbon); border-color: var(--crudo); }
.opciones { display: flex; flex-direction: column; gap: 8px; }
.enlace { padding: 10px 2px; font-size: 14px; font-weight: 500; color: rgba(239, 232, 218, .82); text-decoration: underline; text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 46px; padding: 10px 16px; border-radius: 999px; background: var(--vidrio-claro); border: 1px solid var(--filo); font-size: 15.5px; font-weight: 500; line-height: 1.15; transition: background-color .18s, color .18s, transform .16s var(--curva); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--crudo); color: var(--carbon); border-color: var(--crudo); }

/* ---------- Portada ---------- */
.portada__medio { position: absolute; top: 0; left: 0; right: 0; height: 72%; overflow: hidden; }
.portada__medio img, .portada__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.portada__medio video { opacity: 0; transition: opacity .9s; }
.portada__medio video.lista { opacity: 1; }
.portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 18, .45) 0, rgba(20, 20, 18, 0) 18%, rgba(20, 20, 18, 0) 44%, rgba(20, 20, 18, .9) 66%, var(--carbon) 80%); }
.portada__logo { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 50%; width: 118px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .5)); }
.portada__abajo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 20px calc(16px + env(safe-area-inset-bottom)); }
.portada__abajo > * { animation: subir .7s var(--curva) both; }
.portada__abajo > *:nth-child(2) { animation-delay: .08s; }
.portada__abajo > *:nth-child(3) { animation-delay: .16s; }
.portada__abajo > *:nth-child(4) { animation-delay: .24s; }
.portada__abajo > *:nth-child(5) { animation-delay: .3s; }
.portada__texto { margin: 0; font-size: 18px; line-height: 1.3; }
.portada__abajo .nota { text-align: center; margin-top: -2px; }
.portada__abajo .legal { text-align: center; }

/* ---------- Franjas: una foto por opcion ---------- */
.es-tiras { display: flex; flex-direction: column; }
.es-tiras .encabezado { flex: none; padding: 70px 20px 14px; background: var(--carbon); }
.es-tiras .tiras { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; background: var(--carbon); }
.tira { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; text-align: left; transition: flex-grow .42s var(--curva), opacity .3s; }
.tira img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: acercar 8s ease-out both; }
.tira::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 18, .26) 0, rgba(20, 20, 18, .34) 30%, rgba(20, 20, 18, .86) 100%); }
.tira span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 14px; font-family: var(--titulos); font-size: calc(var(--u) * 11.2); line-height: 1.05; letter-spacing: .012em; text-transform: uppercase; }
.tiras.hay-elegida .tira { flex-grow: .0001; opacity: .45; }
.tiras.hay-elegida .tira[aria-pressed="true"] { flex-grow: 1; opacity: 1; }
.flotante { position: absolute; z-index: 6; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: auto; min-height: 44px; padding: 10px 20px; font-size: 15px; font-weight: 500; white-space: nowrap; background: var(--vidrio); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---------- Mosaico 2 x 2 ---------- */
.mosaico-completo { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; background: var(--carbon); }
.celda { position: relative; overflow: hidden; text-align: left; }
.celda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: acercar 8s ease-out both; transition: transform .4s var(--curva); }
.celda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 18, .08) 45%, rgba(20, 20, 18, .84) 100%); transition: background-color .25s; }
.celda span { position: absolute; z-index: 1; left: 14px; right: 12px; bottom: 14px; font-family: var(--titulos); font-size: calc(var(--u) * 7); line-height: 1.08; letter-spacing: .015em; text-transform: uppercase; }
.celda[aria-pressed="true"]::after { background-color: rgba(239, 232, 218, .24); }
.celda[aria-pressed="true"] { outline: 3px solid var(--crudo); outline-offset: -3px; }

/* ---------- Color ---------- */
.pantalla--color .encabezado { padding: 70px 20px 14px; background: var(--carbon); }
.pantalla--color { display: flex; flex-direction: column; }
.columnas { flex: 1 1 0; display: flex; min-height: 0; }
.columna { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--crudo); transition: flex-grow .42s var(--curva); animation: crecer .6s var(--curva) both; transform-origin: bottom; }
.columna:nth-child(2) { animation-delay: .05s; }
.columna:nth-child(3) { animation-delay: .1s; }
.columna:nth-child(4) { animation-delay: .15s; }
@keyframes crecer { from { transform: scaleY(.3); } to { transform: none; } }
.columna--claro { color: var(--carbon); }
.columna span { position: absolute; left: 50%; bottom: 22px; font-family: var(--titulos); font-size: calc(var(--u) * 11); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transform-origin: left center; transform: rotate(-90deg) translateY(50%); }
.columnas.hay-elegida .columna[aria-pressed="true"] { flex-grow: 6; }

/* ---------- Talla ---------- */
.tallas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.talla { min-height: 76px; border-radius: 22px; background: var(--vidrio-claro); border: 1px solid var(--filo); font-family: var(--titulos); font-size: 30px; letter-spacing: .02em; transition: background-color .18s, color .18s, transform .16s var(--curva); }
.talla small { display: block; font-family: var(--texto); font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .78; }
.talla:active { transform: scale(.95); }
.talla[aria-pressed="true"] { background: var(--crudo); color: var(--carbon); }

/* ---------- Disenos deslizables ---------- */
.carrusel { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.lamina { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; background: var(--carbon); }
.lamina::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 20, 18, .55) 0, rgba(20, 20, 18, 0) 16%, rgba(20, 20, 18, 0) 66%, var(--carbon) 83%); }
/* La foto termina arriba de la parte baja del panel: asi el panel no tapa la estampa. */
.lamina__img { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 140px); object-fit: cover; opacity: 0; transition: opacity .3s; }
.lamina__img.es-visible { opacity: 1; }
.lamina.es-activa .lamina__img.es-visible { animation: acercar 7s ease-out both; }
.lamina__img.es-plana { height: 100%; object-fit: contain; object-position: 50% 0; padding: 74px 8px 42%; background: #fff; }
.lamina:has(.es-plana.es-visible)::after { background: linear-gradient(180deg, rgba(20, 20, 18, .55) 0, rgba(20, 20, 18, 0) 14%, rgba(20, 20, 18, 0) 62%, var(--carbon) 80%); }

.vistas { position: absolute; z-index: 6; right: 12px; top: 92px; display: flex; flex-direction: column; gap: 8px; }
.vista { width: 50px; height: 62px; overflow: hidden; border-radius: 14px; border: 2px solid rgba(239, 232, 218, .5); background: #fff; opacity: .82; transition: opacity .2s, border-color .2s, transform .16s var(--curva); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vista img { width: 100%; height: 100%; object-fit: cover; }
.vista[aria-pressed="true"] { border-color: var(--crudo); opacity: 1; transform: scale(1.06); }

.panel { position: absolute; z-index: 7; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; border-radius: 28px; background: var(--vidrio); border: 1px solid var(--filo); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); animation: subir .5s var(--curva) .08s both; }
.panel__indicacion { margin: 0; font-size: 13px; font-weight: 500; color: rgba(239, 232, 218, .84); }
.panel__nombre { margin: -2px 0 0; font-size: calc(var(--u) * 11.4); line-height: 1.05; }
.panel__nombre.cambia { animation: nombre .36s var(--curva) both; }
@keyframes nombre { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } }
.panel__acciones { display: grid; grid-template-columns: 1fr 54px; gap: 8px; }
.marcar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; background: var(--crudo); color: var(--carbon); font-size: 18px; font-weight: 600; transition: transform .16s var(--curva), background-color .2s, color .2s; }
.marcar:active { transform: scale(.97); }
.marcar i { width: 30px; height: 20px; background: currentColor; -webkit-mask: var(--fierro) center / contain no-repeat; mask: var(--fierro) center / contain no-repeat; }
.marcar[aria-pressed="true"] { background: transparent; color: var(--crudo); box-shadow: inset 0 0 0 2px var(--crudo); }
.pasar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--crudo); background: var(--vidrio-claro); border: 1px solid var(--filo); }
.pantalla.recien .pasar svg { animation: empuja 1.1s ease-in-out 1s 2; }
@keyframes empuja { 50% { transform: translateX(5px); } }

.minis { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; }
.minis::-webkit-scrollbar { display: none; }
.mini { position: relative; flex: 0 0 40px; height: 50px; overflow: hidden; border-radius: 10px; background: #fff; opacity: .62; transition: opacity .2s, box-shadow .2s; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--crudo); }
.mini b { position: absolute; inset: 0; display: none; place-items: center; background: rgba(20, 20, 18, .66); color: var(--crudo); font-family: var(--titulos); font-size: 20px; font-weight: 400; }
.mini.marcada { opacity: 1; }
.mini.marcada b { display: grid; }
.panel__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seguir-chico { min-height: 42px; padding: 8px 20px; border-radius: 999px; background: var(--crudo); color: var(--carbon); font-size: 15px; font-weight: 600; white-space: nowrap; transition: opacity .2s; }
.seguir-chico[aria-disabled="true"] { background: var(--vidrio-claro); color: rgba(239, 232, 218, .55); }

/* El fierro: cae al rojo vivo y se enfria sobre la foto */
.fierro { position: absolute; z-index: 3; left: 16px; top: 88px; display: none; place-items: center; width: 126px; height: 126px; border-radius: 50%; color: var(--crudo); border: 3px solid currentColor; background: rgba(20, 20, 18, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transform: rotate(-9deg); }
.fierro i { display: block; width: 74%; height: 52%; margin-top: -12%; background: currentColor; -webkit-mask: var(--fierro) center / contain no-repeat; mask: var(--fierro) center / contain no-repeat; }
.fierro b { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--titulos); font-size: 22px; font-weight: 400; line-height: 1; }
.lamina.marcada .fierro { display: grid; }
.fierro.golpe { animation: fierro-cae .22s cubic-bezier(.3, 0, .7, .2) both, fierro-enfria 1.5s linear .2s both; }
@keyframes fierro-cae { from { opacity: 0; transform: scale(2.1) rotate(-22deg); } to { opacity: 1; transform: scale(1) rotate(-9deg); } }
@keyframes fierro-enfria {
  0% { color: #FFE2B8; box-shadow: 0 0 34px 10px var(--brasa); background: rgba(255, 106, 31, .34); }
  35% { color: var(--brasa); box-shadow: 0 0 18px 3px rgba(255, 106, 31, .6); background: rgba(90, 30, 8, .4); }
  100% { color: var(--crudo); box-shadow: 0 0 0 0 rgba(255, 106, 31, 0); background: rgba(20, 20, 18, .34); }
}
.lamina.sacude .lamina__img.es-visible { animation: sacude .2s linear .18s both; }
@keyframes sacude { 25% { transform: translate3d(0, 5px, 0); } 60% { transform: translate3d(0, -2px, 0); } 100% { transform: none; } }

/* ---------- Precio ---------- */
.precio { display: flex; flex-direction: column; }
.precio small { font-size: 15px; color: rgba(239, 232, 218, .84); }
.precio b { font-family: var(--titulos); font-weight: 400; font-size: calc(var(--u) * 24); line-height: 1.04; letter-spacing: .01em; }
.opciones--fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opciones--fila .pill--opcion { text-align: center; }
.opciones--fila .ancho { grid-column: 1 / -1; }
.pill--opcion.es-primera { background: var(--crudo); color: var(--carbon); border-color: var(--crudo); font-weight: 600; }

/* ---------- Campos ---------- */
.campo { display: block; }
.campo__rotulo { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.campo__rotulo small { font-size: 13px; font-weight: 400; color: rgba(239, 232, 218, .72); }
.campo input { width: 100%; min-height: 52px; padding: 12px 18px; border-radius: 18px; background: rgba(239, 232, 218, .1); border: 1px solid var(--filo); font-size: 17px; }
.campo input::placeholder { color: rgba(239, 232, 218, .5); }
.campo input:focus { outline: none; border-color: var(--crudo); background: rgba(239, 232, 218, .16); }
.acepta { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.3; }
.acepta input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--crudo); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Gracias: la etiqueta colgante ---------- */
.etiqueta-cupon { position: relative; padding: 20px 18px 18px; border-radius: 20px; background: var(--crudo); color: var(--carbon); text-align: center; animation: colgar .7s var(--curva) .15s both; transform-origin: top center; }
.etiqueta-cupon::before { content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: rgba(20, 20, 18, .85); }
.etiqueta-cupon b { display: block; margin-top: 12px; font-family: var(--titulos); font-weight: 400; font-size: calc(var(--u) * 13); line-height: 1.1; letter-spacing: .04em; }
.etiqueta-cupon small { display: block; font-size: 14px; }
@keyframes colgar { 0% { opacity: 0; transform: rotate(-7deg) translateY(-14px); } 55% { opacity: 1; transform: rotate(2.5deg); } 100% { transform: none; } }

/* ---------- Mensajes ---------- */
.aviso { position: absolute; z-index: 30; left: 14px; right: 14px; top: 66px; padding: 12px 16px; border-radius: 16px; background: var(--crudo); color: var(--carbon); font-size: 14.5px; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--curva); pointer-events: none; }
.aviso.visible { opacity: 1; transform: none; }
.cargando { position: absolute; z-index: 35; inset: 0; display: grid; place-items: center; background: rgba(20, 20, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--titulos); font-size: 34px; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Pantallas bajas ---------- */
@media (max-height: 700px) {
  .titulo { font-size: calc(var(--u) * 10); }
  .titulo--xl { font-size: calc(var(--u) * 15.5); }
  .panel__nombre { font-size: calc(var(--u) * 9.4); }
  .minis, .panel__indicacion { display: none; }
  .precio b { font-size: calc(var(--u) * 17); }
  .talla { min-height: 62px; font-size: 25px; }
  .pill, .marcar { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
  .fierro { width: 88px; height: 88px; }
}

/* ---------- Aviso de privacidad ---------- */
.aviso-pagina { max-width: 680px; margin: 0 auto; padding: 28px 18px 48px; line-height: 1.5; }
.aviso-pagina h1 { margin: 0 0 16px; font-family: var(--titulos); font-weight: 400; font-size: 38px; line-height: 1.1; text-transform: uppercase; }
.aviso-pagina h2 { margin: 26px 0 6px; font-family: var(--titulos); font-weight: 400; font-size: 21px; letter-spacing: .02em; text-transform: uppercase; }
.aviso-pagina mark { padding: 0 3px; background: var(--caqui); color: var(--carbon); }
.aviso-pagina .pill { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}