:root{
    --azul: #0F1B3C;
    --azul-2: #172a56;
    --coral: #FF6B35;
    --coral-2: #e85a28;
    --crema: #F7F7F5;
    --texto: #1A1A1A;
    --gris: #6b6f7a;
    --borde: #e3e2de;
    --verde: #56d6a3;
    --sombra: 0 18px 50px rgba(15,27,60,.10);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }

  html{ scroll-behavior: smooth; }

  body{
    font-family: 'Inter', sans-serif;
    color: var(--texto);
    background: var(--crema);
    line-height: 1.55;
    overflow-x:hidden;
  }

  h1, h2, h3, .logo{
    font-family: 'Space Grotesk', sans-serif;
  }

  a{ color: inherit; text-decoration: none; }

  img{ max-width: 100%; display:block; }

  .contenedor{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* HEADER */
  header{
    position: sticky;
    top: 0;
    background: var(--crema);
    z-index: 50;
    border-bottom: 1px solid var(--borde);
  }

  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: 1080px;
    margin:0 auto;
  }

  .logo{
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--azul);
  }

  .logo span{ color: var(--coral); }

  nav ul{
    list-style:none;
    display:flex;
    gap: 32px;
  }

  nav a{
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--azul);
  }

  nav a:hover{ color: var(--coral); }

  .btn-menu{
    display:none;
    background:none;
    border:none;
    font-size: 1.6rem;
    color: var(--azul);
    cursor:pointer;
  }

  @media (max-width: 760px){
    nav{
      display:none;
      width:100%;
      order:3;
    }
    nav.abierto{ display:block; }
    nav ul{
      flex-direction:column;
      gap: 0;
      padding: 12px 0 20px;
    }
    nav ul li{
      border-top: 1px solid var(--borde);
    }
    nav ul li a{
      display:block;
      padding: 14px 4px;
    }
    .nav-wrap{ flex-wrap: wrap; }
    .btn-menu{ display:block; }
  }

  /* HERO */
  .hero{
    background: radial-gradient(circle at 82% 18%, rgba(255,107,53,.18), transparent 27%), linear-gradient(135deg,#0b1531,var(--azul) 58%,#172a56);
    color: #fff;
    padding: 88px 24px 96px;
  }

  .hero-grid{
    max-width: 1080px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items:center;
  }

  .hero h1{
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    line-height: 1.12;
    font-weight: 700;
    max-width: 12ch;
  }

  .hero p.bajada{
    margin-top: 22px;
    font-size: 1.08rem;
    color: #c7cce0;
    max-width: 42ch;
  }

  .hero-ctas{
    margin-top: 34px;
    display:flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .btn{
    display:inline-block;
    padding: 14px 26px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.96rem;
    cursor:pointer;
    border: 1px solid transparent;
  }

  .btn-coral{
    background: var(--coral);
    color: #fff;
  }
  .btn-coral:hover{ background: var(--coral-2); }

  .btn-outline{
    background: transparent;
    border-color: rgba(255,255,255,0.35);
    color: #fff;
  }
  .btn-outline:hover{ border-color: #fff; }

  .hero-panel{
    background: var(--azul-2);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 28px;
  }

  .hero-panel .num{
    font-family:'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--coral);
  }

  .hero-panel .fila{
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .hero-panel .fila:last-child{ border-bottom:none; }
  .hero-panel .fila span:first-child{
    color: #c7cce0;
    font-size: 0.92rem;
  }

  @media (max-width: 760px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero h1{ max-width: none; }
  }

  /* SECCIONES GENERALES */
  section{ padding: 84px 24px; }

  .titulo-seccion{
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--azul);
    max-width: 24ch;
  }

  .intro-seccion{
    color: var(--gris);
    max-width: 52ch;
    margin-top: 12px;
    font-size: 1.02rem;
  }

  /* SERVICIOS */
  .servicios-lista{
    margin-top: 48px;
    border-top: 1px solid var(--borde);
  }

  .servicio-fila{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--borde);
  }

  .servicio-fila h3{
    font-size: 1.08rem;
    color: var(--azul);
  }

  .servicio-fila p{
    color: var(--gris);
    max-width: 56ch;
  }

  @media (max-width: 700px){
    .servicio-fila{ grid-template-columns: 1fr; gap: 6px; }
  }

  /* PAQUETES */
  .paquetes{
    background: #fff;
  }

  .paquetes-grid{
    margin-top: 48px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow:hidden;
  }

  .paquete{
    padding: 30px 22px;
    border-right: 1px solid var(--borde);
  }
  .paquete:last-child{ border-right:none; }

  .paquete .tier{
    font-family:'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--coral);
  }

  .paquete h3{
    margin-top: 8px;
    font-size: 1.15rem;
    color: var(--azul);
  }

  .paquete p.desc{
    margin-top: 10px;
    color: var(--gris);
    font-size: 0.92rem;
  }

  .paquete ul{
    margin-top: 18px;
    list-style:none;
    font-size: 0.9rem;
  }

  .paquete ul li{
    padding: 7px 0;
    border-top: 1px dashed var(--borde);
    color: #333;
  }
  .paquete ul li:first-child{ border-top:none; }

  @media (max-width: 900px){
    .paquetes-grid{ grid-template-columns: 1fr 1fr; }
    .paquete{ border-bottom: 1px solid var(--borde); }
  }
  @media (max-width: 600px){
    .paquetes-grid{ grid-template-columns: 1fr; }
  }

  /* CASOS */
  .caso{
    margin-top: 48px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }

  .caso-marco{
    background: var(--azul);
    border-radius: 10px;
    padding: 22px;
  }

  .caso-marco .barra{
    display:flex;
    gap:6px;
    margin-bottom: 14px;
  }
  .caso-marco .barra span{
    width:9px; height:9px; border-radius:50%;
    background: rgba(255,255,255,0.25);
  }

  .caso-marco .pantalla{
    background: var(--crema);
    border-radius: 6px;
    padding: 30px 22px;
    color: var(--texto);
  }

  .caso-marco .pantalla h4{
    font-family:'Space Grotesk', sans-serif;
    color: var(--azul);
    font-size: 1.2rem;
  }
  .caso-marco .pantalla p{
    color: var(--gris);
    font-size: 0.88rem;
    margin-top: 8px;
  }

  .caso-texto h3{
    color: var(--azul);
    font-size: 1.4rem;
  }

  .caso-texto p{
    margin-top: 14px;
    color: var(--gris);
  }

  .caso-texto .etiqueta{
    display:inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--coral);
    margin-bottom: 10px;
  }

  @media (max-width: 760px){
    .caso{ grid-template-columns: 1fr; }
  }

  /* CONTACTO */
  .contacto{
    background: var(--azul);
    color: #fff;
  }

  .contacto .titulo-seccion,
  .contacto .intro-seccion{
    color: #fff;
  }
  .contacto .intro-seccion{ color: #c7cce0; }

  .contacto-caja{
    margin-top: 40px;
    display:flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  /* FOCO VISIBLE (accesibilidad) */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible{
    outline: 2px solid var(--coral);
    outline-offset: 2px;
  }

  /* FAQ */
  .faq-lista{
    margin-top: 40px;
    max-width: 720px;
  }

  .faq-item{
    border-bottom: 1px solid var(--borde);
  }

  .faq-pregunta{
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--azul);
    cursor: pointer;
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 16px;
  }

  .faq-pregunta::after{
    content: '+';
    font-size: 1.4rem;
    color: var(--coral);
    flex-shrink:0;
    transition: transform 0.2s ease;
  }

  .faq-pregunta[aria-expanded="true"]::after{
    transform: rotate(45deg);
  }

  .faq-respuesta{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .faq-respuesta p{
    color: var(--gris);
    padding-bottom: 20px;
    max-width: 56ch;
  }

  /* FORMULARIO DE CONTACTO */
  .form-contacto{
    margin-top: 40px;
    max-width: 480px;
    display: grid;
    gap: 18px;
  }

  .campo{
    display: grid;
    gap: 6px;
  }

  .campo label{
    font-size: 0.9rem;
    color: #c7cce0;
  }

  .campo input,
  .campo textarea{
    background: var(--azul-2);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 12px 14px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    resize: vertical;
  }

  .campo input::placeholder,
  .campo textarea::placeholder{
    color: #8891ab;
  }

  .form-contacto .btn{
    justify-self: start;
    border: none;
  }

  .caso + .caso{ margin-top: 64px; }

  .caso-invertido .caso-texto{ order: 2; }
  .caso-invertido .caso-marco{ order: 1; }

  @media (max-width: 760px){
    .caso-invertido .caso-texto,
    .caso-invertido .caso-marco{ order: initial; }
  }

  /* RESEÑAS */
  .resenas-wrap{
    margin-top: 44px;
    display:flex;
    align-items:center;
    gap: 16px;
  }

  .resenas-carrusel{
    display:flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .resenas-carrusel::-webkit-scrollbar{ display:none; }

  .resena{
    scroll-snap-align: start;
    flex: 0 0 min(320px, 82vw);
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 26px;
  }

  .resena-texto{
    color: #333;
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .resena-autor{
    margin-top: 18px;
    display:flex;
    flex-direction: column;
    border-top: 1px solid var(--borde);
    padding-top: 14px;
  }

  .resena-nombre{
    font-weight: 600;
    color: var(--azul);
    font-size: 0.92rem;
  }

  .resena-negocio{
    color: var(--gris);
    font-size: 0.85rem;
    margin-top: 2px;
  }

  .resenas-flecha{
    flex-shrink:0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: #fff;
    color: var(--azul);
    font-size: 1.4rem;
    cursor:pointer;
  }

  .resenas-flecha:hover{ background: var(--azul); color:#fff; }

  @media (max-width: 600px){
    .resenas-flecha{ display:none; }
  }

  /* CHAT WIDGET */
  .chat-widget{
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 100;
  }

  .chat-boton{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  }
  .chat-boton:hover{ background: var(--coral-2); }

  .chat-ventana{
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    height: 420px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  }

  .chat-widget.abierto .chat-ventana{ display: flex; }

  .chat-header{
    background: var(--azul);
    color: #fff;
    padding: 14px 16px;
    font-weight: 600;
    display:flex;
    justify-content: space-between;
    align-items:center;
  }

  .chat-header button{
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:1rem;
  }

  .chat-mensajes{
    flex:1;
    padding: 14px;
    overflow-y: auto;
    display:flex;
    flex-direction: column;
    gap: 10px;
  }

  .chat-msg{
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .chat-msg-bot{
    background: var(--crema);
    color: var(--texto);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
  }

  .chat-msg-user{
    background: var(--azul);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
  }

  .chat-form{
    display:flex;
    border-top: 1px solid var(--borde);
  }

  .chat-form input{
    flex:1;
    border:none;
    padding: 12px 14px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
  }

  .chat-form input:focus{ outline: none; }

  .chat-form button{
    background: var(--coral);
    color:#fff;
    border:none;
    width: 48px;
    cursor:pointer;
    font-size: 1rem;
  }

  @media (max-width: 400px){
    .chat-ventana{ width: 88vw; }
  }

  /* FOOTER */
  footer{
    padding: 32px 24px;
    text-align:center;
    color: var(--gris);
    font-size: 0.88rem;
  }

/* Correcciones de accesibilidad y pantallas pequeñas. */
[hidden]{display:none !important}
button:disabled{opacity:.6;cursor:wait}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.chat-form input{min-width:0}
.chat-ventana{max-width:calc(100vw - 44px);max-height:calc(100dvh - 116px)}
.chat-msg{overflow-wrap:anywhere;white-space:pre-wrap}
#contactoEstado{margin-top:12px}

.review-form{max-width:600px;margin-top:40px;padding:24px;border:1px solid var(--borde);border-radius:12px;background:white}.review-form label{display:block;margin:18px 0 8px}.review-form input:not([type=checkbox]),.review-form select,.review-form textarea{width:100%;padding:12px;font:inherit;border:1px solid var(--borde);border-radius:6px}.review-form .review-consent{display:flex;gap:10px;align-items:flex-start;line-height:1.5}.review-consent input{margin-top:4px}.review-stars{color:#b54514;margin-bottom:12px}.resena-texto{overflow-wrap:anywhere}#reviewStatus{margin-top:16px}

/* Fase 2: sistema visual, precios, proceso y redes. */
.hero-panel{box-shadow:0 28px 70px rgba(0,0,0,.24);backdrop-filter:blur(8px)}
.panel-kicker,.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.paquete-destacado{background:linear-gradient(180deg,#fff7f3,#fff);position:relative}
.paquete-destacado::before{content:'Integral';position:absolute;right:18px;top:18px;background:var(--azul);color:white;padding:4px 9px;border-radius:999px;font-size:.7rem;font-weight:700}
.precio{margin:22px 0 4px;display:flex;flex-direction:column;gap:1px}.precio span,.precio small{font-size:.72rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}.precio strong{font-family:'Space Grotesk',sans-serif;font-size:1.55rem;color:var(--azul)}
.mantenimiento{font-size:.8rem;color:var(--gris);padding-bottom:16px}.mantenimiento span{font-weight:700;color:var(--texto)}
.nota-precios{max-width:850px;margin:22px auto 0;color:var(--gris);font-size:.82rem;text-align:center}
.como-funciona{background:var(--azul);color:white}.como-funciona .titulo-seccion{color:white}.pasos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.pasos-grid article{padding:26px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.045)}.pasos-grid article>span{font-family:'Space Grotesk',sans-serif;color:var(--coral);font-weight:700}.pasos-grid h3{margin-top:24px}.pasos-grid p{color:#c7cce0;margin-top:9px;font-size:.92rem}
.form-contacto select{width:100%;padding:13px 14px;border:1px solid var(--borde);border-radius:6px;font:inherit;background:white}.campos-dobles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.link-texto,.link-footer{color:var(--coral);text-decoration:underline;text-underline-offset:3px}.link-footer{font-size:.82rem}
.footer-inner{max-width:1080px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px}.redes{display:flex!important;gap:10px;width:auto!important}.redes a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:white;font-family:Arial,sans-serif;font-weight:800;transition:transform .2s,box-shadow .2s}.redes a:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(15,27,60,.18)}.redes .facebook{background:#1877f2}.redes .instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.redes .x{background:#111}.redes .tiktok{background:#010101;text-shadow:2px 1px #25f4ee,-2px -1px #fe2c55}.redes .youtube{background:#f00}.redes .linkedin{background:#0a66c2}.redes-aviso{font-size:.72rem;color:#8a8e98}.resena-fecha{display:block;color:var(--gris);font-size:.78rem;margin-top:3px}
@media (max-width:900px){.pasos-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){section{padding:64px 18px}.hero{padding:68px 18px 72px}.contenedor{padding:0}.hero-ctas .btn{width:100%;text-align:center}.hero-panel .fila{align-items:flex-start;gap:14px}.hero-panel .fila span:last-child{text-align:right;max-width:58%}.pasos-grid,.campos-dobles{grid-template-columns:1fr}.precio strong{font-size:1.8rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}