/* ============================================================
   TREBOLIA — sistema visual del sitio (trebolia.com).
   Misma estructura que el sitio de Mah Tables (tapete con marco y
   fichas) con la paleta casino del app (src/constants/brand.ts):
   verde #0F6B5A, rojo #B3202A y dorado #C9A227, sobre el mantel
   monograma (trébol, T, ♠ y ♦ en dorado sobre verde oscuro, el
   estilo «Clásico» del app). Lo usan la portada y las páginas de
   Soporte, Privacidad, Términos y Borrar cuenta.
   Los nombres --menta* se conservan para legal.css: hoy apuntan a
   los tonos claros de la paleta nueva.
   ============================================================ */
:root{
  --verde:#0F6B5A; --verde-2:#15826E; --verde-sombra:#0A4A3E; --verde-oscuro:#0C3B2D;
  --menta:#F5E9C4; --menta-claro:#E6EFE8; --menta-linea:#B9D3C3;
  --naipe:#B3202A; --naipe-sombra:#7E141B; --naipe-claro:#F8EDEA;
  --dorado:#C9A227; --dorado-texto:#8A6914; --cielo:#1F4E9B; --lima:#1E7B46;
  --crema:#FFFBF2; --linea:#E8DCC2; --linea-2:#E2D6BC; --linea-3:#F1E9D8;
  --tinta:#1A1F1C; --texto-2:#3C4A43; --texto-2b:#4A5751; --texto-3:#6B746F; --texto-3b:#8A938E;
  --marco:var(--verde);
  --mantel-paso:160px; --outer:10px; --mat-radius:24px; --f1:7px; --f2:9px; --f3:10.5px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--tinta); font-family:'Work Sans',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100dvh;
  background-color:var(--verde-oscuro);
  background-image:url(/mantel.png); background-repeat:repeat;
  background-size:var(--mantel-paso) var(--mantel-paso); padding:var(--outer);
}
a{color:var(--verde);} a:hover{color:var(--naipe);}
button{font-family:'Work Sans',sans-serif; cursor:pointer;}
h1,h2,h3{font-family:'DM Serif Display',serif; font-weight:400; margin:0;}
:focus-visible{outline:3px solid var(--naipe); outline-offset:2px;}
[hidden]{display:none !important;}

.mat{
  margin:0 auto; background:var(--crema); border-radius:var(--mat-radius);
  box-shadow:inset 0 0 0 var(--f1) var(--marco), inset 0 0 0 var(--f2) var(--crema), inset 0 0 0 var(--f3) var(--dorado);
  display:flex; flex-direction:column;
}
/* «Ficha»: aquí es un naipe, blanco con canto de color */
.ficha{
  display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1;
  background:linear-gradient(#FFFFFF,#F4F8F5); border-radius:8px; font-family:'DM Serif Display',serif;
  box-shadow:0 4px 0 var(--canto,var(--verde)), 0 6px 10px rgba(20,50,40,.18);
}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
.logo img{display:block; width:44px; height:44px; border-radius:11px; background:var(--verde); padding:6px; box-shadow:0 4px 0 var(--verde-sombra), 0 6px 10px rgba(20,50,40,.2);}
.logo-txt{display:flex; flex-direction:column; line-height:.95;}
.logo-1{font-family:'Work Sans',sans-serif; font-weight:700; letter-spacing:.22em; color:var(--verde);}
.logo-2{font-family:'DM Serif Display',serif; font-style:italic; color:var(--texto-3); white-space:nowrap;}
.eyebrow{font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--naipe);}
.pie{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--texto-3b); border-top:1px solid #EFE6D3; padding-top:16px;}
.pie a{color:var(--texto-3b);}
.lang-pill{display:flex; padding:3px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--linea-2);}
.lang-pill button{height:34px; padding:0 12px; border:0; border-radius:999px; font-size:13px; font-weight:700; background:transparent; color:var(--texto-2);}
.lang-pill button[aria-pressed="true"]{background:var(--verde); color:#fff;}
.btn-verde{display:inline-flex; align-items:center; gap:10px; border:0; border-radius:12px; background:var(--verde); color:#fff; text-decoration:none; font-weight:700; font-size:15px; box-shadow:0 4px 0 var(--verde-sombra);}
.btn-verde:hover{color:#fff;}
.btn-borde{border:0; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--linea-2); font-weight:600; font-size:15px; color:var(--verde);}
.btn-naipe{border:0; border-radius:12px; background:var(--naipe); color:#fff; font-weight:700; box-shadow:0 4px 0 var(--naipe-sombra);}
.btn-naipe:active, .btn-verde:active{transform:translateY(2px);}

@media (min-width:900px){
  :root{--outer:28px; --mat-radius:26px; --f1:10px; --f2:13px; --f3:15px;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }