:root{
  
  color-scheme: light;
  scroll-behavior:smooth;

  /* Layout */
  --wrap:max(min(1200px, 92vw), 320px);
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
  --easing:cubic-bezier(.22,.61,.36,1);

  /* Tipografía */
  --font-ui:'Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-head:'Manrope','Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --size-0: clamp(.9rem, .86rem + .12vw, .96rem);
  --size-1: clamp(1rem, .96rem + .22vw, 1.08rem);
  --size-2: clamp(1.14rem, 1.02rem + .50vw, 1.32rem);
  --size-3: clamp(1.5rem, 1.2rem + 1.28vw, 2.08rem);
  --size-4: clamp(2.2rem, 1.7rem + 2.3vw, 3.2rem);

  /* Colores */
  --bg:#f5f7fd;
  --bg-2:#eef2f9;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#13233c;
  --ink-2:#566681;
  --ink-3:#8a96ad;
  --line:rgba(19,35,60,.12);
  --primary:#2656f0;
  --accent:#12b0b4;

  /* Gradientes */
  --grad-strong:linear-gradient(135deg,#2656f0 0%,#3e73ff 60%,#12b0b4 100%);
  --grad-soft:linear-gradient(135deg,rgba(38,86,240,.06) 0%,rgba(18,176,180,.06) 100%);

  /* Sombras */
  --shadow-xs:0 1px 2px rgba(15,25,55,.06),0 1px 1px rgba(15,25,55,.04);
  --shadow-sm:0 8px 22px rgba(15,25,55,.10);
  --shadow:0 26px 80px rgba(15,25,55,.14);
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  min-height:100vh;
  font:var(--size-1)/1.65 var(--font-ui);
  letter-spacing:.1px;
  color:var(--ink);
  background:
    radial-gradient(880px 560px at -12% -14%, rgba(38,86,240,.04), transparent 60%),
    radial-gradient(780px 520px at 112% -10%, rgba(18,176,180,.04), transparent 60%),
    #f9fbff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","cv09","ss01","ss02","case","tnum","liga";
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{
  width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(10px,2vw,16px);
}
.center{ text-align:center; }
.lead{
  color:var(--ink-2);
  max-width:920px;
  margin:10px auto 28px;
  line-height:1.85;
  font-size:var(--size-1);
}
h1,h2,h3,h4{
  margin:0 0 .5rem;
  letter-spacing:.2px;
  font-family:var(--font-head);
  color:var(--ink);
}
h1{ font-weight:800; font-size:var(--size-4); line-height:1.12; }
h2{ font-weight:800; font-size:var(--size-3); }
h3{ font-weight:700; font-size:var(--size-2); }

/* ===== Header ===== */
.hd{
  position:fixed;
  inset:0 0 auto 0;
  height:76px;
  z-index:1000;
  display:grid;
  align-items:center;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px) saturate(1.02);
  transition:
    background .25s var(--easing),
    box-shadow .25s var(--easing),
    border-color .25s var(--easing),
    transform .25s var(--easing);
}
@supports not (backdrop-filter: blur(10px)){
  .hd{ background:var(--panel); }
}
.hd.scrolled{
  background:var(--panel);
  box-shadow:0 14px 30px rgba(12,28,70,.08);
  border-bottom-color: rgba(242,242,245,.16);
  transform:translateY(-1px);
}
.hd .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  color:var(--ink);
}

