/*
Theme Name: SERYMAN (hijo de Divi)
Description: Tema hijo de Divi para seryman.biz. Lleva las variables de marca de la ficha de WebOrchestra y la hoja de secciones 0.1.0. Generado por scripts/tema-hijo.ts el 2026-10-15: no editar a mano, se regenera.
Author: RITMAS Informatica
Template: Divi
Version: 1.0.0+secciones.0.1.0
Text Domain: seryman-divi-hijo
*/
/* Variables de marca, de la ficha de SERYMAN en WebOrchestra */
:root {
  --wo-primario: #e82c22;
  --wo-acento: #c8252b;
  --wo-fondo: #ffffff;
  --wo-fondo-alterno: #ededed;
  --wo-texto: #333333;
  --wo-texto-suave: #666666;
  --wo-fuente-titulos: "Acme", sans-serif;
  --wo-fuente-cuerpo: "Open Sans", sans-serif;
}

/*
 * WebOrchestra · Hoja de secciones
 * Versión: 0.1.0
 * Spec: 1.2a, catálogo de secciones (§4.2, D4, R139, R141)
 *
 * Se pega al final del style.css del tema hijo (D3). Sin ella, las secciones
 * se ven planas pero correctas.
 *
 * Lo que NO hay aquí: colores ni fuentes. Los pone la ficha de marca de cada
 * cliente (1.1a) como variables, una vez por sitio:
 *   --wo-primario --wo-acento --wo-fondo --wo-fondo-alterno
 *   --wo-texto --wo-texto-suave --wo-fuente-titulos --wo-fuente-cuerpo
 * Si una falta, se hereda la del tema.
 *
 * Lo que SÍ hay: la escala de D4 (tres sombras, dos radios, una
 * transición), el espacio de las secciones y el movimiento al pasar el
 * ratón. Todo cuelga de una clase .wo- para no tocar el tema del cliente.
 *
 * No editar a mano en un sitio: se cambia aquí, se sube la versión y se
 * vuelve a pegar entera. La prueba es src/server/secciones/hoja.test.ts.
 */

/* ------------------------------------------------------------ escala (D4) */

:root {
  --wo-sombra-reposo: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
  --wo-sombra-tarjeta: 0 4px 6px rgb(0 0 0 / 0.05), 0 10px 24px rgb(0 0 0 / 0.08);
  --wo-sombra-flotante: 0 8px 12px rgb(0 0 0 / 0.06), 0 22px 44px rgb(0 0 0 / 0.14);
  --wo-radio-pequeno: 6px;
  --wo-radio-tarjeta: 14px;
  --wo-transicion: 150ms ease-out;

  /* Regla 7: el espacio lo pone la hoja, no el espaciador. */
  --wo-espacio-seccion: clamp(3rem, 7vw, 6rem);
  --wo-espacio: clamp(1rem, 2.5vw, 1.75rem);

  /* El ritmo dentro de una sección (regla 7, concretada el 05/10): entre
     elementos, y más antes de una llamada a la acción. */
  --wo-ritmo: 1rem;
  --wo-espacio-accion: 2rem;
}

/* ------------------------------------------------------------ sección y fondos (regla 1) */

/* El fondo va de borde a borde de la pantalla (Richard, 04/10) aunque el
   tema encierre el contenido: Divi en 1080 px, un tema de bloques en su
   ancho de contenido. No se saca la sección del contenedor, que movería el
   contenido y cambiaría con cada tema: se prolonga solo el fondo, con un
   border-image que se desborda 100vw a cada lado. Es pintura, no caja: no
   ocupa sitio ni crea desplazamiento horizontal. */
.wo-seccion {
  padding-block: var(--wo-espacio-seccion);
  padding-inline: var(--wo-espacio);
  margin-block: 0;
  border-image: conic-gradient(var(--wo-fondo, transparent) 0 0) fill 0 / / 0 100vw;
  color: var(--wo-texto, inherit);
  font-family: var(--wo-fuente-cuerpo, inherit);
}

