/* ============================================================
   TALKIEFY — CSS GLOBAL
   Pega TODO este archivo en:
   WordPress Admin → Apariencia → Personalizar → CSS adicional
   (Elementor Free no trae un panel propio de CSS global,
   así que este es el lugar correcto y confiable para pegarlo).
   ============================================================ */

:root{--ink:#192837;--blue:#2431DD;--orange:#FF5B16;--paper:#F2F2EE;--soft:#F7F8FC;--muted:#667184;--navy:#141A52;--line:rgba(25,40,55,.13);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,h4{line-height:1.07;letter-spacing:-.04em}
button,a{font:inherit}
a{text-decoration:none;color:inherit;cursor:pointer}
.wrap{width:min(1200px,100%);margin:auto;padding:0 24px}
.section{padding:100px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:.73rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}
.eyebrow.orange{color:var(--orange)}
.logo-lockup{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.055em;font-size:1.17rem}
.logo-lockup .logo-word{color:var(--blue)}
.logo-lockup .logo-word b{color:var(--orange)}
.logo-symbol{width:32px;height:32px;display:block}
.logo-lockup.white .logo-word{color:#fff}
.logo-lockup.white .logo-word b{color:var(--orange)}
.logo-lockup.white .logo-symbol{filter:brightness(0) invert(1)}
header{position:fixed;top:16px;left:0;right:0;z-index:30}
.glass-nav{width:min(880px,calc(100% - 32px));height:58px;margin:auto;padding:6px 7px 6px 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.78);border-radius:999px;background:rgba(255,255,255,.58);box-shadow:0 10px 30px rgba(25,40,55,.09),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(145%);transition:.35s var(--ease)}
.glass-nav.scrolled{background:rgba(255,255,255,.9);box-shadow:0 12px 36px rgba(25,40,55,.15)}
.menu-links{display:flex;gap:2px;align-items:center}
.menu-links a{padding:8px 12px;border-radius:999px;color:rgba(25,40,55,.72);font-size:.82rem;font-weight:600}
.menu-links a:hover,.menu-links a.active{background:rgba(255,255,255,.88);color:var(--ink)}
.login{padding:9px 18px;border:1px solid rgba(25,40,55,.13);border-radius:999px;background:rgba(255,255,255,.74);font-size:.83rem;font-weight:700;cursor:pointer}
.hamb{display:none;border:0;background:transparent;color:var(--ink);font-size:1.35rem}
.hero{min-height:100svh;position:relative;overflow:hidden;background:var(--paper);isolation:isolate;padding-top:72px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.38;filter:saturate(.7)}
.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(242,242,238,.98),rgba(242,242,238,.88) 40%,rgba(242,242,238,.34))}
.hero-inner{min-height:calc(100svh - 72px);display:flex;align-items:center}
.hero-copy{width:560px}
.hero h1{font-size:clamp(2.45rem,5.4vw,4.65rem);max-width:10.2ch;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-copy p{max-width:510px;color:rgba(25,40,55,.75);font-size:clamp(.96rem,1.45vw,1.1rem)}
.hero-cta{margin-top:28px;padding:16px 23px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
.hero-cta svg{width:19px;vertical-align:middle;margin-left:18px}
.visual{position:absolute;inset:72px 0 0 max(54%,calc(50% + 50px));display:flex;align-items:center;justify-content:center;pointer-events:none}
.video-frame{width:min(710px,50vw);aspect-ratio:1.2;overflow:hidden;border-radius:40%;border:10px solid rgba(255,255,255,.63);box-shadow:0 28px 80px rgba(25,40,55,.25);transform:rotate(2deg)}
.video-frame video{width:100%;height:100%;object-fit:cover}
.float{position:absolute;padding:11px 14px;border:1px solid rgba(255,255,255,.78);border-radius:14px;background:rgba(255,255,255,.83);box-shadow:0 12px 30px rgba(25,40,55,.14);font-size:.74rem;font-weight:700}
.f1{top:21%;left:13%}
.f2{right:4%;bottom:25%}
.f3{left:2%;bottom:15%;color:#12794c}
.f4{right:2%;top:17%;color:var(--orange)}
.head{text-align:center;max-width:660px;margin:0 auto 45px}
.head h2{font-size:clamp(2rem,3.8vw,3rem);margin:14px 0}
.head p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:19px;padding:29px;background:#fff}
.card h3{font-size:1.17rem;margin:14px 0 8px}
.card p{color:var(--muted);font-size:.92rem}
.icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#EEF2FF;color:var(--blue)}
.pricing{background:var(--paper);padding:110px 0}
.plans{display:flex;gap:20px;max-width:1000px;margin:auto}
.plan{flex:1;padding:30px 27px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.58);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(25,40,55,.1)}
.plan.popular{transform:translateY(-12px);border-color:rgba(36,49,221,.45)}
.badge{display:inline-block;margin-top:-48px;margin-bottom:18px;padding:6px 12px;border-radius:999px;background:var(--orange);color:#fff;font-size:.7rem;font-weight:800}
.price{font-size:2.75rem;font-weight:800;margin:20px 0}
.features{list-style:none;display:grid;gap:10px;min-height:145px}
.features li:before{content:'✓';color:var(--blue);font-weight:900;margin-right:8px}
.plan-btn{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.65);font-weight:700}
.popular .plan-btn{background:var(--blue);color:#fff}
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.industry{padding:20px;border:1px solid var(--line);border-radius:15px}
.industry p{color:var(--muted);font-size:.84rem;margin-top:6px}
.about-hero{padding:132px 0 82px;background:radial-gradient(650px 360px at 10% 0,#EEF2FF,transparent 70%)}
.about-hero h1,.contact-hero h1{font-size:clamp(2.45rem,5vw,4.5rem);max-width:17ch;margin:18px 0 22px}
.about-hero p,.contact-hero p{max-width:67ch;color:var(--muted);font-size:1.16rem}
.vmp,.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vmp article,.value{padding:29px;border:1px solid var(--line);border-radius:20px;background:#fff}
.vmp article:nth-child(2){background:var(--blue);color:#fff}
.vmp p,.value p{color:var(--muted);margin-top:10px}
.vmp article:nth-child(2) p{color:rgba(255,255,255,.84)}
.story{background:var(--soft)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.story h2{font-size:clamp(2rem,3.8vw,3rem);margin:16px 0}
.story p{color:var(--muted);margin-top:14px}
.story img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.cta{margin-top:70px;padding:70px 24px;border-radius:22px;background:var(--blue);color:#fff;text-align:center}
.cta h2{font-size:clamp(2rem,3.5vw,3rem);max-width:20ch;margin:14px auto}
.cta p{color:rgba(255,255,255,.8);margin-bottom:24px}
.orange-btn{border:0;border-radius:999px;background:var(--orange);color:#fff;padding:14px 23px;font-weight:700}
.contact-hero{padding:132px 0 76px;background:radial-gradient(760px 400px at 12% 0,#EEF2FF,transparent 70%)}
.contact-layout{display:grid;grid-template-columns:1.05fr .75fr;gap:58px}
.form{display:grid;gap:16px;padding:32px;border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 55px rgba(25,40,55,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:.84rem;font-weight:700}
.field input,.field textarea,.field select{font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,49,221,.12)}
.check{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.8rem}
.check input{margin-top:5px;accent-color:var(--blue)}
.info{display:grid;gap:21px;align-content:start}
.info h2{font-size:1.7rem}
.info p{color:var(--muted);font-size:.91rem}
.success{display:none;padding:13px;border-radius:11px;background:#E8F7EF;color:#0B8152;font-weight:700}
footer.talkiefy-footer{background:var(--navy);color:#fff;padding:65px 0 24px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:35px;padding-bottom:35px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot p{color:rgba(255,255,255,.65);margin:15px 0 20px;font-size:.9rem}
.foot h5{font-size:.75rem;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.foot a{display:block;color:rgba(255,255,255,.75);padding:4px 0;font-size:.88rem}
.bottom{display:flex;justify-content:space-between;padding-top:20px;color:rgba(255,255,255,.45);font-size:.8rem}

/* --- Contact Form 7 (ajusta el look al de tu .form original) --- */
.wpcf7 label{font-size:.84rem;font-weight:700;display:block;margin-bottom:6px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{
  font:inherit;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--soft)
}
.wpcf7 textarea{min-height:128px;resize:vertical}
.wpcf7-form-control-wrap{display:block;margin-bottom:14px}
.wpcf7 input[type=submit]{border:0;border-radius:999px;background:var(--blue);color:#fff;padding:14px 23px;font-weight:700;cursor:pointer}
.wpcf7-form.sent input[type=submit]{opacity:.6}

/* ============================================================
   LIQUID GLASS — tarjetas y botones
   Efecto pronunciado (tipo Apple visionOS), estático por defecto,
   más marcado en :hover. Clase estructural ".liquid-glass" +
   selectores existentes para dar el tinte de color correcto.
   ============================================================ */
.liquid-glass{
  position:relative;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  transition:backdrop-filter .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)
}
.liquid-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 210deg at 25% 18%,rgba(255,255,255,.65),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 62%,rgba(255,255,255,.35) 82%,rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay;opacity:.7;pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease)
}
.liquid-glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.15),inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(15,20,30,.06);
  pointer-events:none
}
.liquid-glass:hover{backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);transform:translateY(-6px)}
.liquid-glass:hover::before{opacity:1;transform:scale(1.08) rotate(8deg)}
.liquid-glass:hover::after{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.25),inset 1px 0 0 rgba(255,255,255,.55),inset -1px 0 0 rgba(15,20,30,.08)}
.btn.liquid-glass:hover,.hero-cta.liquid-glass:hover,.plan-btn.liquid-glass:hover,.login.liquid-glass:hover,.orange-btn.liquid-glass:hover{transform:translateY(-4px)}

/* tinte blanco/frost — tarjetas de contenido */
.card.liquid-glass,.industry.liquid-glass,.plan.liquid-glass,.vmp article.liquid-glass,.value.liquid-glass,.form.liquid-glass,.plan-btn.liquid-glass,.login.liquid-glass{
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.26) 55%,rgba(255,255,255,.42));
  box-shadow:0 10px 34px rgba(25,40,55,.14)
}
.card.liquid-glass:hover,.industry.liquid-glass:hover,.plan.liquid-glass:hover,.vmp.liquid-glass:hover,.vmp article.liquid-glass:hover,.value.liquid-glass:hover{
  box-shadow:0 22px 55px rgba(25,40,55,.2)
}

/* tinte azul saturado — elementos destacados con texto blanco */
.vmp article:nth-child(2).liquid-glass,.hero-cta.liquid-glass,.bluebtn.liquid-glass,.popular .plan-btn.liquid-glass{
  background:linear-gradient(160deg,rgba(36,49,221,.72),rgba(36,49,221,.34) 55%,rgba(90,110,255,.5));
  color:#fff;box-shadow:0 12px 34px rgba(36,49,221,.4)
}
.vmp article:nth-child(2).liquid-glass p{color:rgba(255,255,255,.86)}
.vmp article:nth-child(2).liquid-glass:hover,.hero-cta.liquid-glass:hover,.bluebtn.liquid-glass:hover,.popular .plan-btn.liquid-glass:hover{
  box-shadow:0 24px 60px rgba(36,49,221,.5)
}

/* tinte azul suave — plan destacado (mantiene texto oscuro) */
.plan.popular.liquid-glass{
  background:linear-gradient(160deg,rgba(36,49,221,.18),rgba(255,255,255,.4) 55%,rgba(36,49,221,.08));
  box-shadow:0 16px 42px rgba(36,49,221,.22)
}
.plan.popular.liquid-glass:hover{box-shadow:0 26px 62px rgba(36,49,221,.3)}

/* tinte naranja saturado — CTAs principales */
.btn.primary.liquid-glass,.orange-btn.liquid-glass{
  background:linear-gradient(160deg,rgba(255,91,22,.72),rgba(255,91,22,.34) 55%,rgba(255,150,90,.5));
  color:#fff;text-shadow:0 1px 3px rgba(120,30,0,.25);
  box-shadow:0 12px 30px rgba(255,91,22,.4)
}
.btn.primary.liquid-glass:hover,.orange-btn.liquid-glass:hover{box-shadow:0 22px 55px rgba(255,91,22,.5)}

/* botón de envío de Contact Form 7 (mismo tinte azul, sin depender de clases del shortcode) */
.wpcf7 input[type=submit]{
  position:relative;
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(160deg,rgba(36,49,221,.72),rgba(36,49,221,.34) 55%,rgba(90,110,255,.5));
  box-shadow:0 12px 32px rgba(36,49,221,.4);
  transition:backdrop-filter .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)
}
.wpcf7 input[type=submit]:hover{backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);box-shadow:0 22px 55px rgba(36,49,221,.5);transform:translateY(-4px)}

/* respaldo para navegadores sin soporte de backdrop-filter (evita transparencia rota) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card.liquid-glass,.industry.liquid-glass,.plan.liquid-glass,.vmp article.liquid-glass,.value.liquid-glass,.form.liquid-glass,.plan-btn.liquid-glass,.login.liquid-glass{background:#fff}
  .vmp article:nth-child(2).liquid-glass,.hero-cta.liquid-glass,.bluebtn.liquid-glass,.popular .plan-btn.liquid-glass{background:var(--blue)}
  .plan.popular.liquid-glass{background:#eef0ff}
  .btn.primary.liquid-glass,.orange-btn.liquid-glass{background:var(--orange)}
  .wpcf7 input[type=submit]{background:var(--blue)}
}

@media(max-width:900px){
  .menu-links{display:none}
  .hamb{display:block}
  .login{display:none}
  .glass-nav{width:calc(100% - 28px)}
  .hero-inner{display:block;padding-top:50px}
  .hero-copy{width:100%;max-width:650px}
  .visual{position:relative;inset:auto;min-height:260px;margin-top:40px}
  .video-frame{width:min(650px,88vw)}
  .float{display:none}
  .plans{flex-direction:column;max-width:520px}
  .plan.popular{transform:none}
  .vmp,.values{grid-template-columns:1fr 1fr}
  .story-grid,.contact-layout{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .section{padding:78px 0}
  .glass-nav{height:54px;padding-left:14px}
  .logo-lockup{font-size:1rem}
  .logo-symbol{width:26px;height:26px}
  .hero{padding-top:65px}
  .hero-inner{padding:35px 20px 55px}
  .hero h1{font-size:2.45rem}
  .hero-copy p{font-size:.94rem}
  .visual{min-height:210px;margin-top:28px}
  .video-frame{width:92vw;border-width:7px}
  .vmp,.values{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .bottom{display:block}
  .bottom span{display:block;margin-top:7px}
}