/*
Theme Name:   Sor Juana 2026
Theme URI:    https://institutosorjuana.edu.mx
Description:  Tema hijo de Hello Elementor para el Instituto Sor Juana.
Author:       VisorLab
Author URI:   https://visorlab.com
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 8.3
Text Domain:  sorjuana-2026
*/

/* ==========================================================================
   ÍNDICE
   §1  Tokens (:root)
       §1.1 Paleta de marca (estilos de color de Figma)
       §1.2 Colores por función (lo que usan los componentes)
       §1.3 Tipografías
       §1.4 Escala tipográfica fluida
       §1.5 Contenedor y márgenes
       §1.6 Medios
       §1.7 Movimiento
   §2  Base
   §99 Movimiento reducido (único bloque, siempre al final)
   ========================================================================== */


/* ==========================================================================
   §1 TOKENS
   Única fuente de verdad del tema. Los colores y tipografías globales de
   Elementor (Ajustes del sitio) se reflejan A MANO con estos mismos valores:
   si cambias uno aquí, cámbialo también allá.
   ========================================================================== */
:root {

	/* §1.1 PALETA DE MARCA ------------------------------------------------
	   Un token por estilo de color de Figma, con el nombre traducido para
	   que se reconozca al comparar con el archivo de diseño. Los componentes
	   NO deberían usar estos directamente, sino los de §1.2. */
	--sorjuana-verde: #314f43;          /* Figma: Green */
	--sorjuana-amarillo: #ffd646;       /* Figma: Yellow */
	--sorjuana-naranja: #dc5511;        /* Figma: Orange */
	--sorjuana-lima: #b1d164;           /* Figma: Lime */
	--sorjuana-menta: #d9e8c1;          /* Figma: Mint */
	--sorjuana-blanco: #fff;            /* Figma: White */
	--sorjuana-amarillo-claro: #fff;    /* Figma: Light Yellow — PENDIENTE: hex (no aparece en la Home) */

	/* Colores fuera de los estilos de Figma que sí usa el diseño. */
	--sorjuana-crema: #f3efe6;          /* Texto de las tarjetas de carreras */
	--sorjuana-gris-texto: #444;        /* Texto del formulario */
	--sorjuana-gris-borde: #ccc;        /* Bordes de campos */
	--sorjuana-gris-placeholder: #767676; /* 4.54:1 sobre blanco: el gris más claro que aún cumple AA */

	/* Naranja oscurecido SOLO para texto pequeño. El de marca (#dc5511) da
	   3.92:1 sobre blanco y 3.04:1 sobre menta, por debajo del 4.5:1 de
	   WCAG AA. Este da 4.90:1 sobre menta y 6.33:1 sobre blanco, así sirve
	   en ambos fondos sin tener dos variantes. PENDIENTE: aprobación. */
	--sorjuana-naranja-texto: #a53f0c;


	/* §1.2 COLORES POR FUNCIÓN --------------------------------------------
	   Los componentes usan estos. Si el diseño cambia "de qué color son los
	   títulos", se cambia una línea aquí y no se buscan hex por todo el CSS. */
	--sorjuana-color-fondo: var(--sorjuana-blanco);
	--sorjuana-color-fondo-seccion: var(--sorjuana-menta);
	--sorjuana-color-fondo-oscuro: var(--sorjuana-verde);
	--sorjuana-color-titulos: var(--sorjuana-verde);
	--sorjuana-color-texto: var(--sorjuana-gris-texto);  /* PENDIENTE: confirmar color de párrafos en Figma */
	--sorjuana-color-texto-sobre-oscuro: var(--sorjuana-blanco);
	--sorjuana-color-eyebrow: var(--sorjuana-naranja-texto);
	--sorjuana-color-boton: var(--sorjuana-amarillo);
	--sorjuana-color-boton-secundario: var(--sorjuana-lima);
	--sorjuana-color-boton-texto: var(--sorjuana-verde); /* 6.42:1 sobre amarillo, 5.22:1 sobre lima */


	/* §1.3 TIPOGRAFÍAS ----------------------------------------------------
	   Momo Trust Display solo existe en peso 400. Si un título pide 600 o
	   700, el navegador inventa una negrita deformada ("faux bold"); por eso
	   §2 fija el peso y desactiva esa síntesis. Las respaldo son de sistema
	   para que el texto se vea mientras cargan las fuentes. */
	--sorjuana-fuente-titulos: "Momo Trust Display", system-ui, sans-serif;
	--sorjuana-fuente-texto: "Barlow", system-ui, sans-serif;


	/* §1.4 ESCALA TIPOGRÁFICA FLUIDA --------------------------------------
	   clamp(mínimo a 375px, fluido, máximo a 1920px). El máximo es el valor
	   de Figma (diseño de 1920). Los mínimos son propuesta de VisorLab: el
	   Figma no tiene versión móvil.
	   El término fluido va en rem + vw (no solo vw) para que el zoom del
	   navegador siga funcionando: un tamaño 100% en vw no crece al hacer zoom,
	   y eso incumple WCAG 1.4.4. */
	--sorjuana-texto-h1: clamp(2.25rem, 1.886rem + 1.553vw, 3.75rem);       /* 36 → 60 */
	--sorjuana-texto-h2: clamp(1.75rem, 1.568rem + 0.777vw, 2.5rem);        /* 28 → 40 */
	--sorjuana-texto-destacado: clamp(1.5rem, 1.409rem + 0.388vw, 1.875rem); /* 24 → 30  · Figma: Highights */
	--sorjuana-texto-h5: clamp(1.25rem, 1.189rem + 0.259vw, 1.5rem);        /* 20 → 24 */
	--sorjuana-texto-cuerpo: clamp(1.0625rem, 0.987rem + 0.324vw, 1.375rem); /* 17 → 22 */
	--sorjuana-texto-eyebrow: clamp(0.875rem, 0.814rem + 0.259vw, 1.125rem); /* 14 → 18  · Figma: Highlights 1 */
	--sorjuana-texto-ui: clamp(0.9375rem, 0.922rem + 0.065vw, 1rem);        /* 15 → 16  · Figma: UI 1, UI 2 */

	/* Interlineados. H1 viene de Figma (115%). El resto está en AUTO en
	   Figma, que depende de la fuente; se fijan valores explícitos para que
	   no cambien si cambia la fuente de respaldo. El cuerpo a 1.5 porque
	   párrafos largos con interlineado "auto" (~1.2) cansan la lectura. */
	--sorjuana-interlineado-titulos: 1.15;
	--sorjuana-interlineado-cuerpo: 1.5;
	--sorjuana-interlineado-ui: 1.25;

	/* PENDIENTE: valor exacto de Figma (campo "Letter spacing" del estilo). */
	--sorjuana-tracking-eyebrow: 0.2em;


	/* §1.5 CONTENEDOR Y MÁRGENES ------------------------------------------
	   El contenido del Figma vive en 1280px dentro del frame de 1920. El
	   margen lateral solo actúa cuando la pantalla es más angosta que el
	   contenedor: 20px en móvil, 40px en pantallas grandes. */
	--sorjuana-contenedor: 80rem; /* 1280px */
	--sorjuana-margen-lateral: clamp(1.25rem, 0.947rem + 1.294vw, 2.5rem); /* 20 → 40 */


	/* §1.6 MEDIOS ---------------------------------------------------------
	   url() completa por token. CSS no permite armar una url() concatenando
	   una variable de ruta base con un nombre de archivo, así que cada imagen
	   lleva su propio token con ruta relativa a la raíz (sin dominio, para
	   que sobreviva al cambio de dominio sin search-replace). */
	/* --sorjuana-img-hero: url("/wp-content/uploads/2026/10/hero.webp"); */


	/* §1.7 MOVIMIENTO -----------------------------------------------------
	   Una sola duración y curva para todo el sitio: cambia aquí y cambia en
	   todos los componentes, y el bloque de §99 la anula de un golpe. */
	--sorjuana-transicion: 200ms ease;
}