.wo-seccion--alterna {
  border-image-source: conic-gradient(var(--wo-fondo-alterno, transparent) 0 0);
}

.wo-seccion--oscura {
  border-image-source: conic-gradient(var(--wo-texto, CanvasText) 0 0);
  color: var(--wo-fondo, Canvas);
}

/* Regla 2: el color de marca de fondo, una sección de cada tres como mucho. */
.wo-seccion--color {
  border-image-source: conic-gradient(var(--wo-primario, CanvasText) 0 0);
  color: var(--wo-fondo, Canvas);
}

/* ------------------------------------------------------------ títulos (regla 6) */

/* Con :is() y no :where(): los títulos tienen que ganar al tema. Divi pinta
   «h1 { font-size: 30px }» y un tema de bloques «:root :where(h2)»; con peso
   cero, cada web enseñaba los suyos (W9, 04/10). La escala es de la hoja
   para que toda la cartera se parezca a sí misma. */
.wo-seccion :is(h1, h2, h3, h4) {
  font-family: var(--wo-fuente-titulos, inherit);
  font-weight: 700;
  color: inherit;
  margin-block: 0 0.5em;
  padding: 0;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  text-wrap: balance;
}

.wo-seccion :is(h1) {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
}

.wo-seccion :is(h2) {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
}

.wo-seccion :is(h3) {
  font-size: 1.25rem;
}

.wo-hero {
  padding-block: calc(var(--wo-espacio-seccion) * 1.4);
}

/* Divi pinta el título de toda página sin constructor (page.php), y un tema
   de bloques suele hacer lo mismo. Con un héroe ese título sobra: el héroe
   lleva el h1 (1.2b, crítica del 15/10). Solo cuando lo hay: en las demás
   páginas el título del tema es la cabecera de la regla 11. */
body:has(.wo-hero) :where(.entry-title.main_title) {
  display: none;
}

.wo-seccion.wo-hero :is(h1, h2) {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
}

.wo-antetitulo {
  color: var(--wo-acento, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block: 0 0.75em;
}

/* Entradilla: la frase que presenta la página, justo después del título. */
.wo-seccion .wo-entradilla {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  max-width: 46rem;
  margin-inline: auto;
}

.wo-texto-suave {
  color: var(--wo-texto-suave, inherit);
}

/* La cifra protagonista (regla 3): una por sección. */
.wo-cifra {
  font-family: var(--wo-fuente-titulos, inherit);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--wo-primario, inherit);
}

/* Sobre oscuro o color, los títulos y lo que era acento o suave heredan el
   claro de la sección. Con peso: el tema pinta los títulos con su color y,
   sin él, un título oscuro sobre el azul no se lee (W9, 04/10). */
.wo-seccion.wo-seccion--oscura :where(h1, h2, h3, h4, .wo-antetitulo, .wo-texto-suave, .wo-cifra),
.wo-seccion.wo-seccion--color :where(h1, h2, h3, h4, .wo-antetitulo, .wo-texto-suave, .wo-cifra) {
  color: inherit;
}

/* Salvo dentro de una tarjeta, que tiene su propio fondo claro. */
.wo-seccion .wo-tarjeta :where(h1, h2, h3, h4) {
  color: inherit;
}

/* ------------------------------------------------------------ ritmo vertical (regla 7) */

/* La separación la pone la hoja, la misma en cualquier tema. En Divi, sin
   esto, los botones quedaban pegados al texto (0 px: Divi quita el relleno
   al último párrafo) y en el tema de bloques no: lo vio Richard el 05/10. */
.wo-seccion :is(p) {
  padding-bottom: 0;
  margin-block: 0;
}

.wo-seccion :where(*) + :is(p, ul, ol, figure, h2, h3, h4, .wp-block-group, .wp-block-columns, .wp-block-gallery, .wp-block-latest-posts) {
  margin-block-start: var(--wo-ritmo);
}

/* Antes de una llamada a la acción, más aire: el botón no puede ir pegado. */
.wo-seccion :where(*) + .wp-block-buttons {
  margin-block-start: var(--wo-espacio-accion);
}

