/* ==========================================================================
   Tresojotas — Estilos base de Birome (PLANTILLA POR SITIO)
   --------------------------------------------------------------------------
   Estilos NEUTROS para las piezas que el cliente puede crear (noticias y
   subpáginas), pensados para que "la primera noticia" nunca se vea rota.
   Integrarlos en el CSS del sitio y adaptarlos a su diseño (tipografías,
   colores y .btn los define el sitio).
   ========================================================================== */

/* ---------- Variables de diseño (panel Estilo del modo edición) ----------
   El cliente cambia estos valores sin IA desde el modo edición (panel
   Estilo) y desde /admin; content/estilo.json + assets/js/estilo.js los
   aplican al cargar. Usarlas en TODO el CSS del sitio: lo que no pase por
   una variable no lo podrá cambiar el cliente. Nombres por prefijo, que es
   lo que decide el control del editor: color-*, fuente-*, tamano-* (SIEMPRE
   en px). Las claves del loader (estilo.campos) tienen que existir aquí.

   --color-sobre-marca y --color-sobre-texto NO se declaran: las calcula
   assets/js/estilo.js (y el modo edición) según lo claro u oscuro que sea el
   color elegido. REGLA: todo texto que vaya encima de --color-marca o de
   --color-texto usa var(--color-sobre-marca, #fff) / var(--color-sobre-texto,
   #fff), nunca #fff a pelo; si no, un color de marca claro deja los botones
   en blanco sobre blanco. */
:root {
  --color-marca: #2e7d4f;
  --color-texto: #1d1d1f;
  --color-fondo: #ffffff;
  --fuente-titulos: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tamano-texto: 17px;
  --tamano-titulos: 56px;   /* tope del h1; h2 y h3 van en em, así que le siguen */
}
body { font-family: var(--fuente-texto); font-size: var(--tamano-texto); color: var(--color-texto); background: var(--color-fondo); }
h1, h2, h3 { font-family: var(--fuente-titulos); }
/* El h1 lo manda "Tamaño de los títulos"; h2 y h3 van en em, así que siguen
   al "Tamaño del texto" y la proporción se mantiene (en rem no seguían a
   nada: subir el texto de 17 a 22 px dejaba los títulos igual). */
h1 { font-size: clamp(calc(var(--tamano-titulos) * .7), 5.2vw, var(--tamano-titulos)); }
h2 { font-size: clamp(1.7em, 3.4vw, 2.4em); }
h3 { font-size: 1.2em; }
a { color: var(--color-marca); }
.btn { background: var(--color-marca); color: var(--color-sobre-marca, #fff); }
/* Texto sobre una foto: el degradado oscuro de la portada lo pone el sitio, y
   encima siempre se lee en blanco. */
.hero, .hero h1 { color: #fff; }
/* El pie usa el color del texto como fondo: su texto va con el contraste */
.pie { background: var(--color-texto); color: var(--color-sobre-texto, #fff); }
.pie a { color: var(--color-sobre-texto, #fff); }

/* ---------- Noticias (#actualidad) ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.news-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-card__img { margin: 0; }
.news-card__img img { display: block; width: 100%; height: 190px; object-fit: cover; }
.news-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.news-card__date { font-size: .82rem; opacity: .65; }
.news-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.news-card__text { margin: 0; line-height: 1.55; }
.news-card__btn { align-self: flex-start; margin-top: 6px; }

/* ---------- Subpáginas (/p/<slug>) ---------- */
.pagina { max-width: 680px; margin: 48px auto; padding: 0 20px; }
.pagina__volver { display: inline-block; margin-bottom: 18px; text-decoration: none; font-weight: 600; }
.pagina__titulo { margin: 0 0 16px; line-height: 1.2; }
.pagina__img { margin: 0 0 20px; }
.pagina__img img { display: block; width: 100%; border-radius: 14px; }
.pagina__texto { line-height: 1.65; }
.pagina__btn { display: inline-block; margin-top: 22px; }

/* ---------- Menú de subpáginas ---------- */
[data-paginas-menu] a { text-decoration: none; }
[data-paginas-menu][hidden] { display: none; }

/* ---------- Cabecera móvil (menú plegable, assets/js/menu.js) ----------
   Obligatorio en toda web: a 375 px la cabecera es UNA fila (marca + botón
   "Menú") y el botón despliega los enlaces; nada de menús apilados que
   empujan la portada hacia abajo. HTML esperado (ver kit/js/menu.template.js):
     <header class="cabecera"><div class="cabecera__fila">
       <a class="marca">…</a>
       <button class="cabecera__menu" type="button" data-menu aria-expanded="false" aria-controls="menu-principal">Menú</button>
       <nav class="nav" id="menu-principal">…</nav>
     </div></header>
   menu.js marca html.menu-plegable al cargar y abre/cierra con
   .cabecera--abierta. Sin el script no hay botón y los enlaces se ven
   enteros debajo de la marca, como una lista (nunca una web sin menú).
   La cabecera necesita position (sticky o relative) para que el
   desplegable cuelgue de ella. Adaptar el punto de corte, los bordes y los
   colores al diseño del sitio. */
.cabecera__fila { display: flex; align-items: center; gap: 18px; }
.marca { white-space: nowrap; text-decoration: none; }
.nav { display: flex; flex: 1; align-items: center; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { text-decoration: none; white-space: nowrap; }
/* Botón "Menú": solo aparece en móvil y con menu.js cargado (bloque de abajo) */
.cabecera__menu { display: none; }

@media (max-width: 820px) {
  /* Cabecera compacta (una fila de unos 57 px): marca a la izquierda y
     "Menú" a la derecha. Sin menu.js no hay botón y los enlaces se ven
     enteros debajo, como una lista. */
  .cabecera__fila { flex-wrap: wrap; gap: 8px; }
  /* la marca la escribe el cliente: si no cabe, se recorta con puntos suspensivos en vez de romper la fila */
  .marca { flex: 1; min-width: 0; font-size: clamp(.9em, 4.4vw, 1.05em); overflow: hidden; text-overflow: ellipsis; }
  .nav { order: 10; flex: 0 0 100%; justify-content: flex-start; gap: 4px 16px; }

  /* Con menu.js: los enlaces se pliegan en un desplegable bajo la barra */
  .menu-plegable .cabecera__menu {
    display: inline-block; padding: 7px 12px;
    border: 1.5px solid rgba(0, 0, 0, .15); border-radius: 999px; background: transparent;
    color: var(--color-texto); font: 600 .85em/1.2 var(--fuente-texto); cursor: pointer; white-space: nowrap;
  }
  .menu-plegable .cabecera--abierta .cabecera__menu { border-color: var(--color-marca); color: var(--color-marca); }
  .menu-plegable .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 2px 16px 10px;
    background: var(--color-fondo); border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 24px 32px -24px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .menu-plegable .cabecera--abierta .nav { display: flex; }
  .menu-plegable .nav a { display: block; padding: 13px 0; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 1em; white-space: normal; }
  .menu-plegable .nav > a:first-child { border-top: 0; }
}