/* ============================================================
   El Garaje de Tío Toño — hoja de estilos única
   Concepto: "Garage Premium Nocturno"
   Sin frameworks, sin JavaScript. Solo CSS.
   ============================================================ */

/* ---------- 0. Tipografías (alojadas aquí, sin depender de terceros) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("fuentes/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("fuentes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens de diseño ---------- */
:root {
  /* Color */
  --fondo:        #0B0B0D;
  --panel:        #17171A;
  --panel-alto:   #1D1D21;
  --borde:        #34343A;
  --brasa:        #D9531E;
  --ambar:        #F2A93B;
  --metal:        #C9CDD3;
  --texto:        #F5F3EF;
  --texto-suave:  #A8A8AE;

  /* Escala de espaciado (múltiplos de 8) */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 40px;
  --e6: 56px;
  --e7: 72px;

  /* Radios */
  --radio-tarjeta: 18px;
  --radio-panel:   20px;
  --radio-chico:   12px;

  /* Sombra/resplandor de acento, una sola, reutilizada */
  --glow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(217, 83, 30, .55),
          0 0 22px rgba(217, 83, 30, .22);

  /* Tipografía */
  --titular: "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --cuerpo:  "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Ancho máximo del contenido navegable */
  --ancho: 1160px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1.125rem;          /* 18px mínimo absoluto */
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

ul { list-style: none; margin: 0; padding: 0; }
p  { margin: 0; }
svg { display: block; width: 100%; height: 100%; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e3);
}

/* ---------- 3. Fondo ambiental (asfalto + foco de taller) ---------- */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fondo);
  background-image:
    /* halo cenital, como el foco colgante del taller */
    radial-gradient(120% 70% at 50% -12%, rgba(242, 169, 59, .16) 0%, rgba(242, 169, 59, .05) 38%, transparent 68%),
    /* segundo rebote, más frío, hacia abajo */
    radial-gradient(90% 60% at 50% 105%, rgba(217, 83, 30, .10) 0%, transparent 62%);
}

/* grano de asfalto: SVG generado, ~300 bytes */
.ambiente::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
  animation: respirar 52s ease-in-out infinite alternate;
}

@keyframes respirar {
  from { transform: translate3d(0, 0, 0);        opacity: .045; }
  to   { transform: translate3d(1.5%, 2%, 0);    opacity: .065; }
}

/* ---------- 4. Cabecera ---------- */
.cabecera {
  position: relative;
  padding-top: var(--e6);
  padding-bottom: var(--e1);
}

.cabecera__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e2);
}

.emblema {
  width: 72px;
  height: 72px;
  color: var(--metal);
  filter: drop-shadow(0 0 14px rgba(242, 169, 59, .30));
}

.titulo {
  font-family: var(--titular);
  font-weight: 600;
  font-size: clamp(2.25rem, 8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--texto);
}

.titulo__nombre {
  display: block;
  color: var(--ambar);
}

.lema {
  font-size: clamp(1.125rem, 3.4vw, 1.375rem);
  color: var(--texto-suave);
  max-width: 32ch;
}

/* Línea discontinua de carretera */
.ruta {
  height: 10px;
  margin-top: var(--e4);
  background-image: repeating-linear-gradient(
    to right,
    var(--metal) 0 44px,
    transparent 44px 86px
  );
  opacity: .34;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.ruta--pie { margin-top: 0; margin-bottom: var(--e4); opacity: .2; }

/* ---------- 5. Zonas ---------- */
main { flex: 1 0 auto; padding-block: var(--e5) var(--e6); }

.zona { margin-bottom: var(--e6); }
.zona:last-child { margin-bottom: 0; }

.zona__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--titular);
  font-weight: 600;
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--borde);
}

.zona__icono { width: 34px; height: 34px; flex: 0 0 auto; }

/* La sección del taller se distingue de un vistazo: panel con veta cálida */
.zona--taller {
  padding: var(--e4) var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-panel);
  background-color: rgba(32, 24, 16, .38);
  background-image: repeating-linear-gradient(
    92deg,
    rgba(242, 169, 59, .05) 0 3px,
    transparent 3px 11px,
    rgba(217, 83, 30, .04) 11px 13px,
    transparent 13px 26px
  );
}

