/*
 | SOPORTAL · soportal.es
 |
 | Los colores y las tipografías salen del kit de marca, sin inventar ninguno:
 | `08-colores/colores.css`. Terracota manda, verde plaza para lo oscuro, ocre
 | para el acento y arena para respirar.
 */

:root {
  --terracota: #B5502E;
  --terracota-oscuro: #913F23;
  --verde: #2A4B3C;
  --verde-claro: #3C6650;
  --ocre: #E9C46A;
  --arena: #F4EDE4;
  --arena-suave: #FBF7F2;
  --tinta: #1F1B18;
  --tinta-suave: #5A524B;
  --borde: #E4D9CC;

  --display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  --texto: 'Manrope', system-ui, -apple-system, sans-serif;

  --ancho: 1140px;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(31,27,24,.04), 0 12px 32px -12px rgba(31,27,24,.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--terracota); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -.02em; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 12px 0;
}
.saltar:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }

/* ───────────────────────────────────────────────── Botones ── */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  text-decoration: none;
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }

.boton--principal { background: var(--terracota); color: #fff; }
.boton--principal:hover { background: var(--terracota-oscuro); color: #fff; }

.boton--linea { border-color: currentColor; color: var(--verde); }
.boton--linea:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

.boton--claro { background: var(--ocre); color: var(--tinta); }
.boton--claro:hover { background: #f2d489; color: var(--tinta); }

.boton--grande { font-size: 1.15rem; padding: 1.05rem 2.25rem; }

/* ───────────────────────────────────────────────── Cabecera ── */

.cabecera {
  background: var(--verde);
  position: sticky; top: 0; z-index: 40;
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.cabecera__marca img { width: 178px; height: auto; }
.cabecera__nav { display: flex; align-items: center; gap: 1.75rem; }
.cabecera__nav a { color: #F6F1EA; font-weight: 600; font-size: .95rem; }
.cabecera__nav a:hover { color: var(--ocre); text-decoration: none; }
.cabecera__nav .boton { font-size: .9rem; padding: .6rem 1.15rem; }
.cabecera__nav .boton:hover { color: var(--tinta); }

@media (max-width: 820px) {
  .cabecera__nav a:not(.boton) { display: none; }
  .cabecera__marca img { width: 148px; }
}

/* ───────────────────────────────────────────────── Portada ── */

.hero {
  position: relative;
  background: var(--verde);
  color: #F6F1EA;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 7.5rem);
  overflow: hidden;
}

/*
 | EL MOTIVO DE LA PLAZA: el propio símbolo de la marca, en su versión de trazo
 | fino --que es la que el manual pide para tamaños grandes-- y con el verde
 | claro del fondo. No es un adorno cualquiera: es la marca.
 */
.hero__plaza {
  position: absolute; inset: auto -14% -30% auto;
  width: min(620px, 72vw); aspect-ratio: 1;
  background: url("/img/plaza-fondo.svg") center / contain no-repeat;
  opacity: .42;
  pointer-events: none;
}

.hero__caja { position: relative; max-width: 46rem; }

.hero__antetitulo {
  margin: 0 0 1.1rem;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
  color: var(--ocre);
}

.hero__titulo {
  font-size: clamp(2.6rem, 7.5vw, 4.6rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}
.hero__titulo em { font-style: normal; color: var(--ocre); }

.hero__entrada {
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  color: #E6DED4; margin: 0 0 2rem; max-width: 40rem;
}
.hero__entrada strong { color: #fff; }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__acciones .boton--linea { color: #F6F1EA; }
.hero__acciones .boton--linea:hover { background: #F6F1EA; color: var(--verde); border-color: #F6F1EA; }

.hero__cifras {
  list-style: none; margin: 3.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2.75rem;
}
.hero__cifras b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; color: var(--ocre);
}
.hero__cifras span { font-size: .9rem; color: #CFC5B9; }

/* ───────────────────────────────────────────────── Secciones ── */

.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.seccion--arena { background: var(--arena); }
.seccion--oscura { background: var(--verde); color: #F6F1EA; }

.etiqueta {
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .75rem;
  color: var(--terracota); margin: 0 0 .85rem;
}
.etiqueta--claro { color: var(--ocre); }

.seccion__titulo { font-size: clamp(1.85rem, 4.2vw, 2.8rem); font-weight: 700; max-width: 26ch; }
.seccion__entrada { max-width: 48ch; color: var(--tinta-suave); margin-top: 1rem; }
.seccion--oscura .seccion__entrada { color: #CFC5B9; }

.cuadricula-2 {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cuadricula-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.cuadricula-2 h2 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); font-weight: 700; }
.prosa p { margin: 0 0 1.1rem; color: var(--tinta-suave); font-size: 1.05rem; }
.prosa strong { color: var(--tinta); }

/* ───────────────────────────────────────────────── Portales ── */

.portales {
  margin-top: 2.75rem;
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .portales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .portales { grid-template-columns: repeat(3, 1fr); } }

.portal {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.85rem 1.6rem 1.6rem;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  border-top: 5px solid var(--acento, var(--terracota));
  transition: transform .18s ease, box-shadow .18s ease;
}
.portal:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(31,27,24,.28); }

.portal__simbolo { width: 52px; height: 52px; }
.portal__nombre { font-size: 1.6rem; font-weight: 700; margin-top: 1rem; }
.portal__ciudad {
  margin: .15rem 0 1rem; font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  color: var(--tinta-suave);
}
.portal__texto { margin: 0 0 1.15rem; color: var(--tinta-suave); font-size: .98rem; }

.portal__lista { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .93rem; }
.portal__lista li { position: relative; padding-left: 1.35rem; margin-bottom: .5rem; color: var(--tinta-suave); }
.portal__lista li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--acento, var(--terracota));
}

.portal__enlace {
  margin-top: auto; font-family: var(--display); font-weight: 700;
  color: var(--terracota);
}

/* ───────────────────────────────────────────────── Rejilla ── */

.rejilla {
  margin-top: 2.75rem;
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pieza {
  background: var(--arena-suave); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.35rem 1.25rem;
}
/*
 | LOS ICONOS SON DIBUJOS, NO EMOJI.
 |
 | La primera versión llevaba emoji y quedaba simpática, que no es lo que pide
 | esta página: cada sistema los dibuja a su manera --en Windows son otros-- y
 | al lado de esta tipografía restan seriedad. Doce trazos sencillos, del color
 | de la marca, dicen lo mismo y se ven igual en todas partes.
 */
.pieza__icono { display: block; width: 26px; height: 26px; margin-bottom: .75rem; color: var(--terracota); }
.pieza__icono svg { width: 100%; height: 100%; display: block; }
.pieza h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.pieza p { margin: 0; font-size: .92rem; color: var(--tinta-suave); }

/* ───────────────────────────────────────────────── Principios ── */

.principios {
  margin-top: 2.75rem;
  display: grid; gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.principios h3 {
  font-size: 1.2rem; font-weight: 700; color: var(--ocre); margin-bottom: .55rem;
  padding-top: 1.1rem; border-top: 2px solid rgba(233,196,106,.35);
}
.principios p { margin: 0; color: #CFC5B9; font-size: .97rem; }

/* ───────────────────────────────────────────────── Llamada ── */

.llamada { text-align: center; max-width: 44rem; }
.llamada__simbolo { width: 56px; height: 56px; margin: 0 auto 1.25rem; }
.llamada h2 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 700; }
.llamada p { color: var(--tinta-suave); margin: 1.1rem auto 1.9rem; max-width: 40rem; }
.llamada__pie { font-size: .88rem; margin-top: 1.1rem; }

/* ───────────────────────────────────────────────── Pie ── */

.pie { background: var(--tinta); color: #CFC5B9; padding: clamp(2.75rem, 6vw, 4rem) 0 1.5rem; }
.pie__fila {
  display: grid; gap: 2.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pie__fila { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.pie__marca img { width: 168px; margin-bottom: 1rem; }
.pie__marca p { margin: 0; font-size: .92rem; max-width: 24rem; }

.pie__col { display: flex; flex-direction: column; gap: .5rem; }
.pie__col h2 {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: #8C8078; margin-bottom: .35rem;
}
.pie__col a { color: #E6DED4; font-size: .94rem; }
.pie__col a:hover { color: var(--ocre); }
.pie__editora p { margin: 0; font-size: .94rem; }
.pie__eficatio { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ocre); }

.pie__legal {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid #37302B;
  font-size: .85rem; color: #8C8078;
}
.pie__legal p { margin: 0; }
.pie__legal a { color: #8C8078; text-decoration: underline; }

/* ───────────────────────────────────────────────── Páginas de texto ── */

.pagina { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.pagina h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: 1.5rem; }
.pagina h2 { font-size: 1.35rem; font-weight: 700; margin: 2.25rem 0 .75rem; }
.pagina p, .pagina li { color: var(--tinta-suave); }
.pagina ul { padding-left: 1.25rem; }
.pagina .contenedor { max-width: 46rem; }

/* ───────────────────────────────────────────────── Aviso de cookies ── */

.cookies {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60;
  max-width: 34rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 18px 44px -14px rgba(31,27,24,.35);
  padding: 1.25rem 1.35rem;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 1rem; font-size: .92rem; color: var(--tinta-suave); }
.cookies__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookies .boton { font-size: .9rem; padding: .6rem 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS TRES PORTALES, DE VERDAD

   Capturas reales de meliya.com, informalaga.es e infocordoba.es. Es lo más
   convincente que hay en toda la página: enseñar el producto funcionando gana a
   cualquier cosa que se pueda escribir sobre él.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero__reja {
  position: relative;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__reja { grid-template-columns: 1.05fr .95fr; }
}

/*
 | SE SALÍAN POR LA DERECHA. El abanico se hace con `translate` y `rotate`, y
 | eso no cuenta para el ancho de la caja: el tercer móvil quedaba medio fuera
 | de la pantalla. Se le da su sitio y se le prohíbe desbordar.
 */
.moviles {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: 2.5rem 1rem;
  overflow: hidden;
}

.movil {
  margin: 0;
  width: clamp(112px, 17vw, 168px);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--marco, rgba(255,255,255,.9));
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.5);
  transition: transform .3s ease;
}
.movil img { display: block; width: 100%; height: auto; }
.movil figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* En abanico: el de en medio delante y un poco más grande. */
.movil--1 { transform: rotate(-8deg) translateY(18px); margin-right: -2.2rem; z-index: 1; }
.movil--2 { transform: translateY(-10px) scale(1.06); z-index: 3; }
.movil--3 { transform: rotate(8deg) translateY(18px); margin-left: -2.2rem; z-index: 2; }

@media (hover: hover) {
  .moviles:hover .movil--1 { transform: rotate(-10deg) translateY(10px); }
  .moviles:hover .movil--3 { transform: rotate(10deg) translateY(10px); }
}

@media (prefers-reduced-motion: reduce) { .movil { transition: none; } }

/* La miniatura de cada tarjeta: se ve el portal antes de entrar. */
.portal__captura {
  display: block; height: 132px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--borde);
  margin: -.35rem 0 1rem;
}
.portal__captura img { width: 100%; height: auto; display: block; }
.portal .portal__simbolo { position: absolute; }
.portal { position: relative; }
.portal .portal__simbolo {
  top: 1.1rem; right: 1.1rem; width: 34px; height: 34px;
  background: #fff; border-radius: 9px; padding: 4px;
  box-shadow: 0 2px 8px rgba(31,27,24,.14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS TRES TEMAS

   El manual permite el negativo sobre verde plaza Y sobre terracota, así que
   ninguno de estos se sale de la marca: lo que cambia es cuál de los colores
   manda en las zonas oscuras.

   Se elige con `data-tema` en el <html>. `?tema=` lo cambia en caliente para
   poder compararlos, y eso lo hace `guion.js`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A · TERRACOTA. El color principal de la marca, mandando. Cálido y directo. */
html[data-tema="terracota"] .cabecera { background: #8E3B20; }
html[data-tema="terracota"] .hero { background: linear-gradient(160deg, #B5502E 0%, #8E3B20 62%, #6E2C17 100%); }
html[data-tema="terracota"] .hero__entrada { color: #F6E4DA; }
html[data-tema="terracota"] .hero__cifras span { color: #E7C4B4; }
html[data-tema="terracota"] .seccion--oscura { background: #2A2320; }
html[data-tema="terracota"] .boton--principal { background: var(--tinta); }
html[data-tema="terracota"] .boton--principal:hover { background: #000; }
html[data-tema="terracota"] .hero__plaza { filter: hue-rotate(-40deg) saturate(.5) brightness(1.5); opacity: .28; }

/* ── B · TINTA. Casi negro. Editorial y serio, con el color solo en los acentos. */
html[data-tema="tinta"] .cabecera { background: var(--tinta); }
html[data-tema="tinta"] .hero { background: radial-gradient(120% 120% at 78% 8%, #322A25 0%, #1F1B18 55%); }
html[data-tema="tinta"] .hero__entrada { color: #CFC5B9; }
html[data-tema="tinta"] .hero__titulo em { color: var(--terracota); }
html[data-tema="tinta"] .hero__antetitulo { color: var(--terracota); }
html[data-tema="tinta"] .hero__cifras b { color: var(--terracota); }
html[data-tema="tinta"] .hero__cifras span { color: #8C8078; }
html[data-tema="tinta"] .seccion--oscura { background: #2A2320; }
html[data-tema="tinta"] .principios h3 { color: var(--ocre); }
html[data-tema="tinta"] .hero__plaza { filter: grayscale(.7) brightness(1.8); opacity: .22; }

/* ── C · CLARO. Arena y tinta, con el color en los bloques y en los acentos. */
html[data-tema="claro"] .cabecera { background: var(--arena); border-bottom: 1px solid var(--borde); }
html[data-tema="claro"] .cabecera__nav a { color: var(--tinta); }
html[data-tema="claro"] .cabecera__nav a:hover { color: var(--terracota); }
/*
 | EL LOGOTIPO NEGATIVO VA SIN CAJA.
 |
 | El fichero `logo-horizontal-negativo-verde.svg` del kit trae el rectángulo
 | verde dentro, que sobre terracota o sobre tinta se veía como un recuadro
 | pegado. Se usa la versión blanca, con la fuente en ocre como pide el manual,
 | que es transparente. En el tema claro manda la de color.
 */
html[data-tema="claro"] .cabecera__marca img { content: url("/img/logo-color.svg"); }
html[data-tema="claro"] .hero { background: linear-gradient(180deg, var(--arena) 0%, #FBF7F2 100%); color: var(--tinta); }
html[data-tema="claro"] .hero__antetitulo { color: var(--terracota); }
html[data-tema="claro"] .hero__titulo em { color: var(--terracota); }
html[data-tema="claro"] .hero__entrada { color: var(--tinta-suave); }
html[data-tema="claro"] .hero__entrada strong { color: var(--tinta); }
html[data-tema="claro"] .hero__acciones .boton--linea { color: var(--verde); }
html[data-tema="claro"] .hero__acciones .boton--linea:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
html[data-tema="claro"] .hero__cifras b { color: var(--terracota); }
html[data-tema="claro"] .hero__cifras span { color: var(--tinta-suave); }
html[data-tema="claro"] .hero__plaza { filter: none; opacity: .16; }
html[data-tema="claro"] .movil { --marco: #fff; box-shadow: 0 26px 56px -20px rgba(31,27,24,.35); }
html[data-tema="claro"] .seccion--arena { background: #fff; }
html[data-tema="claro"] .pieza { background: var(--arena-suave); }
html[data-tema="claro"] .seccion--oscura { background: var(--tinta); }