/* Portada de iactastudio.com (349) · hoja de la página (6-oct-2026). Generada desde el prototipo aprobado por
   Javier con borradores/portada/prototipo/pasar-a-git.py: si se cambia aquí, se cambia allí.

   1 · El Curso estrella aprobado (curso-estrella/comun.css, tarjeta2-v2.css y la franja blanca de franja.css). */

.ipo.ipo .iacta-ce-section .iacta-ce-cta .iacta-ce-btn {
  background: transparent !important; color: #C1145C !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}

.ipo.ipo .iacta-ce-section .iacta-ce-cta { margin: 36px 0 8px !important; }
@media (max-width: 768px) { .ipo.ipo .iacta-ce-section .iacta-ce-cta { margin: 28px 0 0 !important; } }
.ipo.ipo .iacta-ce-section .iacta-ce-cta .iacta-ce-btn:hover {
  background: transparent !important; transform: none !important;
  text-decoration: underline !important; text-underline-offset: 4px;
}



.ipo.ipo .iacta-ce-section .iacta-ce-card--2 { background: #010E10 !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-card--2::before {
  inset: -60% !important;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  background:
    radial-gradient(ellipse 60% 55% at 40% 45%, rgba(87,182,180,.85) 0%, rgba(46,133,131,.45) 50%, transparent 75%),
    radial-gradient(ellipse 55% 60% at 65% 60%, rgba(15,65,92,.70) 0%, rgba(8,36,52,.35) 50%, transparent 72%) !important;
  animation: ce-lava1 12s ease-in-out infinite, ce-morph1 8s ease-in-out infinite !important;
}
.ipo.ipo .iacta-ce-section .iacta-ce-card--2::after {
  inset: -50% !important;
  border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(46,133,131,.70) 0%, rgba(0,70,68,.35) 55%, transparent 78%) !important;
  animation: ce-lava1b 18s ease-in-out infinite reverse, ce-morph2 11s ease-in-out infinite !important;
}

