/* ==========================================================================
   IE TOKENS — Sistema de diseño israelescuer.com (IE Core)
   Prefijo único "ie-" para no pisar clases de Astra.
   Los tokens leen la paleta global de Astra (Personalizador → Colores)
   con fallback a los valores del prototipo. Cambia el color en el
   personalizador y toda la web lo hereda.
   ========================================================================== */
:root{
  /* Fondos */
  --ie-bg:          var(--ast-global-color-4, #1d1d26);
  --ie-bg-elevated: var(--ast-global-color-5, #24242f);
  --ie-bg-overlay:  #2c2c3a;
  --ie-bg-code:     var(--ast-global-color-8, #14141b);
  --ie-bg-soft:     #21212b;

  /* Bordes */
  --ie-border:        rgba(255,255,255,.08);
  --ie-border-strong: rgba(255,255,255,.16);

  /* Texto */
  --ie-text:       var(--ast-global-color-3, #c8c8d6);
  --ie-heading:    var(--ast-global-color-2, #fbfbfd);
  --ie-muted:      #9c9cb0;

  /* Acentos */
  --ie-teal:       var(--ast-global-color-0, #3ac7d4);
  --ie-teal-hover: #64e2eb;
  --ie-teal-deep:  var(--ast-global-color-1, #0092b2);
  --ie-teal-btn:   #007287;
  --ie-green:      var(--ast-global-color-6, #a8c546);
  --ie-green-hover:#c2dd63;
  --ie-amber:      var(--ast-global-color-7, #f2b94b);
  --ie-coral:      #ff6b6b;
  --ie-whatsapp:   #25d366;
  --ie-cowork:     #0066ff;

  /* Tipografía */
  --ie-mono: 'Ubuntu Mono', ui-monospace, monospace;
  --ie-sans: 'Inter', system-ui, sans-serif;

  /* Layout */
  --ie-max: 1440px;
  --ie-gutter: 24px;
  --ie-radius: 10px;
  --ie-radius-lg: 14px;

  /* Sombras */
  --ie-shadow: 0 10px 40px rgba(0,0,0,.45);
  --ie-glow: 0 0 0 1px rgba(58,199,212,.25), 0 0 24px rgba(58,199,212,.18);

  /* Motion */
  --ie-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---- Sección: fondo a todo el ancho, contenido a 1440px máx. ---- */
.ie-section{width:100%;background:var(--ie-bg)}
.ie-section--elevated{background:var(--ie-bg-elevated)}
.ie-section--soft{background:var(--ie-bg-soft)}
.ie-section--code{background:var(--ie-bg-code)}
.ie-section--dots{background-color:var(--ie-bg);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px}
.ie-wrap{max-width:var(--ie-max);margin:0 auto;padding-left:var(--ie-gutter);padding-right:var(--ie-gutter)}
.ie-section .ie-wrap{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.ie-section--compact .ie-wrap{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.ie-section--amplio .ie-wrap{padding-top:clamp(80px,11vw,140px);padding-bottom:clamp(80px,11vw,140px)}
@media (max-width:640px){:root{--ie-gutter:16px}}

/* ---- Tipos base dentro de bloques ie ---- */
.ie-kicker{font-family:var(--ie-mono);font-size:clamp(12px,.5vw + .55rem,14px);letter-spacing:.12em;text-transform:uppercase;color:var(--ie-teal);margin:0 0 18px}
.ie-h1{font-family:var(--ie-mono);font-weight:400;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--ie-heading);margin:0 0 26px;text-wrap:pretty}
.ie-h2{font-family:var(--ie-mono);font-weight:400;font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.18;letter-spacing:-.015em;color:var(--ie-heading);margin:0 0 18px;text-wrap:pretty}
.ie-h3{font-family:var(--ie-mono);font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--ie-heading);margin:0 0 10px}
.ie-intro{font-family:var(--ie-sans);font-size:clamp(.9375rem,.55vw + .78rem,1.125rem);font-weight:300;line-height:1.75;color:var(--ie-text);max-width:62ch;margin:0 0 12px}
.ie-p{font-family:var(--ie-sans);font-weight:300;line-height:1.75;color:var(--ie-text)}
.ie-head{margin-bottom:clamp(28px,4vw,48px)}
.ie-head--center{text-align:center}.ie-head--center .ie-intro{margin-left:auto;margin-right:auto}

/* ---- Botones ---- */
.ie-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ie-mono);font-size:16px;line-height:1;border-radius:6px;padding:15px 26px;text-decoration:none!important;border:1px solid transparent;cursor:pointer;transition:all .18s var(--ie-ease)}
.ie-btn--primary{background:var(--ie-teal-btn);color:#fff!important;font-weight:700}
.ie-btn--primary:hover{background:var(--ie-teal-deep);color:#fff!important}
.ie-btn--primary.ie-pulse:hover{animation:ie-pulse 1.6s cubic-bezier(.25,.6,.2,1) infinite}
.ie-btn--outline{border-color:var(--ie-border-strong);color:var(--ie-heading)!important;background:transparent}
.ie-btn--outline:hover{border-color:var(--ie-teal-deep);color:var(--ie-teal-deep)!important}
.ie-btn--ghost{padding:0;border:0;color:var(--ie-green)!important;font-size:14px;background:transparent}
.ie-btn--ghost:hover{color:var(--ie-green-hover)!important}
.ie-btn--ghost .ie-arrow{transition:transform .18s var(--ie-ease)}
.ie-btn--ghost:hover .ie-arrow{transform:translateX(4px)}
.ie-btn--whatsapp{background:var(--ie-whatsapp);color:#0b1a10!important;font-weight:700}
.ie-btn--whatsapp:hover{filter:brightness(1.08)}
@keyframes ie-pulse{0%{box-shadow:0 0 0 0 rgba(58,199,212,.45)}70%{box-shadow:0 0 0 14px rgba(58,199,212,0)}100%{box-shadow:0 0 0 0 rgba(58,199,212,0)}}

/* ---- Cards y chips ---- */
.ie-card{background:var(--ie-bg-elevated);border:1px solid var(--ie-border);border-radius:var(--ie-radius);padding:24px;transition:transform .18s var(--ie-ease),border-color .18s var(--ie-ease),box-shadow .18s var(--ie-ease)}
.ie-card--hover:hover{transform:translateY(-3px);border-color:var(--ie-border-strong);box-shadow:var(--ie-shadow)}
.ie-chip{display:inline-block;font-family:var(--ie-mono);font-size:12px;line-height:1;padding:5px 9px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--ie-border);color:var(--ie-text)}
.ie-chip--teal{color:var(--ie-teal);border-color:rgba(58,199,212,.35);background:rgba(58,199,212,.08)}
.ie-chip--green{color:var(--ie-green);border-color:rgba(168,197,70,.35);background:rgba(168,197,70,.08)}
.ie-chip--amber{color:var(--ie-amber);border-color:rgba(242,185,75,.35);background:rgba(242,185,75,.08)}
.ie-chip--coral{color:var(--ie-coral);border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}

/* ---- Iconos ---- */
.ie-icon{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ie-icon--lg{width:32px;height:32px}
.ie-icon-badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:rgba(58,199,212,.1);color:var(--ie-teal);margin-bottom:16px}

/* ---- Grids ---- */
.ie-grid{display:grid;gap:20px}
.ie-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.ie-grid--3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.ie-grid--4{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}

/* ---- Animación reveal ---- */
@keyframes ie-fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ie-reveal{opacity:0}
.ie-reveal.is-in{animation:ie-fadeup .6s var(--ie-ease) both}
@media (prefers-reduced-motion:reduce){.ie-reveal{opacity:1}.ie-reveal.is-in{animation:none}.ie-pulse:hover{animation:none!important}}

/* ---- Terminal ---- */
.ie-terminal{background:var(--ie-bg-code);border:1px solid var(--ie-border);border-radius:12px;box-shadow:var(--ie-shadow);overflow:hidden}
.ie-terminal__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.ie-terminal__dot{width:10px;height:10px;border-radius:50%;display:block}
.ie-terminal__dot--r{background:var(--ie-coral)}.ie-terminal__dot--a{background:var(--ie-amber)}.ie-terminal__dot--g{background:var(--ie-green)}
.ie-terminal__title{font-family:var(--ie-mono);font-size:12px;color:var(--ie-muted);margin-left:6px}
.ie-terminal__body{font-family:var(--ie-mono);font-size:14.5px;line-height:1.75;padding:20px 22px;color:var(--ie-text);white-space:pre-wrap;overflow-x:auto}
.ie-terminal__body .c-teal{color:var(--ie-teal)}.ie-terminal__body .c-green{color:var(--ie-green)}.ie-terminal__body .c-muted{color:var(--ie-muted)}.ie-terminal__body .c-amber{color:var(--ie-amber)}

/* ---- Modal (proyectos / herramientas) ---- */
.ie-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.ie-modal.is-open{display:flex}
.ie-modal__overlay{position:absolute;inset:0;background:rgba(10,10,14,.78);backdrop-filter:blur(6px)}
.ie-modal__panel{position:relative;background:var(--ie-bg-overlay);border:1px solid var(--ie-border-strong);border-radius:var(--ie-radius-lg);max-width:960px;width:100%;max-height:90vh;display:flex;flex-direction:column;animation:ie-modalin .22s var(--ie-ease)}
@keyframes ie-modalin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ie-modal__scroll{overflow-y:auto;padding:clamp(20px,4vw,36px)}
.ie-modal__close{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.06);border:1px solid var(--ie-border);border-radius:8px;color:var(--ie-heading);width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ie-modal__close:hover{border-color:var(--ie-teal-deep);color:var(--ie-teal)}
.ie-modal__footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,36px);border-top:1px solid var(--ie-border)}
body.ie-modal-open{overflow:hidden}

/* ---- Formularios ---- */
.ie-field{display:block;margin-bottom:18px}
.ie-field label{display:block;font-family:var(--ie-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ie-muted);margin-bottom:8px}
.ie-input,.ie-select,.ie-textarea{width:100%;background:var(--ie-bg-code);border:1px solid var(--ie-border-strong);border-radius:8px;color:var(--ie-heading);font-family:var(--ie-sans);font-size:15.5px;padding:13px 14px;transition:border-color .15s}
.ie-input:focus,.ie-select:focus,.ie-textarea:focus{outline:none;border-color:var(--ie-teal-deep);box-shadow:var(--ie-glow)}
.ie-textarea{min-height:130px;resize:vertical}


/* ---- Utilidades de Alpine: evita parpadeo antes de hidratar ---- */
[x-cloak]{display:none!important}

/* ---- Swiper: tema oscuro ---- */
.ie-swiper{--swiper-theme-color:var(--ie-teal);--swiper-navigation-size:22px}
.ie-swiper .swiper-pagination-bullet{background:var(--ie-muted);opacity:.5}
.ie-swiper .swiper-pagination-bullet-active{background:var(--ie-teal);opacity:1}

/* ---- HTMX: indicador de carga ---- */
.ie-htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .ie-htmx-indicator,.htmx-request.ie-htmx-indicator{opacity:1}
.htmx-swapping{opacity:.4;transition:opacity .12s}

/* ---- Accesibilidad ---- */
.ie-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ie-skip:focus{position:fixed;top:12px;left:12px;z-index:99999;background:var(--ie-teal);color:#0b2226;padding:10px 16px;border-radius:6px}