/* Logo sin fondo exterior */
.brand img,
.ft img{
  width:56px;
  height:56px;
  object-fit:cover;
  -webkit-mask: radial-gradient(closest-side, #000 99%, transparent 100%);
          mask: radial-gradient(closest-side, #000 99%, transparent 100%);
  clip-path: circle(50% at 50% 50%);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* ===== Nav + Mega ===== */
.nav{
  display:flex;
  gap:22px;
  align-items:center;
}
.nav-item{ position:relative; }
.nav-link{
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  color:color-mix(in oklab, var(--ink) 82%, var(--ink-3));
  padding:.54rem .76rem;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  border-radius:10px;
  transition:
    color .16s var(--easing),
    background .16s var(--easing),
    box-shadow .16s var(--easing),
    transform .16s var(--easing);
}
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--primary);
  background:rgba(38,86,240,.10);
  outline:none;
  box-shadow:0 0 0 3px rgba(38,86,240,.18);
  transform:translateY(-1px);
}
.nav-link .chev{
  font-size:.9em;
  transform:translateY(1px);
  opacity:.85;
}

.has-mega::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:100%;
  height:16px;
}
.mega{
  position:fixed;
  left:0;
  right:0;
  top:76px;
  display:none;
  opacity:0;
  pointer-events:none;
  z-index:999;
  transition:opacity .18s var(--easing);
}
.mega-inner{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.98)),
    var(--grad-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow: var(--shadow);
}
.mega-wrap{
  width:var(--wrap);
  margin-inline:auto;
  padding:22px 0;
  display:grid;
  gap:26px;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}
.mega h4{
  margin:.2rem 0 .6rem;
  font-weight:800;
  color:var(--ink);
}
.mega-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.mega-list a{
  color:var(--ink-2);
  padding:.52rem .66rem;
  border-radius:10px;
  display:inline-block;
  transition:
    background .14s var(--easing),
    transform .14s var(--easing),
    color .14s var(--easing),
    box-shadow .14s var(--easing);
}
.mega-list a:hover,
.mega-list a:focus-visible{
  color:var(--ink);
  transform:translateX(2px);
  background:linear-gradient(90deg, rgba(38,86,240,.12), rgba(18,176,180,.1));
  box-shadow: inset 0 0 0 1px rgba(38,86,240,.18);
  outline:none;
}
.mega-callout{
  border-left:1px dashed rgba(38,86,240,.28);
  padding-left:18px;
  color:var(--ink-2);
}

@media (hover:hover){
  .has-mega:hover>.mega,
  .has-mega:focus-within>.mega,
  .has-mega:has(.mega:hover)>.mega{
    display:block;
    opacity:1;
    pointer-events:auto;
  }
}

/* ===== Botones ===== */
.btn,
.btn-primary{
  position:relative;
  overflow:hidden;
  background:var(--grad-strong);
  color:#fff;
  font-weight:800;
  border:0;
  padding:.84rem 1.12rem;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(38,86,240,.22);
  transition:
    transform .16s var(--easing),
    box-shadow .16s var(--easing),
    filter .16s var(--easing),
    translate .16s var(--easing);
  font-family:var(--font-head);
  letter-spacing:.2px;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 22px 52px rgba(38,86,240,.28);
}
.btn:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 10px 24px rgba(38,86,240,.2);
}
.btn:disabled,
[aria-disabled="true"]{
  opacity:.65;
  cursor:not-allowed;
  box-shadow:none;
  pointer-events:none;
}
.btn-sm{
  padding:.58rem 1rem;
  font-size:.92rem;
  border-radius:999px;
  background:var(--primary);
}

/* Ripple micro-efecto */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  transform:scale(0);
  animation:ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{
  to{
    transform:scale(2.2);
    opacity:0;
  }
}

/* ===== Burger móvil ===== */
.burger{
  display:none;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  position:relative;
}
.burger-icon g line{
  transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .16s;
}

/* ===== Barra de progreso ===== */
.scrollbar{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:1200;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transform-origin:0 50%;
  transform:scaleX(0);
  box-shadow:0 2px 6px rgba(38,86,240,.35);
}

/* ===== Secciones ===== */
.section{
  padding: clamp(60px, 6vw, 100px) 0;
  background: var(--bg);
}
.section.alt{
  background: var(--bg-2);
}
.page-head{
  padding-top:calc(76px + 28px);
  background:var(--bg);
}
.page-head h1{ text-align:center; }
.page-head .badges{
  list-style:none;
  display:flex;
  gap:10px;
  justify-content:center;
  padding:0;
  margin:18px 0 0;
  flex-wrap:wrap;
}
.page-head .badges li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.56rem .96rem;
  border-radius:999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.68);
  backdrop-filter: blur(6px);
  color:#14243d;
  box-shadow: 0 6px 18px rgba(5,12,26,.15);
  font-weight:700;
  letter-spacing:.1px;
}

