@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

    :root {
      --brilliance: #fdfcfc;
      --lynx-white: #f7f7f7;
      --perfect-white: #f1eeee;
      --smells-of-fresh-bread: #d7cecd;
      --so-shy: #dad4d5;
      --quest-grey: #aca2a6;
      --soft-fur: #7f7574;
      --resounding-rose: #cc8c87;
      --rose-tattoo: #deaa91;
      --eastern-amber: #edb57e;
      --aged-whisky: #9e7148;
      --beach-cabana: #a78e83;
      --old-tudor: #6b554d;
      --morocco-brown: #442e24;
      --out-of-the-blue: #188ceb;
      --blue-elemental: #5c82f6;
      --gentle-sea: #afc8d0;
      --murmur: #c8d2c7;
      --supreme-grey: #86929c;
      --azalea: #d83e65;
      --carmine-pink: #ec473f;
      --celestial-coral: #e04756;
      --gusto-gold: #faab1d;
      --tahitian-pearl: #263846;
      --dire-wolf: #282727;
      --umbra: #211f20;
      --fonts: "Host Grotesk", sans-serif;
      --border: 1px solid rgba(255, 255, 255, .2);
      --border-color: rgba(255, 255, 255, .2);
      --light-blue: rgba(73, 172, 211, 1);
    }

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

    body,
    html {
      font-family: var(--fonts);
      font-optical-sizing: auto;
      font-size: 1.05rem;
      font-style: normal;
      background-color: #000;
      color: #fff;
      line-height: 1.5;
      text-shadow: 0 1px 2px #000;
      min-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }

    html {
      scroll-behavior: smooth;
    }

    /* Scrollbar personalizada - General para toda la página */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgb(53 8 56);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: black;
      border-radius: 4px;
    }

    /* Opcional: efecto hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #ec473f;
      /* un tono más claro de azalea */
    }

    a {
      color: var(--azalea);
      text-decoration: none;
    }

    a:hover {
      color: var(--gusto-gold) !important;
    }

    /* Layout principal */
    .container {
      display: flex;
      min-height: 100vh;
      position: relative;
    }

    /* Barra lateral fija */
    .sidebar {
      width: 50px;
      height: 100vh;
      background-color: #000;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 100;
      animation: marquee-left 1s linear;
    }

    .sidebar::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: var(--border-color);
      z-index: 2;
    }

    .sidebar-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .nav-btn {
      width: 100%;
      aspect-ratio: 1;
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      outline: none;
      border-bottom: var(--border);
      transition: background-color 0.3s ease;
    }

    .nav-btn:last-child {
      border-bottom: none;
    }

    .nav-btn:hover,
    .nav-btn:active,
    .nav-btn.active {
      background-color: var(--azalea);
    }

    .nav-btn .icon {
      width: 30px;
      height: 30px;
    }

    .nav-btn .icon img {
      max-height: 30px;
      max-width: 30px;
    }

    /* Contenido principal */
    .content {
      flex: 1;
      position: relative;
      overflow: visible;
      margin-left: 50px;
      width: calc(100% - 50px);
    }

    .logo-home {
      max-height: 130px;
    }

    .float-quote {
      margin: 2rem auto;
      position: relative;
      max-width: 50%;
    }

    .quote-open {
      position: absolute;
      left: -15px;
      top: 15px;
    }

    .quote-close {
      position: absolute;
      right: -15px;
      top: 15px;
    }

    .quote-open img,
    .quote-close img {
      width: 20px;
    }

    blockquote {
      width: 100%;
      font-size: 20px;
      font-weight: 100;
      padding: 1rem;
      text-align: center;
    }

    blockquote .signature {
      float: right;
      font-style: italic;
    }

    /* Secciones con scroll vertical */
    .section {
      width: 100%;
      min-height: 100vh;
      position: relative;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: rgb(0, 0, 0);
    }

    /* Overlay para texto sobre fondos */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 0;
    }

    /* Video de fondo */
    .has-video .video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    /* Imagen de fondo */
    .has-image {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      /* ← Esto crea el efecto parallax */
    }

    /*Diseño de filas*/
    .two-row {
      display: grid;
      grid-template-rows: 1fr 1fr;
      width: 100%;
      height: 100%;
      gap: 5px;
      align-items: center;
    }

    /* Contenedor principal */
    .benefits-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 2rem;
    }

    /* Cada beneficio en fila (dos columnas) */
    .benefit-card {
      display: flex;
      flex-direction: row;
      /* ← Esto hace que sea horizontal (columnas) */
      align-items: center;
      transition: transform 0.3s ease;
    }

    /* Parte de la imagen */
    .benefit-header {
      flex: 0 0 50px;
      /* Ancho fijo de 60px, sin crecer ni encogerse */
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
    }

    .benefit-img {
      max-width: 40px;
      max-height: 40px;
      object-fit: contain;
    }

    /* Parte del texto */
    .benefit-body {
      flex: 1;
      padding: 15px 15px 0 0;
    }

    .benefit-body h3 {
      font-size: 1.2rem;
      color: white;
      margin-bottom: 8px;
    }

    .benefit-body p {
      color: #ddd;
      line-height: 1.6;
      margin: 0;
    }

    @media (min-width: 1025px) {

      /* Diseño de columnas */
      .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100vh;
        gap: 5px;
        align-items: center;
      }

      .two-col-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
      }

      .two-col-left {
        display: grid;
        grid-template-columns: 2fr 5fr;
        width: 100%;
        height: 100vh;
        gap: 5px;
      }

      .two-col-right {
        display: grid;
        grid-template-columns: 5fr 2fr;
        width: 100%;
        height: 100vh;
        gap: 5px;
      }

      .three-col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: 100%;
        gap: 5px;
        align-items: baseline;
      }

      .text-box {
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 30px 0;
      }

      .stat-item {
        text-align: center;
        padding: 15px;
        border-right: var(--border);
      }

      form .form-item {
        display: inline-block;
        width: 48%;
      }

    }

    /* Estilos para tablets (landscape y portrait) */
    @media (min-width: 769px) and (max-width: 1024px) {
      .two-col-left {
        display: grid;
        grid-template-columns: 2fr 4fr;
        width: 100%;
        height: 100vh;
        gap: 5px;
      }

      .two-col-right {
        display: grid;
        grid-template-columns: 4fr 2fr;
        width: 100%;
        height: 100vh;
        gap: 5px;
      }

      .text-box {
        padding: 30px;
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 30px 0;
      }

      .stat-item {
        text-align: center;
        padding: 15px;
        border-right: var(--border);
      }

      form .form-item {
        display: inline-block;
        width: 48%;
      }
    }



    /* Responsive: Imagen arriba en mobile (1/3 de altura) */
    @media (max-width: 768px) {
      .logo-home {
        width: 90%;
      }

      blockquote {
        font-size: 16px;
      }

      .two-col-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }

      .two-col-right {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 5fr;
        grid-template-areas:
          "img"
          "txt";
      }

      .two-col-left {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 5fr;
        grid-template-areas:
          "img"
          "txt";
      }

      .img-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .two-col-left .img-box,
      .two-col-right .img-box {
        height: 35vh;
        margin-bottom: -20vh;
      }

      .two-col-left .text-box,
      .two-col-right .text-box {
        grid-area: txt;
        padding: 20px;
        height: 85vh;
        overflow-y: auto;
      }

      .three-col,
      .two-col {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
      }

      .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 1rem 0;
      }

      .stat-item {
        border-right: none;
        border-bottom: var(--border);
        padding: 12px 0;
        text-align: center;
        word-break: break-word;
      }

      .stat-item strong {
        font-size: 1.3rem;
        /* Un poco más pequeño para móviles */
      }
      
      .stat-item:last-child{
	  border-right:none;
	  }

      .stat-item span {
        font-size: 0.85rem;
        display: block;
        margin-top: 4px;
      }

      form .form-item {
        display: block;
        width: 100%;
      }

      form button {
        width: 100%;
      }

      #section4 .img-box {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%, #000 100%), url('img/claudia_fernandez.jpeg') !important;
      }

      #section5 .img-box {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%, #000 100%), url('img/solutions.jpg') !important;
      }

      #section6 .img-box {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%, #000 100%), url('img/logros.webp') !important;
      }

    }


    .text-box h2 {
      margin-bottom: 16px;
    }

    .img-box {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    #section3.has-image {
      background-image: url('img/office.jpg');
    }

    #section10.has-image {
      background-image: url('img/contract.jpg');
    }

    #section11.has-image {
      background-image: url('img/security.jpg');
    }

    #section12.has-image {
      background-image: url('img/legal.jpg');
    }

    #section4 .img-box {
      background-image: url('img/claudia_fernandez.jpeg');
    }

    #section5 .img-box {
      background-image: url('img/solutions.jpg');
    }

    #section6 .img-box {
      background-image: url('img/logros.webp');
    }

    form {
      padding: 40px;
      height: 100vh;
      align-content: center;
      background: rgba(0, 0, 0, .1);
    }

    input {
      text-transform: uppercase;
    }

    input[type=file]::file-selector-button {
      background-color: var(--azalea);
      color: #000;
      border: 0px;
      padding: 10px 15px;
      margin-right: 20px;
      transition: .5s;
    }

    input[type=file]::file-selector-button:hover {
      background-color: #fff;
      border: 0px;
    }

    input,
    select {
      width: 100%;
      height: 40px;
      padding: 5px;
      border: none;
      border-bottom: 3px solid var(--border-color);
      background: var(--dire-wolf);
      color: var(--brilliance);
      outline: none;
      font-weight: 200;
      margin: 0 10px 10px 0;
    }

    form label {
      display: block;
      padding: 3px 0;
    }

    form button {
      width: 48%;
      height: 40px;
      padding: 5px;
      font-weight: bold;
      background: var(--lynx-white);
      outline: none;
      margin-top: 2rem;
    }

    h1,
    h2,
    h3 {
      text-transform: uppercase;
      font-weight: 300;
      font: 400 30px / 1.2 var(--fonts);
      color: var(--light-blue);
    }

    /* Estadísticas */
    .stat-item strong {
      font-size: 1.5rem;
      display: block;
      color: white;
    }

    .stat-item span {
      font-size: 0.95rem;
      color: #ccc;
    }
    
    .stat-item:last-child{
	  border-right:none;
	}

    /* Credenciales */
    .credentials {
      margin-top: 24px;
    }

    .credentials h3 {
      margin-bottom: 12px;
      color: white;
    }

    .list {
      list-style: none;
    }

    .list li {
      padding: 4px 0;
      color: #ddd;
      position: relative;
      padding-left: 20px;
    }

    .list li::before {
      content: '•';
      color: #0000ff;
      font-weight: bold;
      position: absolute;
      left: 0;
    }

    /* Contenido de texto */
    .text-content {
      max-width: 800px;
      padding: 40px;
      z-index: 2;
      position: relative;
    }

    .logo-content {
      width: 100%;
      padding: 0 40px;
      text-align: center;
      z-index: 5;
    }

    .form-content {
      max-width: 800px;
      padding: 0 40px;
      text-align: center;
      z-index: 5;
    }

    .form-content p {
      margin: 2rem 0;
    }

    .text-content h2 {
      margin-bottom: 16px;
    }

    p {
      color: #ddd;
      margin-bottom: 14px;
      line-height: 1.6;
    }

    .hero-subtitle {
      color: #dccccc;
      margin-bottom: 24px;
      font-weight: 300;
      font-size: 1.2rem;
    }

    /* Botones CTA */
    .cta-container {
      margin-top: 2rem;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cta-btn {
      padding: 13px 10px;
      font-weight: 600;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      min-width: 200px;
      transition: all 0.3s ease;
    }

    .cta-btn.primary {
      background-color: white;
      color: black;
    }

    .cta-btn.secondary {
      background-color: transparent;
      color: white;
      border: 2px solid white;
    }

    .cta-btn.transparent {
      padding: 0 1rem 0 0;
      font-size: 0;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      background: none;
      min-width: 0;
    }

    .cta-btn.transparent .icon {
      height: 50px;
    }

    .cta-btn:hover {
      transform: translateY(-3px);
    }

    /* Resultados */
    .result-card,
    .carousel-item {
      padding: 10px;
      transition: transform 0.3s ease;
      align-content: end;
    }

    .result-card .logo,
    .carousel-item .logo {
      height: 80px;
      background-size: contain;
      background-position: left;
      background-repeat: no-repeat;
      margin-bottom: 12px;
    }

    .result-card h3,
    .carousel-item h3,
    .credentials h3,
    .scrollable-section .scroll-box h3 {
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: white;
    }

    .result-card p,
    .carousel-item p {
      font-size: 1rem;
      color: #ddd;
      line-height: 1.6;
    }

    /* === FOOTER ANIMADO === */
    .footer {
      position: fixed;
      bottom: 20px;
      right: 30px;
      display: flex;
      flex-direction: row;
      gap: 5px;
      z-index: 100;
      opacity: 1;
      text-align: center;
      animation: marquee-inverse 1s ease-in;
    }

    .footer-item {
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .footer-copyright {
      display: inline-block;
      width: max-content;
    }

    .footer .nav-btn {
      padding: 10px;
      outline: none;
      border: none;
      cursor: pointer;
      height: 50px;
    }

    .footer .nav-btn img {
      height: 25px;
    }

    .footer .nav-btn:hover,
    .footer .nav-btn:active,
    .footer .nav-btn.active {
      background: var(--celestial-coral);
    }

    .footer a {
      color: #ccc;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    /* === SECCIONES SCROLLABLES === */
    .scrollable-section {
      height: auto;
    }

    .scrollable-section .text-content {
      max-width: 800px;
      width: 100%;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .scrollable-section .scroll-box {
      width: 100%;
      height: 60vh;
      overflow-y: auto;
      overflow-x: hidden;
      color: #ddd;
      line-height: 1.7;
      margin-top: 2rem;
      padding-right: 1rem;
    }

    .scrollable-section .scroll-box h2,
    .scrollable-section .scroll-box h3 {
      color: white;
      margin: 1.5em 0 0.8em;
    }

    .scrollable-section .scroll-box ul {
      margin: 10px 0 10px 20px;
    }

    .scrollable-section .scroll-box a {
      color: var(--azalea);
      text-decoration: none;
    }

    #section9 .scroll-box,
    #section10 .scroll-box,
    #section11 .scroll-box {
      height: 50vh;
    }


    /* Scrollbar personalizada (opcional) */
    .scrollable-section .scroll-box::-webkit-scrollbar {
      width: 8px;
    }

    .scrollable-section .scroll-box::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }

    .scrollable-section .scroll-box::-webkit-scrollbar-thumb {
      background: var(--azalea);
      border-radius: 4px;
    }

    @keyframes marquee-logo {
      from {
        transform: translateY(-1800px);
      }

      to {
        transform: translateY(0);
      }
    }

    @keyframes marquee {
      from {
        transform: translateY(-200px);
      }

      to {
        transform: translateY(0);
      }
    }

    @keyframes marquee-inverse {
      from {
        transform: translateY(500px);
      }

      to {
        transform: translateY(0);
      }
    }

    @keyframes marquee-left {
      from {
        transform: translateX(-500px);
      }

      to {
        transform: translateX(0);
      }
    }

    /* === NOTIFICACIÓN CON OVERLAY === */
    .notification-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .notification-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    .notification-box {
      background: #1a1a2e;
      color: white;
      padding: 30px;
      text-align: center;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border-color);
    }

    .notification-box p {
      font-size: 1.2rem;
      line-height: 1.5;
      margin-bottom: 0;
    }

    .notification-box .cta-btn {
      min-width: auto;
    }