:root {
      --black: #0a0a0b;
      --black-2: #151517;
      --panel: #1b1b1e;
      --red: #e2241c;
      --red-deep: #7d130d;
      --white: #f5f2ec;
      --gray: #9c9a94;
      --line: rgba(245, 242, 236, 0.14);
      --wrap: 1180px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--black);
      color: var(--white);
      font-family: 'Barlow', system-ui, sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

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

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    h1,
    h2,
    p {
      margin: 0;
    }

    .mono {
      font-family: 'Space Mono', ui-monospace, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    :focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 3px;
    }

    /* ---------- Language switch ---------- */
    .lang-switch {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(10, 10, 11, 0.55);
      border: 1px solid var(--line);
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 6px 8px;
    }

    .lang-switch button {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      letter-spacing: .08em;
      background: none;
      border: none;
      color: var(--gray);
      padding: 5px 10px;
      border-radius: 999px;
      cursor: pointer;
      transition: color .2s ease, background .2s ease;
    }

    .lang-switch button[aria-pressed="true"] {
      color: var(--black);
      background: var(--white);
    }

    .lang-switch span {
      color: var(--line);
      font-size: 11px;
    }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: flex-end;
      padding: 0;
      isolation: isolate;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      background-image: url('../img/hero.jpg');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      background-color: var(--black);
      z-index: -2;
    }

    /* En pantallas mas altas que anchas, la foto panoramica recorta los costados.
     Se usa un recorte vertical distinto, tomado de la misma foto, para que
     el letrero completo siga siendo visible. */
    @media (orientation:portrait) {
      .hero-media {
        background-image: url('../img/hero-portrait.jpg');
        background-position: center 8%;
      }
    }

    /* Telefonos muy angostos en vertical: el letrero ya ocupa casi todo el ancho
     de la foto, asi que recortar mas cortaria letras. En vez de eso se usa
     'contain' para mostrar la foto completa, con margen del mismo negro del
     fondo arriba/abajo en vez de recorte. */
    /* Escalones intermedios (mismo criterio de 700/500/400px probado en otro
       proyecto): transicion progresiva en vez de un salto brusco directo a
       'contain'. Los valores de background-position son un punto de partida;
       ajustalos con DevTools/dispositivo real como sueles hacer. */
    @media (orientation:portrait) and (max-width:700px) {
      .hero-media {
        background-position: center 5%;
      }
    }

    @media (orientation:portrait) and (max-width:500px) {
      .hero-media {
        background-position: center 3%;
      }
    }

    @media (orientation:portrait) and (max-width:400px) {
      .hero-media {
        background-size: contain;
        background-position: center 4%;
      }
    }

    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(10, 10, 11, 0.35) 0%, rgba(10, 10, 11, 0.55) 45%, rgba(10, 10, 11, 0.96) 92%),
        linear-gradient(90deg, rgba(10, 10, 11, 0.75) 0%, rgba(10, 10, 11, 0.1) 55%);
    }

    .hero-content {
      position: relative;
      width: 100%;
      max-width: var(--wrap);
      margin: 0 auto;
      padding: min(14vh, 140px) 24px 64px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--white);
      border: 1px solid var(--line);
      padding: 8px 14px;
      border-radius: 999px;
      margin-bottom: 28px;
    }

    .eyebrow::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 3px rgba(226, 36, 28, 0.25);
    }

    .wordmark {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-style: italic;
      text-transform: uppercase;
      line-height: .86;
      letter-spacing: .01em;
      font-size: clamp(58px, 12vw, 160px);
      margin: 0 0 18px;
    }

    .wordmark .plus {
      color: var(--red);
      display: inline-block;
      transform: skewX(-8deg);
    }

    .tagline {
      font-family: 'Space Mono', monospace;
      font-size: clamp(12px, 1.6vw, 15px);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 22px;
    }

    .intro {
      max-width: 560px;
      font-size: clamp(15px, 1.9vw, 18px);
      line-height: 1.55;
      color: #d9d7d1;
      margin-bottom: 34px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--red);
      color: var(--white);
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 16px 26px;
      border-radius: 6px;
      transition: transform .18s ease, background .18s ease;
    }

    .cta:hover {
      background: #c71e17;
      transform: translateY(-2px);
    }

    .cta svg {
      width: 18px;
      height: 18px;
      flex: none;
    }

    @media (prefers-reduced-motion:no-preference) {
      .hero-content>* {
        animation: rise .7s ease both;
      }

      .hero-content>*:nth-child(1) {
        animation-delay: .02s;
      }

      .hero-content>*:nth-child(2) {
        animation-delay: .08s;
      }

      .hero-content>*:nth-child(3) {
        animation-delay: .14s;
      }

      .hero-content>*:nth-child(4) {
        animation-delay: .2s;
      }

      .hero-content>*:nth-child(5) {
        animation-delay: .26s;
      }

      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(14px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    /* ---------- Swatch strip (signature element) ---------- */
    .swatch-strip {
      display: flex;
      width: 100%;
      height: 14px;
    }

    .swatch-strip span {
      flex: 1 1 0;
      background: var(--c);
      transition: flex-grow .25s ease;
    }

    .swatch-strip span:hover {
      flex-grow: 2.4;
    }

    .swatch-caption {
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 10px 24px 0;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray);
    }

    /* ---------- Section shell ---------- */
    section {
      padding: 88px 24px;
    }

    .section-inner {
      max-width: var(--wrap);
      margin: 0 auto;
    }

    .section-label {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
    }

    /* ---------- Services ---------- */
    .services {
      background: var(--black);
      border-top: 1px solid var(--line);
    }

    .chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .chip-list li {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 600;
      font-size: clamp(15px, 2vw, 19px);
      text-transform: uppercase;
      letter-spacing: .02em;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 12px 22px;
      color: var(--white);
      transition: border-color .2s ease, color .2s ease;
    }

    .chip-list li:hover {
      border-color: var(--red);
      color: var(--red);
    }

    /* ---------- Contact ---------- */
    .contact {
      background: var(--panel);
      border-top: 1px solid var(--line);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-bottom: 48px;
    }

    .contact-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      /* align-items: flex-start; */
    }

    .contact-label {
      font-size: 11px;
      color: var(--gray);
    }

    .contact-item a {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 600;
      font-size: clamp(18px, 2.4vw, 24px);
      border-bottom: 1px solid transparent;
      align-self: flex-start;
    }

    .contact-item a:hover {
      color: var(--red);
      border-color: var(--red);
    }

    .social-block {
      border-top: 1px solid var(--line);
      padding-top: 32px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .social-label {
      font-size: 11px;
      color: var(--gray);
    }

    .social-icons {
      display: flex;
      gap: 14px;
    }

    .social-icons span,
    .social-icons a {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray);
      opacity: .55;
    }

    /* Redes ya activas (con enlace real): sin atenuar, con hover en rojo
       igual que el resto de los enlaces del sitio. */
    .social-icons a {
      color: var(--white);
      opacity: 1;
      transition: border-color .2s ease, color .2s ease;
    }

    .social-icons a:hover,
    .social-icons a:focus-visible {
      border-color: var(--red);
      color: var(--red);
    }

    .social-icons svg {
      width: 18px;
      height: 18px;
    }

    /* ---------- Footer ---------- */
    footer {
      padding: 28px 24px;
      border-top: 1px solid var(--line);
      background: var(--black);
    }

    .footer-inner {
      max-width: var(--wrap);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--gray);
    }

    .copy {
      font-size: 1.87em;
      /* lo agranda relativo al texto que lo rodea */
      line-height: 1;
      vertical-align: -0.34em;
      /* ajuste fino para que no quede "flotando" arriba */
    }

    /* ---------- Floating WhatsApp ---------- */
    .wa-float {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--red);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(226, 36, 28, 0.35);
      z-index: 50;
      transition: transform .18s ease;
    }

    .wa-float:hover {
      transform: scale(1.06);
    }

    .wa-float svg {
      width: 26px;
      height: 26px;
    }

    .wa-tooltip {
      position: absolute;
      right: 68px;
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: var(--white);
      color: var(--black);
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      letter-spacing: .04em;
      white-space: nowrap;
      padding: 8px 12px;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }

    .wa-tooltip::after {
      content: '';
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 5px 0 5px 5px;
      border-style: solid;
      border-color: transparent transparent transparent var(--white);
    }

    .wa-float:hover .wa-tooltip,
    .wa-float:focus-visible .wa-tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    /* Pantallas tactiles no tienen "hover" real: se oculta para evitar que quede
     visible pegada despues de un toque. */
    @media (hover:none) {
      .wa-tooltip {
        display: none;
      }
    }

    /* ---------- Language visibility ---------- */
    [data-lang="es"] .en {
      display: none;
    }

    [data-lang="en"] .es {
      display: none;
    }

    /* ---------- Responsive ---------- */
    @media (max-width:760px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .hero-content {
        padding-top: 110px;
        padding-bottom: 48px;
      }

      section {
        padding: 64px 20px;
      }
    }