/* ------------------------------------------------------------ rejilla (regla 7) */

/* De uno a doce elementos sin columnas vacías: el ancho lo decide la rejilla. */
.wo-rejilla {
  display: grid;
  gap: var(--wo-espacio);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* El tema separa los bloques apilados con un margen arriba; en una rejilla
   descuadra las filas. Lo pone el hueco de la rejilla. */
.wo-seccion .wo-rejilla > * {
  margin-block: 0;
}

.wo-rejilla--estrecha {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

/* ------------------------------------------------------------ tarjeta (regla 4) */

.wo-tarjeta {
  background: var(--wo-fondo, Canvas);
  color: var(--wo-texto, inherit);
  border-radius: var(--wo-radio-tarjeta);
  box-shadow: var(--wo-sombra-reposo);
  padding: var(--wo-espacio);
  transition: box-shadow var(--wo-transicion), transform var(--wo-transicion);
}

.wo-tarjeta--destacada {
  box-shadow: var(--wo-sombra-tarjeta);
}

/* Los enlaces de texto, en el acento; sobre oscuro o color, heredan. */
.wo-seccion :where(a:not(.wp-block-button__link)) {
  color: var(--wo-acento, inherit);
  text-underline-offset: 0.15em;
}

.wo-seccion.wo-seccion--oscura :where(a:not(.wp-block-button__link)),
.wo-seccion.wo-seccion--color :where(a:not(.wp-block-button__link)) {
  color: inherit;
}

/* En una tarjeta con enlace, el título no parece un enlace suelto: la tarjeta entera lo es. */
.wo-tarjeta--enlace {
  position: relative;
}

.wo-tarjeta--enlace :where(h3 a) {
  color: inherit;
  text-decoration: none;
}

.wo-tarjeta--enlace :where(h3 a)::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Solo las tarjetas con enlace responden, con ratón o con teclado. */
.wo-tarjeta--enlace:hover,
.wo-tarjeta--enlace:focus-within {
  box-shadow: var(--wo-sombra-flotante);
}

/* ------------------------------------------------------------ imagen */

.wo-imagen :where(img) {
  display: block;
  border-radius: var(--wo-radio-tarjeta);
  box-shadow: var(--wo-sombra-tarjeta);
}

/* Barra de confianza: cada logo centrado en su celda, sin el margen de la figura. */
/* Fila flexible y centrada, no rejilla: con un ancho máximo por columna, la
   rejilla cuenta las que caben con ese máximo y partía cuatro logos en tres
   y uno en Divi. Así caben cuatro en escritorio y dos en móvil, y un solo
   logo no se estira a toda la fila (W12, 04/10). */
.wo-rejilla--logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wo-rejilla--logos > * {
  flex: 0 1 min(13rem, calc(50% - var(--wo-espacio)));
}

/* Cada logo en su tarjeta, como hacía el borrador a mano: sueltos y
   pequeños perdían presencia (W12, primera pasada, 04/10). */
.wo-tarjeta--logo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 8rem;
}

.wo-seccion .wo-logo {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Alto fijo y ancho por proporción. Sin alto, un SVG sin tamaño declarado se
   pinta a 0×0 (02/10, y otra vez en W12 con el de Ritmas) y la caja flexible
   encoge los PNG. En color: sin radio ni sombra, son marcas ajenas, y un
   patrocinador no paga para salir en gris (W12, 04/10). */
.wo-seccion .wo-logo :where(img) {
  height: 5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Uno o dos logos grandes: el socio principal. */
.wo-logos-destacados {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 22rem));
  justify-content: center;
}

.wo-seccion .wo-logos-destacados .wo-logo :where(img) {
  height: 8rem;
}

/* ------------------------------------------------------------ botones (regla 5) */

.wo-seccion :where(.wp-block-button__link) {
  background: var(--wo-acento, CanvasText);
  color: var(--wo-fondo, Canvas);
  border-radius: var(--wo-radio-pequeno);
  box-shadow: var(--wo-sombra-reposo);
  padding: 0.875em 1.5em;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow var(--wo-transicion), transform var(--wo-transicion);
}

.wo-seccion :where(.wp-block-button__link):hover,
.wo-seccion :where(.wp-block-button__link):focus-visible {
  box-shadow: var(--wo-sombra-tarjeta);
}

.wo-seccion :where(.is-style-outline .wp-block-button__link) {
  background: transparent;
  color: inherit;
  box-shadow: none;
  border: 2px solid currentColor;
}

/* ------------------------------------------------------------ piezas de las variantes (W7) */

.wo-centrado {
  text-align: center;
}

.wo-centrado :where(.wp-block-buttons) {
  justify-content: center;
}

/* Secciones de lectura corta: formulario centrado, llamada en tarjeta. */
.wo-estrecho > :where(*) {
  max-width: 40rem;
  margin-inline: auto;
}

/* Beneficios numerados: el número lo pone la hoja, en el acento. */
.wo-numerados {
  counter-reset: wo-numero;
}

.wo-numerados > :where(.wo-tarjeta)::before {
  counter-increment: wo-numero;
  content: counter(wo-numero, decimal-leading-zero);
  display: block;
  margin-block-end: 0.5rem;
  font-family: var(--wo-fuente-titulos, inherit);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--wo-acento, inherit);
}

