/*
Theme Name: IFFE Business School
Theme URI: https://github.com/jorge-fernandez-secuoyas/iffe
Author: Jorge Fernández
Description: Theme didáctico inspirado en iffe.es. Pensado para una clase de dos horas: pocos archivos, CSS con variables y opciones en el Personalizador (colores, tipografía, posición del menú y de la barra lateral).
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iffe
*/

/* ==========================================================================
   1. VARIABLES
   Los valores por defecto son los de iffe.es. El Personalizador los
   sobrescribe inyectando un bloque <style> en el <head> (ver inc/customizer.php).
   ========================================================================== */
:root {
  --color-primario: #E93556;   /* rojo IFFE: botones, acentos, subrayados */
  --color-oscuro:   #28334A;   /* azul marino: títulos, footer, cajas */
  --color-texto:    #73797E;   /* gris de párrafos */
  --color-fondo:    #FFFFFF;
  --color-suave:    #F0EEEF;   /* fondo de secciones alternas */
  --color-blanco:   #FFFFFF;

  --fuente-titulos: "Lexend Deca", sans-serif;
  --fuente-texto:   "Poppins", sans-serif;

  --radio: 8px;
  --sombra: 0 10px 30px rgba(40, 51, 74, 0.12);
  --ancho: 1200px;
  --espacio: clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  color: var(--color-oscuro);
  line-height: 1.2;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.2em; }
a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

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

.seccion { padding-block: var(--espacio); }
.seccion--suave { background: var(--color-suave); }
.seccion--oscura { background: var(--color-oscuro); color: var(--color-blanco); }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: var(--color-blanco); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.boton,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primario);
  color: var(--color-blanco);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); }
.boton--borde { background: transparent; color: var(--color-primario); box-shadow: inset 0 0 0 2px var(--color-primario); }

/* ==========================================================================
   4. CABECERA
   La clase del <body> cambia según la opción "Posición del menú":
   .menu-derecha | .menu-centro | .menu-debajo
   ========================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-blanco);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.cabecera__inner {
  display: flex; align-items: center; gap: 2rem;
  min-height: 80px;
}
.logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--fuente-titulos); }
.logo img { max-height: 56px; width: auto; }
.logo__texto { font-size: 1.8rem; font-weight: 700; color: var(--color-primario); line-height: 1; }
.logo__sub { display: block; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primario); }
.logo a:hover { text-decoration: none; }

.menu-principal { flex: 1; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.menu-principal a { color: var(--color-oscuro); font-size: 0.95rem; }
.menu-principal a:hover, .menu-principal .current-menu-item > a { color: var(--color-primario); text-decoration: none; }
/* Submenú desplegable (segundo nivel), p. ej. los másteres bajo "Masters" */
.menu-principal li { position: relative; }
.menu-principal .menu-item-has-children > a::after { content: " ▾"; font-size: 0.75em; }
.menu-principal .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 300px; padding: 0.5rem 0; margin: 0; list-style: none;
  background: var(--color-fondo); border-radius: var(--radio); box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  flex-direction: column; gap: 0;
}
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: flex; }
.menu-principal .sub-menu a { display: block; padding: 0.5rem 1.1rem; color: var(--color-texto); font-size: 0.9rem; }
.menu-principal .sub-menu a:hover { color: var(--color-primario); background: var(--color-suave); }

.cabecera__cta { margin-left: auto; }

/* Opción: menú a la derecha (por defecto) */
.menu-derecha .menu-principal ul { justify-content: flex-end; }
.menu-derecha .cabecera__cta { margin-left: 0; }
/* Opción: menú centrado */
.menu-centro .menu-principal ul { justify-content: center; }
.menu-centro .cabecera__cta { margin-left: 0; }
/* Opción: menú debajo del logo */
.menu-debajo .cabecera__inner { flex-wrap: wrap; padding-block: 0.75rem; }
.menu-debajo .menu-principal { flex-basis: 100%; order: 3; border-top: 1px solid var(--color-suave); padding-top: 0.75rem; }
.menu-debajo .menu-principal ul { justify-content: center; }