/* ==========================================================================
   §2 BASE
   Selectores de elemento a propósito (especificidad mínima): cualquier
   ajuste puesto en un widget de Elementor les gana sin pelear. El kit de
   Elementor (.elementor-kit-N h1) también les gana, por eso sus valores
   deben coincidir con §1.
   ========================================================================== */
body {
	font-family: var(--sorjuana-fuente-texto);
	font-size: var(--sorjuana-texto-cuerpo);
	line-height: var(--sorjuana-interlineado-cuerpo);
	color: var(--sorjuana-color-texto);
	background-color: var(--sorjuana-color-fondo);
}

h1,
h2 {
	font-family: var(--sorjuana-fuente-titulos);
	/* Hello pone 500 en los títulos; Momo Trust Display solo tiene 400. */
	font-weight: 400;
	/* Si algo pide negrita, mejor que no pase nada a que se deforme. */
	font-synthesis-weight: none;
	line-height: var(--sorjuana-interlineado-titulos);
	color: var(--sorjuana-color-titulos);
}

h1 {
	font-size: var(--sorjuana-texto-h1);
}

h2 {
	font-size: var(--sorjuana-texto-h2);
}


/* ==========================================================================
   §99 MOVIMIENTO REDUCIDO
   Agrupado aquí a propósito (excepción a "media queries junto al
   componente"): un solo lugar garantiza que ninguna animación se escape.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sorjuana-transicion: 0s;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


.isj_parrafo_sin_margen *{
	margin:0 !important;
}

@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .elementor .isj_enlaces_superiores.e-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 32px;
    padding-inline: 0;
    scroll-snap-type: none;          /* el snap rompe la marquee */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .elementor .isj_enlaces_superiores.e-grid::-webkit-scrollbar { display: none; }

  .elementor .isj_enlaces_superiores.e-grid > .e-con {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .elementor .isj_enlaces_superiores.e-grid p { white-space: nowrap; }
  .elementor .isj_enlaces_superiores.e-grid > .e-con.isj-vacio { display: none !important; }
}

