/*
 * assets/css/bloques.css — Secciones (bloques de contenido)
 *
 * Nesos CMS v0.1.13 (motor v2). La carga el propio motor (includes/piezas.php)
 * con un <link> la primera vez que pinta un bloque en la pagina, asi que las
 * paginas sin secciones no la piden.
 *
 * TRES REGLAS:
 *
 * 1. La estetica de cada bloque NO esta aqui ni en un style= en linea. Va en
 *    datos/bloques.css, que hornea el panel al guardar, como variables:
 *      .b-n12 { --b-fondo:#e8eff3; --b-borde:#216480; --b-radio:12px }
 *    Aqui solo se USAN (var(--b-fondo, ...)) con su valor por defecto.
 *    Un style= en linea lo bloquearia la CSP estricta (style-src-attr).
 *
 * 2. El diseño adaptable va por CONTAINER QUERIES: cada .b-bloque es un
 *    contenedor, y el reparto en columnas depende del ancho del hueco donde
 *    se pega, no del de la pantalla.
 *
 * 3. TOKENS NEUTROS (§21.5 de PROYECTO_NESOS_CMS.md). Esta hoja es de nucleo
 *    y solo usa estos diez valores, que define cada sitio en su propia hoja:
 *
 *      --n-marca            color de marca (titulos, cifras)
 *      --n-acento           botones y enlaces
 *      --n-fondo            fondo de la pagina
 *      --n-superficie       fondo de tarjetas y de secciones destacadas
 *      --n-texto            texto normal
 *      --n-suave            texto secundario
 *      --n-linea            bordes finos
 *      --n-fuente-titulos
 *      --n-fuente-texto
 *      --n-radio            esquinas de botones y tarjetas
 *
 *    Si el sitio no define alguno, cae a un valor neutro legible. Las Olas
 *    los define en lasolas.css como equivalencias de sus --lo-*.
 *
 * Las reglas de ESQUELETO (.n-seccion, .n-contenedor, .n-boton) van con
 * :where(), que pesa cero: solo rellenan lo que la hoja del sitio no diga.
 * En Las Olas manda lasolas.css (.lo-seccion, .lo-boton…) y esto no cambia
 * nada de lo que ya se ve.
 */

/* ---------- Esqueleto por defecto (especificidad cero) ---------- */