.zona--taller .zona__titulo { border-bottom-color: rgba(242, 169, 59, .28); }
.zona--taller .tarjeta { background-color: #1B1813; border-color: #3E3426; }

/* ---------- 6. Rejilla ---------- */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;      /* móvil: una sola columna */
  gap: var(--e2);
}

/* ---------- 7. Tarjeta de acceso ---------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 152px;
  height: 100%;
  padding: var(--e3) var(--e2);
  text-align: center;
  text-decoration: none;
  color: var(--texto);
  background-color: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
}

/* placa metálica: unifica logos de colores distintos */
.placa {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #34343A 0%, #1E1E22 58%, #141417 100%);
  box-shadow: inset 0 0 0 2px rgba(201, 205, 211, .22),
              inset 0 2px 6px rgba(255, 255, 255, .06),
              0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}

.placa svg {
  width: 44px;
  height: 44px;
  transition: transform .18s ease-out;
}

/* logos apaisados (Gmail, la patente): un poco más anchos para llenar la placa */
.placa--ancha svg { width: 54px; height: 54px; }

.rotulo {
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: 1.25rem;            /* 20px */
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto);
}

.sotorotulo {
  font-size: 1.0625rem;          /* 17px, texto de apoyo */
  color: var(--texto-suave);
  margin-top: calc(var(--e1) * -0.5);
}

/* Estados: hover solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-4px);
    border-color: var(--brasa);
    background-color: var(--panel-alto);
    box-shadow: var(--glow);
  }
  .tarjeta:hover .placa { box-shadow: inset 0 0 0 2px rgba(242, 169, 59, .55), 0 6px 14px rgba(0, 0, 0, .55); }
  .tarjeta:hover .placa svg { transform: scale(1.05); }
}

/* Pulsación: sensación de botón físico (todos los dispositivos) */
.tarjeta:active {
  transform: scale(.97);
  transition-duration: .1s;
}

/* Foco visible siempre, alto contraste */
.tarjeta:focus-visible {
  outline: 4px solid var(--ambar);
  outline-offset: 4px;
  border-color: var(--ambar);
}

/* ---------- 8. Pie ---------- */
.pie {
  flex: 0 0 auto;
  padding-bottom: var(--e5);
  border-top: 1px solid transparent;
}

.pie__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e1);
}

.pie__llave {
  width: 30px;
  height: 30px;
  color: var(--brasa);
  opacity: .9;
}

.pie__texto {
  font-family: var(--titular);
  font-weight: 500;
  font-size: clamp(1.1875rem, 4.6vw, 1.375rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--metal);
}

.pie__firma {
  font-size: 1.0625rem;
  color: var(--texto-suave);
  letter-spacing: .02em;
}

/* ---------- 9. Entrada al cargar ----------
   La cabecera se pinta de inmediato (nunca se oculta); sólo los títulos de
   sección y las tarjetas entran escalonados, en menos de un segundo. */
.zona__titulo,
.rejilla__celda {
  animation: entrar .45s ease-out both;
}

.zona__titulo   { animation-delay: 60ms; }
.rejilla__celda { animation-delay: calc(100ms + var(--i, 0) * 60ms); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 10. Puntos de quiebre ---------- */

/* Pantallas muy angostas: aire más ajustado */
@media (max-width: 379px) {
  .contenedor { padding-inline: var(--e2); }
  .zona--taller { padding-inline: var(--e2); }
  .placa { width: 68px; height: 68px; }
  .placa svg { width: 40px; height: 40px; }
}

/* Tablet: dos columnas */
@media (min-width: 768px) {
  .rejilla {
    gap: var(--e3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tarjeta { min-height: 176px; }
  .zona--taller { padding: var(--e4); }
}

/* Escritorio: tres columnas */
@media (min-width: 1024px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecera { padding-top: var(--e7); }
}

/* Escritorio amplio: cuatro columnas, contenido siempre centrado */
@media (min-width: 1440px) {
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjeta { min-height: 188px; }
}

/* El taller sólo tiene dos accesos: se quedan en dos columnas anchas
   para que la placa de la sección nunca se vea a medio llenar. */
@media (min-width: 768px) {
  .zona--taller .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 11. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 12. Impresión ---------- */
@media print {
  .ambiente { display: none; }
  body { background: #fff; color: #000; }
  .tarjeta { border-color: #999; box-shadow: none; }
}