/* ===== Grids ===== */
.grid{
  display:grid;
  gap:24px;
}
.grid-3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid-6{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.mt-3{ margin-top:14px; }

/* ===== Cards base ===== */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  color:var(--ink);
  box-shadow: var(--shadow-xs);
  transition:
    transform .2s var(--easing),
    box-shadow .2s var(--easing),
    border-color .2s var(--easing),
    filter .2s var(--easing);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in oklab, var(--primary) 18%, var(--line));
  filter: saturate(1.01) contrast(1.01);
}

/* ===== Contact cards ===== */
.contact-card{
  position:relative;
  padding:30px 32px 26px;
  display:grid;
  align-content:start;
  gap:14px;
  text-align:center;
  background:
    radial-gradient(220% 180% at 0% 0%, rgba(38,86,240,.02), transparent 55%),
    radial-gradient(200% 180% at 110% 10%, rgba(18,176,180,.03), transparent 60%),
    var(--card);
  border-radius:24px;
  border:1px solid color-mix(in oklab, var(--line), var(--primary) 10%);
  box-shadow:
    0 18px 40px rgba(15,25,55,.10),
    0 1px 0 rgba(255,255,255,.8) inset;
  overflow:hidden;
  transition:
    transform .22s var(--easing),
    box-shadow .22s var(--easing),
    border-color .22s var(--easing),
    background .22s var(--easing),
    filter .22s var(--easing);
}

/* halo de color en la base */
.contact-card::after{
  content:"";
  position:absolute;
  left:-20%; right:-20%; bottom:-28%;
  height:120px;
  background:radial-gradient(circle at 50% 0%,
    rgba(38,86,240,.24) 0%,
    rgba(18,176,180,.08) 40%,
    transparent 75%);
  opacity:0;
  transition:opacity .3s var(--easing), transform .3s var(--easing);
  transform:translateY(8px);
  pointer-events:none;
}


.contact-card h3{
  margin-top:.6rem;
  font-size:clamp(1.2rem, 1.1rem + .3vw, 1.4rem);
  letter-spacing:.25px;
}

.contact-card p{
  margin:0 0 .4rem;
  color:var(--ink-2);
  font-size:var(--size-1);
}

/* Icono principal */
.icon{
  width:82px;
  height:82px;
  margin:0 auto .4rem;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 40%, transparent 65%),
    linear-gradient(145deg, rgba(38,86,240,.08), rgba(18,176,180,.08));
  box-shadow:
    0 10px 26px rgba(15,25,55,.18),
    0 0 0 1px rgba(255,255,255,.7) inset;
  border:1px solid color-mix(in oklab, var(--line), var(--primary) 32%);
  transform:translateY(2px);
  transition:transform .28s var(--easing), box-shadow .28s var(--easing), border-color .28s var(--easing), background .28s var(--easing);
}
.icon svg{
  display:block;
  width:40px;
  height:40px;
}

.icon-wa{ color:#25d366; }
.icon-mail{ color:#1f6feb; }
.icon-phone{ color:#0ea5e9; }

/* Hover + “elevación” */
.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 26px 60px rgba(15,25,55,.20),
    0 0 0 1px rgba(255,255,255,.9) inset;
  border-color:color-mix(in oklab, var(--primary) 30%, var(--line));
  filter:saturate(1.03);
}
.contact-card:hover .icon{
  transform:translateY(-4px) scale(1.03);
  box-shadow:
    0 18px 36px rgba(15,25,55,.26),
    0 0 0 1px rgba(255,255,255,.9) inset;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,.78) 44%, transparent 70%),
    linear-gradient(145deg, rgba(38,86,240,.16), rgba(18,176,180,.16));
}
.contact-card:hover::after{
  opacity:1;
  transform:translateY(0);
}

