/* Los Cliucket · estilos generales. El aspecto de cada bloque viene del diseño (estilos en línea);
   aquí van las fuentes, el comportamiento responsive y los estados interactivos. */

@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/lexend-variable.woff2) format('woff2'); }
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/bagel-fat-one.woff2) format('woff2'); }
@font-face { font-family: 'Gochi Hand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/gochi-hand.woff2) format('woff2'); }

:root { --gx: clamp(28px, 7vw, 120px); color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Lexend', system-ui, sans-serif; color: #1A1A1F; background: #FFFCF3; overflow-x: hidden; }
a { color: #1A1A1F; }
a:hover { color: #E4533D; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #1F3A5F; outline-offset: 3px; border-radius: 6px; }
section[id], [id^="m-"] { scroll-margin-top: 12px; }

/* ---------- Dos maquetas: escritorio y móvil ---------- */
.v { width: 100%; min-height: 100vh; overflow-x: clip; }
.v-mob { display: none !important; }
@media (max-width: 1023px) {
  .v-desk { display: none !important; }
  .v-mob { display: flex !important; }
}

/* Escritorio: márgenes laterales fluidos y contenido centrado en pantallas muy anchas */
.v-desk > header, .v-desk > section, .v-desk > footer,
.v-legal > header, .v-legal > section, .v-legal > main, .v-legal > footer {
  padding-left: max(var(--gx), calc((100% - 1200px) / 2)) !important;
  padding-right: max(var(--gx), calc((100% - 1200px) / 2)) !important;
}
/* Portátiles y tabletas en horizontal: la maqueta de escritorio se escala entera (así no se apelotona) */
@media (min-width: 1024px) and (max-width: 1179px) { .v-desk { zoom: 0.71; } }
@media (min-width: 1180px) and (max-width: 1279px) { .v-desk { zoom: 0.82; } }
@media (min-width: 1280px) and (max-width: 1365px) { .v-desk { zoom: 0.89; } }
@media (min-width: 1366px) and (max-width: 1439px) { .v-desk { zoom: 0.95; } }

/* Móvil y tableta: contenido centrado hasta 640 px, fondos a todo el ancho */
.v-mob > header, .v-mob > section, .v-mob > footer, .v-mob > nav {
  padding-left: max(20px, calc((100% - 640px) / 2)) !important;
  padding-right: max(20px, calc((100% - 640px) / 2)) !important;
}

/* ---------- Menú móvil ---------- */
.menu-movil { background: #BFE6FA; border-bottom: 3px solid #1A1A1F; padding-top: 4px; padding-bottom: 20px; }
.menu-movil[hidden] { display: none; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.menu-movil a { display: block; text-decoration: none; background: #FFFFFF; border: 3px solid #1A1A1F; border-radius: 14px;
  box-shadow: 3px 3px 0 #1A1A1F; padding: 12px 16px; font-size: 17px; font-weight: 700; }

/* ---------- Estados del diseño ---------- */
.dc-if { display: contents; }
.dc-if[hidden] { display: none; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

button[data-act], a[href], button[data-star] { -webkit-tap-highlight-color: transparent; }
button[data-act]:not([disabled]):hover, a[data-ev]:hover { filter: brightness(1.04); }
button[data-act]:not([disabled]):active, a[style*="box-shadow"]:active { transform: translate(2px, 2px); }
button[aria-busy="true"] { opacity: 0.65; cursor: progress !important; }
button[data-star] svg { transition: transform .12s ease; }
button[data-star]:hover svg { transform: scale(1.12) rotate(-6deg); }
input[aria-invalid="true"] { border-color: #C2412D !important; }

/* ---------- Página legal en pantallas pequeñas ---------- */
@media (max-width: 899px) {
  .v-legal > header { padding-top: 14px !important; padding-bottom: 14px !important; gap: 12px; }
  .v-legal > header img { height: 48px !important; }
  .v-legal > header > div { gap: 10px !important; }
  .v-legal > header > div > a { padding: 8px 14px !important; font-size: 15px !important; }
  .v-legal > section { padding-top: 44px !important; padding-bottom: 40px !important; }
  .v-legal h1 { font-size: 42px !important; }
  .v-legal > section p { font-size: 17px !important; }
  .v-legal > main { padding-top: 36px !important; padding-bottom: 56px !important; gap: 36px !important; }
  .v-legal > main > section { padding: 30px 22px !important; border-radius: 22px !important; box-shadow: 5px 5px 0 #1A1A1F !important; }
  .v-legal h2 { font-size: 34px !important; }
  .v-legal dl { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
  .v-legal dd { margin-bottom: 8px !important; }
  .v-legal > footer { flex-direction: column !important; gap: 12px !important; text-align: center; }
  .v-legal > footer > div { align-items: center !important; }
}
@media (max-width: 480px) {
  .v-legal > header > div > a { font-size: 0 !important; padding: 10px !important; }
  .v-legal > header > div > a svg { width: 22px; height: 22px; }
}
@media (max-width: 899px) {
  .v-legal > main > section > div[style*="rotate"] { padding: 24px 18px 20px !important; }
}