:root {
        --ink: #08090a;
        --red: #e22c28;
        --paper: #fff;
        --muted: #72757a;
        --pale: #f1f2f4;
        --line: #e3e4e6;
      }
      * {
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        color: var(--ink);
        font-family: Barlow, Arial, sans-serif;
        background: #fff;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .wrap {
        width: min(1200px, calc(100% - 80px));
        margin: auto;
      }
      .eyebrow {
        display: flex;
        gap: 12px;
        align-items: center;
        color: var(--red);
        font:
          700 10px/1 Archivo,
          sans-serif;
        letter-spacing: 2px;
      }
      .eyebrow:before {
        content: "";
        width: 27px;
        height: 2px;
        background: var(--red);
      }
      h1,
      h2,
      h3 {
        font-family: Archivo, sans-serif;
        margin: 0;
        letter-spacing: -1.5px;
      }
      h1 {
        font-size: 60px;
        line-height: 0.99;
        font-weight: 900;
      }
      h2 {
        font-size: clamp(35px, 3.7vw, 54px);
        line-height: 1.04;
        font-weight: 900;
      }
      .accent {
        color: var(--red);
      }
      .button {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        padding: 15px 20px;
        background: var(--red);
        color: #fff;
        border: 1px solid var(--red);
        border-radius: 2px;
        font:
          700 12px Archivo,
          sans-serif;
        transition: 0.25s;
      }
      .button:hover {
        background: #ba1e1b;
        transform: translateY(-2px);
      }
      .button.outline {
        background: transparent;
        border-color: #47494b;
      }
      .button.outline:hover {
        background: #fff;
        color: #111;
        border-color: #fff;
      }
      .arrow {
        font-size: 20px;
        line-height: 8px;
      }
      .nav {
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 74px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
        background: var(--paper);
        color: var(--ink);
        display: flex;
        align-items: center;
      }
      .nav .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .brand {
        display: flex;
        gap: 9px;
        align-items: center;
      }
      .brand-mark {
        width: 25px;
        height: 24px;
        background: var(--red);
        clip-path: polygon(18% 0, 100% 0, 76% 100%, 0 100%);
      }
      .brand-name {
        font:
          800 15px Archivo,
          sans-serif;
        line-height: 0.9;
      }
      .brand-sub {
        font-size: 6px;
        letter-spacing: 2px;
        color: #a9aaad;
        margin-top: 3px;
      }
      .links {
        display: flex;
        gap: 30px;
        font:
          500 11px Barlow,
          Arial,
          sans-serif;
        letter-spacing: 0.05px;
      }
      .links a.active,
      .links a:hover {
        color: var(--red);
        transition: .2s;
      }
      .nav .button {
        padding: 13px 18px;
        font-size: 11px;
      }
      .hero {
        background: var(--ink);
        height: 590px;
        overflow: hidden;
        color: #fff;
        padding: 0px;
      }
      .hero .wrap {
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
      }
      .hero-copy {
        z-index: 2;
        width: 53%;
        padding-bottom: 20px;
      }
      .hero h1 {
        margin: 22px 0;
      }
      .hero p {
        width: 450px;
        max-width: 100%;
        font-size: 16px;
        color: #c2c3c4;
        line-height: 1.65;
        margin: 0 0 30px;
      }
      .buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .hero-image {
        position: absolute;
        right: 0;
        top: 0;
        width: 64%;
        height: 100%;
        overflow: hidden;
      }
      .hero-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
        z-index: 0;
        opacity: 0.85;
      }
      .hero-image:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          #08090a 0%,
          rgba(8, 9, 10, 0.92) 13%,
          rgba(8, 9, 10, 0.56) 42%,
          rgba(8, 9, 10, 0.14) 72%,
          transparent 100%
        );
        z-index: 1;
        pointer-events: none;
      }
      .hero-image:before {
        content: "";
        position: absolute;
        z-index: 2;
        right: 0;
        top: 0;
        width: 96px;
        height: 100%;
        background: var(--red);
        clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
        pointer-events: none;
      }
      section {
        padding: 125px 0;
      }
      .section-head {
        max-width: 600px;
      }
      .section-head h2 {
        margin: 23px 0 55px;
      }
      .equipment {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .card {
        border: 1px solid var(--line);
        transition:
          box-shadow 0.25s,
          transform 0.25s;
        background: #fff;
        border-radius: 16px;
      }
      .card:hover {
        box-shadow: 0 16px 35px #00000014;
        transform: translateY(-5px);
      }
      .card img {
        width: 100%;
        height: 224px;
        border-radius: 16px 16px 0px 0px;
        object-fit: cover;
        display: block;
      }
      .card-content {
        padding: 26px 29px 23px;
      }
      .icon {
        color: var(--red);
        font-size: 25px;
        height: 35px;
      }
      .card h3 {
        font-size: 18px;
        letter-spacing: -0.5px;
        margin: 12px 0;
      }
      .card p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.55;
        min-height: 46px;
        margin: 0 0 23px;
      }
      .card-arrow {
        color: var(--red);
        font-size: 23px;
      }
      .solutions {
        background: var(--ink);
        color: #fff;
        padding-bottom: 80px;
      }
      .solutions .section-head h2 {
        max-width: 480px;
      }
      .solution-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }
      .solution {
        padding: 0 27px;
        border-left: 1px solid #303133;
      }
      .solution:first-child {
        padding-left: 0;
        border: 0;
      }
      .solution .icon {
        font-size: 28px;
      }
      .solution h3 {
        font-size: 16px;
        letter-spacing: -0.4px;
        margin: 15px 0 10px;
      }
      .solution p {
        font-size: 13px;
        color: #9d9fa2;
        line-height: 1.55;
        margin: 0;
      }
      .why-list {
        margin-top: 35px;
      }
      .why {
        display: grid;
        grid-template-columns: 45px 310px 1fr;
        gap: 0;
        align-items: center;
        padding: 29px 0;
        border-bottom: 1px solid var(--line);
      }
      .why .icon {
        font-size: 25px;
      }
      .why h3 {
        font-size: 18px;
        letter-spacing: -0.5px;
      }
      .why p {
        color: var(--muted);
        font-size: 14px;
        margin: 0;
      }
      .gallery {
        background: var(--pale);
      }
      .gallery-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .gallery figure {
        margin: 0;
      }
      .gallery figure:nth-child(4) {
        display: block;
      }
      .gallery img {
        width: 100%;
        aspect-ratio: 1.1;
        object-fit: cover;
        border-radius: 5px;
      }
      .gallery figcaption {
        font:
          700 10px Archivo,
          sans-serif;
        letter-spacing: 1.5px;
        margin-top: 15px;
      }
      .dots {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 43px;
      }
      .dots i {
        width: 36px;
        height: 3px;
        background: #d1d3d5;
      }
      .dots i:first-child {
        background: var(--red);
      }
      .cta {
        background: var(--ink);
        color: #fff;
        padding: 0;
      }
      .cta-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 420px;
      }
      .cta-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 74px 80px 74px 0;
        position: relative;
      }
      .cta-copy:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 30px;
        background: var(--red);
        transform: skewX(-4deg);
      }
      .cta h2 {
        font-size: clamp(36px, 3.6vw, 52px);
        max-width: 460px;
      }
      .cta p {
        color: #aaacae;
        font-size: 15px;
        line-height: 1.55;
        max-width: 420px;
        margin: 22px 0 29px;
      }
      .cta-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .footer {
        background: var(--ink);
        color: #fff;
        padding: 68px 0 22px;
      }
      .footer-top {
        display: grid;
        grid-template-columns: 2fr 1.4fr 1.4fr 1.4fr;
        gap: 45px;
      }
      .footer .brand {
        margin-bottom: 22px;
      }
      .footer p,
      .footer li {
        font-size: 13px;
        line-height: 1.7;
        color: #8c8f92;
      }
      .footer p {
        max-width: 250px;
        margin: 0;
      }
      .footer h3 {
        font-size: 11px;
        letter-spacing: 2px;
        margin: 0 0 18px;
      }
      .footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .footer li {
        margin: 4px 0;
      }
      .socials {
        display: flex;
        gap: 8px;
        margin-top: 22px;
      }
      .socials b {
        width: 27px;
        height: 27px;
        border: 1px solid #3a3c3e;
        display: grid;
        place-items: center;
        color: #bbb;
        font-size: 12px;
      }
      .foot-bottom {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #292b2d;
        margin-top: 50px;
        padding-top: 19px;
        color: #737578;
        font-size: 10px;
      }
      .foot-bottom a {
        display: inline-block;
        transition: color .2s ease, transform .2s ease;
      }
      .foot-bottom a:hover,
      .foot-bottom a:focus-visible {
        color: var(--red);
        transform: translateX(3px);
      }
      @media (max-width: 800px) {
        .wrap {
          width: min(100% - 40px, 650px);
        }
        .nav {
          height: 65px;
        }
        .links,
        .nav .button {
          display: none;
        }
        
        .hero .wrap {
          align-items: flex-end;
          padding-bottom: 65px;
        }
        .hero-copy {
          width: 100%;
          padding: 0;
        }
        .hero-image {
          width: 100%;
          right: 0;
          height: 100%;
          opacity: 0.72;
        }
        .hero-image:before {
          display: none;
        }
        .hero p {
          font-size: 14px;
        }
        .hero h1 {
          font-size: 46px;
        }
        .hero-copy {
          position: relative;
        }
        .hero-copy p {
          color: #d0d0d0;
        }
        section {
          padding: 85px 0;
        }
        .section-head h2 {
          margin-bottom: 38px;
        }
        .equipment {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .card {
          display: grid;
          grid-template-columns: 44% 1fr;
        }
        .card img {
          height: 100%;
        }
        .card-content {
          padding: 20px;
        }
        .card p {
          min-height: 0;
          font-size: 13px;
        }
        .solutions {
          padding-bottom: 65px;
        }
        .solution-grid {
          grid-template-columns: 1fr 1fr;
          gap: 30px;
        }
        .solution,
        .solution:first-child {
          padding: 0;
          border: 0;
        }
        .why {
          grid-template-columns: 40px 1fr;
          row-gap: 7px;
        }
        .why p {
          grid-column: 2;
        }
        .gallery-track {
          grid-template-columns: repeat(2, 1fr);
        }
        .gallery figure:nth-child(4) {
          display: none;
        }
        .cta .wrap {
          width: 100%;
        }
        .cta-inner {
          grid-template-columns: 1fr;
        }
        .cta-copy {
          padding: 68px 35px;
        }
        .cta-copy:after {
          right: 12%;
          width: 20px;
        }
        .cta-image {
          height: 300px;
        }
        .footer-top {
          grid-template-columns: 1fr 1fr;
          gap: 38px;
        }
        .footer-top > div:first-child {
          grid-column: span 2;
        }
        .foot-bottom {
          display: block;
          line-height: 2;
        }
        .footer {
          padding-top: 52px;
        }
      }
      @media (max-width: 440px) {
        .hero h1 {
          font-size: 39px;
        }
        .card {
          grid-template-columns: 1fr;
        }
        .card img {
          height: 190px;
        }
        .solution-grid {
          grid-template-columns: 1fr;
        }
        .gallery-track {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .gallery figure:nth-child(3) {
          display: none;
        }
        .footer-top {
          grid-template-columns: 1fr;
        }
        .footer-top > div:first-child {
          grid-column: auto;
        }
        .why h3 {
          font-size: 16px;
        }
        .why p {
          font-size: 13px;
        }
      }
      .brand-logo {
        display: block;
        width: 145px;
        height: auto;
      }
      .footer .brand-logo {
        width: 170px;
      }
      .icon img {
        width: 28px;
        height: 28px;
        display: block;
      }
      .solution .icon img {
        width: 30px;
        height: 30px;
      }
      .why .icon img {
        width: 34px;
        height: 34px;
      }
      .contact-icon {
        width: 16px;
        height: 16px;
        vertical-align: -3px;
        margin-right: 8px;
      }

      /* Hero y navegación: proporciones de la referencia */
      @media (min-width: 801px) {
        .nav {
          height: 100px;
        }
        .nav .wrap,
        .hero .wrap {
          width: min(1640px, calc(100% - 160px));
        }
        .brand-logo {
          width: 210px;
        }
        .links {
          gap: 58px;
          font:
            600 17px Barlow,
            Arial,
            sans-serif;
        }
        .nav .button {
          font-size: 16px;
        }
        
        .hero .wrap {
          align-items: center;
        }
        .hero-copy {
          width: 60%;
          padding: 38px 0;
        }
        .hero h1 {
          font-size: 54px;
          line-height: 1.06;
          margin: 35px 0;
        }
        .hero p {
          width: 580px;
          font-size: 19px;
          line-height: 1.62;
          margin-bottom: 48px;
        }
        .hero .eyebrow {
          font-size: 13px;
          letter-spacing: 3px;
        }
        .buttons {
          gap: 20px;
        }
        .buttons .button {
          padding: 16px 24px;
          font-size: 16px;
        }
      }
      .hero-image {
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
      .hero-image img {
        opacity: 1;
        object-position: center;
      }
      .hero-image:after {
        background:
          linear-gradient(
            90deg,
            rgba(8, 9, 10, 0.98) 0%,
            rgba(8, 9, 10, 0.92) 23%,
            rgba(8, 9, 10, 0.9) 49%,
            rgba(8, 9, 10, 0.6) 74%,
            rgba(8, 9, 10, 0.3) 100%
          ),
          linear-gradient(0deg, rgba(8, 9, 10, 0.34) 0%, transparent 40%);
      }
      .hero-image:before {
        width: clamp(72px, 5vw, 104px);
        clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
      }

      /* Fondo del hero a pantalla completa, independiente del contenedor de texto */
      .hero-image {
        position: absolute !important;
        inset: 0 auto 0 50% !important;
        width: 100vw !important;
        height: 100% !important;
        transform: translateX(-50%);
        overflow: hidden;
      }
      .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .hero-image:after,
      .hero-image:before {
        height: 100% !important;
      }
      @media (min-width: 801px) {
        
        .hero-image img {
          object-position: center center;
        }
      }
      @media (max-width: 800px) {
        .hero-image {
          left: 50% !important;
          width: 100vw !important;
          transform: translateX(-50%);
          display: none;
        }
        .hero-image:before {
          display: none;
        }
      }


/* Estilos de la página de tecnología (extraídos de index-2.html) */
.links a.active { color: var(--red); }
  /* --- Segunda línea de servicio, dentro de «Servicios» --- */
  .linea-ti { margin-top:110px; padding-top:100px; border-top:1px solid var(--line); scroll-margin-top:60px; }
  .ti-card { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; background:#fff; transition:box-shadow .25s, transform .25s; }
  .ti-card:hover { box-shadow:0 16px 35px #00000014; transform:translateY(-5px); }
  .ti-visual { background:var(--pale); padding:34px; display:flex; align-items:center; }
  .ti-copy { padding:44px 46px; display:flex; flex-direction:column; gap:18px; justify-content:center; }
  .producto { display:flex; align-items:center; gap:14px; }
  .producto img { width:62px; height:62px; }
  .producto b { font:900 22px/1 Archivo, sans-serif; letter-spacing:-.5px; }
  .ti-copy p { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
  .rasgos { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .rasgos li { display:flex; gap:12px; font-size:14px; line-height:1.45; }
  .rasgos li:before { content:""; flex:none; width:8px; height:8px; margin-top:6px; background:var(--red);
    clip-path:polygon(18% 0,100% 0,76% 100%,0 100%); }

  /* --- Captura del tablero en la tarjeta de la portada --- */
  .ti-captura { width:100%; display:block; border-radius:10px; border:1px solid var(--line);
    box-shadow:0 14px 34px #0000001f; }

  /* --- Página de tecnología --- */
  .ti-hero { background:var(--pale); padding:110px 0 100px; }
  .ti-hero .wrap { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:center; }
  .ti-hero h1 { margin:24px 0 26px; font-size:clamp(40px,4.4vw,58px); line-height:1.04; }
  .ti-hero p { color:#4b4e52; font-size:18px; line-height:1.65; margin:0 0 36px; max-width:560px; }
  .ti-hero .logo-grande { background:#fff; border-radius:16px; border:1px solid var(--line); padding:40px;
    display:grid; place-items:center; }
  .ti-hero .logo-grande img { width:100%; max-width:300px; height:auto; object-fit:contain; }

  /* --- Diagrama Captura → Validación → Publicación --- */
  .flujo { display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr; align-items:stretch; margin-bottom:26px; }
  .etapa { border:1px solid #303133; border-radius:16px; padding:30px 28px 26px; background:#0f1112;
    display:flex; flex-direction:column; gap:12px; }
  .etapa.clave { border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset; }
  .etapa-cab { display:flex; justify-content:space-between; align-items:baseline; }
  .etapa-num { font:900 44px/1 Archivo, sans-serif; color:var(--red); letter-spacing:-1px; }
  .etapa-quien { font:700 10px Archivo, sans-serif; letter-spacing:2px; color:#9d9fa2; }
  .etapa h3 { font-size:24px; letter-spacing:-.6px; margin:6px 0 0; }
  .etapa p { font-size:14px; color:#9d9fa2; line-height:1.6; margin:0; }
  .estado { margin-top:auto; padding-top:16px; border-top:1px solid #26282a; display:flex; flex-wrap:wrap; gap:6px; }
  .estado span { font:600 11px Barlow, sans-serif; color:#c2c3c4; border:1px solid #3a3c3e; border-radius:999px; padding:4px 10px; }
  .estado span.ok { color:#fff; border-color:#2e9d57; background:#2e9d5726; }
  .estado span.no { color:#fff; border-color:var(--red); background:#e22c2826; }
  .flecha { position:relative; align-self:center; height:2px; background:var(--red); margin:0 12px 0 8px; }
  .flecha:after { content:""; position:absolute; right:-1px; top:50%; width:11px; height:11px;
    border-top:2px solid var(--red); border-right:2px solid var(--red); transform:translateY(-50%) rotate(45deg); }
  .regreso { grid-row:2; grid-column:1 / 4; margin:0 calc(25% - 16px); height:48px; position:relative;
    border:2px dashed #5a5c5e; border-top:0; border-radius:0 0 14px 14px; }
  .regreso:before { content:""; position:absolute; left:-7px; top:-1px; width:12px; height:12px;
    border-top:2px solid #8c8f92; border-left:2px solid #8c8f92; transform:rotate(45deg); }
  .regreso span { position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); white-space:nowrap;
    background:var(--ink); padding:0 14px; font:500 14px Barlow, sans-serif; color:#c2c3c4; }
  .regreso span b { color:#fff; font-weight:600; }

  /* Clase propia: la .gallery del sitio fuerza aspect-ratio 1.1 en sus imágenes y oculta la 3.ª figura en celular */
  .ti-pantallas { background:var(--pale); }
  .pantallas { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:34px 40px; align-items:start; }
  .pantallas figure { margin:0; }
  .pantallas figcaption { font:700 10px Archivo, sans-serif; letter-spacing:1.5px; margin-top:15px; }
  .pantallas .web img { width:100%; height:auto; object-fit:contain; display:block; border-radius:12px; border:1px solid var(--line);
    box-shadow:0 18px 40px #0000001a; }
  .pantallas .cel { grid-column:2; grid-row:1 / span 2; align-self:center; display:flex; flex-direction:column; align-items:center; }
  .telefono { width:320px; max-width:100%; padding:10px; background:#111315; border-radius:42px; box-shadow:0 24px 50px #00000038; }
  .telefono img { width:100%; height:auto; object-fit:contain; display:block; border-radius:32px; }
  .nota-pantallas { margin:38px 0 0; font-size:13px; color:var(--muted); }

  .incluye { display:grid; grid-template-columns:repeat(2,1fr); gap:0 60px; margin-top:10px; }
  .incluye div { padding:24px 0; border-bottom:1px solid var(--line); }
  .incluye h3 { font-size:17px; letter-spacing:-.4px; margin:0 0 6px; }
  .incluye p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }


  @media (max-width:800px) {
    .linea-ti { margin-top:70px; padding-top:70px; }
    .ti-card, .ti-hero .wrap { grid-template-columns:1fr; }
    .ti-visual { padding:20px; }
    .ti-copy { padding:28px 24px; }
    .ti-hero { padding:70px 0; }
    .ti-hero .wrap { gap:36px; }
    .ti-hero .logo-grande { padding:26px; max-width:280px; }
    .flujo { grid-template-columns:1fr; }
    .flecha { width:2px; height:36px; margin:8px 0; justify-self:center; }
    .flecha:after { right:auto; top:auto; bottom:-1px; left:50%; transform:translateX(-50%) rotate(135deg); }
    .regreso { grid-row:auto; grid-column:auto; margin:22px 0 0; height:auto; border:1px dashed #5a5c5e;
      border-radius:12px; padding:14px 16px; }
    .regreso:before { display:none; }
    .regreso span { position:static; transform:none; white-space:normal; background:none; padding:0; display:block; }
    .pantallas { grid-template-columns:minmax(0,1fr); }
    .pantallas .cel { grid-column:auto; grid-row:auto; }
    .incluye { grid-template-columns:1fr; }
  }

/* Aparición suave al abrir la página de tecnología. */
@keyframes technologyPageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.technology-page main,
.technology-page .footer {
  animation: technologyPageFadeIn 420ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .technology-page main,
  .technology-page .footer { animation: none; }
}

/* Menú desplegable para tabletas y teléfonos. */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 800px) {
  .nav .wrap { position: relative; }
  .nav .menu-toggle { display: block; }
  .nav .links.is-open {
    display: flex;
    position: absolute;
    z-index: 1100;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 14px;
    background: var(--paper);
    box-shadow: 0 12px 18px rgba(0, 0, 0, .14);
  }
  .nav .links.is-open a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
  }
  .nav .links.is-open a:last-child { border-bottom: 0; }
}
.footer li a {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
.footer li a:hover,
.footer li a:focus-visible {
  color: var(--red);
  transform: translateX(3px);
}

/* Página del aviso de privacidad. */
.privacy-hero {
  padding: 92px 0 76px;
  background: var(--pale);
}
.privacy-hero h1 {
  margin: 22px 0 16px;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.04;
}
.privacy-hero p {
  max-width: 700px;
  margin: 0;
  color: #4b4e52;
  font-size: 18px;
  line-height: 1.6;
}
.privacy-hero .privacy-date {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.privacy-content {
  padding: 62px 0 100px;
}
.privacy-intro {
  margin: 0 0 48px;
  padding: 24px 28px;
  border-left: 3px solid var(--red);
  background: var(--pale);
  color: #414448;
  font-size: 16px;
  line-height: 1.7;
}
.privacy-intro p,
.privacy-section p { margin: 0 0 16px; }
.privacy-section {
  max-width: 850px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  color: #55585c;
  font-size: 15px;
  line-height: 1.7;
}
.privacy-section h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.7vw, 32px);
  letter-spacing: -0.8px;
  color: var(--ink);
}
.privacy-section ul { margin: 0 0 16px; padding-left: 22px; }
.privacy-section li { padding: 3px 0; }
.privacy-section a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .privacy-hero { padding: 68px 0 56px; }
  .privacy-hero p { font-size: 16px; }
  .privacy-content { padding: 40px 0 70px; }
  .privacy-intro { padding: 20px; margin-bottom: 30px; }
  .privacy-section { padding: 24px 0; font-size: 14px; }
}