/* Divi pinta viñetas y sangría en toda lista del contenido con un selector
   de ID, «#left-area ul», que ninguna cantidad de clases supera. Sin
   !important: #wo-peso no existe en la página, pero :is() toma el peso del
   argumento más fuerte y la regla gana a Divi (W9, 04/10). */
.wo-seccion :is(.wo-lista-marcas, .wo-lista-datos, .wo-publicaciones, #wo-peso) {
  list-style: none;
  padding: 0;
  margin-inline-start: 0;
}

.wo-lista-marcas > :where(li) {
  position: relative;
  padding-inline-start: 1.75rem;
  margin-block: 0.5rem;
}

.wo-lista-marcas > :where(li)::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  font-weight: 800;
  color: var(--wo-acento, inherit);
}

.wo-lista-datos > :where(li) {
  margin-block: 0.375rem;
}

.wo-dato {
  text-align: center;
}

.wo-dato > :where(p) {
  margin-block: 0.25rem;
}

.wo-galeria-fotos :where(img) {
  border-radius: var(--wo-radio-pequeno);
}

.wo-publicaciones :where(img) {
  border-radius: var(--wo-radio-pequeno);
}

/* ------------------------------------------------------------ demostración (1.2b) */

/* Un vídeo va centrado, a un ancho de lectura y nunca más alto que la
   pantalla: el del horno Eolo es vertical (792 × 1122) y a ancho completo
   eran mil píxeles de fotograma (crítica del 15/10). El ancho sale de la
   altura: un vídeo apaisado llena el ancho de lectura, uno vertical se queda
   en lo que le da el 70 % de la pantalla. Lleva el radio y la sombra de
   tarjeta (D4). Que no arranque solo (regla 8) lo decide la plantilla. */
.wo-seccion .wo-video {
  max-width: 44rem;
  margin-inline: auto;
}

.wo-seccion .wo-video :where(video) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  margin-inline: auto;
  border-radius: var(--wo-radio-tarjeta);
  box-shadow: var(--wo-sombra-tarjeta);
}

.wo-seccion .wo-video :where(figcaption) {
  text-align: center;
  color: var(--wo-texto-suave, inherit);
}

/* ------------------------------------------------------------ movimiento (regla 8, R139) */

/* El desplazamiento solo existe si el visitante no ha pedido lo contrario. */
@media (prefers-reduced-motion: no-preference) {
  .wo-tarjeta--enlace:hover,
  .wo-tarjeta--enlace:focus-within {
    transform: translateY(-2px);
  }

  .wo-seccion :where(.wp-block-button__link):hover,
  .wo-seccion :where(.wp-block-button__link):focus-visible {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wo-tarjeta,
  .wo-seccion :where(.wp-block-button__link) {
    transition: none;
    transform: none;
  }
}