@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .elementor .isj_enlaces_superiores.e-grid {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
@media (max-width: 1024px){
	.barra_superior{
		display:none !important;
	}
}

.home_link{
	display:inline-block;
	width:80px;
	height:80px;
}
.home_link svg {
  display: block;
  width: 100%;
  height: 100%;
}

.isj_icono_menu svg{display:block}
.isj_icono_menu svg line{
  stroke-width:13.3333px; /* = 2px exactos con el ícono a 60px */
  stroke-dasharray:300 400;
  stroke-dashoffset:0;
  transition:transform .45s cubic-bezier(.68,-.55,.27,1.55),
             stroke-dashoffset .45s cubic-bezier(.68,-.55,.27,1.55);
}
.isj_icono_menu svg line:nth-child(1){transform-origin:350px 100.219px;transform:translateY(-.219px)}
.isj_icono_menu svg line:nth-child(2){transform-origin:350px 200px}
.isj_icono_menu svg line:nth-child(3){transform-origin:350px 299.781px;transform:translateY(.219px)}

/* Estado flecha → (hover o menú abierto) */
.isj_icono_menu:hover svg line:nth-child(1),
.isj_icono_menu a[aria-expanded="true"] svg line:nth-child(1){
  stroke-dashoffset:-190;
  transform:translate(-50px,99.781px) rotate(45deg);
}
.isj_icono_menu:hover svg line:nth-child(2),
.isj_icono_menu a[aria-expanded="true"] svg line:nth-child(2){
  stroke-dashoffset:-100;
  transform:translateX(-50px);
}
.isj_icono_menu:hover svg line:nth-child(3),
.isj_icono_menu a[aria-expanded="true"] svg line:nth-child(3){
  stroke-dashoffset:-190;
  transform:translate(-50px,-99.781px) rotate(-45deg);
}

.isj_redes_sociales .elementor-social-icon:hover,
.isj_redes_sociales .elementor-social-icon:hover i {
    color: #DC5511 !important;
}

.isj_redes_sociales .elementor-social-icon:hover svg,
.isj_redes_sociales .elementor-social-icon:hover svg path {
    fill: #DC5511 !important;
}

.isj_redes_sociales .elementor-social-icon svg,
.isj_redes_sociales .elementor-social-icon svg path {
    transition: fill .25s ease;
}

.isj_botones, .isj_botones .elementor-widget-html{
padding:0;
	margin:0;
}

.isj_botones .elementor-widget-html svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible; /* la sombra se sigue viendo fuera del SVG */
}