.ipo.ipo .iacta-ce-section .iacta-ce-card--2 .iacta-ce-chip--sky { color: #0F415C !important; }


.ipo.ipo .iacta-ce-section .iacta-ce-card--2 .iacta-ce-tool-badge { color: #57B6B4 !important; }


@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .ipo.ipo .iacta-ce-section .iacta-ce-card--2::before,
  .ipo.ipo .iacta-ce-section .iacta-ce-card--2::after { animation: none !important; transform: none !important; }
}





.ipo.ipo .iacta-ce-section .iacta-ce-deep { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important;
  position: relative !important; isolation: isolate; overflow: hidden !important; padding: 0 !important;
  border-radius: 18px !important; box-shadow: none !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 22px 24px !important;
  margin: 0 !important; min-width: 0 !important; background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; position: relative !important; z-index: 1 !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__icon { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; margin: 1px 0 0 !important; max-width: none !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__tiny { font-family: 'Nunito', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; line-height: 1.3 !important;
  margin: 0 0 5px !important; display: block !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__big { font-family: 'Plein', sans-serif !important; font-size: 17px !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: 0 !important; margin: 0 0 3px !important; padding: 0 !important; display: block !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__small { font-family: 'Nunito', sans-serif !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.5 !important; margin: 0 !important; display: block !important; }
@media (max-width: 768px) {
  .ipo.ipo .iacta-ce-section .iacta-ce-deep { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item { gap: 10px !important; padding: 14px 12px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__icon { width: 20px !important; height: 20px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__tiny { font-size: 11px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__big { font-size: 15px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__small { font-size: 12px !important; }
}














.ipo.ipo .iacta-ce-section .iacta-ce-deep { background: #fff !important; border: 1px solid #DCE7EC !important; box-shadow: 0 10px 30px rgba(15,65,92,.08) !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item + .iacta-ce-deep__item { box-shadow: inset 1px 0 0 #E6ECF0 !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__tiny { color: #C1145C !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__big { color: #0F415C !important; font-size: 22px !important; line-height: 1.2 !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__small { color: #505B6F !important; }
@media (max-width: 768px) {
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item + .iacta-ce-deep__item { box-shadow: none !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item:nth-child(2) { box-shadow: inset 1px 0 0 #E6ECF0 !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item:nth-child(3) { box-shadow: inset 0 1px 0 #E6ECF0 !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item:nth-child(4) { box-shadow: inset 1px 0 0 #E6ECF0, inset 0 1px 0 #E6ECF0 !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__big { font-size: 15px !important; }
}


.ipo.ipo .iacta-ce-section .iacta-ce-deep::before { content: '' !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important;
  top: 0 !important; height: 5px !important; z-index: 2 !important; background: linear-gradient(90deg, #C1145C 0%, #0F415C 50%, #57B6B4 100%) !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item { padding-top: 27px !important; }
.ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__icon { width: 32px !important; height: 32px !important; color: #C1145C !important; }

@media (max-width: 768px) {
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__item { padding-top: 19px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__icon { width: 24px !important; height: 24px !important; }
  .ipo.ipo .iacta-ce-section .iacta-ce-deep .iacta-ce-deep__big { font-size: 15px !important; }
}


/* 2 · Reglas del Curso estrella que vivían sueltas en el contenido de la 349 («iacta-home-mobile-hero-fix»):
   el margen y la letra del botón, el cuerpo de las tarjetas abajo y el fondo de la zona de arriba. */
.ipo .iacta-ce-card__preview::after, .ipo .iacta-ce-card__preview::before, .ipo .iacta-ce-topics::after, .ipo .iacta-ce-topics::before, .ipo .iacta-ce-tool:last-child::after {display:none!important;content:none!important;background:none!important;}
.ipo .iacta-ce-card__body {margin-top:auto;}
.ipo .iacta-ce-card__preview {background:rgba(255,255,255,.05)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:20px!important;overflow:hidden!important;}
.ipo .iacta-ce-cta {margin: 24px 0 8px 0;}
.ipo .iacta-ce-btn {display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #C1145C;
  color: #fff !important;
  font-family: 'Plein', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s;}
.ipo .iacta-ce-btn:hover {background: #a00f4e;
  transform: translateY(-1px);}

/* 3 · La portada (portada.css del prototipo). */
/* Portada de iactastudio.com en código propio (prototipo, 6-oct-2026).
   Escala única W33: etiqueta 12 px Plein 700 · H2 clamp(26px, 3.2vw, 33px) · título de tarjeta 22 px ·
   cuerpo y entradilla 17 px · descripción de tarjeta 14 px / 1,65 en #505B6F. Ancho 1400 px con
   márgenes de 32 / 20 / 16 px, como el Curso estrella. Todo lo que la página heredaba de Gutenverse o
   del tema se declara aquí (W27): letra, color, márgenes y caja. */

.ipo {
  --navy: #0F415C; --navy-hondo: #04121C; --rosa: #C1145C; --rosa-hondo: #A3104D;
  --verde: #57B6B4; --verde-claro: #95D1D0; --gris: #505B6F;
  --degradado: linear-gradient(135deg, #0F415C 0%, #04121C 100%);
}
/* Solo lo nuestro: las tres piezas (Curso estrella, cinta y reseñas) traen su hoja y tienen que pintarse como hoy.
   (Un `.ipo img { max-width: 100% }` general pisaba el tope de 160 px de los logos de la cinta.) */
.ipo :is(.ipo-hero, .ipo-servicios, .ipo-cifras, .ipo-opiniones > .ipo-cabeza, .ipo-blog),
.ipo :is(.ipo-hero, .ipo-servicios, .ipo-cifras, .ipo-opiniones > .ipo-cabeza, .ipo-blog) * { box-sizing: border-box; }
.ipo > * { margin: 0; }

.ipo .ipo-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

/* ---------- Etiqueta, título de sección y entradilla ---------- */
.ipo .ipo-etiqueta {
  font-family: 'Plein', sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rosa); margin: 0 0 12px; padding: 0;
}
.ipo .ipo-h2 {
  font-family: 'Plein', sans-serif; font-size: clamp(26px, 3.2vw, 33px); font-weight: 700; line-height: 1.15;
  letter-spacing: 0; text-transform: none; color: var(--navy); margin: 0 0 14px; padding: 0;
}
.ipo .ipo-entradilla {
  font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.6;
  color: var(--gris); margin: 0; padding: 0;
}
.ipo .ipo-cabeza { text-align: center; }

/* ---------- Botones (P5 y P6): uno principal y un secundario según el fondo, la misma letra en toda la portada ---------- */
.ipo .ipo-botones { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.ipo .ipo-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px;
  font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  text-transform: none; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: 10px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ipo .ipo-btn:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.ipo .ipo-btn--primario { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.ipo .ipo-btn--primario:hover { background: var(--rosa-hondo); border-color: var(--rosa-hondo); color: #fff; }
/* Sobre foto: blanco con texto navy. */
.ipo .ipo-btn--claro { background: #fff; border-color: #fff; color: var(--navy); }
.ipo .ipo-btn--claro:hover { background: var(--verde-claro); border-color: var(--verde-claro); color: var(--navy); }
/* Sobre navy: verde de marca con texto #04121C (la marca: nunca blanco encima, no llega al contraste). */
.ipo .ipo-btn--verde { background: var(--verde); border-color: var(--verde); color: var(--navy-hondo); }
.ipo .ipo-btn--verde:hover { background: var(--verde-claro); border-color: var(--verde-claro); color: var(--navy-hondo); }
/* Enlace de texto con flecha, el de «Ver toda la formación para empresas →» del Curso estrella: rosa sobre blanco
   (6,0:1), Plein 700 a 15 px (13 en el móvil) y subrayado solo al pasar el ratón. Lo llevan las tarjetas de servicios
   (Javier, 6-oct: «quita el recuadro rosa»). */
.ipo .ipo-enlace {
  display: inline-flex; align-items: center; min-height: 44px; font-family: 'Plein', sans-serif; font-size: 15px;
  font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: var(--rosa); text-decoration: none;
}
.ipo .ipo-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.ipo .ipo-enlace:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------- 1 · Hero ---------- */
.ipo .ipo-hero {
  /* Pantalla entera en ordenador y tableta, como hoy (Javier, 6-oct: «me gusta más al 100 %»). En el móvil, también
     desde el 10-oct, con svh: ver «Móvil». */
  position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 0 10px; background: #0F415C url("https://iactastudio.com/wp-content/mu-plugins/iacta-core/diseno/assets/hero-background-home.webp?v=20260908") 50% 50% / cover no-repeat;
}
.ipo .ipo-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .95;
  background: linear-gradient(135deg, #0D364B 0%, #010E14 90.2%);
}
.ipo .ipo-hero__dentro { width: 100%; text-align: center; }
.ipo .ipo-hero__titulo {
  font-family: 'Plein', sans-serif; font-size: 60px; font-weight: 800; line-height: 1.1; letter-spacing: .6px;
  /* Blanco: hoy va en azul claro #DFF1F6, y el único azul de la marca es el navy (Javier, 6-oct). */
  text-transform: none; color: #fff; text-shadow: 0 0 43px rgba(0, 0, 0, .525); margin: 60px 0 35px; padding: 0;
}
/* La entradilla y los botones, en su columna de hoy (725-775 px), centrada. El párrafo llega al final de su columna (W25). */
.ipo .ipo-hero__entradilla {
  width: min(760px, 100%); margin: 0 auto; font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 400;
  line-height: 1.6; color: #fff;
}
.ipo .ipo-hero__entradilla strong { font-weight: 700; color: #fff; }
.ipo .ipo-hero .ipo-botones { justify-content: center; margin-top: 56px; }
.ipo .ipo-hero .ipo-btn { min-width: 260px; }
/* Confianza bajo los botones (UX, 6-oct): dos datos que ya publica la web. La estrella en verde de marca, porque el
   rosa no escribe sobre azul; la nota lleva a las opiniones de esta misma página. */
.ipo .ipo-hero__confianza {
  margin: 24px 0 0; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}
.ipo .ipo-hero__confianza a { font: inherit; color: #fff; text-decoration: none; }
.ipo .ipo-hero__confianza a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ipo .ipo-hero__confianza a:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.ipo .ipo-hero__estr { color: var(--verde); }
.ipo .ipo-hero__sep { margin: 0 10px; color: rgba(255, 255, 255, .5); }
.ipo .ipo-hero__dato { white-space: nowrap; }
/* En el móvil, un dato por línea: en una sola, «50+» se quedaba solo al final. */
@media (max-width: 600px) {
  .ipo .ipo-hero__sep { display: none; }
  .ipo .ipo-hero__dato { display: block; white-space: normal; }
}

/* ---------- Clientes, justo debajo del hero (UX, 6-oct): la confianza antes que la oferta. La etiqueta deja de ser
   H3 (P2). Ya no lleva el hueco de 80 px del separador: el Curso estrella trae su propio aire. ---------- */
.ipo .ipo-clientes .ipo-etiqueta { text-align: center; margin-bottom: 40px; }

/* ---------- 4 · Servicios ---------- */
.ipo .ipo-servicios { background: #fff; padding: 0 0 64px; }
/* La foto de equipo se queda debajo, como hoy; encima, el degradado navy en lugar del azul pizarra plano. */
.ipo .ipo-servicios__banda {
  position: relative; isolation: isolate; padding: 100px 0 360px;
  background: #0F415C url("https://iactastudio.com/wp-content/uploads/2026/02/Equipo-de-trabajo.webp") 50% 50% / cover no-repeat;
}
.ipo .ipo-servicios__banda::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--degradado); opacity: .9; }
.ipo .ipo-servicios .ipo-etiqueta { color: var(--verde); }
.ipo .ipo-servicios .ipo-h2 { color: #fff; }
.ipo .ipo-servicios .ipo-entradilla { color: #fff; }
.ipo .ipo-servicios__rejilla {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: -300px;
  position: relative; z-index: 1; /* encima de la franja, que está posicionada por su velo */
}
.ipo .ipo-servicio {
  display: flex; flex-direction: column; background: #fff; margin: 0;
  box-shadow: 0 10px 30px rgba(15, 65, 92, .12);
}
.ipo .ipo-servicio__foto { display: block; width: 100%; height: auto; aspect-ratio: 340 / 235; object-fit: cover; }
.ipo .ipo-servicio__cuerpo {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px 36px;
}
.ipo .ipo-servicio__titulo {
  font-family: 'Plein', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  text-transform: none; color: var(--navy); margin: 0 0 14px; padding: 0;
}
.ipo .ipo-realce { color: var(--rosa); }
.ipo .ipo-servicio__texto {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; color: var(--gris);
  margin: 0 0 24px; width: 100%;
}
.ipo .ipo-servicio .ipo-enlace { margin-top: auto; }
/* La tarjeta entera lleva al servicio (UX, 6-oct), como en la página de servicios: el enlace se estira por encima de
   toda la tarjeta. Un solo enlace por tarjeta, así que el lector de pantalla no oye nada repetido. */
.ipo .ipo-servicio { position: relative; transition: box-shadow .2s ease, transform .2s ease; }
.ipo .ipo-servicio .ipo-enlace::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ipo .ipo-servicio:hover { box-shadow: 0 16px 40px rgba(15, 65, 92, .18); transform: translateY(-2px); }
.ipo .ipo-servicio:hover .ipo-enlace { text-decoration: underline; text-underline-offset: 4px; }
.ipo .ipo-servicio .ipo-enlace:focus-visible { outline: none; }
.ipo .ipo-servicio:has(.ipo-enlace:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------- 5 · Cifras (P7: el número final, quieto; P2: fuera el título oculto) ---------- */
.ipo .ipo-cifras { background: #fff; padding: 56px 0 40px; }
/* Pretítulo (Javier, 6-oct): la etiqueta de la casa, centrada. */
.ipo .ipo-cifras .ipo-etiqueta { text-align: center; margin-bottom: 28px; }
.ipo .ipo-cifras__lista {
  /* Juntas en el centro (Javier, 6-oct: «demasiado separadas»): cuatro columnas iguales de 210 px como mucho, en vez
     de repartirse los 1400 px. Las columnas encogen solas si no caben (tableta). */
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 210px));
  justify-content: center; gap: 24px; text-align: center;
}
.ipo .ipo-cifra { margin: 0; padding: 0; }
.ipo .ipo-cifra::before, .ipo .ipo-cifra::marker { content: none; }
.ipo .ipo-cifra__numero {
  display: block; font-family: 'Plein', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--navy); margin: 0 0 6px;
}
/* La nota de Google, como en «Sobre nosotros» (4,9/5 ★ · Valoración media en Google), con la letra de esta sección. */
.ipo .ipo-cifra__de { font-family: 'Plein', sans-serif; font-size: 17px; font-weight: 700; color: var(--gris); margin-left: 1px; }
.ipo .ipo-cifra__estr { font-size: 21px; color: var(--rosa); margin-left: 4px; vertical-align: 2px; }
.ipo .ipo-cifra__texto { display: block; font-family: 'Nunito', sans-serif; font-size: 14px; line-height: 1.65; color: var(--gris); }

/* ---------- 6 · Opiniones (las tarjetas son las de hoy: iacta-home-resenas.php) ---------- */
/* Fondo gris claro, el de la sección de opiniones de «Sobre nosotros» (--gris-suave #F6F9FA; Javier, 6-oct). */
.ipo .ipo-opiniones { background: #F6F9FA; padding: 100px 0; }
.ipo .ipo-opiniones .ipo-cabeza { margin-bottom: 48px; }
/* Las tarjetas, al ancho del resto de la página (Javier, 6-oct): su hoja las tope en 1200 px y aquí todo va a 1400,
   con los mismos márgenes. Tres columnas fijas: con «auto-fit» a 1400 salían cuatro y una fila de dos. */
.ipo .ipo-opiniones .hres26 { max-width: 1400px; padding: 0 32px; }
/* «Ver todas las reseñas…»: como «Ver toda la formación para empresas →», en navy y sin subrayado (Javier, 6-oct). */
.ipo .ipo-opiniones .hres26 .hres26__fuente a {
  display: inline-flex; align-items: center; min-height: 44px; font-family: 'Plein', sans-serif; font-size: 15px;
  font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: var(--navy); text-decoration: none;
}
.ipo .ipo-opiniones .hres26 .hres26__fuente a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ipo .ipo-opiniones .hres26 .hres26__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .ipo .ipo-opiniones .hres26 { padding: 0 20px; } }
@media (max-width: 899px) { .ipo .ipo-opiniones .hres26 .hres26__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ipo .ipo-opiniones .hres26 .hres26__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .ipo .ipo-opiniones .hres26 { padding: 0 16px; } }

/* ---------- 7 · Cierre con formulario: el de servicios, sobre nosotros, compliance y consultoría (Javier, 6-oct) ----------
   Se pinta con servicios.css, acotada a .sia26. Solo una cosa es de esta página: allí el bloque deja 76 px antes del pie;
   aquí va el blog detrás, que ya trae su aire. */
.ipo .sia26.sia26 .cierre { margin-bottom: 0; }
/* Y el ancho, el de esta página (W33: 1400 px con márgenes de 32 / 20 / 16), en los dos bloques de servicios (cierre y
   autoevaluación). En servicios, .env mide el contenido (1400 px más 20 a cada lado) y aquí quedaba más ancho que el resto. */
.ipo .sia26.sia26 .env { width: auto; max-width: 1400px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 1024px) { .ipo .sia26.sia26 .env { padding-inline: 20px; } }
@media (max-width: 767px) { .ipo .sia26.sia26 .env { padding-inline: 16px; } }

/* ---------- 8 · Blog (P4: tres entradas) ---------- */
.ipo .ipo-blog { background: #fff; padding: 100px 0; }
.ipo .ipo-blog__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.ipo .ipo-entrada { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ipo .ipo-entrada__foto { display: block; width: 100%; }
.ipo .ipo-entrada__foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ipo .ipo-entrada__categoria {
  /* 8 px de relleno arriba y abajo para el dedo (W28), sin mover nada: el margen baja lo mismo. */
  display: inline-block; margin: 14px 0 2px; padding: 8px 0; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700;
  line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--rosa); text-decoration: none;
}
.ipo .ipo-entrada__titulo {
  font-family: 'Plein', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  text-transform: none; color: var(--navy); margin: 0 0 12px; padding: 0;
}
/* El tema pone a TODOS los enlaces Nunito 16 px / 400 (a:where(:not(.wp-element-button))): el enlace del título hereda del título (W27). */
.ipo .ipo-entrada__titulo a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.ipo .ipo-entrada__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ipo .ipo-entrada__resumen {
  font-family: 'Nunito', sans-serif; font-size: 14px; line-height: 1.65; color: var(--gris); margin: 0 0 8px; width: 100%;
}
.ipo .ipo-entrada__mas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
}
.ipo .ipo-entrada__mas span { font-size: 16px; letter-spacing: 0; }
.ipo .ipo-entrada__mas:hover { color: var(--rosa); }

/* ---------- Curso estrella: las correcciones de la auditoría, encima del diseño aprobado ----------
   (el bloque trae su propia hoja con !important; estas reglas ganan por especificidad y por orden). */
.ipo.ipo .iacta-ce-section .iacta-ce-head h2 {
  font-size: clamp(26px, 3.2vw, 33px) !important; font-weight: 700 !important; line-height: 1.15 !important; color: #0F415C !important;
}
.ipo.ipo .iacta-ce-section .iacta-ce-head > p { font-size: 17px !important; line-height: 1.6 !important; color: #505B6F !important; }
/* «Primera sesión» / «Segunda sesión»: son etiquetas. El número grande se queda. */
.ipo.ipo .iacta-ce-section .iacta-ce-session-label {
  font-family: 'Plein', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .05em !important; color: #C1145C !important;
}
/* «Sesión 01», «Sesión 02» y «+ Algunos temas que veremos»: de 10-14 px y blanco al 42-45 % (3,7:1) a 12 px en blanco.
   La auditoría proponía el verde de marca, pero sobre la tarjeta verde no se vería y sobre la granate da 3,6:1. */
.ipo.ipo .iacta-ce-section .iacta-ce-parte,
.ipo.ipo .iacta-ce-section .iacta-ce-preview-label {
  font-family: 'Plein', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; color: #fff !important;
}
/* Descripción de las tarjetas: 14 px (W33). Con la letra más pequeña, el blanco sube del 68 al 85 % para no perder lectura. */
.ipo.ipo .iacta-ce-section .iacta-ce-card__body p {
  font-size: 14px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, .85) !important;
}

/* En el móvil la hoja del bloque la corta con puntos suspensivos («+ ALGUNOS TEMAS QUE …»): que parta en dos líneas. */
@media (max-width: 768px) {
  .ipo.ipo .iacta-ce-section .iacta-ce-preview-label {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; letter-spacing: .04em !important;
  }
}

/* Las herramientas del Curso estrella llevan a su curso (SEO, 6-oct). Se ven igual; al pasar el ratón se subraya el
   nombre y la fila se ilumina un poco. */
.ipo.ipo .iacta-ce-section a.iacta-ce-tool { color: inherit; text-decoration: none; border-radius: 6px; transition: background-color .2s ease; }
.ipo.ipo .iacta-ce-section a.iacta-ce-tool:hover { background: rgba(255, 255, 255, .06) !important; }
.ipo.ipo .iacta-ce-section a.iacta-ce-tool:hover .iacta-ce-tool-name { text-decoration: underline; text-underline-offset: 3px; }
.ipo.ipo .iacta-ce-section a.iacta-ce-tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Autoevaluación (el bloque de servicios con el texto rehecho) ---------- */
.ipo .sia26.sia26 .ipo-auto__lista { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ipo .sia26.sia26 .ipo-auto__lista li {
  position: relative; padding-left: 1.6rem; margin: 0; font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 1.5; color: rgb(61, 89, 102);
}
.ipo .sia26.sia26 .ipo-auto__lista li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--rosa); }
.ipo .sia26.sia26 .auto .ipo-auto__rotulo {
  margin: 0 0 12px; text-align: center; font-family: 'Plein', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}

/* ---------- Tableta ---------- */
@media (max-width: 1024px) {
  .ipo .ipo-wrap { padding: 0 20px; }
  .ipo .ipo-hero__titulo { font-size: 50px; }
  .ipo .ipo-servicios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo .ipo-blog__rejilla { gap: 24px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
  .ipo .ipo-enlace, .ipo .ipo-opiniones .hres26 .hres26__fuente a { font-size: 13px; }
}

@media (max-width: 767px) {
  .ipo .ipo-wrap { padding: 0 16px; }
  .ipo .ipo-etiqueta { letter-spacing: .04em; }
  /* En el móvil, a pantalla completa también (Javier, 10-oct: «el hero en el móvil lo quiero al 100 %»; del 6 al 10-oct
     medía lo que su contenido). Con svh y no solo vh: es el alto con la barra del navegador a la vista, así no salta al
     aparecer y desaparecer ella; vh va delante para los navegadores que no conocen svh. Arriba, sitio para la cabecera
     (85 px), que va encima. */
  .ipo .ipo-hero { min-height: 100vh; min-height: 100svh; padding: 112px 16px 56px; }
  .ipo .ipo-hero__titulo { font-size: 30px; line-height: 1.15; margin: 60px 0 24px; }
  /* La entradilla del hero, a 15 px en el móvil y no a los 17 de la escala W33 (Javier, 6-oct: «una línea menos»):
     a 390 px pasa de 7 líneas a 6. Excepción solo de esta entradilla, que va sobre la foto y antes de los botones. */
  .ipo .ipo-hero__entradilla { font-size: 15px; }
  .ipo .ipo-hero .ipo-botones { margin-top: 40px; gap: 12px; }
  /* Botones del hero más pequeños en el móvil (Javier, 10-oct: «son muy grandes», y luego «un poco más pequeños»):
     38 px de alto y letra de 14 en vez de 48 y 16. Siguen por encima de los 24 px mínimos de la WCAG 2.2 AA. */
  .ipo .ipo-hero .ipo-btn { min-height: 38px; padding: 7px 18px; font-size: 14px; border-radius: 8px; min-width: 200px; }
  /* Y la línea de confianza bajo los botones, de 15 a 13 px (las estrellas de Google y las empresas clientes). */
  .ipo .ipo-hero__confianza { margin-top: 18px; font-size: 13px; }
  /* La frase «Trabajamos desde Burgos con empresas de toda España…» no se pinta en el móvil (Javier, 10-oct: «ocupa
     mucho»), pero sigue en el HTML: Google indexa la versión móvil y esta frase lleva Burgos y «toda España». */
  .ipo .ipo-hero__lugar { display: none; }
  .ipo .ipo-clientes .ipo-etiqueta { margin-bottom: 32px; }
  .ipo .ipo-servicios { padding-bottom: 64px; }
  .ipo .ipo-servicios__banda { padding: 64px 0 360px; }
  .ipo .ipo-servicios__rejilla { grid-template-columns: minmax(0, 1fr); }
  .ipo .ipo-cifras { padding: 56px 0; }
  .ipo .ipo-cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  /* Cinco en dos columnas: la de Google, en medio y a todo el ancho (2 · 1 · 2). */
  .ipo .ipo-cifra--google { grid-column: 1 / -1; }
  .ipo .ipo-opiniones, .ipo .ipo-blog { padding: 64px 0; }
  .ipo .ipo-opiniones .ipo-cabeza { margin-bottom: 32px; }
  .ipo .ipo-blog__rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
}

/* Márgenes laterales a 16 px desde 768 px, como el bloque del Curso estrella (su corte es 768 y el de Gutenverse, 767):
   así a 768 todo queda alineado. */
@media (max-width: 768px) {
  .ipo .ipo-wrap { padding: 0 16px; }
  .ipo .ipo-opiniones .hres26 { padding: 0 16px; }
  .ipo .sia26.sia26 .env { padding-inline: 16px; }
}

/* P5: por debajo de 600 px, los botones a todo el ancho y uno encima del otro. */
@media (max-width: 600px) {
  .ipo .ipo-hero .ipo-botones { flex-direction: column; align-items: center; }
  .ipo .ipo-hero .ipo-btn { width: min(100%, 260px); min-width: 0; }
}

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