/* ==========================================================================
   MARCA — Balio la Pena
   ==========================================================================
   Traducción del brandbook (unordinary brands, marzo 2025) a tokens de CSS.
   Se carga DESPUÉS de style.css y ANTES de rediseno.css, y solo en las
   páginas ya migradas, para que el piloto no altere las que faltan.

   Paleta oficial — son los cuatro colores del manual, sin añadidos:
     #0e6b62  jade      primario
     #33C3B2  turquesa  secundario
     #35EF80  verde     acento
     #F7F6F2  hueso     fondo

   La restricción 5 del manual prohíbe usar colores fuera de la paleta, así que
   aquí se retiran los que el sitio traía de antes y no están en ella:
   el azul tinta #303a4d y el gris arena #e1e4eb.

   La restricción 2 prohíbe el sombreado: no hay ni un box-shadow ni un
   text-shadow en esta hoja ni en rediseno.css. La jerarquía se construye con
   color, borde y espacio.
   ========================================================================== */

:root {
  /* --- Paleta oficial ---------------------------------------------------- */
  --marca-jade: #0e6b62;
  --marca-turquesa: #33c3b2;
  --marca-verde: #35ef80;
  --marca-hueso: #f7f6f2;

  /* --- Reasignación de los tokens del sitio -------------------------------
     Se conservan los nombres que ya usaban style.css y rediseno.css, pero
     ahora apuntan a la paleta de marca. Así el cambio alcanza también a la
     cabecera y al pie, que son compartidos.

     Contrastes medidos (WCAG):
       jade sobre hueso .......... 5,86:1  ✓ texto normal
       hueso sobre jade .......... 5,86:1  ✓ texto normal
       turquesa .................. 2,2–2,9:1 con cualquier color de la paleta
                                   → solo superficie gráfica, nunca fondo de texto
       verde sobre jade .......... 4,20:1  ✓ texto grande y marcas pequeñas
  -------------------------------------------------------------------------- */
  --color-jade: var(--marca-jade);
  --color-jade-profundo: #0a5049;      /* jade oscurecido para estados hover */
  --color-hueso: var(--marca-hueso);
  --color-blanco: #ffffff;

  /* El texto del sitio era #303a4d, que no está en la paleta. Pasa a jade. */
  --color-tinta: var(--marca-jade);
  --color-tinta-clara: #14837a;

  /* El gris arena tampoco está en la paleta. Se sustituye por un velo de
     turquesa sobre hueso: mismo papel de "segundo fondo claro", dentro de marca. */
  --color-arena: #e6f4f1;

  --color-menta: var(--marca-turquesa);
  --color-acento: var(--marca-verde);

  /* --- Uso de la marca ---------------------------------------------------- */
  --marca-borde: rgba(14, 107, 62, 0.18);
  --marca-borde-fuerte: var(--marca-turquesa);
}

/* --------------------------------------------------------------------------
   Nada de sombras (restricción 2 del manual).
   Se apagan también las que venían de style.css en la cabecera y el pie.
   -------------------------------------------------------------------------- */

.r-pagina *,
.r-pagina *::before,
.r-pagina *::after {
  text-shadow: none !important;
}

