/* ══════════════════════════════════════════════
       RESET & BASE
    ══════════════════════════════════════════════ */
    *, *::before, *::after {
      margin: 0; padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg:        #0d0d0d;
      --bg-alt:    #121212;
      --white:     #f0ede8;
      --gray:      #666;
      --gray-lt:   #999;
      --display:   'Anton', sans-serif;
      --body:      'DM Sans', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--body);
      font-weight: 300;
      overflow-x: hidden;
      cursor: none;
    }

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

    /* ══════════════════════════════════════════════
       CURSOR
    ══════════════════════════════════════════════ */
    #cursor {
      width: 6px; height: 6px;
      background: var(--white);
      border-radius: 50%;
      position: fixed;
      top: 0; left: 0;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
    }

    #cursor-ring {
      width: 32px; height: 32px;
      border: 1px solid rgba(240, 237, 232, 0.35);
      border-radius: 50%;
      position: fixed;
      top: 0; left: 0;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
    }

    /* ══════════════════════════════════════════════
       NAV
    ══════════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      justify-content: center;
      gap: 3.5rem;
      padding: 1.6rem 2rem;
    }

    nav a {
      font-family: var(--body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--white);
      opacity: 0.7;
      transition: opacity 0.3s;
    }
    nav a:hover { opacity: 1; }
    nav a.active { opacity: 1; }
    #nav a { opacity: 1; }

    /* ══════════════════════════════════════════════
       HERO — (MI HISTORIA)
       Título gigante, full viewport width, centrado
    ══════════════════════════════════════════════ */
    #page-hero {
      padding-top: 5rem;
      padding-bottom: 10vw;
    }

    .hero-title-wrap {
      overflow: hidden;
      padding: 0 2rem;
    }

    .hero-title {
      font-family: var(--display);
      font-size: clamp(5rem, 18.5vw, 17rem);
      line-height: 0.88;
      letter-spacing: -0.02em;
      text-align: center;
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════════
       CONTENT — 3 columnas + foto
    ══════════════════════════════════════════════ */
    #historia-content {
      padding: 0 3rem 9rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 3.5rem;
    }

    .historia-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr 1.6fr auto;
      gap: 4rem;
      align-items: start;
    }

    /* Columna 1 — titular */
    .historia-col-heading {
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-color: rgba(240, 237, 232, 0.6);
      color: var(--white);
      max-width: 18ch;
    }

    /* Columnas 2 y 3 — textos */
    .historia-col-text p {
      font-size: 0.7rem;
      line-height: 1.9;
      color: var(--gray-lt);
    }

    /* Columna 4 — foto */
    .historia-col-photo {
      width: clamp(100px, 18vw, 180px);
      flex-shrink: 0;
    }

    .historia-col-photo .ph-historia {
      width: 100%;
      aspect-ratio: 3 / 4;
      background:
        radial-gradient(ellipse 60% 55% at 45% 30%, rgba(200, 200, 200, 0.08) 0%, transparent 65%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 50%, #141414 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .historia-col-photo .ph-historia::after {
      content: 'FOTO';
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.12);
    }

    /* ══════════════════════════════════════════════
       TRABAJEMOS JUNTOS
    ══════════════════════════════════════════════ */
    #contacto {
      padding: 7rem 3rem 6rem;
      background: var(--bg);
    }

    .contact-title-wrap { overflow: hidden; }

    .contact-title {
      font-family: var(--display);
      font-size: clamp(3rem, 8.5vw, 7.5rem);
      line-height: 0.9;
      letter-spacing: -0.01em;
      max-width: 9ch;
      margin-bottom: 5rem;
    }

    .contact-photo {
      width: clamp(100px, 18vw, 180px);
      margin: 0 auto 5rem;
      aspect-ratio: 2 / 3;
      overflow: hidden;
    }

    .ph-contact {
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #1c1c1c 0%, #2a2a2a 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 1rem;
    }
    .ph-contact::after {
      content: 'CONTACT PHOTO';
      font-size: 0.5rem;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.15);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    .contact-grid p {
      font-size: 0.7rem;
      line-height: 1.85;
      color: var(--gray-lt);
    }

    .link {
      display: inline-block;
      margin-top: 1.5rem;
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: var(--white);
      border-bottom: 1px solid rgba(240,237,232,0.3);
      padding-bottom: 0.15rem;
      transition: border-color 0.3s;
    }
    .link:hover { border-color: var(--white); }

    /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    footer {
      padding: 3.5rem 3rem 2rem;
      background: #0a0a0a;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .footer-title-wrap { overflow: hidden; }

    .footer-title {
      font-family: var(--display);
      font-size: clamp(5rem, 17vw, 14rem);
      line-height: 0.88;
      letter-spacing: -0.02em;
      margin-bottom: 2rem;
    }

    .footer-bottom {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gray);
    }

    .footer-bottom .stars {
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      color: var(--white);
      text-align: center;
    }

    .footer-bottom span:last-child { text-align: right; }


    /* ══════════════════════════════════════════════
       RESPONSIVE — breakpoints: 1024 · 768
    ══════════════════════════════════════════════ */

    @media (hover: none), (pointer: coarse) {
      body         { cursor: auto; }
      #cursor,
      #cursor-ring { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:        0.01ms !important;
        transition-duration:       0.01ms !important;
        animation-iteration-count: 1      !important;
      }
    }

    /* ── 1024px ─────────────────────────────── */
    @media (max-width: 1024px) {
      /* La cuadrícula de 4 cols pasa a 2×2 */
      .historia-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg, 2rem);
      }
      .historia-col-photo { width: clamp(80px, 15vw, 180px); }
    }

    /* ── 768px ──────────────────────────────── */
    @media (max-width: 768px) {
      /* NAV */
      nav {
        flex-wrap:       wrap;
        gap:             0.5rem 1.4rem;
        padding:         0.9rem var(--px, 1rem);
        justify-content: center;
      }

      /* PAGE HERO */
      #page-hero       { padding-top: 5rem; }
      .hero-title-wrap { padding: 0 var(--px, 1rem); }

      .hero-title {
        font-size:   clamp(2.5rem, 14vw, 6rem);
        white-space: normal;
      }

      /* CONTENT */
      #historia-content {
        padding-left:   var(--px, 1rem);
        padding-right:  var(--px, 1rem);
        padding-bottom: var(--space-2xl, 3rem);
      }

      .historia-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 2rem);
      }

      .historia-col-photo {
        width:         100%;
        max-width:     220px;
        margin-inline: auto;
      }

      /* CONTACTO */
      #contacto      { padding: var(--space-2xl, 3rem) var(--px, 1rem) var(--space-xl, 2.5rem); }
      .contact-title { margin-bottom: var(--space-xl, 2.5rem); }

      .contact-grid {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
      }
      .contact-grid > div:empty { display: none; }

      /* FOOTER */
      footer { padding: var(--space-xl, 2rem) var(--px, 1rem) var(--space-md, 1rem); }
    }

    /* ── 480px ──────────────────────────────── */
    @media (max-width: 480px) {
      .footer-bottom {
        grid-template-columns: 1fr;
        text-align:            center;
        gap:                   0.4rem;
      }
      .footer-bottom span:last-child { text-align: center; }
    }