.isj_botones svg{
  display:block;width:100%;height:auto;overflow:visible;cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
}
.isj_botones svg rect{transition:fill .35s ease}
.isj_botones svg path{transition:fill .35s ease, stroke .35s ease}
.isj_botones svg path:nth-of-type(3){transform-box:fill-box;transform-origin:center}

/* Hover = estado "Yellow" del diseño */
.isj_botones svg:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 2px 12px rgba(177,209,100,.2));
}
.isj_botones svg:hover rect{fill:#FFD646}
.isj_botones svg:hover path:nth-of-type(1),
.isj_botones svg:hover path:nth-of-type(2){fill:#314F43}
.isj_botones svg:hover path:nth-of-type(3){animation:isjRing .6s ease-in-out}

.isj_botones svg:active{transform:translateY(-1px) scale(.98);transition-duration:.1s}

@keyframes isjRing{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-14deg)}
  40%{transform:rotate(12deg)}
  60%{transform:rotate(-8deg)}
  80%{transform:rotate(4deg)}
}

@media (prefers-reduced-motion:reduce){
  .isj_botones svg,.isj_botones svg *{transition:none!important;animation:none!important}
  .isj_botones svg:hover{transform:none}
}

/* ==========================================================
   Hero | Bachillerato — panel derecho (Rectangle 5) + alumno
   Clase en la sección: .isj__hero_bachillerato
   ========================================================== */