/* Botón dentro de las tarjetas: full width y más “app-like” */
.contact-card .btn,
.contact-card .btn-primary{
  width:100%;
  margin-top:14px;
  padding:.9rem 1.2rem;
  border-radius:18px;
  font-size:var(--size-1);
  box-shadow:
    0 14px 30px rgba(38,86,240,.30),
    0 0 0 1px rgba(255,255,255,.9) inset;
  background-image:linear-gradient(115deg,#5676ff 0%,#2656f0 45%,#12b0b4 100%);
}
.contact-card .btn:hover,
.contact-card .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 20px 38px rgba(38,86,240,.36),
    0 0 0 1px rgba(255,255,255,1) inset;
  filter:brightness(1.05);
}

/* ===== Chips Redes ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px 14px;
  justify-content:center;
  align-items:center;
  padding:10px 0 2px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.62rem 1.08rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.1px;
  color:var(--ink);
  background:#fff;
  border:1px solid color-mix(in oklab, var(--line), var(--primary) 12%);
  box-shadow: 0 1px 2px rgba(15,25,55,.06), 0 6px 18px rgba(15,25,55,.08);
  transition:
    transform .14s var(--easing),
    box-shadow .14s var(--easing),
    border-color .14s var(--easing),
    background .14s var(--easing),
    color .14s var(--easing);
}
.chip::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 0 0 2px rgba(38,86,240,.10);
}
.chip:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #f7faff);
  border-color: color-mix(in oklab, var(--primary) 22%, var(--line));
  box-shadow: 0 6px 18px rgba(38,86,240,.10), inset 0 0 0 1px rgba(38,86,240,.05);
  color: color-mix(in oklab, var(--ink) 90%, var(--primary) 10%);
}

/* ===== Info + Mapa ===== */
.info-grid{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Tarjeta de datos */
.info-card{
  display:flex;
  flex-direction:column;
  padding:20px 22px;
}

.info-card h3{
  margin-bottom:14px;
}

/* Lista de datos */
.info-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}

.info-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.info-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(38,86,240,.08);
  color:var(--primary);
  flex-shrink:0;
}

.info-icon i{
  font-size:18px;
}

.info-text .label{
  font-weight:800;
  letter-spacing:.1px;
  display:block;
  margin-bottom:2px;
}

.info-text .value{
  display:block;
  color:var(--ink-2);
  font-size:var(--size-0);
  line-height:1.5;
}

.info-text a{
  color:var(--primary);
  font-weight:600;
}

/* Cabecera de la tarjeta de mapa */
.info-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:18px 20px 0;
}

.info-head h3{
  margin:0;
}

.map-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.35rem .8rem;
  border-radius:999px;
  font-size:var(--size-0);
  background:rgba(38,86,240,.06);
  color:var(--primary);
  font-weight:700;
  white-space:nowrap;
}

.map-link i{
  font-size:.9em;
}

/* Contenedor del mapa */
.map{
  margin:14px 18px 18px;
  aspect-ratio: 16/10;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}

.map iframe{
  width:100%;
  height:100%;
  border:0;
}

/* ===== FAQ mejorado ===== */
.faq{
  max-width: 900px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item{
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    box-shadow .18s var(--easing),
    transform .18s var(--easing),
    border-color .18s var(--easing),
    background .18s var(--easing);
}

/* Quita el triángulo feo por defecto */
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }

.faq-item summary{
  cursor: pointer;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink);
  background: linear-gradient(90deg, rgba(38,86,240,.02), rgba(18,176,180,.04));
}

.faq-q{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Puntito gradiente al inicio de la pregunta */
.faq-bullet{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--primary) 40%, var(--accent) 100%);
  box-shadow: 0 0 0 3px rgba(38,86,240,.12);
  flex-shrink: 0;
}

/* Chevron animado */
.faq-chevron{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(19,35,60,.04);
  color: var(--ink-2);
  font-size: .8rem;
  position: relative;
}

.faq-chevron::before{
  content: "⌃";
  transform: rotate(180deg);
  transition: transform .2s var(--easing);
}

