/* ==========================================================================
   estilo-landing.css
   CSS exclusivo de la landing page (index.zul).
   No se comparte con estilo-amigovet.css a propósito (convención del
   proyecto: CSS que afecta una sola pantalla va en su propio archivo).
   Desde 2026-09-28 la landing es index.html (HTML estático, sin ZK).
   Cache-busting: recuerda subir el ?v= en el <link> de index.html cuando
   edites este archivo.
   ========================================================================== */


  :root{
    --navy:#0E3151; --navy-deep:#081F35; --navy-soft:#123f66;
    --teal:#319ABA; --teal-dark:#287F99; --teal-light:#4DB4D2; --teal-soft:#E8F7FB;
    --green:#16A34A; --green-bg:#DCFCE7;
    --amber:#D97706; --amber-bg:#FEF3C7;
    --purple:#9333EA; --purple-bg:#F3E8FF;
    --orange:#EA580C; --orange-bg:#FFEDD5;
    --paper:#F7FAFC; --border:#D9E8EC;
    --ink:#0E3151; --muted:#64748B;
    --on-dark-muted:#9FC6D6;
    --whatsapp:#25D366; --whatsapp-dark:#1EBE59;
    --display:'Newsreader', serif;
    --body:'IBM Plex Sans', sans-serif;
    --mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--body); color:#fff; background:var(--navy-deep); line-height:1.5; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
  svg{display:block;}

  header.nav{position:sticky; top:0; z-index:60; background:rgba(8,31,53,0.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1140px; margin:0 auto;}
  .nav-logo{display:flex; align-items:center;}
  .nav-logo img{height:32px; width:auto;}
  .nav-links{display:flex; gap:34px;}
  .nav-links a{font-size:13.5px; font-weight:600; color:var(--on-dark-muted); letter-spacing:0.2px;}
  .nav-links a:hover{color:#fff;}
  .nav-cta{display:flex; align-items:center; gap:20px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14px; border-radius:8px; cursor:pointer; border:none; transition:.15s ease; font-family:var(--body);}
  .btn-primary{background:var(--teal); color:#fff; padding:12px 22px; box-shadow:0 10px 24px rgba(49,154,186,0.28);}
  .btn-primary:hover{background:var(--teal-light); transform:translateY(-1px);}
  .btn-ghost{color:var(--on-dark-muted); font-weight:600; padding:10px 4px;}
  .btn-ghost:hover{color:#fff;}
  .btn-lg{padding:16px 30px; font-size:15px;}
  .btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.3); padding:16px 30px; font-size:15px; border-radius:8px; font-weight:700;}
  .btn-outline-light:hover{border-color:#fff;}

  .tab-label{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600;
    color:var(--teal-light); letter-spacing:0.5px; text-transform:uppercase;
    padding-bottom:8px; border-bottom:2px solid var(--teal-light); margin-bottom:22px;
  }

  /* HERO */
  .hero{padding:96px 0 90px 0; position:relative; overflow:hidden;}
  .hero::before{
    content:''; position:absolute; top:-220px; left:-160px; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(147,51,234,0.20), transparent 70%); pointer-events:none;
  }
  .hero::after{
    content:''; position:absolute; bottom:-260px; right:-180px; width:620px; height:620px; border-radius:50%;
    background:radial-gradient(circle, rgba(49,154,186,0.28), transparent 70%); pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:54px; align-items:center; position:relative; z-index:1;}
  h1.hero-title{
    font-family:var(--display); font-style:italic; font-weight:500;
    font-size:clamp(38px,5.2vw,60px); line-height:1.05; color:#fff; letter-spacing:-0.01em; margin-bottom:26px;
  }
  h1.hero-title .roman{font-style:normal; color:var(--teal-light);}
  .hero-sub{font-size:16.5px; color:var(--on-dark-muted); max-width:460px; margin-bottom:34px; line-height:1.65;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px;}
  .hero-meta{display:flex; gap:32px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.12); padding-top:24px;}
  .hero-meta .m-num{font-family:var(--mono); font-size:19px; font-weight:600; color:#fff;}
  .hero-meta .m-label{font-size:11px; color:var(--on-dark-muted); margin-top:2px; text-transform:uppercase; letter-spacing:0.4px;}

  /* product mock */
  .mock-wrap{position:relative;}
  .mock-card{
    background:#fff; border-radius:16px; border:1px solid var(--border);
    box-shadow:0 40px 90px rgba(0,0,0,0.45); overflow:hidden; transform:rotate(-1.1deg); position:relative; z-index:1;
  }
  .mock-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--border);}
  .mock-dot{width:9px; height:9px; border-radius:50%; background:var(--border);}
  .mock-url{margin-left:10px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:#fff; border:1px solid var(--border); border-radius:6px; padding:3px 10px;}
  .mock-body{padding:20px;}
  .mock-title{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:13px;}
  .mock-row{display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:10px; margin-bottom:7px; background:var(--paper);}
  .mock-row .av{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
  .mock-row .av svg{width:16px; height:16px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .mock-row .info{flex:1; min-width:0;}
  .mock-row .info .name{font-size:12.5px; font-weight:700; color:var(--ink);}
  .mock-row .info .sub{font-size:11px; color:var(--muted);}
  .mock-row .tag{font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px; flex:none;}
  .tag-green{background:var(--green-bg); color:var(--green);}
  .tag-teal{background:var(--teal-soft); color:var(--teal-dark);}
  .tag-amber{background:var(--amber-bg); color:var(--amber);}
  .mock-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-top:15px;}
  .mock-stat{border-radius:11px; padding:11px 12px;}
  .mock-stat.s1{background:var(--navy);}
  .mock-stat.s2{background:var(--purple);}
  .mock-stat.s3{background:var(--teal-dark);}
  .mock-stat .v{font-family:var(--display); font-size:19px; font-weight:600; color:#fff;}
  .mock-stat .l{font-size:9.5px; color:rgba(255,255,255,0.75); margin-top:2px;}

  .float-chip{
    position:absolute; z-index:3; background:#fff; border-radius:12px;
    padding:10px 14px; box-shadow:0 16px 34px rgba(0,0,0,0.3); display:flex; align-items:center; gap:9px;
  }
  .float-chip svg{width:16px; height:16px;}
  .float-chip .t{font-size:11.5px; font-weight:700; color:var(--ink);}
  .chip-1{top:-16px; left:-22px; transform:rotate(-4deg); border-left:4px solid var(--purple);}
  .chip-2{bottom:-14px; right:-16px; transform:rotate(3deg); border-left:4px solid var(--green);}

  /* FEATURES */
  .features{padding:112px 0; background:var(--navy);}
  .feat-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:52px; flex-wrap:wrap;}
  .feat-head h2{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(28px,3.8vw,42px); color:#fff; max-width:520px; line-height:1.12;}
  .feat-head p{color:var(--on-dark-muted); font-size:14.5px; max-width:280px;}

  .bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:148px; gap:16px;}
  .bento-card{
    background:var(--paper); border-radius:14px; padding:22px; color:var(--ink);
    display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 10px 26px rgba(0,0,0,0.18);
  }
  .bento-card:hover{transform:translateY(-4px);}
  .bento-card.big{grid-column:span 2; grid-row:span 2;}
  .bento-card.med{grid-column:span 2;}
  .bento-card.small{grid-column:span 1;}
  .bento-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
  .bento-icon svg{width:19px; height:19px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .ic-teal{background:var(--teal-soft);} .ic-teal svg{stroke:var(--teal-dark);}
  .ic-green{background:var(--green-bg);} .ic-green svg{stroke:var(--green);}
  .ic-amber{background:var(--amber-bg);} .ic-amber svg{stroke:var(--amber);}
  .ic-purple{background:var(--purple-bg);} .ic-purple svg{stroke:var(--purple);}
  .ic-orange{background:var(--orange-bg);} .ic-orange svg{stroke:var(--orange);}
  .bento-card h3{font-size:14.5px; font-weight:700; color:var(--ink); margin-top:12px;}
  .bento-card.big h3{font-size:18.5px;}
  .bento-card p{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5;}
  .soap-row{display:flex; gap:7px; flex-wrap:wrap;}
  .soap-pill{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 9px; font-size:10.5px; font-weight:600; color:var(--muted);}
  .soap-pill span{width:17px; height:17px; border-radius:5px; background:var(--teal); color:#fff; font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;}

  /* PRICING */
  .pricing{padding:120px 0; background:var(--navy-deep); position:relative; overflow:hidden;}
  .pricing::before{content:''; position:absolute; top:-140px; left:50%; margin-left:-320px; width:640px; height:400px; background:radial-gradient(ellipse, rgba(49,154,186,0.22), transparent 70%); pointer-events:none;}
  .pricing-inner{display:flex; justify-content:center; position:relative; z-index:1;}
  .ticket{
    width:100%; max-width:430px; background:var(--paper); color:var(--ink); border-radius:8px;
    box-shadow:0 40px 90px rgba(0,0,0,0.5); position:relative; font-family:var(--mono);
  }
  .ticket::before, .ticket::after{content:''; position:absolute; width:24px; height:24px; background:var(--navy-deep); border-radius:50%; top:50%; margin-top:-12px;}
  .ticket::before{left:-12px;} .ticket::after{right:-12px;}
  .ticket-ribbon{
    position:absolute; top:16px; right:-8px; background:var(--orange); color:#fff; font-family:var(--body);
    font-size:11px; font-weight:700; padding:6px 14px 6px 12px; border-radius:4px 0 0 4px; box-shadow:0 6px 14px rgba(0,0,0,0.25);
  }
  .ticket-top{padding:28px 28px 20px 28px; text-align:center; border-bottom:1.5px dashed var(--border);}
  .ticket-eyebrow{font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal-dark); font-weight:600; margin-bottom:14px;}
  .ticket-amt{font-family:var(--display); font-style:italic; font-size:62px; font-weight:600; color:var(--navy); line-height:1;}
  .ticket-per{font-size:12px; color:var(--muted); margin-top:4px;}
  .ticket-body{padding:20px 28px;}
  .ticket-row{display:flex; justify-content:space-between; font-size:12px; padding:7px 0; color:var(--navy);}
  .ticket-row .k{color:var(--muted);}
  .ticket-divider{border-top:1px dashed var(--border); margin:6px 0;}
  .ticket-trial{
    display:flex; align-items:center; justify-content:center; gap:8px; background:var(--teal-soft);
    color:var(--teal-dark); font-weight:600; font-size:12px; padding:10px; border-radius:6px; margin:14px 0;
  }
  .ticket-trial svg{width:14px; height:14px; stroke:var(--teal-dark);}
  .ticket-cta{padding:0 28px 28px 28px;}
  .ticket-cta .btn{width:100%; font-family:var(--body); border-radius:8px;}


  /* PREGUNTAS FRECUENTES (agregado para SEO: el mismo contenido va en el JSON-LD FAQPage de index.html) */
  .faq{padding:96px 0; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08);}
  .faq h2{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(26px,3.6vw,40px); color:#fff; text-align:center; margin-bottom:36px;}
  .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq details{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:0 22px; transition:background .15s ease;}
  .faq details[open]{background:rgba(255,255,255,0.07);}
  .faq summary{cursor:pointer; list-style:none; padding:18px 28px 18px 0; font-weight:600; font-size:15px; color:#fff; position:relative;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:20px; color:var(--teal-light);}
  .faq details[open] summary::after{content:'−';}
  .faq details p{color:var(--on-dark-muted); font-size:14.5px; line-height:1.6; padding-bottom:18px;}

  .cta-band{padding:88px 0; text-align:center; background:var(--navy); position:relative; overflow:hidden;}
  .cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(77,180,210,0.16), transparent 70%); pointer-events:none;}
  .cta-band .inner{position:relative; z-index:1;}
  .cta-band .tab-label{justify-content:center; display:inline-flex; margin:0 auto 22px auto;}
  .cta-band h2{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(26px,3.6vw,40px); color:#fff; margin-bottom:16px;}
  .cta-band p{color:var(--on-dark-muted); font-size:15px; margin-bottom:30px; max-width:440px; margin-left:auto; margin-right:auto;}

  /* SOCIAL */
  .social-section{padding:64px 0; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08); text-align:center;}
  .social-section .st{font-size:12.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:20px;}
  .social-row{display:flex; align-items:center; justify-content:center; gap:14px;}
  .social-icon{
    width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center; transition:.15s ease;
  }
  .social-icon svg{width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .social-icon:hover{background:var(--teal); border-color:var(--teal); transform:translateY(-2px);}

  footer{padding:40px 0; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08);}
  .footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
  .footer-inner img{height:26px; width:auto;}
  .footer-copy a{text-decoration:underline; text-underline-offset:2px;}
  .footer-links{display:flex; gap:26px; font-size:12.5px; color:var(--on-dark-muted); font-weight:600;}
  .footer-copy{font-size:11px; color:var(--on-dark-muted); font-family:var(--mono);}

  /* WHATSAPP FAB */
  .wa-fab{
    position:fixed; right:24px; bottom:24px; z-index:80;
    width:60px; height:60px; border-radius:50%; background:var(--whatsapp);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 28px rgba(37,211,102,0.45); transition:transform .18s ease, box-shadow .18s ease;
  }
  .wa-fab:hover{transform:scale(1.07); background:var(--whatsapp-dark); box-shadow:0 16px 34px rgba(37,211,102,0.55);}
  .wa-fab svg{width:30px; height:30px;}
  .wa-ping{
    position:absolute; inset:0; border-radius:50%; background:var(--whatsapp); opacity:0.55;
    animation:wa-pulse 2.2s ease-out infinite;
  }
  @keyframes wa-pulse{0%{transform:scale(1); opacity:0.55;} 100%{transform:scale(1.7); opacity:0;}}

  @media (max-width:900px){
    .nav-links{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .mock-wrap{margin-top:34px;}
    .bento{grid-template-columns:1fr 1fr; grid-auto-rows:auto;}
    .bento-card.big{grid-column:span 2;}
    .feat-head{flex-direction:column; align-items:flex-start;}
    .footer-inner{flex-direction:column; text-align:center;}
    .wa-fab{width:54px; height:54px; right:16px; bottom:16px;}
    .faq{padding:72px 0;}
  }