:where(.n-seccion) { padding-block: clamp(2.5rem, 7vw, 5rem); }
:where(.n-contenedor) {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.75rem);
}
:where(.n-boton) {
  display: inline-block;
  padding: .75rem 1.6rem;
  border: 1px solid transparent;   /* mismo tamaño que la variante de borde */
  border-radius: var(--n-radio, 4px);
  background: var(--n-acento, #1d4e7a);
  color: #fff;
  font-family: var(--n-fuente-texto, inherit);
  text-decoration: none;
  line-height: 1.2;
}
:where(.n-boton):hover { filter: brightness(.9); }
:where(.n-boton):focus-visible { outline: 2px solid var(--n-acento, #1d4e7a); outline-offset: 3px; }

/* Ancla: al saltar a /#contacto, que la seccion no quede pegada al borde.
   El sitio puede subirlo si tiene cabecera fija (--n-cabecera-fija). */
:where(.b-sec[id], .b-bloque[id]) { scroll-margin-top: var(--n-cabecera-fija, 1rem); }

/* ---------- Comun ---------- */

.b-bloque {
  container-type: inline-size;
  background: var(--b-fondo, transparent);
  border-radius: var(--b-radio, 0);
  color: var(--n-texto, inherit);
}
.b-bloque.b-con-fondo,
.b-bloque.b-con-borde { padding: clamp(1rem, 4cqi, 2.5rem); }
.b-bloque.b-con-borde { border: 1px solid var(--b-borde); }
.b-bloque.b-con-sombra { box-shadow: 0 6px 24px rgb(0 0 0 / .08); }

.b-sec + .b-sec { padding-top: 0; }

.b-bloque .b-kicker {
  margin: 0 0 .4rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-acento, #1d4e7a);
}
.b-bloque .b-titulo {
  margin: 0 0 .9rem;
  font-family: var(--n-fuente-titulos, inherit);
  color: var(--n-marca, inherit);
}
.b-bloque p { margin: 0 0 1em; }
.b-bloque p:last-child { margin-bottom: 0; }

.b-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

/* Boton secundario. Especificidad 0,2,0 a proposito: gana a .lo-boton de Las
   Olas (0,1,0), que le pondria el fondo terracota. Contorno del color de
   acento sobre fondo claro; antes era lo-boton-borde (texto blanco, pensado
   para la foto de cabecera) y dentro de una seccion clara no se veia. */
.b-bloque .n-boton-borde {
  background: transparent;
  color: var(--n-acento, #1d4e7a);
  border: 1px solid currentColor;
}
.b-bloque .n-boton-borde:hover {
  background: var(--n-superficie, #f3f5f7);
  color: var(--n-acento, #1d4e7a);
}

/* ---------- Imagen y texto (split) ---------- */

.b-split-in {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.b-split .b-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--b-radio, 0);
  object-fit: cover;
}

/* Tarjeta en estrecho: el recuadro sube un poco sobre la foto. */
.b-estilo-tarjeta { gap: 0; }
.b-estilo-tarjeta .b-cuerpo {
  position: relative;
  z-index: 1;
  margin: -2.5rem 1rem 0;
  padding: 1.25rem 1.4rem;
  background: var(--n-superficie, #fff);
  border-radius: var(--b-radio, var(--n-radio, 4px));
  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
}
.b-estilo-tarjeta.b-sin-foto .b-cuerpo { margin: 0; }

@container (min-width: 40rem) {
  .b-split-in { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .b-split-in.b-lado-derecha .b-media { order: 2; }
  .b-split-in.b-sin-foto,
  .b-split-in.b-sin-texto { grid-template-columns: 1fr; }

  /* Tarjeta en ancho: la foto ocupa mas y el recuadro monta sobre su borde. */
  .b-split-in.b-estilo-tarjeta { grid-template-columns: 7fr 5fr; gap: 0; }
  .b-split-in.b-estilo-tarjeta.b-lado-derecha { grid-template-columns: 5fr 7fr; }
  .b-estilo-tarjeta .b-cuerpo { margin: 0 0 0 -4rem; padding: 2rem 2.2rem; }
  .b-estilo-tarjeta.b-lado-derecha .b-cuerpo { margin: 0 -4rem 0 0; }
  .b-split-in.b-estilo-tarjeta.b-sin-foto,
  .b-split-in.b-estilo-tarjeta.b-sin-texto { grid-template-columns: 1fr; }
  .b-estilo-tarjeta.b-sin-foto .b-cuerpo { margin: 0; }
}

/* ---------- Texto ---------- */

.b-texto-in.b-estrecho { max-width: 44rem; }
.b-texto-in.b-al-centro { text-align: center; margin-inline: auto; }

/* ---------- Llamada a la accion ---------- */

/* Sin fondo elegido, lleva la superficie del sitio: una llamada a la accion
   sin fondo se pierde entre las demas secciones. */
.b-cta:not(.b-con-fondo) {
  background: var(--n-superficie, #f3f5f7);
  padding: clamp(1.25rem, 5cqi, 3rem);
}
.b-cta-in { text-align: center; max-width: 40rem; margin-inline: auto; }
.b-cta .b-botones { justify-content: center; }

/* ---------- Cifras ---------- */

.b-cifras-in .b-titulo { text-align: center; }
.b-cifras-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
  text-align: center;
}
.b-cifra-num {
  display: block;
  font-family: var(--n-fuente-titulos, Georgia, 'Times New Roman', serif);
  font-size: clamp(2rem, 6cqi, 3rem);
  line-height: 1.1;
  color: var(--n-marca, #1d4e7a);
}
.b-cifra-txt {
  display: block;
  margin-top: .3rem;
  font-size: .95rem;
  color: var(--n-suave, #5f6368);
}

/* ======================================================================
   TIPOS DE NUCLEO NUEVOS EN 0.1.13: Portada, Opiniones, Horario, Contacto
   ====================================================================== */

/* ---------- Portada (hero) ---------- */

/* La seccion de la portada no lleva el relleno vertical de las demas y, en
   «a todo lo ancho», tampoco el limite del contenedor. */
.b-sec-hero { padding-block: 0; }
.b-sec-hero:has(.b-ancho-completo) > .n-contenedor { max-width: none; padding-inline: 0; }
.b-sec-hero:has(.b-ancho-contenido) { padding-top: clamp(0rem, 2vw, 1.5rem); }

.b-hero-in {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--n-radio, 6px);
  background: var(--n-marca, #1d1d3f);
  color: #fff;
}
.b-ancho-completo { border-radius: 0; }
.b-hero-in > * { grid-area: 1 / 1; }

.b-hero-foto { position: relative; }
.b-hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.b-alto-baja  { min-height: clamp(16rem, 38vw, 26rem); }
.b-alto-media { min-height: clamp(20rem, 48vw, 34rem); }
.b-alto-alta  { min-height: clamp(26rem, 80vh, 48rem); }

/* Velo: degradado de abajo arriba, que es donde va el texto. */
.b-hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 12 30 / .72) 0%, rgb(10 12 30 / .25) 55%, rgb(10 12 30 / .05) 100%);
}
.b-velo-fuerte .b-hero-foto::after { background: linear-gradient(to top, rgb(10 12 30 / .85), rgb(10 12 30 / .45)); }
.b-velo-no .b-hero-foto::after { display: none; }

.b-hero-txt {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: clamp(1.25rem, 5cqi, 3.5rem);
  max-width: 46rem;
  text-shadow: 0 1px 12px rgb(0 0 0 / .35);
}
.b-sin-foto .b-hero-txt { align-self: center; }
.b-hero-in .b-kicker { color: #fff; opacity: .9; }
.b-hero-titulo {
  margin: 0 0 .6rem;
  font-family: var(--n-fuente-titulos, inherit);
  font-weight: 300;
  font-size: clamp(2rem, 7cqi, 3.6rem);
  line-height: 1.08;
  color: #fff;
}
.b-hero-frase { margin: 0; font-size: clamp(1rem, 2.4cqi, 1.2rem); max-width: 36rem; }
.b-hero-in .b-botones { margin-top: 1.5rem; }
/* Secundario sobre la foto: contorno blanco, no el acento (que no se leeria). */
.b-bloque .b-hero-in .n-boton-borde { color: #fff; border-color: rgb(255 255 255 / .85); background: transparent; }
.b-bloque .b-hero-in .n-boton-borde:hover { background: rgb(255 255 255 / .15); color: #fff; }

/* ---------- Opiniones ---------- */

.b-op-cab { text-align: center; margin-bottom: 1.75rem; }
.b-op-sub { margin: 0; color: var(--n-suave, #5b6275); }
.b-op-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 22rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
}
.b-op-pista:focus-visible { outline: 2px solid var(--n-acento, #2f6f8f); outline-offset: 4px; }
.b-op {
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.4rem 1.5rem;
  background: var(--n-fondo, #fff);
  border: 1px solid var(--n-linea, #dfe3e8);
  border-radius: var(--n-radio, 6px);
}
.b-op-estrellas { display: flex; gap: 2px; color: #d9a21b; }
.b-op-estrellas svg { width: 1rem; height: 1rem; fill: currentColor; }
.b-op blockquote { margin: 0; flex: 1; font-size: .98rem; line-height: 1.6; }
.b-op figcaption { font-weight: 600; font-size: .9rem; color: var(--n-marca, #1d1d3f); }
.b-op-pais { display: block; font-weight: 400; color: var(--n-suave, #5b6275); }

/* ---------- Horario ---------- */

.b-hor-in { max-width: 34rem; margin-inline: auto; }
.b-hor-in .b-titulo { text-align: center; }
.b-hor-in > p { text-align: center; }
.b-hor-estado {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}
.b-hor-punto { width: .7rem; height: .7rem; border-radius: 50%; background: #9aa0a6; }
.b-hor-abierto .b-hor-punto { background: #2e8b57; box-shadow: 0 0 0 4px rgb(46 139 87 / .18); }
.b-hor-cerrado-ahora .b-hor-punto { background: #b3452f; }
.b-hor-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-linea, #dfe3e8); }
.b-hor-dia {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--n-linea, #dfe3e8);
}
.b-hor-franja { font-variant-numeric: tabular-nums; }
.b-hor-cerrado .b-hor-franja { color: var(--n-suave, #5b6275); }
.b-hor-hoy { font-weight: 600; color: var(--n-marca, #1d1d3f); background: var(--n-superficie, #f3f5f7); }
.b-hor-aviso {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--n-acento, #2f6f8f);
  background: var(--n-superficie, #f3f5f7);
}

/* ---------- Contacto y mapa ---------- */

.b-ct-in { display: grid; gap: 2rem; align-items: start; }
.b-ct-datos { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.b-ct-datos li { display: flex; gap: .8rem; align-items: flex-start; }
.b-ct-datos svg {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: .15rem;
  fill: none;
  stroke: var(--n-acento, #2f6f8f);
  stroke-width: 1.8;
}
.b-ct-etq {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n-suave, #5b6275);
}
.b-ct-datos a { color: inherit; font-weight: 600; text-decoration: none; }
.b-ct-datos a:hover { text-decoration: underline; }

@container (min-width: 44rem) {
  .b-ct-in { grid-template-columns: 5fr 7fr; gap: 2.5rem; }
  .b-ct-in.b-ct-sin-mapa { grid-template-columns: 1fr; }
}

/* ---------- El tiempo (0.1.15) ----------
   Caja del widget: la usan el tipo «El tiempo» y el lateral de «Presentación
   con horario y tiempo». Sale del widget de Las Olas, con los tokens --n-*.
   --n-fuente-cifras es opcional: si el sitio no la define, las cifras van
   con la tipografia de los titulos. */

.b-clima-in { max-width: 24rem; margin-inline: auto; }
.b-clima-in .b-titulo { text-align: center; }
.n-clima {
  padding: 1.1rem 1.25rem 1rem;
  background: var(--n-fondo, #fff);
  border: 1px solid var(--n-linea, #dfe3e8);
  border-radius: var(--n-radio, 0);
  color: var(--n-texto, inherit);
}
.n-clima-previo { margin: 0; font-size: 1.05rem; text-align: center; }
.n-clima-lugar {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--n-suave, #5b6275);
}
.n-clima-lugar svg { width: .75rem; height: .75rem; opacity: .7; }
.n-clima-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--n-linea, #dfe3e8);
}
.n-clima-temp {
  font-family: var(--n-fuente-cifras, var(--n-fuente-titulos, inherit));
  font-size: 3.2rem;
  line-height: .95;
  letter-spacing: -.03em;
}
.n-clima-temp span {
  font-size: 1.2rem;
  vertical-align: top;
  margin-left: .1rem;
  color: var(--n-suave, #5b6275);
}
.n-clima-cond { margin-top: .4rem; font-size: .8rem; line-height: 1.3; }
.n-clima-cond::before { content: '—'; color: var(--n-acento, #2f6f8f); margin-right: .35rem; }
.n-clima-icono { flex: 0 0 3rem; width: 3rem; height: 3rem; }
.n-clima-icono svg { display: block; width: 100%; height: 100%; }
.n-clima-metricas { display: grid; grid-template-columns: repeat(3, 1fr); }
.n-clima-metrica { padding: 0 .35rem; text-align: center; border-left: 1px solid var(--n-linea, #dfe3e8); }
.n-clima-metrica:first-child { border-left: 0; }
.n-clima-etq {
  margin-bottom: .25rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-suave, #5b6275);
}
.n-clima-valor {
  font-family: var(--n-fuente-cifras, var(--n-fuente-titulos, inherit));
  font-size: 1.15rem;
  line-height: 1;
}
.n-clima-valor span { margin-left: .1rem; font-size: .65rem; color: var(--n-suave, #5b6275); }
@media (prefers-reduced-motion: no-preference) {
  .n-clima-listo { animation: n-clima-entra .4s ease both; }
  @keyframes n-clima-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------- Presentación con horario y tiempo (0.1.15) ----------
   Tarjeta a la izquierda y lateral a la derecha; el lateral pasa debajo
   cuando el HUECO (no la pantalla) baja de 52rem. */

.b-bien-in { display: grid; gap: 2rem; align-items: start; }
.b-bien-tarjeta {
  padding: clamp(1.75rem, 5cqi, 3rem) clamp(1.25rem, 4cqi, 2.5rem);
  background: var(--n-fondo, #fff);
  border: 1px solid var(--n-linea, #dfe3e8);
  border-radius: var(--n-radio, 0);
}
.b-bien-tarjeta.b-al-centro { text-align: center; }
.b-bien-logo { display: block; width: 7.5rem; height: auto; margin: 0 0 1.5rem; }
.b-bien-tarjeta.b-al-centro .b-bien-logo { margin-inline: auto; }
.b-bien-cuerpo { max-width: 56ch; margin-block: 1.25rem; color: var(--n-suave, #5b6275); }
.b-bien-tarjeta.b-al-centro .b-bien-cuerpo { margin-inline: auto; }
.b-bien-boton { margin: 1.5rem 0 0; }
.b-bien-lado { display: grid; gap: 2rem; }
.b-bien-lado-tit {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--n-suave, #5b6275);
}
.b-bien-caja .n-horario {
  padding: 1rem 1.25rem;
  background: var(--n-fondo, #fff);
  border: 1px solid var(--n-linea, #dfe3e8);
  border-radius: var(--n-radio, 0);
}
.b-bien-caja .b-hor-estado { justify-content: flex-start; }
.b-bien-caja .b-hor-lista { border-top: 0; }
.b-bien-caja .b-hor-dia { padding: .45rem .25rem; font-size: .9rem; }
.b-bien-caja .b-hor-dia:last-child { border-bottom: 0; }
.b-bien-solo .b-bien-tarjeta { max-width: 52rem; margin-inline: auto; }

@container (min-width: 52rem) {
  .b-bien-in { grid-template-columns: minmax(0, 1.9fr) minmax(17rem, 1fr); gap: 2.5rem; }
  .b-bien-in.b-bien-solo { grid-template-columns: 1fr; }
}