.e-con.isj__hero_bachillerato{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --isj-hero-panel-w:49.22%; /* 945 / 1920 */
  --isj-hero-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Capas comunes */
.e-con.isj__hero_bachillerato::before,
.e-con.isj__hero_bachillerato::after{
  content:"";
  display:block;
  position:absolute;
  top:4px;
  right:0;
  bottom:0;
  left:auto;
  width:var(--isj-hero-panel-w);
  height:auto;
  opacity:1;
  border:0;
  border-radius:0;
  mix-blend-mode:normal;
  transition:none;
  pointer-events:none;
}

.e-con.isj__hero_bachillerato::before {
  z-index: 0;
  background:
    var(--isj-hero-noise),
    radial-gradient(ellipse 100% 100% at 100% 100%,
      rgba(255,214,70,.8) 0%,
      rgba(150,160,70,.55) 35%,
      rgba(14,58,38,.3) 65%,
      rgba(14,58,38,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 30%, transparent 100%);
	--isj-hero-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	width:100%;
}

/* Rectangle 5: gradiente con opacidad .61 sobre base clara + grano */
.e-con.isj__hero_bachillerato::before{
  z-index:0;
  background:
    var(--isj-hero-noise),
    linear-gradient(180deg, rgba(14,58,38,.61) 0%, rgba(255,214,70,.61) 100%),
    #E9E4C8;
}

/* Alumno */
.e-con.isj__hero_bachillerato::after{
  z-index:1;
  background:url("/wp-content/uploads/2026/10/Friendly-YoungMan-in-Green-Hoodie.png") 50% 65px  / 85% auto no-repeat;
	background-position: bottom !important;
}

/* Contenido por encima del panel */
.e-con.isj__hero_bachillerato > .e-con-inner,
.e-con.isj__hero_bachillerato > .e-con{
  position:relative;
  z-index:2;
}

/* Laptop */
@media (max-width:1440px){
  .e-con.isj__hero_bachillerato::after{background-position:50% 30px}
}

/* Tablet: el panel baja debajo del contenido, a todo el ancho */
@media (max-width:1024px){
  .e-con.isj__hero_bachillerato{padding-bottom:460px!important}
  .e-con.isj__hero_bachillerato::before,
  .e-con.isj__hero_bachillerato::after{
    top:auto;
    left:0;
    right:0;
    width:100%;
    height:440px;
  }
  .e-con.isj__hero_bachillerato::after{
    background-position:50% 24px;
    background-size:auto 112%;
  }
}

/* Móvil */
@media (max-width:767px){
  .e-con.isj__hero_bachillerato{padding-bottom:350px!important}
  .e-con.isj__hero_bachillerato::before,
  .e-con.isj__hero_bachillerato::after{height:330px}
  .e-con.isj__hero_bachillerato::after{background-position:50% 18px}
}

.isj_heroe_plan_de_estudios,
.isj_heroe_historia,
.isj_heroe_contacto{
  position: relative;
  background-image: none !important;
}

.isj_heroe_plan_de_estudios::after,
.isj_heroe_historia::after,
.isj_heroe_contacto::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: url("https://institutosorjuana.edu.mx/wp-content/uploads/2026/10/instituto-sor-juana-fondo-mapa-curricular.webp") center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.isj_heroe_plan_de_estudios > .e-con,
.isj_heroe_historia > .e-con,
.isj_heroe_contacto > .e-con{
  position: relative;
  z-index: 1;
}

/* columna de texto: ocupa solo su mitad */
.isj_heroe_plan_de_estudios > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con),
.isj_heroe_historia > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con),
.isj_heroe_contacto > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con){
  max-width: calc(50% - 40px);
  padding-right: 0 !important;
}

/* tableta y móvil: imagen arriba como banner, texto abajo */
@media (max-width: 1024px){
  .isj_heroe_plan_de_estudios,
  .isj_heroe_historia,
  .isj_heroe_contacto{
    padding-top: calc(var(--isj-hero-img, 340px) + 40px) !important;
  }
  .isj_heroe_plan_de_estudios::after,
  .isj_heroe_historia::after,
  .isj_heroe_contacto::after{
    left: 0;
    bottom: auto;
    height: var(--isj-hero-img, 340px);
    background-position: center 25%;
  }
  .isj_heroe_plan_de_estudios > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con),
  .isj_heroe_historia > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con),
  .isj_heroe_contacto > .e-con > .e-con-inner > .e-con:not(.e-con ~ .e-con){
    max-width: 100%;
  }
  /* contacto: la columna derecha vacía no aporta nada sin la imagen al lado */
  .isj_heroe_contacto > .e-con > .e-con-inner > .e-con ~ .e-con{
    display: none;
  }
}

@media (max-width: 767px){
  .isj_heroe_plan_de_estudios,
  .isj_heroe_historia,
  .isj_heroe_contacto{ --isj-hero-img: 240px; }
}

/* Nuestra Historia: misma estructura que plan de estudios, otra imagen */
.isj_heroe_historia::after{
  background-image: url("https://institutosorjuana.edu.mx/wp-content/uploads/2026/10/instituto-sor-juana-fondo-historia.webp");
}

.isj_heroe_contacto::after{
  background-image: url("https://institutosorjuana.edu.mx/wp-content/uploads/2026/10/instituto-sor-juana-fondo-contacto.webp");
}

.isj_numero_de_pasos{
	line-height:0 !important;
}