/*
Theme Name:   Mett Selector
Theme URI:    https://mettgorras.com
Description:  Landing selectora de país para la raíz de mettgorras.com. Tema
              deliberadamente mínimo: sin jQuery, sin la librería de bloques,
              sin fuentes externas y con las banderas incrustadas como SVG.
              Se activa SOBRE la instalación existente: no hace falta instalar
              un WordPress nuevo ni borrar el actual.
Author:       Gorras Mega Tic Tac
Version:      1.1.0
Text Domain:  mett-selector
*/

:root{
  --negro:#000;
  --amarillo:#FFE420;   /* extraído del logo */
  --blanco:#fff;
  --gris:#8a8a8a;
  --superficie:#111;
  --borde:#262626;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--negro);color:var(--blanco);
  /* Sin fuentes web: evita una petición bloqueante y el parpadeo de texto. */
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  line-height:1.5;
}
.envoltorio{
  width:100%;max-width:1120px;margin:0 auto;padding:clamp(2rem,6vw,4rem) 1.25rem;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
/* width/height explícitos en el <img> reservan el espacio y evitan el salto
   de layout mientras carga. */
/* ── Los dos logos ────────────────────────────────────────────
   Móvil: apilados, la marca ARRIBA.
   Desktop: en fila, la marca a la DERECHA.
   El cambio de posición se hace con `order`, no duplicando las imágenes:
   así solo hay un <img> de cada una en el HTML y no se descargan dos veces. */
.logos{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.6rem,2.2vw,1.75rem);
  margin:0 auto clamp(1.5rem,4vw,2.5rem);
}
.logo{width:min(420px,78vw);height:auto;display:block}
.marca{width:min(108px,26vw);height:auto;display:block;order:-1}  /* arriba en móvil */
/* La marca es cuadrada y, apilada sobre el logo, empujaba las banderas fuera
   de la primera pantalla en móvil. Se mantiene contenida para que los cuatro
   países sigan viéndose de un vistazo, que es el objetivo del selector. */

@media (min-width:561px){
  .logos{flex-direction:row;justify-content:center;align-items:center}
  .marca{order:1;width:clamp(90px,12vw,130px)}                    /* a la derecha en desktop */
}
h1{font-size:clamp(1.5rem,4.5vw,2.25rem);font-weight:800;letter-spacing:.02em;
   margin:0 0 .5rem;text-transform:uppercase}
h1 .destacado{color:var(--amarillo)}
.subtitulo{margin:0;color:var(--gris);font-size:clamp(.95rem,2.5vw,1.05rem)}

/* ── Rejilla de países ────────────────────────────────────── */
.paises{list-style:none;margin:0;padding:0;display:grid;
        gap:clamp(1rem,2.5vw,1.5rem);grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .paises{grid-template-columns:repeat(2,1fr)} }

.tarjeta{
  display:flex;flex-direction:column;height:100%;
  background:var(--superficie);border:2px solid var(--borde);border-radius:14px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
.tarjeta:hover,.tarjeta:focus-visible{border-color:var(--amarillo);transform:translateY(-4px)}
/* El foco debe verse sin depender del hover: hay quien navega con teclado. */
.tarjeta:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.bandera{display:block;line-height:0;background:var(--borde)}
.bandera svg{width:100%;height:auto;display:block;aspect-ratio:3/2}

.texto{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.15rem}
.nombre{font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.dominio{font-size:.8rem;color:var(--gris);word-break:break-all}
.tarjeta:hover .nombre,.tarjeta:focus-visible .nombre{color:var(--amarillo)}

/* ── Pie ──────────────────────────────────────────────────── */
.pie{text-align:center;padding:1.75rem 1.25rem;border-top:1px solid var(--borde);
     color:var(--gris);font-size:.85rem}

/* ── Móvil ────────────────────────────────────────────────────
   En una columna con la bandera a tamaño completo, cada tarjeta ocupaba una
   pantalla entera y había que hacer scroll para ver los cuatro países. En un
   selector eso es un fallo: las opciones deben verse de un vistazo. */
@media (max-width:560px){
  .paises{grid-template-columns:1fr;gap:.75rem}
  .tarjeta{flex-direction:row;align-items:center}
  .bandera{width:104px;flex:0 0 104px}
  .texto{padding:.8rem 1rem;gap:.1rem}
  .nombre{font-size:1.05rem}
}

@media (prefers-reduced-motion:reduce){
  .tarjeta{transition:none}
  .tarjeta:hover,.tarjeta:focus-visible{transform:none}
}