/* =========================================================================
   Base de la plantilla de bloques: colores, tipografía, botones, cabecera
   con menú (y su versión móvil) y pie. Los estilos de cada bloque están en
   bloques/<tipo>/estilos.css; el build los junta en css/bloques.css.
   ========================================================================= */

:root {
  --papel: oklch(0.985 0.003 260);
  --blanco: oklch(0.99 0.003 260);
  --tinta: oklch(0.2 0.012 260);
  --gris: oklch(0.46 0.012 260);
  --gris-claro: oklch(0.5 0.01 260);
  --linea: oklch(0.92 0.005 260);
  --linea-fuerte: oklch(0.88 0.006 260);
  --suave: oklch(0.965 0.004 260);
  --acento: oklch(0.52 0.16 262);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --alto-cabecera: 75px;
}
/* El color de acento se puede cambiar desde el panel (Sitio → Marca); la
   versión oscura para :hover se calcula de él. */
.sitio {
  --acento-fuerte: var(--acento);
  --acento-fuerte: oklch(from var(--acento) calc(l - 0.08) c h);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--alto-cabecera); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--acento); }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: oklch(0.62 0.01 260); opacity: 1; }

.sitio { min-height: 100vh; display: flex; flex-direction: column; }

/* Rayado que ocupa el lugar de una imagen mientras no hay foto */
.rayado { background: repeating-linear-gradient(135deg, oklch(0.95 0.004 260) 0 12px, oklch(0.93 0.005 260) 12px 24px); }

/* ---------- Encabezado de sección (rótulo, título, texto) ---------- */
.encabezado { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rotulo { margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); }
.titulo-seccion { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.texto-seccion { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }

/* ---------- Botones ---------- */
.boton { display: inline-block; font-size: 16px; font-weight: 600; padding: 16px 28px; border-radius: 999px; }
.boton--chico { font-size: 15px; padding: 10px 18px; }
.boton--acento { background: var(--acento); color: var(--blanco); }
.boton--acento:hover { background: var(--acento-fuerte); color: var(--blanco); }
.boton--borde { border: 1px solid oklch(0.86 0.006 260); }
.boton--borde:hover { border-color: var(--tinta); }
.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--tinta:hover { background: var(--acento); color: var(--papel); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: oklch(0.985 0.003 260 / 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  max-width: 1200px; margin: 0 auto; padding: 18px 32px; min-height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.marca__cuadro { width: 22px; height: 22px; border-radius: 6px; background: var(--acento); }
.menu { display: flex; gap: 32px; font-size: 15px; font-weight: 500; margin-left: auto; margin-right: 8px; }
.menu a, .menu-movil__lista a { transition: color .2s; }
.menu a[aria-current], .menu-movil__lista a[aria-current] { color: var(--acento); }
.cabecera__acciones { display: flex; gap: 12px; align-items: center; }

.hamburguesa {
  display: none; width: 44px; height: 44px; margin-right: -10px; border: none; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburguesa span { width: 22px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .2s, opacity .2s; }
.cabecera.is-abierta .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera.is-abierta .hamburguesa span:nth-child(2) { opacity: 0; }
.cabecera.is-abierta .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: se despliega bajo la cabecera, encima de la página (si la
   empujara, al cerrarse todo se recorrería y el enlace elegido quedaría fuera). */
.menu-movil {
  position: absolute; top: 100%; left: 0; right: 0;
  display: none; grid-template-rows: 0fr; opacity: 0; pointer-events: none;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}
.cabecera.is-abierta .menu-movil { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.menu-movil__recorte { min-height: 0; overflow: hidden; }
.menu-movil__panel {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 12px 32px 28px;
  display: flex; flex-direction: column; background: var(--papel);
}
.menu-movil__lista { display: flex; flex-direction: column; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.menu-movil__lista a { padding: 16px 0; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; }
.menu-movil__boton { margin-top: 24px; text-align: center; padding: 16px 20px; }

@media (max-width: 767px) {
  .menu, .cabecera__acciones { display: none; }
  .hamburguesa { display: flex; }
  .menu-movil { display: grid; }
}

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); }
.pie__fila {
  max-width: 1200px; margin: 0 auto; padding: 48px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 14px; color: var(--gris);
}
.marca--pie { font-size: 16px; color: var(--tinta); }
.marca--pie .marca__cuadro { width: 18px; height: 18px; border-radius: 5px; }
.pie__enlaces { display: flex; gap: 28px; flex-wrap: wrap; }