/* ===================================================
   TECTELIN — Design system y estilos del nuevo frontend
   Cargar DESPUÉS de bootstrap / lindy-uikit en index.php
   =================================================== */

:root{
    --primary:#E1261C;
    --primary-dark:#A11810;
    --primary-light:#FF6B5B;
    --ink:#211714;
    --paper:#FFFFFF;
    --surface:#FAFAF9;
    --muted:#8A7C79;
    --border:#EDE2E0;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#F3ECEA; --paper:#1B1412; --surface:#241A17; --muted:#B7A6A2; --border:#3A2A26;
    }
  }
  :root[data-theme="dark"]{
    --ink:#F3ECEA; --paper:#1B1412; --surface:#241A17; --muted:#B7A6A2; --border:#3A2A26;
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Sora',system-ui,sans-serif;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; width:100%; z-index:100;
    padding:22px 0; padding-top:calc(22px + env(safe-area-inset-top,0px));
    transition:all .35s ease;
  }
  header .wrap{display:flex; align-items:center; justify-content:space-between;}
  header.scrolled{
    padding:12px 0; padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--border), 0 12px 30px -20px rgba(0,0,0,.25);
  }
  @media (prefers-color-scheme: dark){ header.scrolled{background:rgba(27,20,18,.72);} }
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px;}
  .brand img{width:52px; height:52px; border-radius:0;}
  nav ul{display:flex; gap:34px; list-style:none;}
  nav a{
    font-size:15px;
    font-weight:500;
    color:var(--ink) !important;
    opacity:.8;
    transition:color .2s ease, opacity .2s ease;
  }
  nav a:visited{ color:var(--ink) !important; }
  nav a:hover{
    opacity:1;
    color:var(--primary) !important;
  }
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding:12px 24px; border-radius:999px; font-weight:600; font-size:14.5px;
    border:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-primary{background:var(--primary); color:#fff; box-shadow:0 10px 24px -10px rgba(225,38,28,.6);}
  .btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px);}
  .btn-primary:active{transform:translateY(0px) scale(.98);}
  .btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--border);}
  .btn-ghost:hover{border-color:var(--primary); color:var(--primary);}
  .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-toggle span{width:22px; height:2px; background:var(--ink);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  }
  .hero-slides{position:absolute; inset:0; z-index:0;}
  .hero-slide{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.6s ease;
  }
  .hero-slide.is-active{opacity:1;}
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(20,12,10,.88) 30%, rgba(20,12,10,.55) 65%, rgba(225,38,28,.28) 100%);
  }
  .hero-content{position:relative; z-index:2; padding-top:100px; padding-bottom:60px;}
  .eyebrow-line{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--primary-light); font-weight:600; margin-bottom:22px;}
  .eyebrow-line span.dot{width:7px; height:7px; border-radius:50%; background:var(--primary-light); animation:pulse 1.8s infinite;}
  @keyframes pulse{0%,100%{opacity:1} 50%{opacity:.25}}
  .hero h1{font-size:52px; line-height:1.08; font-weight:800; letter-spacing:-.01em; max-width:680px; color:#fff;}
  .hero h1 em{font-style:normal; color:var(--primary-light);}
  .hero p.lead{margin-top:22px; font-size:17.5px; line-height:1.65; color:#E8DEDC; max-width:520px;}
  .hero .cta-row{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:36px; margin-top:56px;}
  .hero-stats div b{display:block; font-family:'Sora'; font-size:26px; font-weight:700; color:#fff;}
  .hero-stats div span{font-size:13px; color:#C9BCB9;}

  /* ---------- PLANS ---------- */
  .section{padding:96px 0;}
  .section-head{max-width:560px; margin-bottom:56px;}
  .section-head .tag{color:var(--primary); font-weight:600; font-size:14px; margin-bottom:12px; display:block;}
  .section-head h2{font-size:34px; font-weight:700; letter-spacing:-.01em;}
  .section-head p{margin-top:14px; color:var(--muted); font-size:16px; line-height:1.6;}
  .surface{background:var(--surface);}

  .plans{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .plan-card{
    position:relative; background:var(--paper); border:1px solid var(--border); border-radius:22px;
    padding:32px 26px; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .plan-card:hover{transform:translateY(-8px); box-shadow:0 24px 48px -24px rgba(0,0,0,.22); border-color:transparent;}
  .plan-card.popular{border-color:var(--primary); background:linear-gradient(165deg, var(--paper) 60%, rgba(225,38,28,.06));}
  .plan-badge{position:absolute; top:-12px; right:24px; background:var(--primary); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;}
  .plan-speed{font-family:'Sora'; font-weight:700; font-size:15px; color:var(--muted);}
  .plan-price{font-family:'Sora'; font-size:38px; font-weight:800; margin:10px 0 4px;}
  .plan-price sup{font-size:16px; font-weight:600; top:-14px;}
  .plan-mb{font-size:14px; color:var(--muted); margin-bottom:22px;}
  .plan-card ul{list-style:none; margin-bottom:26px;}
  .plan-card li{font-size:14px; padding:7px 0; display:flex; gap:8px; align-items:center; color:var(--ink); opacity:.85;}
  .plan-card li::before{content:"✓"; color:var(--primary); font-weight:700;}
  .plan-card .btn{width:100%;}

  /* ---------- STORY / STATS ---------- */
  .story{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .story-visual{
    border-radius:26px; padding:44px; background:linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:#fff; position:relative; overflow:hidden;
  }
  .story-visual::after{content:""; position:absolute; inset:-40% -40% auto auto; width:60%; height:60%;
    background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);}
  .story-visual .grid-stats{display:grid; grid-template-columns:1fr 1fr; gap:30px; position:relative; z-index:1;}
  .story-visual .grid-stats b{display:block; font-family:'Sora'; font-size:34px; font-weight:800;}
  .story-visual .grid-stats span{font-size:13.5px; opacity:.85;}
  .story h2{font-size:32px; font-weight:700; letter-spacing:-.01em; margin-bottom:18px;}
  .story p{color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:16px;}

  /* ---------- TESTIMONIOS ---------- */
  .testi-wrap{position:relative;}
  .testi-track{display:flex; gap:22px; transition:transform .45s ease;}
  .testi-card{
    flex:0 0 calc(33.333% - 15px); background:var(--paper); border:1px solid var(--border); border-radius:20px;
    padding:28px; font-size:14.5px;
  }
  .testi-card .stars{color:var(--primary); font-size:14px; margin-bottom:14px;}
  .testi-card p{color:var(--ink); opacity:.85; line-height:1.6; margin-bottom:18px;}
  .testi-person{display:flex; align-items:center; gap:10px;}
  .testi-avatar{width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
  .testi-person b{font-size:14px; display:block;}
  .testi-person span{font-size:12.5px; color:var(--muted);}
  .testi-nav{display:flex; gap:10px; justify-content:flex-end; margin-top:26px;}
  .testi-nav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--paper); cursor:pointer; font-size:16px; transition:.2s;}
  .testi-nav button:hover{border-color:var(--primary); color:var(--primary);}

  /* ---------- CTA FINAL ---------- */
  .cta-final{
    border-radius:32px; padding:76px 60px; text-align:center;
    background:linear-gradient(165deg, var(--ink) 0%, #000 120%);
    color:#fff;
  }
  .cta-final h2{font-size:36px; font-weight:700; max-width:600px; margin:0 auto 16px;}
  .cta-final p{color:#cfc2bf; margin-bottom:32px;}

  /* ---------- FOOTER ---------- */
  footer{padding:64px 0 40px; border-top:1px solid var(--border);}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
  .foot-brand{display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:14px;}
  .foot-brand img{width:46px; height:46px; border-radius:0;}
  footer p{color:var(--muted); font-size:14px; line-height:1.6;}
  footer h4{font-size:14px; margin-bottom:16px; color:var(--ink);}
  footer ul{list-style:none;}
  footer a{color:var(--muted);}
  footer li{margin-bottom:10px; font-size:14px; color:var(--muted);}
  footer li a:hover{color:var(--primary);}
  .foot-bottom{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:10px;}

  /* ---------- FLOATING WHATSAPP ---------- */
  .float-wa{
    position:fixed; bottom:calc(26px + env(safe-area-inset-bottom,0px)); right:26px; z-index:90;
    display:flex; align-items:center; gap:10px; background:#22C35E; color:#fff; border-radius:999px;
    padding:15px; box-shadow:0 14px 30px -10px rgba(0,0,0,.4); cursor:pointer;
    transition:padding .28s ease, transform .2s ease;
  }
  .float-wa:hover{padding:15px 22px 15px 15px; transform:translateY(-3px);}
  .float-wa .wa-label{max-width:0; overflow:hidden; white-space:nowrap; font-size:14px; font-weight:600; transition:max-width .28s ease;}
  .float-wa:hover .wa-label{max-width:160px; margin-left:2px;}

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero-content{padding-top:150px;}
    .plans{grid-template-columns:1fr 1fr;}
    .story{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    nav, .nav-cta .btn-ghost{display:none;}
    .menu-toggle{display:flex;}
    .testi-card{flex:0 0 100%;}
  }
  @media (max-width:560px){
    .hero h1{font-size:36px;}
    .plans{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .cta-final{padding:56px 26px;}
  }

  /* ---------- SCROLL PROGRESS ---------- */
  #scrollBar{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--primary); z-index:200; transition:width .1s linear;}

  /* ---------- REVEAL ON SCROLL ---------- */
  .reveal-target{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal-target.visible{opacity:1; transform:none;}

  /* ---------- BUTTON RIPPLE ---------- */
  .btn{position:relative; overflow:hidden;}
  .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:ripple-anim .55s ease-out; pointer-events:none;}
  .btn-ghost .ripple{background:rgba(225,38,28,.18);}
  @keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

  /* ---------- CONTACTO ---------- */
  .contact-grid{align-items:stretch;}
  .contact-form-card{background:var(--paper); border:1px solid var(--border); border-radius:24px; padding:40px;}
  .contact-form-card h2{font-size:28px; font-weight:700; margin-bottom:10px;}
  .contact-form-card > p{color:var(--muted); margin-bottom:26px; font-size:15px;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--muted);}
  .field input, .field textarea{
    width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border);
    background:var(--surface); color:var(--ink); font-family:'Inter'; font-size:14.5px;
    transition:border-color .2s ease, background .2s ease;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--primary); background:var(--paper);}
  .field textarea{resize:vertical; min-height:96px;}
  .form-msg{margin-top:16px; font-size:14px; padding:12px 14px; border-radius:10px; display:none;}
  .form-msg.ok{display:block; background:rgba(34,196,94,.12); color:#1c8a4a;}
  .form-msg.err{display:block; background:rgba(225,38,28,.1); color:var(--primary-dark);}
  .contact-info{display:flex; flex-direction:column; justify-content:space-between;}
  .contact-info .info-list{position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; margin:24px 0 30px;}
  .contact-info .info-list div{font-size:14.5px;}
  .contact-info .info-list b{display:block; font-size:12.5px; opacity:.75; font-weight:600; margin-bottom:3px;}

  /* ---------- ATT BADGE ---------- */
  .att-badge{display:flex; align-items:center; gap:10px; margin-top:6px;}
  .att-badge svg{width:34px; height:34px; flex-shrink:0;}

  /* ---------- MAPA DE COBERTURA (reemplaza el panel decorativo por el mapa real) ---------- */
  .map-embed{padding:0; background:none; min-height:380px;}
  .map-embed::after{display:none;}
  .map-embed iframe{border-radius:26px; display:block;}

  /* ---------- MENÚ MÓVIL (mismo header en todas las páginas) ---------- */
  .nav-overlay{position:fixed; inset:0; background:rgba(15,10,9,.45); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:98;}
  .nav-overlay.show{opacity:1; pointer-events:auto;}
  @media (max-width:900px){
    nav{
      display:flex !important; position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
      background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:flex-start;
      padding:118px 32px 40px; gap:0; transform:translateX(105%); transition:transform .35s ease;
      box-shadow:-24px 0 50px -20px rgba(0,0,0,.35); z-index:99; padding-top:calc(118px + env(safe-area-inset-top,0px));
    }
    nav.open{transform:translateX(0);}
    nav ul{flex-direction:column; gap:26px; width:100%;}
    nav ul a{font-size:17px;}
    .menu-toggle span{transition:transform .25s ease, opacity .25s ease;}
    .menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .menu-toggle.active span:nth-child(2){opacity:0;}
    .menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }

  /* ---------- PÁGINAS LEGALES (contrato, términos, cookies) ---------- */
  .legal-hero{position:relative; padding:172px 0 84px; overflow:hidden; color:#fff; background-size:cover; background-position:center;}
  .legal-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(165deg, rgba(27,20,18,.94) 8%, rgba(161,24,16,.68) 100%);}
  .legal-hero .wrap{position:relative; z-index:1; max-width:740px;}
  .legal-breadcrumb{display:flex; align-items:center; gap:8px; font-size:13.5px; opacity:.85; margin-bottom:20px;}
  .legal-breadcrumb a:hover{text-decoration:underline;}
  .legal-hero h1{font-size:38px; font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
  .legal-hero p{font-size:16px; line-height:1.65; opacity:.92; max-width:560px;}
  .legal-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
  .legal-badge{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600;}

  .doc-shell{padding:68px 0 110px;}
  .doc-layout{display:grid; grid-template-columns:1.9fr 1fr; gap:30px; align-items:start;}
  .doc-card{background:var(--paper); border:1px solid var(--border); border-radius:24px; padding:32px; box-shadow:0 30px 60px -42px rgba(0,0,0,.3);}
  .doc-card-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:22px;}
  .doc-card-head h3{font-size:19px; font-weight:700;}
  .doc-card-head span{font-size:13px; color:var(--muted);}
  .doc-frame{border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--surface);}
  .doc-frame embed, .doc-frame iframe{width:100%; display:block; border:none;}
  .doc-side{display:flex; flex-direction:column; gap:18px; position:sticky; top:110px;}
  .side-card{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px;}
  .side-card h4{font-size:15px; font-weight:700; margin-bottom:16px;}
  .side-list{list-style:none; display:flex; flex-direction:column; gap:14px;}
  .side-list li{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink);}
  .side-list li div b{display:block; font-size:14px; margin-bottom:2px;}
  .side-list li div span{color:var(--muted);}
  .icon-chip{width:36px; height:36px; flex-shrink:0; border-radius:11px; background:rgba(225,38,28,.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:17px;}

  .mini-features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:38px 0 6px;}
  .mini-feature{background:var(--paper); border:1px solid var(--border); border-radius:18px; padding:22px; transition:transform .25s ease, box-shadow .25s ease;}
  .mini-feature:hover{transform:translateY(-6px); box-shadow:0 22px 42px -28px rgba(0,0,0,.24);}
  .mini-feature .icon-chip{margin-bottom:14px;}
  .mini-feature h5{font-size:15px; font-weight:700; margin-bottom:6px;}
  .mini-feature p{font-size:13.5px; color:var(--muted); line-height:1.55;}

  .acc-list{display:flex; flex-direction:column; gap:14px;}
  .acc-item{background:var(--paper); border:1px solid var(--border); border-radius:18px; overflow:hidden;}
  .acc-item summary{list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:15.5px; gap:16px;}
  .acc-item summary::-webkit-details-marker{display:none;}
  .acc-item summary::after{content:"+"; font-size:21px; color:var(--primary); font-weight:400; transition:transform .25s ease; flex-shrink:0;}
  .acc-item[open] summary::after{transform:rotate(45deg);}
  .acc-item .acc-body{padding:0 24px 22px; color:var(--muted); font-size:14.5px; line-height:1.7;}
  .acc-item .acc-body ul{margin:10px 0 0 18px;}
  .acc-item .acc-body li{margin-bottom:6px;}

  .cookie-visual{border-radius:24px; overflow:hidden; height:220px; position:relative; margin-bottom:18px;}
  .cookie-visual img{width:100%; height:100%; object-fit:cover; display:block;}

  @media (max-width:900px){
    .doc-layout{grid-template-columns:1fr;}
    .doc-side{position:static;}
    .mini-features{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .legal-hero h1{font-size:30px;}
    .legal-hero{padding:140px 0 64px;}
    .doc-card{padding:22px;}
  }

  /* ---------- BANNER DE COOKIES (coherente con la marca) ---------- */
  #cookie-banner{
    position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:9999;
    background:var(--ink); color:#fff; padding:18px 22px; border-radius:18px; max-width:760px; margin:0 auto;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
    font-size:14px; line-height:1.5; animation:cookieUp .5s ease;
  }
  @keyframes cookieUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
  #cookie-banner p, #cookie-banner span{margin:0; flex:1 1 260px;}
  #cookie-banner a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
  #cookie-banner .cookie-actions{display:flex; gap:10px; flex-shrink:0;}
  #cookie-banner button{background:var(--primary); border:none; color:#fff; padding:10px 18px; border-radius:999px; font-weight:600; font-size:13.5px; cursor:pointer; transition:background .2s ease, transform .2s ease;}
  #cookie-banner button:hover{background:var(--primary-dark); transform:translateY(-1px);}
  #cookie-banner button.ghost{background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#fff;}
  #cookie-banner button.ghost:hover{border-color:#fff;}