/* Estilos custom no cubiertos por theme.json */

/* ─── PRUEBA: experiencia 3D full-page de la home ─── */
#soytecno-home3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.soytecno-3d-home main.wp-block-group{position:relative;z-index:1;align-items:flex-start}
.soytecno-3d-home main .wp-block-group,
.soytecno-3d-home main .wp-block-columns{background-color:transparent !important;box-shadow:none !important}
/* contenido en columna IZQUIERDA → deja libre la derecha para los mecanismos */
.soytecno-3d-home main > *{max-width:1140px !important;margin-left:max(4vw,24px) !important;margin-right:auto !important}
/* el hero a 2 columnas: a una sola (el 3D va al fondo, a la derecha) */
.soytecno-3d-home .soytecno-hero-wrap{grid-template-columns:1fr}
.soytecno-3d-home .soytecno-hero-gears{display:none}
/* móvil: sin experiencia 3D, contenido normal */
@media (max-width:781px){
  #soytecno-home3d{display:none}
  .soytecno-3d-home main > *{max-width:none;margin-left:auto !important}
  .soytecno-3d-home .soytecno-hero-content,
  .soytecno-3d-home main .wp-block-group:has(> .wp-block-heading),
  .soytecno-3d-home main .wp-block-column > .wp-block-group{background-color:transparent !important;backdrop-filter:none;border:0;box-shadow:none !important;padding:0 !important}
}
/* paneles de texto legibles sobre el 3D */
.soytecno-3d-home .soytecno-hero-content,
.soytecno-3d-home main .wp-block-group:has(> .wp-block-heading),
.soytecno-3d-home main .wp-block-column > .wp-block-group{
  background-color:rgba(248,248,244,.86) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);border-radius:18px;
  padding:1.5rem 1.7rem !important;box-shadow:0 8px 30px rgba(11,27,43,.06) !important;
}
/* Hero: SIN panel de cristal — el texto va directo sobre el fondo (no hay 3D detrás del texto, los engranajes están a la derecha) */
.soytecno-3d-home .soytecno-hero-content{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border:0 !important;box-shadow:none !important}

/* Iconos de las áreas (Tecnología / Digitalización) — pastilla con icono SVG */
.soytecno-area-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;margin-bottom:1rem;background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(16,185,129,.05));border:1px solid rgba(16,185,129,.28)}
.soytecno-area-ic svg{display:block}

/* Hero móvil: ilustración SVG de engranajes (en escritorio manda el 3D) */
.soytecno-hero-mobile-svg{display:none}
@media (max-width:781px){
  /* En móvil, los engranajes van como marca de agua atenuada arriba, DETRÁS del título. */
  .soytecno-hero-content{position:relative;overflow:hidden}
  .soytecno-hero-content > *{position:relative;z-index:1}
  .soytecno-hero-content > .soytecno-hero-mobile-svg{display:block;position:absolute;z-index:0;top:-10px;right:18px;width:285px;height:auto;margin:0;opacity:.22}
}

:root {
  --soytecno-radius-card: 18px;
  --soytecno-radius-pill: 999px;
  --soytecno-shadow-soft: 0 2px 8px rgba(11,27,43,0.04);
  --soytecno-shadow-hover: 0 12px 32px rgba(11,27,43,0.08);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Foco accesible */
:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Hero tipográfico ─── */

.soytecno-hero-heading h1 {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 1.0;
  overflow-wrap: break-word;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--ink);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.soytecno-hero-line {
  display: block;
}

/* Hero a dos columnas: texto + engranajes 3D */
.soytecno-hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 2.5rem;
}

.soytecno-hero-content {
  min-width: 0;
}

.soytecno-hero-gears {
  position: relative;
  width: 100%;
  height: clamp(360px, 40vw, 540px);
  pointer-events: none;
}

.soytecno-hero-gears canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 781px) {
  .soytecno-hero-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .soytecno-hero-gears {
    display: none;
  }
}

/* Palabra animada */
.soytecno-word-cycle {
  display: block;
  color: var(--wp--preset--color--brand);
  font-style: italic;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  will-change: clip-path, opacity;
}

