.elementor-kit-4{--e-global-color-primary:#0D0D0D;--e-global-color-secondary:#B8963E;--e-global-color-text:#4A4A4A;--e-global-color-accent:#D4AF61;--e-global-color-amipaper:#FAF9F6;--e-global-color-amicream:#F5F2EB;--e-global-color-amiinksoft:#1E1E1E;--e-global-color-amimute:#7A776F;--e-global-color-amiline:#E5E2DA;--e-global-color-amilinedark:#2A2A2A;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1.4px;background-color:#FAF9F6;color:#0D0D0D;font-family:"Inter", Sans-serif;font-weight:400;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ------------------------------------------------------------------
   Utilidades del sistema AMI (portadas de ami-web/src/index.css).
   Viven en el Custom CSS del kit de Elementor, no en el tema, para que
   todo lo visual siga siendo editable desde el maquetador.
   ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

/* La mono en tamaños chicos y con tracking amplio se ve muy liviana. */
.ami-mono { font-weight: 600; }

/* Cifras de display: sans, no serif. Playfair usa números de estilo antiguo
   y descuadran la línea base. */
.ami-num,
.ami-num * {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.03em !important;
}

/* Filo degradado dorado */
.ami-gold-line,
.ami-gold-line > .elementor-widget-container {
  background: linear-gradient(90deg,#b8963e 0%,#d4af61 35%,#f0dfae 55%,#d4af61 75%,#b8963e 100%);
}

/* Borde píldora con degradado dorado (botón secundario destacado) */
.ami-gold-ring .elementor-button {
  background:
    linear-gradient(#faf9f6,#faf9f6) padding-box,
    linear-gradient(90deg,#b8963e,#e8d49a,#b8963e) border-box;
  border: 1px solid transparent;
  color: #0d0d0d;
}
.ami-gold-ring .elementor-button:hover { opacity: .8; }

/* El retrato solo desborda en escritorio: en tablet y móvil vuelve al flujo
   normal y se centra, como el `lg:absolute` del prototipo. */
@media (max-width: 1024px) {
  .ami-cutout {
    position: static !important;
    inset: auto !important;
    width: 260px !important;
    margin: 0 auto 8px !important;
    transform: none !important;
  }
}
@media (max-width: 767px) {
  .ami-cutout { width: 220px !important; }
}

/* Las cajas de icono no se estiran nunca */
.ami-iconbox { flex: 0 0 auto !important; }
/* Lado fijo por clase: dejarlo al `width` del container daba 335px en móvil
   y sacaba la página del viewport (body 768 en 390). */
.ami-box-44 { width: 44px !important; min-width: 44px; height: 44px; min-height: 44px; }
.ami-box-52 { width: 52px !important; min-width: 52px; height: 52px; min-height: 52px; }
.ami-box-64 { width: 64px !important; min-width: 64px; height: 64px; min-height: 64px; }
.ami-box-72 { width: 72px !important; min-width: 72px; height: 72px; min-height: 72px; }

/* Recorte que desborda la tarjeta y se disuelve sobre el texto */
.ami-cutout img {
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 34%,transparent 70%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 34%,transparent 70%);
  filter: grayscale(1) drop-shadow(0 25px 45px rgba(13,13,13,.28));
}

/* Fotos de marca en blanco y negro */
.ami-bn img { filter: grayscale(1); }

/* Tarjeta: elevación y borde que se marca al pasar el cursor */
.ami-card {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.ami-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13,13,13,.35) !important;
  box-shadow: 0 22px 45px -30px rgba(13,13,13,.45);
}

/* Imagen dentro de una tarjeta: acercamiento suave */
.ami-zoom img { transition: transform .9s cubic-bezier(.22,1,.36,1); }
.ami-zoom:hover img { transform: scale(1.05); }

/* El nombre del sector sube al pasar el cursor */
.ami-sector .ami-sector-cap { transition: transform .5s ease; }
.ami-sector:hover .ami-sector-cap { transform: translateY(-4px); }

/* Tarjeta de servicio: se amplía y se invierte a fondo negro */
.ami-invert { transition: all .5s ease-out; }
.ami-invert:hover {
  transform: scale(1.04);
  background-color: #0d0d0d !important;
  box-shadow: 0 30px 60px -30px rgba(13,13,13,.55);
  z-index: 20;
}
.ami-invert:hover .elementor-heading-title,
.ami-invert:hover p { color: #faf9f6 !important; }
.ami-invert:hover .ami-iconbox { border-color: #d4af61 !important; color: #d4af61 !important; }
.ami-invert:hover .ami-iconbox svg { fill: #d4af61; }

/* Botón: leve elevación y desplazamiento de la flecha */
.ami-btn .elementor-button {
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ami-btn .elementor-button:hover { transform: translateY(-2px); }

/* Palabra serif fantasma del pie.
   En el prototipo es `absolute -bottom-10 w-full overflow-hidden`: NO ocupa
   sitio en el flujo y sobresale 40px por abajo, donde el pie la recorta.
   En flujo normal sumaba su alto al pie y dejaba un hueco vacío enorme
   (medido: 1258px de pie contra los 530px del original). */
.ami-ghost {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: -40px;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
.ami-ghost .elementor-heading-title {
  color: rgba(250,249,246,.05);
  white-space: nowrap;
  line-height: 1;
}
/* El pie recorta lo que desborde y ancla a la fantasma, como el <footer>
   `relative overflow-hidden` del prototipo. */
.elementor-location-footer { overflow: hidden; }
.ami-clip { position: relative; overflow: hidden; }

/* ------------------------------------------------------------------
   Hero: 3 slides apilados en la misma celda. Los conduce el snippet
   "AMI · Hero slider" (Elementor > Custom Code), igual que HeroSlider.jsx:
   rota cada 6 s y responde a flechas e indicadores.
   Sin JavaScript se ve el primer slide, que es el comportamiento correcto.
   ------------------------------------------------------------------ */
.ami-hero-stack { display: grid !important; }
.ami-hero-stack > .e-con { grid-area: 1 / 1; }

.ami-slide { opacity: 0; transition: opacity 900ms ease; }
.ami-slide.is-on { opacity: 1; z-index: 10; }
/* Sin JS el primero se ve; con JS manda la clase .is-on */
.ami-hero:not(.js-on) .ami-slide:first-child { opacity: 1; }

/* Filas que NO deben apilarse en móvil (controles del hero, chips, metadatos).
   El flex_direction responsive del container no siempre gana, así que se fija. */
/* Fila que no se apila ni envuelve en móvil.
   Sin `nowrap` las celdas saltaban de línea; con `width:auto` en el padre se
   rompía el space-between y el contenido se salía por la derecha, así que el
   ancho automático va solo en los grupos internos (.ami-group). */
.e-con.ami-row-always {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.e-con.ami-row-always > .e-con { flex-shrink: 0; }
.e-con.ami-group { width: auto !important; flex: 0 0 auto; }
/* Columna que ocupa el hueco y encoge cuando hace falta */
.e-con.ami-flex1 { flex: 1 1 auto !important; min-width: 0; }
.ami-max260 .elementor-heading-title { max-width: 260px; }

/* Indicadores y flechas del hero */
.ami-dot, .ami-dot > .e-con-inner { min-height: 3px; height: 3px; }
.ami-dot {
  width: 32px; cursor: pointer;
  background-color: rgba(250,249,246,.25);
  transition: background-color .3s ease;
}
.ami-dot.is-on,
.ami-hero:not(.js-on) .ami-dot:first-child {
  background-image: linear-gradient(90deg,#b8963e 0%,#d4af61 35%,#f0dfae 55%,#d4af61 75%,#b8963e 100%);
}
.ami-prev, .ami-next {
  cursor: pointer;
  transition: border-color .3s ease;
  /* Tamaño fijo: dejándolo al cálculo del container, en móvil se estiraban
     y se salían del ancho de pantalla. */
  width: 44px !important;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
}
.ami-prev:hover, .ami-next:hover { border-color: rgba(250,249,246,.6) !important; }

/* ------------------------------------------------------------------
   Cruces "+" en las esquinas del contenedor hairline.
   Dos van en el propio elemento y dos en su .e-con-inner: cada pseudo-
   elemento solo da para una esquina.
   ------------------------------------------------------------------ */
.ami-frame { position: relative; }
.ami-frame::before, .ami-frame::after,
.ami-frame > .e-con-inner::before, .ami-frame > .e-con-inner::after {
  content: '+';
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1;
  color: rgba(13,13,13,.3);
  pointer-events: none; z-index: 10;
}
.ami-frame::before { left: -7px; top: -9px; }
.ami-frame::after  { right: -7px; top: -9px; }
.ami-frame > .e-con-inner::before { left: -7px; bottom: -9px; }
.ami-frame > .e-con-inner::after  { right: -7px; bottom: -9px; }
@media (max-width: 1024px) {
  .ami-frame::before, .ami-frame::after,
  .ami-frame > .e-con-inner::before, .ami-frame > .e-con-inner::after { display: none; }
}

/* ------------------------------------------------------------------
   Label: cajita con borde que ajusta al texto.
   El borde va en el .elementor-heading-title (inline-block) y no en el
   wrapper del widget, que ocupa todo el ancho de la columna.
   ------------------------------------------------------------------ */
.ami-label .elementor-heading-title {
  display: inline-block;
  border: 1px solid rgba(13,13,13,.25);
  padding: 6px 12px;
  line-height: 1;
}
.ami-label-dark .elementor-heading-title {
  border-color: rgba(250,249,246,.25);
}

/* Caja cuadrada con icono dentro (servicios, cifras, plataforma) */
.ami-iconbox {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}

/* ------------------------------------------------------------------
   Ancho de sección: max-w-[1280px] px-5 lg:px-8 del prototipo.
   En un container "boxed" el padding de Elementor se aplica al elemento
   exterior, que ya ocupa todo el ancho, así que NO desplaza el contenido
   centrado. El padding horizontal tiene que ir en el .e-con-inner.
   ------------------------------------------------------------------ */
.ami-sec > .e-con-inner { padding-left: 32px; padding-right: 32px; }
@media (max-width: 767px) {
  .ami-sec > .e-con-inner { padding-left: 20px; padding-right: 20px; }
}

/* Anchos máximos centrados que el prototipo fija con max-w-* + mx-auto */
.ami-w1040 { max-width: 1040px; margin-left: auto; margin-right: auto; width: 100%; }
.ami-w900 .elementor-heading-title { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Fila de metadatos del curso: 3 columnas iguales. Con flex y 33.33% los
   bordes hacen que la última celda se salga de la tarjeta. */
.ami-metas { display: grid !important; grid-template-columns: repeat(3, 1fr); }

/* Buscador del catálogo: sin caja, solo el icono y el hairline de abajo */
.ami-buscador input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
}

/* Lista de categorías del catálogo: filas con hairline, contador en mono
   y un cuadradito dorado delante, como en CursosListado.jsx */
.ami-catlist ul { list-style: none; margin: 0; padding: 0; }
.ami-catlist li {
  border-bottom: 1px solid #e5e2da;
  display: flex; align-items: center; gap: 8px;
}
.ami-catlist li:last-child { border-bottom: 0; }
.ami-catlist li a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; flex: 1 1 auto;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
  color: #4a4a4a; text-decoration: none; transition: color .3s ease;
}
.ami-catlist li a::before {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  background: linear-gradient(90deg,#b8963e,#d4af61,#f0dfae,#d4af61,#b8963e);
}
.ami-catlist li a:hover { color: #0d0d0d; }
.ami-catlist li .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #7a776f;
}

/* ------------------------------------------------------------------
   Menú móvil (Header.jsx): panel oscuro a ancho completo, ítems en serif
   con su hairline, y "Aula Virtual" como botón al final.
   El ítem vive en el menú de WordPress (con la clase .ami-aula) para que
   el cliente lo edite desde Apariencia > Menús como cualquier otro.
   ------------------------------------------------------------------ */
.ami-aula { display: none !important; }

@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown { background-color: #0d0d0d !important; }
  .elementor-nav-menu--dropdown a.elementor-item {
    /* En Header.jsx los ítems del móvil van en caja normal, no en mayúsculas. */
    text-transform: none;
    border: 1px solid transparent;
    margin: 4px 0;
    min-height: 48px;
    display: flex; align-items: center;
  }
  .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    border-color: rgba(250,249,246,.7);
  }
  /* El botón del aula virtual */
  .ami-aula { display: block !important; margin-top: 20px !important; }
  .ami-aula a.elementor-item {
    background: #faf9f6 !important;
    color: #0d0d0d !important;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-color: transparent !important;
  }
}

/* Rejilla de sectores: 6 / 3 / 2 columnas, igual que el prototipo
   (grid-cols-2 md:grid-cols-3 lg:grid-cols-6). Con flex y anchos en %
   los bordes hacen que la última celda se salga. */
.ami-sectores { display: grid !important; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) { .ami-sectores { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .ami-sectores { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------
   Franja de sectores.
   Las fotos son fondo del contenedor, así que el B/N no se puede hacer
   con filter (afectaría también al texto): se usa blend luminosity
   contra un gris, que desatura solo el fondo.
   ------------------------------------------------------------------ */
.ami-sector {
  background-color: #808080;
  background-blend-mode: luminosity;
  transition: background-size .7s ease, background-blend-mode .7s ease;
  background-size: cover;
  overflow: hidden;
}
.ami-sector:hover {
  background-blend-mode: normal;
  background-size: 106% auto;
}

/* El filo dorado crece al pasar el cursor */
.ami-sector .ami-gold-line { width: 24px; transition: width .5s ease; }
.ami-sector:hover .ami-gold-line { width: 48px; }

/* Testimonios: retrato en B/N que vuelve a color al invertir la tarjeta */
.ami-testi img {
  filter: grayscale(1);
  transition: filter .7s ease, border-color .5s ease;
}
.ami-testi:hover img { filter: grayscale(0); border-color: rgba(250,249,246,.25) !important; }
.ami-testi:hover { background-color: #0d0d0d !important; }
.ami-testi:hover .elementor-heading-title,
.ami-testi:hover p { color: #faf9f6 !important; }

/* Filas con icono en caja (plataforma): la caja se rellena de dorado */
.ami-listrow .ami-iconbox { transition: background-color .4s ease, border-color .4s ease, color .4s ease; }
.ami-listrow:hover .ami-iconbox {
  border-color: #b8963e !important;
  background-color: #b8963e !important;
  color: #faf9f6 !important;
}
.ami-listrow:hover .ami-iconbox svg { fill: #faf9f6; }

/* Campos del formulario: sólo línea inferior, con filo dorado al enfocar */
.ami-form .elementor-field-group { position: relative; }
.ami-form input[type="text"], .ami-form input[type="email"],
.ami-form input[type="tel"], .ami-form textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e2da !important;
  border-radius: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.ami-form .elementor-field-group::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,#b8963e,#d4af61,#f0dfae,#d4af61,#b8963e);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease-out; pointer-events: none;
}
.ami-form .elementor-field-group:focus-within::after { transform: scaleX(1); }

/* ------------------------------------------------------------------
   Tope de ancho en móvil.
   Varios bloques llevan un ancho fijo en px (max-w-[520px], [540px]…)
   copiado del prototipo, donde Tailwind lo aplica como max-width y por
   tanto nunca desborda. Elementor lo aplica como width, así que en
   pantallas estrechas se salían y cortaban el texto.
   ------------------------------------------------------------------ */
/* En el prototipo estos anchos son `max-w-[Npx]` (max-width), pero Elementor
   los aplica como `width`, que no encoge. Con el tope el comportamiento vuelve
   a ser el de Tailwind y deja de desbordar en pantallas estrechas. */
.elementor-element { max-width: 100%; }
.e-con, .e-con-inner { max-width: 100%; }

/* Quien prefiera menos movimiento, no ve ninguno */
@media (prefers-reduced-motion: reduce) {
  /* Elementor deja los elementos con entrance animation en opacity:0 hasta
     dispararla. Con reduced-motion la animación no corre, así que el contenido
     se quedaría invisible: aquí se fuerza a visible. */
  .elementor-invisible { opacity: 1 !important; animation: none !important; }

  .ami-card:hover, .ami-btn .elementor-button:hover, .ami-invert:hover { transform: none; }
  .ami-zoom:hover img, .ami-sector:hover img { transform: none; }
  /* El hero no rota solo; las flechas siguen funcionando */
  .ami-slide { transition: none; }
}/* End custom CSS */