/* tweakcards.com, estilo del manual de marca TWEAK!
   Responsive: movil primero; los puntos de corte estan al final de cada bloque.
   Anchos de referencia: movil < 600, tablet 600 a 900, escritorio > 900. */

/* ?v= en la URL: la CDN y los navegadores guardan las fuentes 30 dias (.htaccess). Al cambiar la fuente
   se cambia la version aqui y en el preload de Base.astro, o se seguiria viendo la anterior. No pedir
   la URL nueva a produccion antes de desplegar: la CDN guardaria la fuente vieja con ella. */
@font-face{font-family:"Tweak_font";src:url("/fuentes/Tweak_font.woff2?v=2026-11-02d") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-017F,U+2000-206F,U+20AC,U+2190-2193}
/* el resto de Tweak_font (griego, cirilico, vietnamita...) solo se descarga en las paginas que lo usan */
@font-face{font-family:"Tweak_font";src:url("/fuentes/Tweak_font-ext.woff2?v=2026-11-02d") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0180-024F,U+02B0-02FF,U+0370-03FF,U+0400-045F,U+1E00-1EFF}
@font-face{font-family:"Londrina Solid";src:url("/fuentes/LondrinaSolid-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Londrina Solid";src:url("/fuentes/LondrinaSolid-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mogra";src:url("/fuentes/Mogra-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Baloo";src:url("/fuentes/Baloo-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fuentes/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fuentes/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fuentes/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fuentes/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --azul-tweak:#0C60A8; --azul-logo:#064872; --cian:#18A8DE; --naranja:#F69C1E;
  --amarillo:#F6DE12; --verde:#3FA535; --rojo:#E4322B; --morado:#7B3F98;
  --tinta:#0F2540; --gris:#5B6B7C; --hueso:#F6F8FB; --linea:#E3E8EF; --blanco:#fff;
  --ancho:1080px;
  --lateral:16px;                 /* margen lateral, crece con la pantalla */
  --cabecera:60px;
}
@media (min-width:600px){:root{--lateral:24px;--cabecera:64px}}
@media (min-width:900px){:root{--lateral:32px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecera) + 16px);-webkit-text-size-adjust:100%}
/* el pie siempre abajo: el cuerpo ocupa al menos la pantalla y el contenido principal estira */
body{min-height:100svh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > footer{margin-top:auto}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinta);background:var(--blanco);line-height:1.65;font-size:15px;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul-tweak)}
.env{max-width:var(--ancho);margin:0 auto;padding:0 var(--lateral)}
/* Tweak_font tiene minusculas desde el 02/11/2026, pero en la web los titulos siguen todo en mayusculas
   (David): se pasan aqui, no en el texto, para que el navegador aplique las reglas de cada idioma */
.display{text-transform:uppercase;font-family:"Tweak_font",Impact,sans-serif;font-weight:400;letter-spacing:.01em}
@media (min-width:600px){body{font-size:15.5px}}

/* --- cabecera --------------------------------------------------------------- */
.barra{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.barra .env{display:flex;align-items:center;gap:8px;height:var(--cabecera);position:relative}
.barra .marca{margin-right:auto}
.barra .marca{flex-shrink:0}
.barra .marca img{height:38px;width:auto;border-radius:8px}
/* menu: en movil se abre con la hamburguesa y cae en vertical bajo la cabecera; en escritorio, en linea */
.hamburguesa{order:3;flex-shrink:0;width:44px;height:44px;border:1px solid var(--linea);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
.hamburguesa span{display:block;width:20px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .2s,opacity .2s}
.barra.abierta .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.barra.abierta .hamburguesa span:nth-child(2){opacity:0}
.barra.abierta .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.barra nav{display:none;position:absolute;left:0;right:0;top:var(--cabecera);background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 12px 30px rgba(0,20,50,.12);padding:8px var(--lateral) 12px;flex-direction:column;gap:2px}
.barra.abierta nav{display:flex}
.barra nav a{padding:12px 12px;border-radius:8px;text-decoration:none;color:var(--gris);font-size:15px;font-weight:500;min-height:44px;display:flex;align-items:center}
.barra nav a:hover{background:var(--hueso);color:var(--tinta)}
.barra nav a.activa{color:var(--azul-tweak);font-weight:600}
/* «Dónde comprar», el ultimo del menu: boton naranja como el «Comprar TWEAK!» de la portada */
header.barra nav a.comprar{background:var(--naranja);color:var(--tinta);font-weight:700;justify-content:center;margin-top:6px}
header.barra nav a.comprar:hover{background:#FFB04A;color:var(--tinta)}
@media (min-width:1100px){
  .barra .marca img{height:40px}
  .hamburguesa{display:none}
  .barra nav,.barra.abierta nav{display:flex;position:static;flex-direction:row;align-items:center;gap:6px;background:none;border:0;box-shadow:none;padding:0;flex:1;justify-content:flex-end;min-width:0}
  .barra nav a{font-size:14px;padding:8px 12px;white-space:nowrap}
  header.barra nav a.comprar{margin:0 0 0 4px}
}

/* --- selector de idioma: un boton con la bandera actual que despliega la lista ---------- */
.idiomas{position:relative;flex-shrink:0;order:2}
.idiomas summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;min-height:44px;border:1px solid var(--linea);border-radius:999px;color:var(--tinta);font-weight:600;font-size:13px;background:#fff}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--gris)}
.idiomas summary:hover{background:var(--hueso)}
.idiomas img{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.idiomas ul{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:0 12px 30px rgba(0,20,50,.14);min-width:180px;z-index:30}
/* la lista no cabe en un movil: hace scroll propio dentro de lo que queda de pantalla */
.idiomas ul{max-height:calc(100vh - var(--cabecera) - 16px);max-height:calc(100svh - var(--cabecera) - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.idiomas ul a{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:44px;border-radius:8px;text-decoration:none;color:var(--tinta);font-size:14px;white-space:nowrap}
.idiomas ul a:hover{background:var(--hueso)}
.idiomas ul a[aria-current="true"]{color:var(--azul-tweak);font-weight:600}
@media (min-width:1100px){.idiomas{order:0}}

/* --- perfil: icono y popup con entrar (sin sesion) o cerrar sesion (con sesion) --------------- */
.perfil{position:relative;flex-shrink:0;order:2}
.perfil summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;color:var(--azul-tweak);background:#fff}
.perfil summary::-webkit-details-marker{display:none}
.perfil summary:hover{background:var(--hueso)}
.perfil-menu{position:absolute;right:0;top:calc(100% + 6px);padding:6px;background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:0 12px 30px rgba(0,20,50,.14);min-width:170px;z-index:30}
.perfil-salir,.perfil-entrar{display:block;width:100%;text-align:left;padding:10px 12px;min-height:44px;border:0;border-radius:8px;background:none;color:var(--tinta);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box}
.perfil-salir:hover,.perfil-entrar:hover{background:var(--hueso)}
/* con sesion, el popup es el menu de la zona privada: Mi cuenta, Mi tienda, manual, usuarios y tiendas */
.perfil-menu a:not(.perfil-entrar){display:flex;align-items:center;padding:10px 12px;min-height:44px;border-radius:8px;color:var(--tinta);font-size:14px;white-space:nowrap;text-decoration:none}
.perfil-menu a:not(.perfil-entrar):hover{background:var(--hueso)}
.perfil-menu a[aria-current="page"]{color:var(--azul-tweak);font-weight:600}
.perfil-menu a[hidden]{display:none}
.perfil-menu a + form,.perfil-menu a + .perfil-salir{border-top:1px solid var(--linea);margin-top:4px;padding-top:4px}
.perfil-salir[hidden],.perfil-entrar[hidden]{display:none}
@media (min-width:1100px){.perfil{order:0}}

/* --- cabecera: barra azul con iconos y textos en blanco en todos los tamaños (David, 04/11/2026; antes, solo con hamburguesa); las listas desplegables siguen blancas */
.barra{background:var(--azul-tweak);border-bottom-color:var(--azul-logo)}
.hamburguesa,.idiomas summary,.perfil summary{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.hamburguesa:hover,.idiomas summary:hover,.perfil summary:hover{background:rgba(255,255,255,.12)}
.hamburguesa span{background:#fff}
.idiomas summary::after{border-top-color:#fff}
.barra nav a,header.barra nav .enlace{color:#fff}
.barra nav a:hover,header.barra nav .enlace:hover{background:rgba(255,255,255,.12);color:#fff}
.barra nav a.activa{color:#fff;font-weight:700;background:rgba(255,255,255,.14)}
/* el menu desplegado de la hamburguesa */
@media (max-width:1099.98px){
  .barra nav{background:var(--azul-tweak);border-bottom-color:var(--azul-logo);box-shadow:0 12px 30px rgba(0,20,50,.25)}
}

.portada{min-height:calc(100svh - var(--cabecera));display:flex;align-items:center;justify-content:center;padding:40px 0;position:relative;overflow:hidden;background:var(--azul-logo)}
.portada-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portada::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,96,168,.86),rgba(6,72,114,.94));z-index:1}
.boton{display:block;text-align:center;padding:12px 18px;border-radius:12px;background:#fff;color:var(--azul-tweak);font-weight:600;text-decoration:none;font-size:15px;border:2px solid #fff;transition:transform .12s;min-height:46px}
.boton:hover{transform:translateY(-1px);background:var(--hueso)}
.boton.primario{background:var(--naranja);border-color:var(--naranja);color:var(--tinta);font-size:16px;font-weight:700}
.boton.primario:hover{background:#E58A0F}
.red{display:inline-flex;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;background:#fff}
.red img{width:22px;height:22px}
.red.instagram{background:#E1306C}.red.tiktok{background:#111}.red.youtube{background:#FF0000}
@media (min-width:600px){
  .portada{padding:56px 0}
}

/* --- hero de las paginas largas: composicion con la mascota y cartas reales --- */
.hero{color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 72% 55%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    repeating-conic-gradient(from 0deg at 72% 55%, rgba(255,255,255,.07) 0deg 7deg, rgba(255,255,255,0) 7deg 14deg),
    linear-gradient(180deg, #1478C6 0%, var(--azul-tweak) 60%, var(--azul-logo) 100%)}
.hero .env{display:grid;grid-template-columns:1fr;gap:10px;padding-top:32px;padding-bottom:22px}
.hero-texto{text-align:center;padding-bottom:6px}
.hero-logo{width:min(360px,82%);margin:0 auto}
.hero h1{font-size:clamp(24px,6.6vw,40px);margin:14px 0 0;font-weight:400;line-height:1.1;text-shadow:0 3px 0 var(--azul-logo)}
.hero .pronuncia{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.3;color:#fff}
.escena{width:min(86%,400px);margin:0 auto}
.escena img{width:100%;filter:drop-shadow(0 12px 18px rgba(0,20,50,.35))}
@media (min-width:760px){
  .hero .env{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;padding-top:40px;padding-bottom:36px}
  .hero-texto{text-align:left;padding-bottom:0}
  .hero-logo{width:min(420px,88%);margin:0}
  .hero h1{font-size:clamp(24px,3.2vw,40px);margin-top:18px}
  .escena{width:100%;max-width:430px;margin:0 0 0 auto}
}

/* --- dos columnas: indice lateral + contenido ------------------------------- */
/* bloque de contenido suelto (texto bajo la portada, pantallas de la zona privada): mismo aire
   vertical que las paginas a dos columnas, para que no quede pegado a la cabecera ni al pie */
.env.bloque{padding-top:18px;padding-bottom:48px}
.env.bloque > .tarjeta{max-width:860px;margin:0 auto}
.doscol{display:grid;grid-template-columns:1fr;gap:16px;padding-top:18px;padding-bottom:48px;align-items:start}
.lateral{min-width:0;position:sticky;top:var(--cabecera);z-index:10;background:linear-gradient(var(--blanco) 80%,rgba(255,255,255,0));margin:0 calc(-1 * var(--lateral));padding:8px var(--lateral) 10px}
.indice{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:10px;border:1px solid var(--linea);background:#fff;color:var(--tinta);text-decoration:none;font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap}
.indice a:hover{border-color:var(--azul-tweak);color:var(--azul-tweak)}
.contenido{display:flex;flex-direction:column;gap:14px;min-width:0}
.boton.salto{align-self:flex-start;background:var(--azul-tweak);border-color:var(--azul-tweak);color:#fff;padding:10px 20px}
.boton.salto:hover{background:var(--azul-logo);border-color:var(--azul-logo)}
@media (min-width:900px){
  .env.bloque{padding-top:34px;padding-bottom:64px}
  .doscol{grid-template-columns:230px minmax(0,1fr);gap:28px;padding-top:34px;padding-bottom:64px}
  .lateral{top:calc(var(--cabecera) + 20px);margin:0;padding:0;background:none}
  .indice{flex-direction:column;gap:6px;overflow:visible}
  .indice a{white-space:normal;padding:8px 12px}
  .contenido{gap:18px}
}

/* --- tarjetas de contenido ---------------------------------------------------- */
.tarjeta{min-width:0;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:20px 18px;scroll-margin-top:calc(var(--cabecera) + 70px)}
/* /reglas/: el navegador no maqueta los bloques de las reglas ni las preguntas hasta que se acercan a
   la pantalla; asi la imagen del hero (el LCP) se pinta antes. `auto` recuerda el alto real una vez visto. */
article.reglas > *{content-visibility:auto;contain-intrinsic-size:auto 80px}
/* los títulos no: content-visibility recorta lo que sobresale y la fuente de títulos saca «¿» y «¡» de la caja (01/11/2026) */
article.reglas > h2,article.reglas > h3{content-visibility:visible;contain-intrinsic-size:none}
#preguntas-frecuentes{content-visibility:auto;contain-intrinsic-size:auto 1500px}
.tarjeta h2{text-transform:uppercase;font-family:"Tweak_font",Impact,sans-serif;font-weight:400;font-size:clamp(17px,1.9vw,21px);margin:0 0 14px;letter-spacing:.02em;line-height:1.3;color:var(--azul-tweak)}
.tarjeta h2 strong{font-weight:400}
.tarjeta h3{font-size:18px;margin:24px 0 8px;font-weight:600;color:var(--azul-logo)}
.tarjeta h3 strong{font-weight:600}
.tarjeta p{margin:0 0 12px}
.tarjeta ul,.tarjeta ol{margin:0 0 14px;padding-left:20px}
.tarjeta li{margin:5px 0}
.tarjeta li p{margin:0}
.tarjeta figure{margin:14px 0 18px;text-align:center}
.tarjeta figure img{border-radius:12px;margin:0 auto}
.tarjeta img{border-radius:12px}
/* la carta azul del 7 de las reglas: con unos 300 px basta (David, 01/11/2026) */
.tarjeta img[src*="tweak-carta-7-azul"],.contenido .tarjeta>p>img[src*="tweak-carta-7-azul"]{width:min(100%,300px)}
.tarjeta img.compo{border-radius:0;padding:6px;width:100%;height:auto}   /* composiciones: a todo el ancho del contenedor, sin deformar */
/* norma de marca: reversos y cartas de accion, siempre sobre fondo oscuro para que se vea su borde blanco */
.tarjeta img.compo.oscuro{background:var(--azul-logo);border-radius:14px;padding:18px 22px}
.tarjeta a{font-weight:500}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px;border-radius:10px}
.tarjeta table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px;margin:0}
.tarjeta th,.tarjeta td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tarjeta th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);font-weight:600;background:var(--hueso)}
.iconos{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.iconos img{width:96px;height:96px;border-radius:18px}
@media (min-width:600px){.iconos{gap:18px}.iconos img{width:110px;height:110px}}
/* Contenido por datos (Markdown): las imagenes no llevan clase, se estilan por su posicion.
   Una imagen sola en su parrafo es una composicion: a todo el ancho de la tarjeta. */
.contenido .tarjeta>p>img{display:block;width:100%;height:auto;border-radius:0;padding:6px;margin:14px auto}
/* Un parrafo con varias imagenes es la fila de iconos (jugadores/edad/duracion): en pequeno y en fila. */
.contenido .tarjeta>p:has(img+img){display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:6px 0 18px}
.contenido .tarjeta>p:has(img+img)>img{width:96px;height:96px;border-radius:18px;padding:0;margin:0}
@media (min-width:600px){.contenido .tarjeta>p:has(img+img)>img{width:110px;height:110px}}
/* Las notas "Importante" de las reglas son citas (>) en Markdown: se pintan como el aviso verde. */
.contenido .tarjeta blockquote{background:#EAF7EE;border:1px solid #BFE3C9;border-left:5px solid #1B7A3D;border-radius:0 12px 12px 0;padding:12px 18px;margin:14px 0}
.contenido .tarjeta blockquote p{margin:0;color:#155F31}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin:6px 0 4px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:#000;cursor:pointer;display:block}
.video-facade picture{display:contents}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
/* el vídeo vertical del móvil: como mucho 560 px de alto, para que asome lo que hay debajo */
@media (max-device-width:599px),(max-device-height:599px){.video.con-vertical{aspect-ratio:9/16;width:min(100%,315px,50vh);margin-inline:auto}}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:54px;border-radius:14px;background:var(--azul-tweak);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 14px rgba(0,0,0,.35)}.video-facade:hover .video-play{background:var(--azul-logo)}
.nota{font-size:13px;color:var(--gris);margin:-6px 0 0 6px}
@media (min-width:600px){
  .tarjeta{padding:26px 28px;scroll-margin-top:calc(var(--cabecera) + 74px)}
  .tarjeta h3{font-size:19px}
}
@media (min-width:900px){.tarjeta{scroll-margin-top:calc(var(--cabecera) + 20px)}}

/* --- norma de marca: las cartas de accion se escriben [T!], corchetes en el naranja del logotipo --- */
.ti{white-space:nowrap;font-weight:700}
.ti i{font-style:normal;color:var(--naranja)}

/* --- pie ------------------------------------------------------------------- */
footer{padding:26px 0 36px;color:var(--gris);font-size:13px;border-top:1px solid var(--linea);background:var(--hueso)}
footer .env{display:flex;flex-direction:column;gap:12px;text-align:center}
footer .pie-legal{display:flex;flex-direction:column;gap:4px}
@media (min-width:600px){footer .env{flex-direction:row;justify-content:space-between;align-items:flex-start;text-align:left;gap:16px}footer .pie-enlaces{text-align:right}}
body.inicio footer{background:var(--azul-logo);color:#B9CBDD;border-top:0}

/* --- boton flotante para volver arriba --------------------------------------- */
.arriba{position:fixed;right:16px;bottom:16px;z-index:30;width:46px;height:46px;border-radius:50%;background:var(--azul-tweak);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;text-decoration:none;box-shadow:0 6px 18px rgba(0,20,50,.3);
  opacity:.92;transition:opacity .15s,transform .15s}
.arriba:hover{opacity:1;transform:translateY(-2px);background:var(--azul-logo)}
.arriba[hidden]{display:none}
@media (min-width:600px){.arriba{right:24px;bottom:24px}}
footer a{color:var(--azul-tweak);font-weight:500;text-decoration:none}
footer a:hover{text-decoration:underline}
body.inicio footer a{color:#fff}

/* --- accesibilidad ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boton{transition:none}}
a:focus-visible,.boton:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

/* --- boton de compra dentro de una tarjeta (seccion 9 de TWEAK!) ----------- */
.tarjeta .boton.comprar{display:inline-flex;align-items:center;gap:12px;padding:10px 26px 10px 14px;font-size:16px}
.tarjeta .boton.comprar img{width:28px;height:28px;display:block}

/* --- aviso destacado dentro de las reglas (verde, "importante") ------------- */
.importante{background:#EAF7EE;border:1px solid #BFE3C9;border-left:5px solid #1B7A3D;border-radius:0 12px 12px 0;padding:12px 18px;margin:14px 0}
.importante p{margin:0;color:#155F31}

/* --- preguntas frecuentes: cada pregunta separada de la anterior ---------- */
.tarjeta p.pregunta{margin-top:48px}
.tarjeta p.pregunta:first-of-type{margin-top:0}

/* --- zona privada ------------------------------------------------------------ */
.env.estrecho{max-width:560px}
.formulario label{display:block;font-weight:600;margin:14px 0 6px}
.formulario input[type=email],.formulario input[type=password],.formulario input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;font:inherit}
.formulario .casilla{font-weight:400;display:flex;gap:8px;align-items:center}
.formulario .boton{margin-top:18px;width:100%}
.formulario .error{color:#B4271A;margin:6px 0 0}
.barra nav form{display:contents}
.barra nav .enlace{background:none;border:0;cursor:pointer;padding:12px 12px;border-radius:8px;color:var(--gris);font:inherit;font-size:15px;font-weight:500;min-height:44px;display:flex;align-items:center;text-align:left}
.barra nav .enlace:hover{background:var(--hueso);color:var(--tinta)}
@media (min-width:1100px){.barra nav .enlace{font-size:14px;padding:8px 12px;white-space:nowrap}}
.tabla-usuarios td,.tabla-usuarios th{padding:8px 10px;border-bottom:1px solid var(--linea);text-align:left}