/*
  Páginas (Tarea 7): el héroe de cada página, el contenedor de su contenido y los estilos de los bloques nativos del
  editor. El marcado está en page.php (todas las páginas; front-page.php la reutiliza), 404.php, index.php y
  parts/heroe.php. Se carga después de los componentes.

  Héroe. Un <div class="heroe heroe--{clave}"> con el titular (el único <h1>), la entradilla y, a un lado, un adorno:
  el abanico de la portada, tres pétalos del color de la página (examen azul, lentillas lima, sol sol, nosotros
  buganvilla) o nada (el resto, en tinta). Fondo blanco, como el resto de la web: el color es solo de los pétalos, que
  se multiplican donde se cruzan igual que las lentes del abanico. Texto siempre en tinta, también en lima y sol. El
  titular de la portada son dos frases («Precisión danesa, | luz de Nerja.»), cada una en su línea (.heroe__frase).

  Contenido. <div class="contenido envoltorio">: el contenedor central con el relleno de los lados de .envoltorio. Los
  componentes no ponen margen vertical (el ritmo es de aquí): cada bloque de primer nivel lleva su espacio debajo y las
  secciones (H2) y los componentes, más aire. Un .envoltorio dentro del contenido no suma relleno: ya lo pone la página.
  Las anchuras de texto van en em y no en ch, como en base.css. Un párrafo mide 33 em como mucho: con el texto real de las
  nueve páginas en español, a 1440 px, salen de 60 a 75 caracteres por línea (69 de mediana). Lo mide test_contenido.py.

  Los selectores de bloques nativos (.wp-block-*) son los que pinta WordPress 7: párrafo, lista, detalles, imagen,
  columnas, tabla, cita, separador y botones. Las listas sin clase, o con .wp-block-list, llevan viñetas; las de los
  componentes (.puertas, .marcas__lista, .resenas__lista), que llevan su clase, no: nunca se selecciona un <ul> a secas.

  Puntos de corte: 801 px (dos columnas en el héroe; el abanico de componentes.css cambia en 800) y los de WordPress
  para las columnas (782 px).
*/

/* ---------------------------------------------------------- héroe */
.heroe {
  --c: var(--ink);                   /* el color de la página: la clave lo cambia, y con él los pétalos */
  position: relative;
  padding: clamp(36px, 6vw, 72px) 0 clamp(20px, 3vw, 32px);
  overflow-x: clip;                  /* las esquinas vacías de los pétalos girados no crean barra de desplazamiento (a 801 px sobraban 2) */
  overflow-wrap: break-word;         /* una palabra larguísima en la entradilla se parte en vez de desbordar */
}

/* --c es el color de la página y --c2 el de su vecino en el logo, que se mezcla con él en las lentes de la escena. --foco es
   el punto de la foto que queda en el centro de la lente redonda. */
.heroe--examen { --c: var(--azul); --c2: var(--lima); --foco: 62% 50%; }
.heroe--gafas { --c: var(--bug); --c2: var(--azul); --foco: 56% 56%; }
.heroe--lentillas { --c: var(--lima); --c2: var(--azul); --foco: 60% 42%; }
.heroe--sol { --c: var(--sol); --c2: var(--bug); --foco: 28% 58%; }
.heroe--nosotros { --c: var(--bug); --c2: var(--sol); --foco: 58% 50%; }   /* la calle de Nerja: la buganvilla y el mar */

.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 40px;
  align-items: center;
}

.heroe__texto {
  min-width: 0;
}

.heroe__titulo {
  max-width: 13em;
  margin-bottom: 20px;
  text-wrap: balance;                /* las líneas del titular, parejas: nada de una palabra sola al final */
}