/* Contenido de la respuesta */
.faq-a{
  padding: .85rem 1.3rem 1.1rem;
  border-top: 1px solid rgba(19,35,60,.06);
  color: var(--ink-2);
  font-size: var(--size-0);
  line-height: 1.7;
}

/* Estado abierto */
.faq-item[open]{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--line));
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(238,244,255,.92));
}

.faq-item[open] .faq-chevron::before{
  transform: rotate(0deg);
}


/* ===== ENCUESTA (formulario) ===== */
.contact-hero{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.28));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact-form{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:16px;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
          backdrop-filter: blur(10px) saturate(1.05);
  padding: clamp(18px, 2.2vw, 24px);
  border-radius:16px;
  border:1px solid rgba(12,28,70,.22) !important;
  box-shadow: 0 22px 46px rgba(12,28,70,.14) !important;
  color:var(--ink);
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  grid-column: span 3;
}
.field--full{ grid-column: 1 / -1; }
.field label{
  font-weight:800;
  letter-spacing:.1px;
  font-family:var(--font-head);
}
.field label span{ color:#cc3b55; }
.field :is(input,select,textarea){
  width:100%;
  padding:1rem;
  border-radius:12px;
  border:1px solid rgba(12,28,70,.22);
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:
    border-color .16s var(--easing),
    box-shadow .16s var(--easing),
    background .16s var(--easing);
}
.field textarea{
  min-height:120px;
  resize:vertical;
}
.field select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field :is(input,select,textarea):focus-visible{
  box-shadow:0 0 0 3px rgba(38,86,240,.18);
  border-color: color-mix(in oklab, var(--primary) 46%, var(--line));
}

/* Validación */
.field :is(input,select,textarea):required:user-invalid{
  border-color: color-mix(in oklab, #cc3b55 55%, var(--line));
}
.field :is(input,select,textarea):required:user-valid{
  border-color: color-mix(in oklab, var(--primary) 40%, var(--line));
}

.actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:4px;
}
.form-note{
  margin:0;
  color: var(--ink-2);
}
.form-status{
  grid-column: 1 / -1;
  min-height:22px;
  font-weight:800;
  letter-spacing:.1px;
  margin-top:2px;
}
.form-status.ok{ color:#1a8f55; }
.form-status.err{ color:#cc3b55; }

/* ===== Footer ===== */
.ft{
  background:var(--panel);
  border-top:1px solid var(--line);
  padding:34px 0;
  color:var(--ink-2);
}
.ft-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.ft nav a{ margin-right:14px; }
.ft a{
  color:color-mix(in oklab, var(--ink) 72%, var(--ink-3));
  transition: color .16s var(--easing);
}
.ft a:hover{ color:var(--primary); }

/* ===== Utilidades ===== */
.muted{ color:var(--ink-2); }
.small{ font-size: var(--size-0); }

/* ===== Focus visible ===== */
:where(a,button,.btn,.nav-link,input,select,textarea):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(38,86,240,.24), 0 0 0 6px rgba(38,86,240,.10) !important;
  border-color: color-mix(in oklab, var(--primary) 52%, var(--line)) !important;
}

/* ===== Animaciones de aparición suaves ===== */
.reveal{
  opacity:0;
  transform:translate3d(0,12px,0) scale(.98);
  filter:blur(2px);
}
.reveal.in{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .6s var(--easing),
    transform .6s var(--easing),
    filter .6s var(--easing);
  transition-delay: calc(var(--i,0) * 90ms);
}

/* ===== Breakpoints ===== */
@media (max-width: 1100px){
  .field{ grid-column: span 3; }
}
@media (max-width: 900px){
  .page-head{ padding-top:calc(64px + 22px); }
  .hd{ height:64px; }
  .nav{
    top:64px;
    width:100vw;
    right:-100%;
    height:calc(100dvh - 64px);
    padding:14px;
    gap:8px;
    position:fixed;
    background:var(--panel);
    border-left:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    transition:right .32s var(--easing);
    box-shadow:-18px 0 44px rgba(12,28,70,.10);
  }
  .menu-open .nav{ right:0; }
  .has-mega::after{ display:none; }
  .mega{
    position:static;
    display:none;
    opacity:1;
    pointer-events:auto;
  }
  .has-mega[data-open="true"]>.mega{ display:block; }
  .mega-inner{
    border:1px solid var(--line);
    border-radius:12px;
    margin:6px 0;
    box-shadow:var(--shadow-xs);
  }
  .mega-wrap{
    grid-template-columns:1fr;
    padding:12px;
  }
  .burger{ display:grid; place-items:center; }
}
@media (max-width: 780px){
  .contact-form{ grid-template-columns: 1fr; }
  .field{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  :root{
    --wrap:max(min(100vw, 96vw), 320px);
    --radius:12px;
    --radius-sm:10px;
    --radius-lg:16px;
    --size-0: clamp(.9rem, .88rem + .2vw, 1rem);
    --size-1: clamp(1rem, .98rem + .4vw, 1.08rem);
    --size-2: clamp(1.05rem, 1rem + .8vw, 1.2rem);
    --size-3: clamp(1.6rem, 1.3rem + 2.4vw, 2rem);
    --size-4: clamp(2rem, 1.6rem + 4vw, 2.6rem);
  }
  .section{ padding: clamp(36px, 8vw, 60px) 0; }
  .ft{ padding:26px 0; }
  .grid-3,
  .grid-6{ grid-template-columns:1fr; }
}

/* ===== Estado abierto del burger (SVG animado) ===== */
html.menu-open .burger-icon g line:nth-child(1){
  transform-origin:16px 12px;
  transform:rotate(45deg) translateY(10px);
}
html.menu-open .burger-icon g line:nth-child(2){
  opacity:0;
}
html.menu-open .burger-icon g line:nth-child(3){
  transform-origin:16px 12px;
  transform:rotate(-45deg) translateY(-10px);
}

/* ===== Pequeños refinamientos ===== */
.brand-name{
  font-weight:800;
  letter-spacing:.2px;
}
.brand-name .ai{
  display:inline-block;
  position:relative;
  background-image: linear-gradient(90deg,#0d47a1 0%,#1fa2ff 50%,#00d4ff 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.brand-name .ai::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-.12em;
  height:.18em;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(31,162,255,0) 0%, rgba(31,162,255,.55) 40%, rgba(0,212,255,.55) 100%);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .35s var(--easing);
}
.brand:hover .ai::after{
  transform:scaleX(1);
}

/* Centrado un poco más fino del bloque de título + tabs */
.page-head .wrap{
  text-align:center;
}
.page-head h1{
  margin-bottom:.4rem;
}
.page-head .lead{
  margin-top:.2rem;
}

/* Badges tipo "tabs" con más movimiento */
.page-head .badges{
  justify-content:center;
}
.page-head .badges li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:.7rem 1.4rem;
  font-weight:700;
  cursor:default;
  transition:
    transform .18s var(--easing),
    box-shadow .18s var(--easing),
    background .18s var(--easing),
    color .18s var(--easing);
}
.page-head .badges li:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(38,86,240,.18);
  background:linear-gradient(135deg,#ffffff, #eef2ff);
}

/* Chips de redes con iconos Font Awesome */
.chip i{
  font-size:1.1em;
}
.chip-ig i{
  color:#e1306c;
}
.chip-fb i{
  color:#1877f2;
}
.chip-mail i{
  color:#2563eb;
}

/* Un pelín más de movimiento en las tarjetas de contacto */
.contact-card{
  transform:translateY(0);
  transition:
    transform .22s var(--easing),
    box-shadow .22s var(--easing),
    border-color .22s var(--easing);
}
.contact-card:hover{
  transform:translateY(-4px);
}

/* Título "Redes sociales" algo separado */
.redes-title{
  margin-top:34px;
  margin-bottom:10px;
}

/* Iconos font awesome dentro de las tarjetas */
.icon i{
  font-size: 36px;
}

/* Iconos dentro de chips de redes */
.chip i{
  font-size: 16px;
  margin-right: 6px;
}