.r-pagina .header,
.r-pagina .footer,
.r-pagina .menu__link,
.r-pagina .actions-header__button,
.r-pagina .whatsapp-float-btn,
.r-pagina .footer__logo,
.r-pagina .footer__policy,
.r-pagina .footer__copyright {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Cabecera sobre fotografía
   El logo debe contrastar con el fondo (restricción 3): sobre el velo oscuro
   del hero va en hueso.
   -------------------------------------------------------------------------- */

.r-pagina .header {
  background: rgba(10, 16, 26, 0.32) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(247, 246, 242, 0.14);
}

.r-pagina .header .menu__link,
.r-pagina .header__logo,
.r-pagina .header__logo span,
.r-pagina .language-switcher__link,
.r-pagina .language-switcher__separator {
  color: var(--marca-hueso);
}

.r-pagina .header .menu__link:hover {
  background-color: rgba(51, 195, 178, 0.22);
}

.r-pagina .actions-header__button {
  background-color: var(--marca-jade);
  border: 2px solid var(--marca-turquesa);
  color: var(--marca-hueso);
}

.r-pagina .actions-header__button:hover {
  background-color: var(--color-jade-profundo);
}

/* La barra de frases toma el turquesa de marca con texto jade.
   Turquesa + jade da 2,89:1, insuficiente para texto pequeño, así que la
   barra va en hueso con el texto en jade y un filete turquesa. */
.r-pagina .inspiration-bar {
  background: var(--marca-hueso);
  border-bottom: 2px solid var(--marca-turquesa);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.r-pagina .inspiration-text {
  color: var(--marca-jade);
}

/* --------------------------------------------------------------------------
   PIE DE PÁGINA
   Única maquetación del pie en todo el sitio. Antes había dos: una rejilla de
   tres columnas en style.css, que con cuatro hijos dejaba el copyright colgado
   en una segunda fila, y otra distinta en rediseno.css solo para la portada.
   Por eso el pie se veía de dos maneras y ninguna estaba bien puesta.

   La estructura es la de siempre en un pie que se sostiene: la marca a la
   izquierda con una línea de qué es esto, dos columnas de enlaces al lado, y
   abajo una banda con el copyright y lo legal, separada por un filete.
   -------------------------------------------------------------------------- */

.r-pagina .footer {
  background: var(--marca-jade) !important;
  border-top: none;
  color: var(--marca-hueso);
}

.r-pagina .footer__container {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  /* Dos bloques: la marca, que ocupa más porque lleva logo y frase, y la
     columna de contacto. Había una tercera repitiendo el menú principal y se
     quitó, así que la rejilla pasa de tres huecos a dos. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(2.75rem, 6vw, 4rem);
}

.r-pagina .footer__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 34ch;
}

.r-pagina .footer__lema {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(247, 246, 242, 0.85);
}

.r-pagina .footer__titulo {
  margin: 0 0 0.9rem;
  font-family: var(--fuente-titulo, inherit);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marca-turquesa);
}

.r-pagina .footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.r-pagina .footer__enlace,
.r-pagina .footer__policy {
  display: inline-flex;
  align-items: center;
  /* Área táctil mínima sin separar visualmente los enlaces (WCAG 2.2). */
  min-height: 44px;
  color: rgba(247, 246, 242, 0.88);
  font-size: 0.98rem;
  text-decoration: none;
}

.r-pagina .footer__enlace:hover,
.r-pagina .footer__policy:hover {
  color: var(--marca-hueso);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Banda inferior --- */

.r-pagina .footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(247, 246, 242, 0.18);
}

.r-pagina .footer__copyright {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(247, 246, 242, 0.75);
  border-top: none;
}

.r-pagina .footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

.r-pagina .footer__legal .footer__policy {
  font-size: 0.88rem;
}

/* El contenedor del pie y su banda comparten anchura y márgenes con el resto
   de la página. `.footer__container` ya la traía de style.css; la banda la
   toma de aquí para quedar alineada con ella. */
.r-pagina .footer__container,
.r-pagina .footer__base {
  width: min(100% - 2rem, 74.624rem);
  margin-inline: auto;
}

/* style.css centra el pie entero por debajo de 62rem, de cuando era una fila
   de cuatro cosas sueltas. Con columnas, centrar deja los enlaces flotando
   respecto al copyright, que va a la izquierda. Se alinea todo a la izquierda. */
.r-pagina .footer__container,
.r-pagina .footer__base,
.r-pagina .footer__marca,
.r-pagina .footer__grupo {
  text-align: left;
  align-items: start;
}

.r-pagina .footer__base {
  align-items: center;
}

/* Hueco para el botón flotante, que va fijo abajo a la derecha y se comía el
   enlace de términos justo al llegar al pie. */
.r-pagina .footer__base {
  padding-right: clamp(9rem, 14vw, 11rem);
}

@media (max-width: 61.999rem) {
  .r-pagina .footer__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    flex-direction: unset;
    padding-inline: 0;
    /* style.css bajaba el hueco entre filas a 0,94rem en este tramo, de cuando
       el pie era una columna de cuatro cosas. Con bloques hace falta aire. */
    row-gap: clamp(2rem, 5vw, 3rem);
  }

  .r-pagina .footer__marca {
    max-width: 46ch;
  }
}

@media (max-width: 35.999rem) {
  .r-pagina .footer__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .r-pagina .footer__logo img {
    height: 52px;
  }

  /* En un teléfono no cabe el hueco lateral: lo legal pasa a ir encima del
     copyright y el botón flotante queda debajo de todo. */
  .r-pagina .footer__base {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.75rem;
    padding-right: 0;
    padding-bottom: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   BOTÓN DE MENÚ (LA HAMBURGUESA)
   Se veía de tres colores distintos: las barras de arriba y abajo en jade y la
   del medio en negro. El negro venía de un bloque suelto que quince páginas
   repetían en su propio <style>, ya retirado. Por debajo había además CINCO
   copias de la hamburguesa en style.css, cada una en su media query y con
   medidas distintas.

   Esta es la definición que manda: como va con `.r-pagina` delante, gana a
   todas ellas sin tener que borrarlas de una hoja de 3.000 líneas que aún
   sostiene el resto del sitio.

   Las tres barras en hueso, el mismo color que el texto de la cabecera, que
   flota sobre fotografía oscura. En jade no llegaban al 3:1 que la WCAG 1.4.11
   pide para un control.
   -------------------------------------------------------------------------- */

.r-pagina .icon-menu {
  /* 44x44 de zona pulsable con un dibujo de 24 px dentro. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.r-pagina .icon-menu span,
.r-pagina .icon-menu::before,
.r-pagina .icon-menu::after {
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  width: 24px;
  height: 2.5px;
  margin-left: -12px;
  border-radius: 2px;
  background-color: var(--marca-hueso);
  transition: transform 0.28s ease, opacity 0.18s ease, top 0.28s ease, bottom 0.28s ease;
}

.r-pagina .icon-menu::before { top: 14px; bottom: auto; }
.r-pagina .icon-menu::after  { bottom: 14px; top: auto; }

.r-pagina .icon-menu span {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Abierto: la del medio se apaga y las otras dos se cruzan.
   El color se repite aquí a propósito: style.css trae su propia versión del
   estado abierto y ahí volvía a pintar las barras en jade, así que la X salía
   de otro color que el icono cerrado. */
body.menu-open .r-pagina .icon-menu span,
body.menu-open .icon-menu span {
  opacity: 0;
}

body.menu-open .r-pagina .icon-menu::before,
body.menu-open .icon-menu::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--marca-hueso);
}

body.menu-open .r-pagina .icon-menu::after,
body.menu-open .icon-menu::after {
  bottom: 50%;
  top: auto;
  transform: translateY(50%) rotate(-45deg);
  background-color: var(--marca-hueso);
}

/* --------------------------------------------------------------------------
   EL PANEL DEL MENÚ
   Era negro al 85 % con desenfoque, así que la página seguía leyéndose por
   detrás: los titulares y las tarjetas se mezclaban con los enlaces del menú.
   Opaco y en jade, que es el mismo fondo del pie, y el texto en hueso encima
   da 5,86:1.
   -------------------------------------------------------------------------- */

@media (max-width: 47.999rem) {
  .r-pagina .menu__body {
    background: var(--marca-jade) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .r-pagina .menu__body .menu__link {
    color: var(--marca-hueso);
  }

  .r-pagina .menu__body .menu__link:hover,
  .r-pagina .menu__body .menu__link:focus {
    background-color: rgba(247, 246, 242, 0.14);
  }

  /* Centrar con flex algo que desborda deja la primera fila POR ENCIMA del
     área desplazable, y ahí no se llega ni con scroll: en una pantalla de
     menos de 700 px de alto «Inicio» aparecía cortado por la mitad y no
     había manera de verlo entero. `safe center` centra mientras cabe y deja
     de centrar en cuanto no cabe, que es justo lo que hace falta. */
  .r-pagina .menu__list,
  .r-pagina .menu__content,
  .r-pagina .menu__body {
    /* El `!important` es para vencer a un `justify-content: center !important`
       de style.css, no por costumbre. */
    justify-content: safe center !important;
  }
}

/* En una pantalla baja los cinco enlaces no caben: hacen falta 407 px y hay
   319. Se podía desplazar, pero un menú de cinco cosas donde «Contacto» no se
   ve es un menú a medias. Se aprieta el espaciado hasta que entren; el área
   pulsable se queda en 44 px, que es el mínimo. */
@media (max-width: 47.999rem) and (max-height: 45rem) {
  .r-pagina .menu__list {
    gap: 0 !important;
    padding-bottom: 8px !important;
  }

  .r-pagina .menu__body .menu__link {
    padding-block: 10px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .r-pagina .menu__mobile-header {
    padding-block: 0.35rem !important;
  }

  .r-pagina .menu__mobile-logo img {
    height: 30px;
  }

  /* El panel traía su propia cabecera con el logo, pero style.css la esconde
     con `display: none !important` en TRES reglas distintas, de cuando el
     panel era translúcido y por detrás ya se veía el logo de la página. Al
     volverlo opaco esa esquina quedaba vacía, con la X sola. El `!important`
     de aquí es para vencer a esos tres, no por costumbre. */
  .r-pagina .menu__mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.75rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-pagina .icon-menu span,
  .r-pagina .icon-menu::before,
  .r-pagina .icon-menu::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Botón flotante
   Ahora es la marca de WhatsApp y no la palabra «PLANEA»: el dibujo dice a
   dónde lleva antes de pulsarlo, que es lo que la palabra no hacía. Redondo y
   de 56 px, por encima de los 44 que pide la WCAG 2.2 para algo que se pulsa.

   Se queda en jade y no en el verde de WhatsApp porque el manual no admite
   colores fuera de la paleta (restricción 5). La silueta basta para
   reconocerlo.
   -------------------------------------------------------------------------- */

.r-pagina .whatsapp-float-btn {
  background: var(--marca-jade);
  color: var(--marca-hueso);
  border: 2px solid var(--marca-turquesa);
  width: 56px;
  height: 56px;
  min-width: 56px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;            /* por si quedara algún texto suelto dentro */
}

.r-pagina .whatsapp-float-btn__icono {
  width: 30px;
  height: 30px;
  display: block;
}

/* --------------------------------------------------------------------------
   Foco: el verde de acento es el único color de la paleta que destaca
   tanto sobre jade como sobre hueso.
   -------------------------------------------------------------------------- */

.r-pagina a:focus-visible,
.r-pagina button:focus-visible,
.r-pagina input:focus-visible,
.r-pagina textarea:focus-visible,
.r-pagina [tabindex]:focus-visible {
  outline: 3px solid var(--marca-verde);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Tamaños del logo
   -------------------------------------------------------------------------- */

/* El `!important` y el `object-fit` no son caprichos. style.css trae de la
   etapa anterior, cuando el logo era una insignia cuadrada, unas anchuras
   fijas con !important para móvil (48 px, y 44 o 52 px según el ancho exacto
   del teléfono) más `object-fit: cover`. Con el logotipo horizontal de marca,
   que es 2,8 veces más ancho que alto, esa combinación lo metía a la fuerza en
   una caja casi cuadrada y le recortaba los lados: en un teléfono se leía
   «BAL / LA PI». Aquí se libera la anchura y se cambia a `contain`, que
   encaja la marca entera en vez de recortarla. */
.r-pagina .header__logo img,
.r-pagina .menu__mobile-logo img {
  width: auto !important;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.r-pagina .footer__logo img {
  width: auto;
  height: 64px;
  display: block;
}

@media (max-width: 47.999rem) {
  .r-pagina .header__logo img,
  .r-pagina .menu__mobile-logo img {
    height: 38px;
  }

  /* El enlace del logo llevaba `overflow: hidden` y `max-width: 75%`, que con
     la anchura ya liberada no hacen falta y sí podrían volver a cortarlo. */
  .r-pagina .header__logo {
    overflow: visible;
    max-width: none;
  }
}

/* El enlace del logo debe cumplir el área táctil mínima aunque la imagen
   sea más baja que 44 px. */
.r-pagina .header__logo,
.r-pagina .menu__mobile-logo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   TEXTO SOBRE FOTOGRAFÍA
   Estos textos se sostenían con un text-shadow, que el manual prohíbe
   (restricción 2). Probé a meterlos en un panel hueso y quedaba fatal: cortaba
   el hero y el titular de encima no lo llevaba. La solución correcta es el
   velo, que es tratamiento de fondo y el manual no prohíbe: se refuerza la
   franja media del degradado para que el texto claro se lea sin caja ni sombra.
   -------------------------------------------------------------------------- */

.r-pagina .wrapper::before {
  background: linear-gradient(
    180deg,
    rgba(16, 22, 33, 0.56) 0%,
    rgba(16, 22, 33, 0.44) 34%,
    rgba(16, 22, 33, 0.46) 62%,
    rgba(16, 22, 33, 0.66) 100%
  );
}

/* Las páginas legales llevan párrafos por toda la altura, no un titular y dos
   líneas. Ahí un degradado deja tramos flojos: velo plano. */
.r-pagina .wrapper_privacidad::before,
.r-pagina .wrapper_terminos::before {
  background: rgba(16, 22, 33, 0.66);
}