.soytecno-word-cycle.is-leaving {
  animation: wordLeave 0.3s var(--ease-in-out) forwards;
}

.soytecno-word-cycle.is-entering {
  animation: wordEnter 0.45s var(--ease-out) forwards;
}

@keyframes wordLeave {
  from { clip-path: inset(0 0% 0 0);   opacity: 1; }
  to   { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@keyframes wordEnter {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

/* ─── Scroll reveal ─── */

.soytecno-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.soytecno-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger para hijos directos */
.soytecno-stagger > * {
  opacity: 0;
  transform: translateY(24px) scale(0.99);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.soytecno-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0) scale(1); }
.soytecno-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms;  opacity: 1; transform: translateY(0) scale(1); }
.soytecno-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: translateY(0) scale(1); }
.soytecno-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: translateY(0) scale(1); }

/* ─── Stats animados ─── */

.soytecno-stat-number {
  font-variant-numeric: tabular-nums;
}

/* ─── Botones — feedback táctil ─── */

.wp-element-button {
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.wp-element-button:active {
  transform: scale(0.97);
}

/* Cards hover (solo en dispositivos con puntero fino; evita falso hover táctil) */
.wp-block-group[style*="border-radius"] {
  transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-group[style*="border-radius"]:hover {
    box-shadow: var(--soytecno-shadow-hover);
    transform: translateY(-2px);
  }
}

.wp-block-group[style*="border-radius"]:active {
  transform: translateY(0) scale(0.99);
}

/* ─── Responsive móvil ─── */

@media (max-width: 781px) {

  /* Hero: reducir padding vertical y tipografía más comedida */
  .soytecno-hero-wrap {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .soytecno-hero-heading h1 {
    font-size: clamp(2.5rem, 13vw, 4.5rem);
    line-height: 1.05;
  }

  /* Columnas: cuando se apilan en móvil, reducir espacio entre ellas */
  .wp-block-columns {
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .wp-block-columns > .wp-block-column {
    margin-bottom: 0 !important;
  }

  /* Stats strip: bloques más compactos cuando se apilan */
  .soytecno-stagger.wp-block-columns > .wp-block-column {
    padding: 0.5rem 0 !important;
  }

  /* Menú móvil: overlay a pantalla completa (fuerza fixed + viewport entero).
     Necesario para que funcione bien cuando hay submenús (Tecnología → Unidades). */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 5rem 1.5rem 2rem !important;
    background-color: #FAFAF7 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
  }

  /* Submenús dentro del overlay móvil: también a la izquierda */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    width: 100% !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.5rem !important;
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 600;
    color: var(--wp--preset--color--ink) !important;
  }

  /* Cards / grupos con padding interior excesivo en móvil */
  .wp-block-group[style*="padding:3.5rem"],
  .wp-block-group[style*="padding:3rem"] {
    padding: 1.75rem 1.5rem !important;
  }

  /* Tipografía de cabeceras grandes — reducir en móvil */
  h1.wp-block-heading[style*="clamp(2.5rem"] {
    font-size: 2.25rem !important;
  }

  h2.wp-block-heading[style*="clamp(2rem"],
  h2.wp-block-heading[style*="clamp(1.75rem"] {
    font-size: 1.5rem !important;
  }

  /* Iframes de simuladores: altura adaptable */
  figure.soytecno-iframe {
    min-height: 480px !important;
  }

  figure.soytecno-iframe iframe {
    height: 480px !important;
  }

  /* Botones: que ocupen todo el ancho disponible si están solos */
  .wp-block-buttons {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  /* Footer: enlaces legales que no se corten en una línea */
  footer p {
    line-height: 1.9 !important;
    word-spacing: 0.05em;
  }
}

/* Móviles muy pequeños */
@media (max-width: 400px) {
  .soytecno-hero-heading h1 {
    font-size: 2.25rem;
  }
}

/* ─── Reducir movimiento ─── */
@media (prefers-reduced-motion: reduce) {
  .soytecno-word-cycle,
  .soytecno-reveal,
  .soytecno-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}