/* CloClo Market Place — selector de país.
   Mismo diseño que el HTML original: foto a sangre con velo, todo centrado en
   Bodoni Moda, dos países en columnas.

   Lo que cambia desde el panel entra por variables CSS, que el tema imprime en
   línea (ver inc/setup.php). Los valores de aquí son solo el respaldo por si
   esa inyección faltara. */

:root{
  --blanco:#fff;
  --negro:#000;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --boton:"Roboto Flex",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fondo:none;
  --fondo-posicion:100% 50%;
  --velo-color:#000;
  --velo-opacidad:.6;
  --logo-ancho:210px;

  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  background:var(--negro);
  font-family:var(--display);
  color:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

.portada{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  background:var(--fondo) var(--fondo-posicion)/cover no-repeat;
  overflow:hidden;
}

.portada::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--velo-color);
  opacity:var(--velo-opacidad);
}

.contenido{
  position:relative;
  width:100%;
  max-width:1140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.marca{width:var(--logo-ancho);max-width:100%;height:auto;display:block}

.portada h1{
  margin:20px 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:50px;
  line-height:44px;
  color:var(--blanco);
}

.bajada{
  margin:20px 0 0;
  max-width:935px;
  font-weight:600;
  font-size:25px;
  line-height:30px;
}

.paises{
  margin-top:30px;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:60px;
}

.pais{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.bandera{width:75px;max-width:100%;height:auto;display:block}

.pais h2{
  margin:10px 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:25px;
  line-height:30px;
  color:var(--blanco);
}

.pais p{
  margin:10px 0 0;
  max-width:443px;
  font-weight:600;
  font-size:16px;
  line-height:21px;
}

.boton{
  margin-top:20px;
  display:inline-block;
  padding:12px 24px;
  border-radius:3px;
  background:var(--blanco);
  color:var(--negro);
  font-family:var(--boton);
  font-weight:600;
  font-size:13px;
  line-height:13px;
  text-decoration:none;
  transition:background-color .2s ease, transform .2s ease;
}
.boton:hover{background:#e6e6e6;transform:translateY(-1px)}
.boton:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important}
}

/* Tableta */
@media (max-width:900px){
  .portada h1{font-size:40px;line-height:40px}
  .bajada{font-size:21px;line-height:27px}
  .paises{gap:32px}
}

/* Móvil: se mantienen las dos columnas, como en el original */
@media (max-width:600px){
  .portada{padding:32px 14px}
  .marca{width:min(160px,var(--logo-ancho))}
  .portada h1{margin-top:16px;font-size:30px;line-height:32px}
  .bajada{margin-top:14px;font-size:16px;line-height:21px}
  .paises{margin-top:24px;gap:16px}
  .bandera{width:52px}
  .pais h2{margin-top:12px;font-size:19px;line-height:24px}
  .pais p{margin-top:8px;font-size:13px;line-height:18px}
  .boton{margin-top:16px;padding:11px 18px;font-size:12px;line-height:12px}
}

@media (max-width:360px){
  .portada h1{font-size:26px;line-height:28px}
  .pais p{font-size:12px;line-height:17px}
  .boton{padding:10px 14px;font-size:11px;line-height:11px}
}

/* Un solo país: no dejar una columna vacía */
.paises.paises--uno{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto}

/* Barra de administración: que no tape el contenido centrado */
body.admin-bar .portada{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px)}
@media (max-width:782px){
  body.admin-bar .portada{min-height:calc(100vh - 46px);min-height:calc(100svh - 46px)}
}