.heroe__entradilla {
  margin-bottom: 0;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.heroe__acciones .btn {
  min-height: 56px;
  padding: .5em 32px;                /* el alto de arriba y abajo no cambia un botón de una línea (lo da min-height) y deja aire si el texto se parte */
  font-size: 1.0625rem;
}

.heroe__visual {
  min-width: 0;
}

/* La escena de las páginas con color (18-oct). La foto de la página va dentro de una gran lente redonda, con un aro blanco y su
   sombra. Encima lleva tres lentes de color, con la elipse del logo (ole_petalo_svg) abierta en abanico desde abajo a la izquierda:
   dos del color de la página y una del vecino. Se mezclan entre sí y con la foto (multiply), así que la tiñen donde la pisan.
   Las lentes flotan despacio, y con un ratón todo se mueve un poco hacia el puntero (ole.js: --px, --py), cada capa a su
   profundidad. En el móvil la escena va debajo del texto. */
.heroe__visual--escena {
  width: min(420px, 86%);
  margin: 8px auto 0;
}

.heroe-foto {
  --px: 0;
  --py: 0;
  position: relative;
  isolation: isolate;                /* las lentes se mezclan con la foto y entre sí, no con la página */
  aspect-ratio: 1;
}

.heroe-foto__img {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  height: 86%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  border-radius: 50%;
  background: var(--cal2);
  box-shadow: 0 0 0 clamp(6px, .8vw, 11px) var(--cal), 0 38px 70px -34px rgba(21, 23, 28, .5);
  translate: calc(var(--px) * -8px) calc(var(--py) * -8px);
  transition: translate .7s cubic-bezier(.2, .7, .2, 1);
}

.heroe-foto__lente {
  --prof: 12px;
  position: absolute;
  bottom: 3%;
  left: 36%;                         /* con estos giros, ninguna lente se sale de la caja de la escena por los lados */
  width: 21%;
  margin-left: -10.5%;
  transform-origin: 50% 100%;
  rotate: var(--a);
  color: var(--l);
  mix-blend-mode: multiply;
  translate: calc(var(--px) * var(--prof)) calc(var(--py) * var(--prof));
  transition: translate .7s cubic-bezier(.2, .7, .2, 1);
  animation: lente-entra 1.3s cubic-bezier(.16, .8, .2, 1) var(--retraso, 0s) both, lente-flota 3.6s ease-in-out calc(1.3s + var(--retraso, 0s));   /* entran, se mecen una vez y quietas antes de los 5 s (WCAG 2.2.2) */
}

.heroe-foto__lente svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.heroe-foto__lente--1 { --a: -20deg; --l: var(--c); --prof: 10px; }
.heroe-foto__lente--2 { --a: 6deg; --l: var(--c2); --prof: 20px; --retraso: .1s; animation-duration: 1.3s, 3.4s; }
.heroe-foto__lente--3 { --a: 32deg; --l: var(--c); --prof: 15px; --retraso: .2s; animation-duration: 1.3s, 3.2s; }

@keyframes lente-entra {
  from { opacity: 0; scale: .5; filter: blur(14px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}

@keyframes lente-flota {
  0%, 100% { rotate: var(--a); }
  50% { rotate: calc(var(--a) + 5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .heroe-foto__lente {
    animation: none;
  }
}

/* La portada: el titular grande del planteamiento, y el abanico (componentes.css) a la derecha. */
.heroe--inicio {
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* 88 px como mucho (el planteamiento llega a 104): con 104 px, «precision,» no cabe en los 569 px de la columna y se parte. */
.heroe--inicio .heroe__titulo {
  max-width: none;
  margin-bottom: 30px;
  font-size: clamp(3rem, 7.4vw, 5.5rem);
  letter-spacing: -.045em;
  line-height: .94;
}

/* Detrás del abanico, la luz de Nerja (18-oct): un resplandor cálido muy suave, del sol al azul, que no tapa nada. */
.heroe--inicio .heroe__visual {
  position: relative;
  isolation: isolate;
}

.heroe--inicio .heroe__visual::before {
  content: "";
  position: absolute;
  inset: -6% -4% 4%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 62% 42%, color-mix(in srgb, var(--sol) 30%, transparent), transparent),
    radial-gradient(closest-side at 32% 66%, color-mix(in srgb, var(--azul) 12%, transparent), transparent);
  pointer-events: none;
}

/* Las dos frases del titular («Precisión danesa,» y «luz de Nerja.»), cada una en su línea; si una no cabe, se parte dentro. */
.heroe__frase {
  display: block;
}

.heroe--inicio .heroe__acciones {
  margin-top: 36px;
}

@media (min-width: 801px) {
  /* Desde aquí todas las palabras del titular caben enteras en su línea: el guion automático solo lo estropea (el
     equilibrado de líneas prefería «synundersök-ning» a la palabra entera). En el móvil, donde una palabra larga de
     verdad no cabe, sigue el guion de base.css. Sin guion, overflow-wrap parte la palabra si aun así no cupiera. */
  .heroe__titulo {
    hyphens: manual;
  }

  .heroe--inicio .heroe__rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .heroe__rejilla--escena {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);   /* «Synundersökning:» cabe entero en el titular sueco */
    column-gap: clamp(32px, 4vw, 64px);
  }

  .heroe__visual--escena {
    width: min(480px, 100%);
    margin: 0 0 0 auto;
  }

  /* Los héroes con foto, con menos aire arriba: el titular empieza cerca de la cabecera. */
  .heroe:has(.heroe__rejilla--escena) {
    padding-top: clamp(28px, 3.4vw, 48px);
    padding-bottom: 16px;
  }
}

/* Desde 1100 px la foto, más alta que el texto, baja un poco sobre el contenido por la derecha, donde no hay nada (el primer párrafo
   mide 33 em y va a la izquierda): el texto queda centrado con ella, sin hueco encima del titular ni debajo de la entradilla. Antes,
   centrado, dejaba unos 140 px entre la entradilla y el primer párrafo; alineado abajo, más de 200 encima del titular. Solo si el
   contenido empieza con un párrafo: en «Nosotros» empieza con unas columnas con la foto de Ole a la derecha, y allí la foto del héroe
   es más pequeña. */
@media (min-width: 1100px) {
  .heroe:has(+ .contenido > p:first-child) .heroe__visual--escena {
    margin-bottom: -26%;
  }

  .heroe:has(.heroe__rejilla--escena):has(+ .contenido > p:first-child) {
    padding-bottom: 0;
  }

  .heroe:not(:has(+ .contenido > p:first-child)) .heroe__visual--escena {
    width: min(300px, 100%);
  }
}

/* El 404 no lleva contenido debajo: que el pie no quede pegado a los botones. */
.pagina--404 .heroe {
  padding-bottom: clamp(72px, 10vw, 128px);
}

/* ---------------------------------------------------------- contenedor y ritmo vertical */
.contenido {
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(72px, 10vw, 128px);
  overflow-wrap: break-word;         /* una URL larguísima en un párrafo se parte en vez de desbordar */
}

/* El correo, el dominio de la web y el NIF no se parten por su guion al final de una línea («info@ole-» / «optica.com»). El correo es un
   enlace mailto:; el dominio y el NIF, que en los legales van en el texto sin enlace, llevan la clase .sin-partir (con guiones normales:
   quien copie el NIF se lleva el texto de siempre). Son un trozo entero (inline-block): si no cabe en lo que queda de la línea, pasa entero
   a la siguiente. Antes llevaban white-space: nowrap, que anulaba el overflow-wrap de .contenido y no tenía tope: con un enlace largo o con
   la letra muy agrandada se salía de la columna. Con el inline-block no pasa del ancho de la columna (max-width), y si ni solo cabe, se
   parte dentro (overflow-wrap: anywhere): lo único que se prefiere es no partirlo por su guion cuando hay sitio. */
.contenido a[href^="mailto:"],
.contenido .sin-partir,
.contenido .con-signo {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Un signo (un punto, una coma…) escrito justo detrás de uno de esos trozos podía quedarse solo al principio de la línea siguiente: entre un
   inline-block y lo que le sigue hay un salto permitido. El texto los envuelve juntos en un <span class="con-signo">: el trozo y su signo son uno
   solo (el envoltorio es el inline-block) y, dentro, el trozo es un inline normal, con el signo pegado a su última letra. */
.contenido .con-signo > a[href^="mailto:"],
.contenido .con-signo > .sin-partir {
  display: inline;
  max-width: none;
}

.contenido .envoltorio {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

/* Cada bloque de primer nivel lleva su espacio debajo (el de un párrafo: 1,1 em) y ninguno trae margen de arriba. Lo
   que no es texto corrido (los componentes, las imágenes, las columnas, un grupo…) respira más, por arriba y por abajo;
   las preguntas frecuentes, no: se separan con filetes. El :where() deja la regla de los componentes con la misma
   especificidad que la de arriba (la gana la que va después) y por debajo de las excepciones de más abajo: si no, el
   primer bloque, el último y un espaciador no podrían quitarse ese margen. */
:is(.contenido, .franja, .muestrario__texto) > * {
  margin-block: 0 1.1em;
}

:is(.contenido, .franja, .muestrario__texto) > :where(:not(p, h2, h3, h4, h5, h6, ul:not([class]), ol:not([class]), .wp-block-list, .wp-block-details)) {
  margin-block: 2.5rem;
}

.contenido > .wp-block-spacer {
  margin-block: 0;                   /* un espaciador ya es el hueco que quien edita quiso */
}

/* Una sección nueva (un H2) empieza con mucho aire y su titular se queda cerca de lo que titula. Los componentes que
   traen su propio titular (reseñas, marcas y horario con titulo="h2") son una sección más: el mismo aire. La segunda
   regla va aparte: un navegador sin :has() la tira entera y no se lleva por delante la del H2. */
.contenido > * + h2 {
  margin-top: clamp(4rem, 8vw, 5.5rem);
}

.contenido > * + :is(.resenas, .marcas, .horario):has(> :is(.resenas__titulo, .marcas__titulo, .horario__titulo)) {
  margin-top: clamp(4rem, 8vw, 5.5rem);
}

:is(.contenido, .franja, .muestrario__texto) > h2 {
  margin-bottom: 1.75rem;
}

:is(.contenido, .franja) > * + h3 {
  margin-top: 2.25rem;
}

:is(.contenido, .franja) > h3 {
  margin-bottom: .625rem;
}

/* Las preguntas, cada una en su tarjeta, una debajo de otra; la última de la tanda, con aire antes de lo que venga. */
.contenido > .wp-block-details {
  margin-block: 0 10px;
}

.contenido > .wp-block-details:not(:last-child):not(:has(+ .wp-block-details)) {
  margin-bottom: 2.5rem;
}

:is(.contenido, .franja, .muestrario__texto) > :first-child {
  margin-top: 0;
}

:is(.contenido, .franja, .muestrario__texto) > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- secciones a dos columnas (18-oct) */
/* Desde 1100 px, cada sección de texto va a dos columnas: el titular a la izquierda, fijo mientras se lee la sección, y el
   texto a la derecha, a su medida de lectura (34 em). inc/wp/secciones.php le pone a cada H2 --filas, los bloques de texto que
   lleva, y el titular abarca esas filas. Los componentes anchos van a todo el ancho. Por debajo de 1100 px, una sola columna,
   como siempre. */
@media (min-width: 1100px) {
  .contenido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34em);
    column-gap: clamp(48px, 6vw, 120px);
    align-items: start;
  }

  .contenido > * {
    grid-column: 2;
  }

  /* El titular abarca las filas de su sección (--filas, de inc/wp/secciones.php) y se estira a todo su alto; su texto (.titular)
     se queda fijo mientras se lee la sección y, como su caja es el titular estirado, nunca sale de ella. Con el H2 sticky a secas,
     Chrome lo dejaba pegado más allá de su sección, encima de lo siguiente. */
  :is(.contenido, .franja) > h2 {
    grid-column: 1;
    grid-row: span var(--filas, 1);
    align-self: stretch;
    margin-bottom: 0;
  }

  :is(.contenido, .franja) > h2 > .titular {
    position: sticky;
    top: 2rem;
    display: block;
  }

  /* El primer bloque de la sección empieza a la altura de su titular: lleva el mismo aire por arriba (también una pregunta). */
  .contenido > * + h2 + *,
  .contenido > * + h2 + .wp-block-details {
    margin-top: clamp(4rem, 8vw, 5.5rem);
  }

  /* Una franja de color es una subrejilla: sus bloques van en las mismas columnas que los demás. */
  .contenido > .franja,
  .contenido > .muestrario {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }

  .franja > * {
    grid-column: 2;
  }

  .franja > h2 + * {
    margin-top: 0;
  }

  /* En la rejilla los márgenes no se juntan: el aire de debajo de la franja lo pone lo que la sigue. */
  .contenido > .franja {
    margin-bottom: 0;
  }

  .contenido > .franja + h2 + * {
    margin-top: var(--aire-franja);
  }

  /* El muestrario (las monturas): el texto y las marcas a la izquierda, el carrusel de fotos a la derecha, centrados entre sí. */
  .contenido > .muestrario {
    align-items: center;
  }

  .muestrario__texto {
    grid-column: 1;
  }

  .muestrario > :is(.carrusel, .foto) {
    grid-column: 2;
  }

  /* Las preguntas frecuentes, centradas: el titular encima y las tarjetas debajo, más anchas. Así no repiten la forma de las
     secciones de antes. */
  .contenido > h2.seccion-centrada {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: start;
    justify-self: center;
    max-width: 20em;
    margin-bottom: 2.25rem;
    text-align: center;
  }

  .contenido > h2.seccion-centrada + * {
    margin-top: 0;
  }

  .contenido > h2.seccion-centrada ~ .wp-block-details {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(46rem, 100%);
    max-width: none;
  }

  /* Y los párrafos de una sección centrada (los de «Cómo trabajamos» en «Nosotros»), hasta el titular siguiente, con la medida de
     los demás (33 em: más anchos pasaban de 75 caracteres por línea). */
  .contenido > h2.seccion-centrada ~ p:not(h2.seccion-centrada ~ h2 ~ *) {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }

  .contenido > :is(.puertas, .urgencias, .resenas, .marcas, .horario, .banda, .form-cita) {
    grid-column: 1 / -1;
  }

  /* Lo que va antes del primer titular (la entradilla del contenido, un botón, las columnas de «Nosotros») sigue al texto del
     héroe, a la izquierda y a todo el ancho; y unas columnas, en cualquier sitio, también a todo el ancho. */
  .contenido > :not(h2, h2 ~ *),
  .contenido > .wp-block-columns {
    grid-column: 1 / -1;
  }

  :is(.contenido, .franja) > .btn {
    justify-self: start;               /* el botón, de su tamaño: en la rejilla se estiraría a todo el ancho */
  }

  .contenido > h2 + p + .horario {
    grid-column: 2;                    /* en la franja de «Dónde estamos», el horario va debajo de su párrafo (abajo) */
  }

  /* El párrafo, a ras de la parte de abajo del titular (no de la de arriba), con el mismo aire por arriba que él. */
  .contenido > h2:has(+ p + .horario) + p {
    align-self: end;
    margin-bottom: 0;
  }

  .contenido > * + h2:has(+ p + .horario) + p {
    margin-top: calc(var(--aire-franja) + clamp(2.5rem, 5vw, 3.5rem));
  }
}

/* «Dónde estamos» (un H2, su párrafo y el horario: en la portada y en gafas de sol) va en una franja gris muy clara a todo el ancho
   de la pantalla, para que no se parezca a la sección de antes, y el horario, en una tarjeta blanca. Sin envoltorios: cada pieza
   lleva detrás (::before, z-index: -1) un trozo de franja de su alto y un poco más, que llega a los dos bordes de la pantalla con una
   sombra recortada (no desborda la página), y los trozos se solapan en una sola franja. */
.contenido {
  --aire-franja: clamp(3rem, 6vw, 4.5rem);   /* el relleno de arriba y de abajo de las franjas */
  isolation: isolate;                /* lo de z-index: -1 queda detrás del contenido, pero encima del fondo de la página */
}

/* La franja gris empieza con más aire que una sección (el que lleva ella dentro, más el de una sección), para no rozar lo de antes. */
.contenido > * + h2:has(+ p + .horario) {
  margin-top: calc(var(--aire-franja) + clamp(2.5rem, 5vw, 3.5rem));
}

/* ---------------------------------------------------------- franjas de color (18-oct) */
/* Una sección cuyo titular lleva la clase «seccion-tinta» va en una franja a todo el ancho de la pantalla (inc/wp/secciones.php la
   envuelve en .franja), del color de la página muy aclarado: rompe la serie de secciones iguales. El fondo llega a los dos bordes
   con una sombra recortada (no desborda la página). */
.pagina { --tinta-franja: #e8f1f7; }            /* azul al 9 % sobre blanco */
.pagina--gafas { --tinta-franja: #fae9f4; }      /* buganvilla */
.pagina--lentillas { --tinta-franja: #f8fbec; }  /* lima */
.pagina--sol { --tinta-franja: #fff8ea; }        /* sol */
.pagina--nosotros { --tinta-franja: #fae9f4; }   /* buganvilla */

.contenido > .franja {
  margin-block: var(--aire-franja);
  padding-block: var(--aire-franja);
  background: var(--tinta-franja);
  box-shadow: 0 0 0 100vmax var(--tinta-franja);
  clip-path: inset(0 -100vmax);
}

/* Lo que viene después de una franja lleva su aire, no el de una sección nueva encima del de la franja. */
.contenido > .franja + h2 {
  margin-top: var(--aire-franja);
}

/* ---------------------------------------------------------- el muestrario (18-oct) */
/* Una sección con [ole_carrusel] al final (las monturas): inc/wp/secciones.php envuelve su texto (el titular, el párrafo y las marcas)
   en .muestrario__texto y todo, con el carrusel, en .muestrario. En el móvil, uno debajo de otro; desde 1100 px, a dos columnas. */
.contenido > .muestrario {
  margin-top: clamp(4rem, 8vw, 5.5rem);
}

.muestrario__texto > .marcas {
  margin-block: 1.75rem 0;
}

.muestrario > :is(.carrusel, .foto) {
  margin-top: 2rem;
}

@media (min-width: 1100px) {
  .muestrario > :is(.carrusel, .foto) {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------- listas en tarjetas (18-oct) */
/* Una lista con la clase «lista-tarjetas» va en tarjetas de dos en dos, numeradas sobre dos lentes que se cruzan (los colores de
   la página, como las viñetas). Para las listas de unos pocos puntos largos («Qué medimos», los tipos de lentillas). */
ul.wp-block-list.lista-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 14px;
  max-width: 34rem;
  padding-left: 0;
  counter-reset: tarjeta;
}

ul.wp-block-list.lista-tarjetas > li {
  margin: 0;
  padding: 18px 20px 20px;
  border-radius: 18px;
  background: var(--cal2);
  line-height: 1.5;
  counter-increment: tarjeta;
}

.franja ul.wp-block-list.lista-tarjetas > li {
  background: var(--cal);
}

ul.wp-block-list.lista-tarjetas > li::before {
  content: counter(tarjeta, decimal-leading-zero);
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4em;
  height: 2.3em;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 1.15em 50%, color-mix(in srgb, var(--pc) 36%, #fff) 0 1.13em, transparent 1.16em),
    radial-gradient(circle at calc(100% - 1.15em) 50%, color-mix(in srgb, var(--pc2) 42%, #fff) 0 1.13em, transparent 1.16em);
  background-blend-mode: multiply;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.contenido > h2:has(+ p + .horario),
.contenido > h2:has(+ p + .horario) + p,
.contenido > h2 + p + .horario {
  position: relative;
}

.contenido > h2:has(+ p + .horario)::before,
.contenido > h2:has(+ p + .horario) + p::before,
.contenido > h2 + p + .horario::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--aire-franja)) 0;
  z-index: -1;
  background: var(--cal2);
  box-shadow: 0 0 0 100vmax var(--cal2);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}

.contenido > h2 + p + .horario {
  padding: 22px 28px;
  border-radius: 22px;
  background: var(--cal);
}

/* ---------------------------------------------------------- párrafos y listas */
/* Un párrafo no pasa de 33 em (de 60 a 75 caracteres por línea con el texto real): más ancho se lee mal. Las listas, igual. */
:is(.contenido, .franja, .muestrario__texto, .wp-block-group__inner-container, .wp-block-column, .wp-block-details) > :is(p, ul:not([class]), ol:not([class]), .wp-block-list) {
  max-width: 33em;
}

.wp-block-list,
:is(.contenido, .wp-block-group__inner-container, .wp-block-column, .wp-block-details) > :is(ul, ol):not([class]) {
  padding-left: 1.4em;
}

.wp-block-list li::marker {
  color: var(--ink);
}

ol.wp-block-list li::marker {
  font-weight: 800;
}

/* Las viñetas de las listas son dos lentes pequeñas que se cruzan (18-oct): el color de la página y el de su vecino en el logo,
   con su mezcla donde se pisan (background-blend-mode: multiply). Fuera de las páginas con color, azul y lima. */
.pagina { --pc: var(--azul); --pc2: var(--lima); }
.pagina--gafas { --pc: var(--bug); --pc2: var(--azul); }
.pagina--lentillas { --pc: var(--lima); --pc2: var(--azul); }
.pagina--sol { --pc: var(--sol); --pc2: var(--bug); }
.pagina--nosotros { --pc: var(--bug); --pc2: var(--sol); }

ul.wp-block-list {
  list-style: none;
  padding-left: 1.9em;
}

ul.wp-block-list > li {
  position: relative;
}

ul.wp-block-list > li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: -1.7em;
  width: 1.1em;
  height: .66em;
  background:
    radial-gradient(circle at .33em 50%, var(--pc) 0 .32em, transparent .33em),
    radial-gradient(circle at calc(100% - .33em) 50%, var(--pc2) 0 .32em, transparent .33em);
  background-blend-mode: multiply;
}

.wp-block-column > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- preguntas frecuentes (bloque «Detalles») */
/* Cada pregunta es un <details>: se abre con el ratón, con Intro y con la barra espaciadora, y sin JavaScript. El
   triángulo del navegador se cambia por un + que pasa a − al abrirse, dibujado con dos degradados. */
.wp-block-details {
  max-width: 33em;                   /* la columna de los párrafos */
  padding: 0 22px;
  border-radius: 16px;
  background: var(--cal2);
}

.wp-block-details summary {
  position: relative;
  padding: 18px 44px 18px 0;
  list-style: none;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

/* El + (que pasa a − al abrirse), en una lente redonda del color de la página. */
.wp-block-details summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 30px;
  height: 30px;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    color-mix(in srgb, var(--pc, var(--azul)) 30%, #fff);
  transition: background-size .2s;
}

.wp-block-details[open] summary::after {
  background-size: 12px 2px, 2px 0, auto;
}

.wp-block-details summary:hover {
  color: var(--azul);
}

.wp-block-details[open] {
  padding-bottom: .5rem;
}

/* ---------------------------------------------------------- imágenes */
.wp-block-image {
  margin-inline: 0;
}

.wp-block-image img {
  border-radius: var(--r);
}

.wp-block-image figcaption {
  margin: 12px 0 0;
  color: var(--ink2);          /* nunca --ink3 en texto pequeño */
  font-size: .9375rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------- columnas */
/* WordPress las pone en fila desde 782 px y las apila por debajo. */
.wp-block-columns {
  gap: 2rem 3.5rem;
}

/* ---------------------------------------------------------- otros bloques */
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 1;
}

.wp-block-quote {
  margin-inline: 0;
  padding-left: 1.25em;
  border-left: 4px solid var(--ink);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.5;
}

.wp-block-quote > :last-child {
  margin-bottom: 0;
}

.wp-block-table {
  margin-inline: 0;
}

.wp-block-table th,
.wp-block-table td {
  padding: .75em 1em;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.wp-block-table th {
  color: var(--ink);
  font-weight: 700;
}

.wp-block-table thead {
  border-bottom: 2px solid var(--ink);
}

/* El botón del editor, como el de la web. */
.wp-block-button__link {
  --foco: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  background: var(--azul);
  color: #fff;
  font: 700 1rem/1.2 var(--f);
  text-decoration: none;
  transition: background .2s;
}

.wp-block-button__link:hover {
  background: var(--m-ab);
  color: #fff;
}

/* ---------------------------------------------------------- páginas legales */
/* Textos largos de leer y no de mirar: los titulares de sección, a tamaño de lectura. */
:is(.pagina--legal, .pagina--privacidad, .pagina--cookies) .contenido > h2 {
  max-width: none;
  margin-bottom: .875rem;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}

:is(.pagina--legal, .pagina--privacidad, .pagina--cookies) .contenido > * + h2 {
  margin-top: 3rem;
}

/* ---------------------------------------------------------- el cierre de la portada (18-oct) */
/* [ole_opiniones]: un bloque blanco y centrado tras la franja gris de «Dónde estamos», con la marca del logo, el examen gratuito, la nota
   de Google (la cifra grande y las estrellas en una cápsula de sol), las reseñas que haya puesto Ole y los dos botones. */
.contenido > .opiniones {
  margin-top: calc(var(--aire-franja) + clamp(2.5rem, 5vw, 3.5rem));
}

@media (min-width: 1100px) {
  .contenido > .opiniones {
    grid-column: 1 / -1;
  }
}

.opiniones {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.opiniones__marca svg {
  width: 74px;
  height: auto;
  isolation: isolate;
}

.opiniones__marca ellipse {
  mix-blend-mode: multiply;
}

.opiniones__titulo {
  width: min(16em, 100%);            /* un ancho fijo y no el de su contenido: con la letra al 200 % a 320 px, «Kostenloser» se parte en vez de desbordar */
  margin: 14px 0 18px;
  text-wrap: balance;                /* sin una palabra sola en la segunda línea */
}

.opiniones__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 0 0 14px;
}

.opiniones__cifra {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.opiniones__estrellas {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sol);
  line-height: 0;
}

.opiniones__estrellas i {
  display: block;
  width: 110px;
  height: 22px;
  background: linear-gradient(90deg, var(--ink) calc(var(--n) * 20%), rgba(21, 23, 28, .28) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
}

.opiniones__cuenta {
  color: var(--ink2);
  font-weight: 700;
}

.opiniones__texto {
  max-width: 32em;
  margin: 0 0 8px;
}

.opiniones > .resenas {
  width: 100%;
  margin-top: 28px;
  text-align: left;
}

.opiniones__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

/* ---------------------------------------------------------- «Nosotros»: las cifras y la cita (18-oct) */
/* Una lista con la clase «lista-cifras» va en una fila de cifras grandes (de cuatro en cuatro desde 800 px, de dos en dos en el móvil), cada
   una sobre una lente de un color del logo que se mezcla con ella. Las cifras son datos de la tienda que ya dice el texto. */
ul.wp-block-list.lista-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  max-width: none;
  margin-block: clamp(2.5rem, 6vw, 4rem);
  padding: 0;
}

@media (min-width: 800px) {
  ul.wp-block-list.lista-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

ul.wp-block-list.lista-cifras > li {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink2);
  font-size: .9375rem;
  line-height: 1.4;
}

ul.wp-block-list.lista-cifras > li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -10px;
  z-index: -1;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--l) 34%, #fff);
}

ul.wp-block-list.lista-cifras > li:nth-child(1) { --l: var(--azul); }
ul.wp-block-list.lista-cifras > li:nth-child(2) { --l: var(--lima); }
ul.wp-block-list.lista-cifras > li:nth-child(3) { --l: var(--sol); }
ul.wp-block-list.lista-cifras > li:nth-child(4) { --l: var(--bug); }

ul.wp-block-list.lista-cifras strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}

/* La cita de Ole, grande y centrada, con cuatro lentes de los colores del logo encima: ya no parece un párrafo con una raya. La caja
   lleva la letra del cuerpo y mide como un párrafo (33 em, con la letra al 200 % también); la letra grande va en sus párrafos. Las lentes
   van en ::before, encima del texto y no detrás: el texto queda sobre el fondo liso de la página. */
.contenido > .wp-block-quote {
  position: relative;
  max-width: 33em;
  margin-inline: auto;
  padding: 64px 0 0;
  border-left: 0;
  font-size: inherit;
  text-align: center;
}

.contenido > .wp-block-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 59px);
  width: 118px;
  height: 40px;
  background:
    radial-gradient(circle at 20px 20px, color-mix(in srgb, var(--azul) 70%, #fff) 0 19px, transparent 20px),
    radial-gradient(circle at 46px 20px, color-mix(in srgb, var(--lima) 85%, #fff) 0 19px, transparent 20px),
    radial-gradient(circle at 72px 20px, color-mix(in srgb, var(--sol) 85%, #fff) 0 19px, transparent 20px),
    radial-gradient(circle at 98px 20px, color-mix(in srgb, var(--bug) 70%, #fff) 0 19px, transparent 20px);
  background-blend-mode: multiply;
}

.contenido > .wp-block-quote > p {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.contenido > .wp-block-quote cite {
  display: block;
  margin-top: 16px;
  color: var(--ink2);
  font-size: .875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (min-width: 1100px) {
  .contenido > .wp-block-quote {
    justify-self: center;
  }
}