/* Hamburguesa (móvil) */
.menu-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 0.5rem;
}
.menu-toggle span { display: block; width: 26px; height: 3px; background: var(--color-oscuro); margin: 5px 0; border-radius: 2px; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .menu-principal { display: none; flex-basis: 100%; order: 3; }
  .menu-principal.abierto { display: block; padding-block: 1rem; }
  .menu-principal ul { flex-direction: column; gap: 0.75rem; }
  .menu-principal .sub-menu { display: flex; position: static; box-shadow: none; padding: 0.25rem 0 0 1rem; min-width: 0; gap: 0.4rem; }
  .menu-principal .menu-item-has-children > a::after { content: ""; }
  .cabecera__inner { flex-wrap: wrap; gap: 1rem; }
  .cabecera__cta { display: none; }
}

/* ==========================================================================
   5. HERO (portada)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 70vh;
  display: grid; align-items: center;
  margin: 1rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-oscuro) center/cover no-repeat;
  color: var(--color-blanco);
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,51,74,0.85), rgba(40,51,74,0.4)); }
.hero__inner { position: relative; padding: clamp(2rem, 6vw, 5rem); max-width: 720px; }
.hero__sobre { font-size: 0.9rem; opacity: 0.9; margin-bottom: 1rem; }
.hero h1 { color: var(--color-blanco); font-size: clamp(2.4rem, 5vw, 3.8rem); }
.hero h1 em { font-style: italic; border-bottom: 3px solid var(--color-primario); }
.hero p { font-size: 1.1rem; max-width: 55ch; }

/* ==========================================================================
   6. BANDA DE DATOS
   ========================================================================== */
