/* Kuma 2026 · portada con bloques nativos (grupo, título, párrafo, imagen,
   botones, portada). Escrita a mano a partir de las medidas del Figma.

   Cada sección es un bloque Grupo o Portada con la clase kp-seccion y la de su
   tipo (kp-intro, kp-lineas, kp-destacado, kp-banda, kp-logos, kp-remate). El
   contenido se escribe encima en el editor; esta hoja solo da el diseño, así
   que los textos, las fotos y los enlaces se cambian sin tocar código.

   La cursiva dentro de un título (Ctrl+I) se pinta en azul, como en el Figma.
   Ver patterns/portada-*.php para insertar una sección nueva ya maquetada. */

.kp-seccion{
  --kp-tinta:#0B1C28;
  --kp-texto:#494B50;
  --kp-azul:#3797CA;
  --kp-oposiciones:#2B6C97;
  --kp-empleo:#308461;
  --kp-fp:#8F4A32;
  --kp-superior:#8F324A;
  --kp-incompany:#8F6D32;
  --kp-linea:var(--kp-oposiciones);
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:96px 24px;
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--kp-tinta);
  text-align:center;
}
.kp-seccion *{box-sizing:border-box}
.kp-seccion :where(p,h2,h3,figure){margin:0}
/* sin los márgenes que WordPress pone entre bloques: los espacios los da esta hoja */
.kp-seccion :where(.is-layout-flow,.wp-block-cover__inner-container)>*{margin-block:0}
.kp-caja{position:relative;z-index:1;max-width:1248px;margin:0 auto}

/* ---- textos comunes ---- */
.kp-cabecera{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:824px;margin:0 auto}
.kp-rotulo{font-size:13px;font-weight:700;line-height:1.2;text-transform:uppercase;color:var(--kp-oposiciones)}
.kp-seccion h2{font-size:39px;font-weight:700;line-height:1.2;color:var(--kp-tinta)}
.kp-seccion h2 em,.kp-seccion h3 em{font-style:normal;color:var(--kp-azul)}
.kp-entrada{font-size:20px;line-height:1.2;color:var(--kp-texto)}

/* Enlace con flecha: un párrafo kp-enlace con un enlace dentro */
.kp-enlace a{display:inline-flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid currentColor;
  color:var(--kp-azul);font-size:16px;line-height:1.2;text-decoration:none}
.kp-enlace a::after{content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url(portada/flecha.svg) center/contain no-repeat;mask:url(portada/flecha.svg) center/contain no-repeat;transition:transform .25s}
.kp-enlace a:hover::after,.kp-seccion .wp-block-button__link:hover::after{transform:translateX(4px)}

/* Botones: oscuro por defecto; kp-claro en las secciones con foto */
.kp-seccion .wp-block-buttons{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.kp-seccion .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border:1px solid var(--kp-azul);
  border-radius:4px;background:var(--kp-tinta);color:#fff;font-size:16px;font-weight:400;line-height:1.2;text-decoration:none}
.kp-seccion .wp-block-button__link::after{content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url(portada/flecha.svg) center/contain no-repeat;mask:url(portada/flecha.svg) center/contain no-repeat;transition:transform .25s}
.kp-seccion .kp-claro .wp-block-button__link,.kp-seccion .wp-block-button.kp-claro .wp-block-button__link{background:#fff;color:var(--kp-tinta)}
.kp-seccion .wp-block-button__link:focus-visible,.kp-enlace a:focus-visible{outline:3px solid var(--kp-azul);outline-offset:3px}

/* ---- 1. Intro con cifras ---- */
.kp-intro{padding:64px 24px;background:linear-gradient(to top,#E7F1F8,#fff)}
.kp-cifras{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;margin-top:48px}
.kp-cifra{display:flex;align-items:center;gap:8px}
.kp-cifra>*{flex:0 0 auto}
.kp-cifra .wp-block-image img{display:block;width:24px;height:24px}
.kp-cifra p{font-size:16px;font-weight:700;line-height:1.2}

/* ---- 2. Líneas de formación (tarjetas) ---- */
.kp-lineas.wp-block-cover{min-height:0;padding:96px 24px;border-block:1px solid #E7F1F8;display:block}
.kp-lineas .wp-block-cover__inner-container{width:100%;max-width:1248px;margin:0 auto;color:inherit}
.kp-tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:48px 0;text-align:left;align-items:start}
.kp-tarjetas>.kp-tarjeta:nth-child(2),.kp-tarjetas>.kp-tarjeta:nth-child(3){margin-top:32px}
.kp-tarjeta{display:flex;flex-direction:column;gap:8px;padding:0 20px 20px;border-radius:4px;background:#fff;box-shadow:0 8px 24px rgba(11,28,40,.08)}
.kp-tarjeta.kp-empleo{--kp-linea:var(--kp-empleo)}
.kp-tarjeta.kp-fp{--kp-linea:var(--kp-fp)}
.kp-tarjeta.kp-superior{--kp-linea:var(--kp-superior)}
.kp-tarjeta.kp-incompany{--kp-linea:var(--kp-incompany)}
.kp-tarjeta__media{position:relative;margin:0 -20px 8px;border-radius:4px 4px 0 0;overflow:hidden}
.kp-tarjeta__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(53.6deg,rgba(255,255,255,0) 0%,var(--kp-linea) 100%)}
.kp-tarjeta__media .wp-block-image img{display:block;width:100%;aspect-ratio:294/219;height:auto;object-fit:cover}
.kp-sigla{position:absolute;z-index:1;top:24px;right:24px;width:72px;height:77px;display:flex;align-items:center;
  padding-left:2px;background:url(portada/k.svg) right center/48px 77px no-repeat;color:#fff;font-size:20px;font-weight:700;line-height:1}
.kp-sigla::before{content:"";position:absolute;z-index:-1;left:-6px;width:36px;height:36px;border-radius:999px;background:var(--kp-linea)}
.kp-tarjeta h3{font-size:20px;font-weight:700;line-height:1.2;color:var(--kp-tinta)}
.kp-tarjeta p:not(.kp-enlace):not(.kp-sigla){font-size:16px;line-height:1.4;color:var(--kp-texto)}
.kp-tarjeta .kp-enlace{margin-top:auto;padding-top:12px}

/* ---- 3. Destacado y remate (foto con banda diagonal) ---- */
.kp-diagonal.wp-block-cover{min-height:0;display:block;padding:92px 24px;color:#fff;text-align:left;overflow:hidden}
.kp-remate.wp-block-cover{padding:96px 59px}
.kp-diagonal .wp-block-cover__background{opacity:1!important;
  background:linear-gradient(to bottom,rgba(11,28,40,.25),rgba(55,151,202,.35))!important}
.kp-diagonal::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,28,40,.9) 0%,rgba(55,151,202,.9) 100%);
  clip-path:polygon(0 0,58% 0,24% 100%,0 100%)}
.kp-remate::before{clip-path:polygon(0 0,58% 0,43% 100%,0 100%)}
.kp-diagonal .wp-block-cover__inner-container{position:relative;z-index:2;width:100%;max-width:1248px;margin:0 auto;color:#fff}
.kp-diagonal .kp-texto-foto{max-width:504px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.kp-remate .kp-texto-foto{max-width:613px}
.kp-diagonal h2{color:#fff}
.kp-diagonal .kp-entrada{color:#fff}
.kp-diagonal .wp-block-buttons{justify-content:flex-start;margin-top:24px}
.kp-etiqueta{display:inline-block;padding:4px 16px;border-radius:2px;background:var(--kp-incompany);color:#fff;font-size:13px;line-height:1.2}
.kp-destacado.wp-block-cover{min-height:600px}

/* ---- 4. Banda «Desde 1970» ---- */
.kp-banda{overflow:hidden;background:#fff}
.kp-banda::before,.kp-banda::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(55,151,202,.0),#3797CA)}
.kp-banda::before{clip-path:polygon(0 0,22% 0,2% 100%,0 100%);background:linear-gradient(to top,#3797CA,rgba(55,151,202,0))}
.kp-banda::after{clip-path:polygon(100% 30%,100% 100%,85% 100%)}
.kp-banda .kp-cabecera{gap:16px}
.kp-banda .wp-block-image img{display:block;width:120px;height:auto}
.kp-sedes{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:824px;margin:48px auto 0}
.kp-sedes h3{font-size:20px;font-weight:700;line-height:1.2}
.kp-sedes p:not(.kp-enlace){font-size:16px;color:var(--kp-texto)}
.kp-sedes .kp-enlace{margin-top:20px}

/* ---- 5. Logos de empresas ----
   En el editor es una fila de bloques Imagen (se añaden, quitan o cambian ahí).
   En la web, fx-motion.js la convierte en una cinta que se mueve sola, como la de
   aireadigital.com: duplica los logos (copia aria-hidden) y desplaza la pista
   media longitud en bucle. Sin JS o con «reducir movimiento», fila quieta.
   Todos en gris; al pasar el ratón, en color. El tamaño lo iguala la caja de
   cada logo (alto 44px, ancho máx. 180px); kp-alto / kp-bajo lo afinan. */
.kp-logos{border-bottom:1px solid #E7F1F8;background:#fff}
.kp-logos__titulo{font-size:20px;line-height:1.2}
.kp-logos__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 72px;margin-top:48px}
.kp-logos__fila figure{flex:0 0 auto;width:auto;margin:0}
.kp-logos__fila img{display:block;width:auto;height:44px;max-width:180px;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:filter .4s ease,opacity .4s ease}
.kp-logos__fila .kp-alto img{height:56px}
.kp-logos__fila .kp-bajo img{height:32px}
.kp-logos__fila figure:hover img{filter:none;opacity:1}
/* cinta en movimiento (clases que pone fx-motion.js) */
.kp-logos__fila.kp-cinta{display:block;overflow:hidden;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kp-cinta__pista{display:flex;width:max-content;animation:kp-cinta var(--kp-cinta-dur,40s) linear infinite}
.kp-cinta:hover .kp-cinta__pista,.kp-cinta:focus-within .kp-cinta__pista{animation-play-state:paused}
.kp-cinta__grupo{display:flex;align-items:center;gap:72px;padding-right:72px}
@keyframes kp-cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kp-cinta__pista{animation:none}}

/* ---- móvil y tableta ---- */
@media (max-width:1100px){
  .kp-tarjetas{grid-template-columns:repeat(2,1fr)}
  .kp-tarjetas>.kp-tarjeta:nth-child(n){margin-top:0}
}
@media (max-width:768px){
  .kp-seccion{padding:64px 20px}
  .kp-seccion h2{font-size:31px}
  .kp-entrada{font-size:18px}
  .kp-lineas.wp-block-cover,.kp-diagonal.wp-block-cover,.kp-remate.wp-block-cover{padding:64px 20px}
  .kp-tarjetas{grid-template-columns:1fr;gap:20px}
  .kp-cifras{flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto}
  .kp-cifra p{flex:0 1 auto;text-align:left}
  .kp-diagonal::before{clip-path:none;opacity:.92}
  .kp-destacado.wp-block-cover{min-height:0}
  .kp-banda::before,.kp-banda::after{opacity:.35}
  .kp-logos__fila{gap:24px 44px}
  .kp-logos__fila img{height:32px;max-width:132px}
  .kp-logos__fila .kp-alto img{height:40px}
  .kp-logos__fila .kp-bajo img{height:24px}
  .kp-cinta__grupo{gap:44px;padding-right:44px}
}
/* ---- editor: sin el ancho y los márgenes que pone a cada bloque ---- */
.editor-styles-wrapper .wp-block.kp-seccion{max-width:none;margin:0}
.editor-styles-wrapper .kp-seccion .wp-block{max-width:none;margin:0}
.editor-styles-wrapper .kp-seccion .wp-block.kp-caja{max-width:1248px;margin:0 auto}
.editor-styles-wrapper .kp-seccion .wp-block.kp-cabecera,.editor-styles-wrapper .kp-seccion .wp-block.kp-sedes{max-width:824px;margin-left:auto;margin-right:auto}
.editor-styles-wrapper .kp-seccion .wp-block.kp-sedes{margin-top:48px}
.editor-styles-wrapper .kp-seccion .wp-block.kp-cifras{margin-top:48px}
.editor-styles-wrapper .kp-seccion .wp-block.kp-tarjetas{margin:48px 0}
.editor-styles-wrapper .kp-seccion .wp-block.kp-tarjeta:nth-child(2),.editor-styles-wrapper .kp-seccion .wp-block.kp-tarjeta:nth-child(3){margin-top:32px}
.editor-styles-wrapper .kp-seccion .wp-block.kp-tarjeta__media{margin:0 -20px 8px}
.editor-styles-wrapper .kp-tarjeta__media .wp-block.kp-sigla{position:absolute;top:24px;right:24px;left:auto;margin:0}
.editor-styles-wrapper .kp-logos__fila img{width:auto!important;height:44px!important}
.editor-styles-wrapper .kp-logos__fila .kp-alto img{height:56px!important}
.editor-styles-wrapper .kp-logos__fila .kp-bajo img{height:32px!important}
.editor-styles-wrapper .kp-seccion .wp-block.kp-logos__fila{margin-top:48px}
.editor-styles-wrapper .kp-seccion .wp-block.kp-texto-foto{max-width:504px}
.editor-styles-wrapper .kp-remate .wp-block.kp-texto-foto{max-width:613px}
.editor-styles-wrapper .kp-diagonal .wp-block-buttons.wp-block{margin-top:24px}
.editor-styles-wrapper .kp-tarjeta .wp-block.kp-enlace{margin-top:auto}
.editor-styles-wrapper .kp-sedes .wp-block.kp-enlace{margin-top:20px}
@media (max-width:1100px){.editor-styles-wrapper .kp-seccion .wp-block.kp-tarjeta:nth-child(n){margin-top:0}}

@media (prefers-reduced-motion:reduce){
  .kp-enlace a::after,.kp-seccion .wp-block-button__link::after{transition:none}
}