.datos {
  margin: -3rem 1rem 0;
  position: relative; z-index: 2;
  background: var(--color-oscuro); color: var(--color-blanco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 2.5rem;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.datos h2 { color: var(--color-blanco); margin: 0; }
.datos__lista { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.datos__lista strong { font-family: var(--fuente-titulos); font-size: 1.8rem; color: var(--color-blanco); margin-right: 0.4rem; }
@media (max-width: 700px) { .datos { grid-template-columns: 1fr; } }

/* ==========================================================================
   7. REJILLAS: programas y blog
   ========================================================================== */
.rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.programa {
  background: var(--color-blanco);
  border-left: 5px solid var(--color-primario);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.programa h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.programa h3 a { color: var(--color-oscuro); }

.tarjeta {
  position: relative; overflow: hidden;
  border-radius: 16px;
  background: var(--color-oscuro);
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end;
  color: var(--color-blanco);
}
.tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: transform 0.4s ease; }
.tarjeta:hover img { transform: scale(1.05); }
.tarjeta__cuerpo { position: relative; padding: 1.5rem; background: linear-gradient(transparent, rgba(40,51,74,0.95)); width: 100%; }
.tarjeta h3 { font-size: 1.1rem; margin: 0; }
.tarjeta h3 a { color: var(--color-blanco); }
.tarjeta__meta { font-size: 0.8rem; opacity: 0.8; }

.titulo-seccion { text-align: center; margin-bottom: 2.5rem; }
.titulo-seccion::after { content: ""; display: block; width: 60px; height: 3px; background: var(--color-primario); margin: 1rem auto 0; }

/* ==========================================================================
   8. CONTENIDO (páginas, entradas) + barra lateral
   La clase del <body> cambia según "Posición de la barra lateral":
   .lateral-derecha | .lateral-izquierda | .lateral-ninguna
   ========================================================================== */
.contenido { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
.lateral-derecha  .contenido--con-lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lateral-izquierda .contenido--con-lateral { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lateral-izquierda .contenido--con-lateral .lateral { order: -1; }
@media (max-width: 900px) {
  .contenido--con-lateral { grid-template-columns: minmax(0, 1fr) !important; }
  .lateral-izquierda .contenido--con-lateral .lateral { order: 1; }
}

.lateral .widget { background: var(--color-suave); padding: 1.5rem; border-radius: var(--radio); margin-bottom: 1.5rem; }
.lateral .widget ul { padding-left: 1.2rem; }

.entrada { max-width: 75ch; }
.entrada__meta { font-size: 0.85rem; margin-bottom: 2rem; }
.entrada__meta a { color: var(--color-oscuro); }
.entrada .wp-post-image { border-radius: 16px; margin-bottom: 2rem; }
.entrada__contenido { font-size: 1.05rem; }
.entrada__contenido img { border-radius: var(--radio); }
.alignwide { max-width: var(--ancho); }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }

.paginacion { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.paginacion .page-numbers { padding: 0.5rem 0.9rem; border-radius: 6px; background: var(--color-suave); color: var(--color-oscuro); }
.paginacion .current { background: var(--color-primario); color: var(--color-blanco); }

/* ==========================================================================
   9. CTA DE CONTACTO
   ========================================================================== */
.cta { text-align: center; }
.cta__caja {
  background: var(--color-blanco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 800px; margin-inline: auto;
}

/* ==========================================================================
   10. PIE
   ========================================================================== */
.pie { background: var(--color-oscuro); color: var(--color-blanco); padding-block: var(--espacio) 2rem; font-size: 0.9rem; }
.pie a { color: var(--color-blanco); }
.pie__columnas { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie h3 {
  color: var(--color-blanco); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-block; border-bottom: 3px solid var(--color-primario); padding-bottom: 0.2rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 0.5rem; }
.pie__logo .logo__texto { color: var(--color-blanco); }
.pie__logo .logo__sub { color: var(--color-blanco); }
.pie__bajo { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; opacity: 0.8; }

/* ==========================================================================
   11. PORTADA EN BLOQUES (Gutenberg)
   La portada puede ser una página con bloques que llevan las mismas clases
   (hero, datos, programa, tarjeta...). Estas reglas adaptan los bloques
   nativos (Cover, Grupo, Bucle de consulta) a ese CSS.
   ========================================================================== */
.portada-bloques > * { margin-block: 0; }
/* Los themes clásicos envuelven el contenido del Grupo en un contenedor interno: lo hacemos
   transparente para que rejillas y flex vean a los hijos de verdad. */
.portada-bloques .wp-block-group__inner-container { display: contents; }
.portada-bloques .wp-block-group.seccion { padding-block: var(--espacio); }

/* Cover como hero: el overlay del theme por encima de la imagen del bloque, el texto por encima de todo */
.hero.wp-block-cover { padding: 0; }
.hero::before, .hero::after { z-index: 1; }
.hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.hero.wp-block-cover .wp-block-cover__background { display: none; }  /* el atenuado lo pone el theme */
.hero .hero__inner > * + *, .hero .hero__inner > .wp-block-group__inner-container > * + * { margin-top: 0.75rem; }
.hero .wp-block-buttons { margin-top: 1.25rem; }

/* Banda de datos como Grupo */
.datos.wp-block-group > *, .datos.wp-block-group > .wp-block-group__inner-container > * { margin: 0; }

/* Bucle de consulta como rejilla: la plantilla de entradas es la rejilla y cada entrada una tarjeta */
.rejilla.wp-block-post-template { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla.wp-block-post-template > li { margin: 0; }
.rejilla.wp-block-post-template > li > .wp-block-group { height: 100%; }
.rejilla.wp-block-post-template > li > .wp-block-group > .wp-block-group__inner-container { display: contents; }
.programa .wp-block-post-title, .tarjeta .wp-block-post-title { margin: 0; }
.tarjeta .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.tarjeta .wp-block-post-featured-image img { width: 100%; height: 100%; }
.tarjeta .wp-block-post-featured-image a { display: block; height: 100%; }
.tarjeta .tarjeta__cuerpo > *, .tarjeta .tarjeta__cuerpo > .wp-block-group__inner-container > * { margin: 0; }
.tarjeta .wp-block-post-date { font-size: 0.8rem; opacity: 0.8; }
.tarjeta .wp-block-post-date a { color: inherit; }
.cta__caja.wp-block-group > * + *, .cta__caja.wp-block-group > .wp-block-group__inner-container > * + * { margin-top: 1rem; }
.cta__caja .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   12. FICHAS DE MÁSTER EN BLOQUES (plantilla "Bloques a sangre")
   ========================================================================== */
.hero--master { min-height: 58vh; }
.hero--master h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.hero--master .hero__inner p:not(.hero__sobre) { font-size: 1.2rem; }
.is-style-outline .wp-block-button__link { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,0.15); }
.hero .wp-block-buttons { gap: 0.75rem; }

/* Columnas dentro de las fichas */
.portada-bloques .wp-block-columns { margin-bottom: 0; gap: 1.5rem; }
.master-cols--intro { align-items: center; }
.master-intro__img img { border-radius: var(--radio); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.master-intro__img { margin: 0; }

/* Banda de datos clave bajo el hero y banda de cifras */
.datos--master, .datos--cifras { display: block; }
.datos--master .wp-block-columns, .datos--cifras .wp-block-columns { margin: 0; gap: 1rem; }
.datos--master p, .datos--cifras p { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.datos--master strong, .datos--cifras strong { display: block; font-family: var(--fuente-titulos); font-size: 1.3rem; opacity: 1; margin-top: 0.2rem; }
.datos--cifras { margin: 0 1rem; text-align: center; padding: 2.5rem; }
.datos--cifras strong { font-size: 2.4rem; margin: 0 0 0.3rem; }

/* Tarjetas de ventajas, modalidades y experiencia: reutilizan .programa */
.programa--ventaja h3, .programa--ventaja h4 { text-transform: none; letter-spacing: 0; font-size: 1.1rem; margin: 0 0 0.4rem; }
.programa--ventaja p { margin: 0; font-size: 0.95rem; }
.portada-bloques .wp-block-column > .programa { height: 100%; }

/* Acordeones (bloque Detalles): programa y preguntas frecuentes */
.wp-block-details.modulo { background: var(--color-blanco); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radio); margin: 0 0 0.75rem; padding: 0 1.25rem; }
.modulo summary { list-style: none; cursor: pointer; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--fuente-titulos); font-weight: 600; color: var(--color-oscuro); }
.modulo summary::-webkit-details-marker { display: none; }
.modulo summary::after { content: "+"; color: var(--color-primario); font-size: 1.5rem; line-height: 1; }
.modulo[open] summary::after { content: "−"; }
.modulo > :not(summary) { margin: 0 0 1rem; }
.modulo + .wp-block-paragraph, .master-programa .modulo + p { margin-top: 1.5rem; }

/* Docentes */
.docente { text-align: center; }
.docente p { margin: 0; font-size: 0.9rem; color: var(--color-texto); }
.docente strong { color: var(--color-oscuro); font-size: 1rem; }
.docente__avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--color-primario); color: #fff !important; display: grid; place-items: center; margin: 0 auto 0.75rem !important; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.5rem !important; }

/* Testimonios (bloque Cita) */
.wp-block-quote.testimonio { margin: 0; padding: 1.5rem; border: 0; border-left: 4px solid var(--color-primario); background: var(--color-suave); border-radius: var(--radio); font-style: italic; height: 100%; }
.testimonio p { margin: 0 0 0.75rem; }
.testimonio cite { display: block; font-style: normal; font-weight: 600; color: var(--color-oscuro); font-size: 0.9rem; }