:root {
      --ink: #4f5747;
      --ink-deep: #2f352d;
      --sage: #8e9b68;
      --sage-soft: #dfe5d2;
      --lavender: #b9b0c9;
      --sand: #f4f1e9;
      --paper: #fbfaf6;
      --white: #fff;
      --line: rgba(79, 87, 71, .18);
      --shadow: 0 18px 60px rgba(44, 51, 42, .12);
      --serif: "Cormorant Garamond", Georgia, serif;
      --sans: "Inter", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink-deep);
      background: var(--paper);
      font-family: var(--sans);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    .skip-link {
      position: fixed;
      left: 1rem;
      top: -5rem;
      z-index: 9999;
      padding: .85rem 1rem;
      background: var(--ink-deep);
      color: var(--white);
      border-radius: 999px;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 1rem; }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      display: grid;
      grid-template-columns: 220px 1fr auto;
      align-items: center;
      gap: 2rem;
      min-height: 92px;
      padding: 16px clamp(20px, 4vw, 72px);
      transition: background .35s ease, box-shadow .35s ease, min-height .35s ease;
    }
    .site-header.is-scrolled {
      min-height: 72px;
      background: rgba(251, 250, 246, .9);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 1px 0 var(--line);
    }
    .brand { width: min(190px, 38vw); }
    .brand img { width: 100%; height: auto; }
    .main-nav { justify-self: center; }
    .main-nav ul {
      display: flex;
      gap: clamp(18px, 2vw, 34px);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .main-nav a {
      position: relative;
      font-size: .79rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-deep);
    }
    .main-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -.45rem;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .28s ease;
    }
    .main-nav a:hover::after,
    .main-nav a:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    .header-cta,
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 1.3rem;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .header-cta,
    .button--solid {
      color: var(--white);
      background: var(--ink-deep);
    }
    .header-cta:hover,
    .button--solid:hover { transform: translateY(-2px); background: #424a3f; }
    .button--ghost {
      color: var(--ink-deep);
      border-color: rgba(47, 53, 45, .45);
      background: rgba(255, 255, 255, .28);
      backdrop-filter: blur(10px);
    }
    .button--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.72); }

    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.62);
      backdrop-filter: blur(12px);
      cursor: pointer;
    }
    .menu-toggle span {
      display: block;
      width: 20px;
      height: 1px;
      margin: 5px auto;
      background: var(--ink-deep);
      transition: transform .25s ease, opacity .25s ease;
    }

    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background: #ece8df;
    }
    .hero__image,
    .hero__veil {
      position: absolute;
      inset: 0;
    }
    .hero__image {
      z-index: -3;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
    .hero__veil {
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(250,248,242,.08) 0%, rgba(250,248,242,.08) 38%, rgba(250,248,242,.24) 58%, rgba(250,248,242,.68) 100%),
        linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.02) 28%, rgba(32,37,31,.10) 100%);
    }
    .hero__content {
      width: min(760px, 48vw);
      margin-left: auto;
      margin-right: clamp(28px, 7vw, 120px);
      padding-top: 110px;
      text-align: left;
    }
    .eyebrow {
      margin: 0 0 1rem;
      font-size: .77rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .hero h1 {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(5.2rem, 10vw, 10.4rem);
      font-weight: 500;
      line-height: .78;
      letter-spacing: .08em;
      color: rgba(65, 73, 61, .92);
      text-transform: uppercase;
    }
    .hero__statement {
      max-width: 650px;
      margin: 1.6rem 0 0;
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 3.35rem);
      line-height: 1.03;
      color: var(--ink-deep);
    }
    .hero__text {
      max-width: 560px;
      margin: 1.2rem 0 0;
      font-size: clamp(.98rem, 1.2vw, 1.12rem);
      color: rgba(47,53,45,.82);
    }
    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      margin-top: 1.9rem;
    }
    .hero__scroll {
      position: absolute;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      display: grid;
      place-items: center;
      gap: 7px;
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(47,53,45,.75);
    }
    .hero__scroll::after {
      content: "";
      width: 1px;
      height: 34px;
      background: currentColor;
      animation: pulse 1.8s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .45; }
      50% { transform: scaleY(1); opacity: 1; }
    }

    .section { padding: clamp(88px, 10vw, 160px) clamp(22px, 6vw, 100px); }
    .section--paper { background: var(--paper); }
    .section--sand { background: var(--sand); }
    .section--ink { background: var(--ink-deep); color: var(--white); }
    .container { width: min(1180px, 100%); margin: 0 auto; }
    .section-intro {
      display: grid;
      grid-template-columns: .8fr 1.4fr;
      gap: clamp(36px, 8vw, 120px);
      align-items: start;
    }
    .section-kicker {
      font-size: .75rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .section-title {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(3rem, 6vw, 6.4rem);
      font-weight: 500;
      line-height: .95;
      letter-spacing: -.02em;
    }
    .lead {
      margin: 1.2rem 0 0;
      max-width: 720px;
      font-size: clamp(1.05rem, 1.5vw, 1.25rem);
      color: rgba(47,53,45,.76);
    }

    .values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: clamp(60px, 8vw, 110px);
      background: var(--line);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .value {
      min-height: 320px;
      padding: clamp(34px, 5vw, 64px);
      background: var(--paper);
    }
    .value__number { font-size: .75rem; letter-spacing: .18em; color: var(--sage); }
    .value h3 {
      margin: 3rem 0 1rem;
      font-family: var(--serif);
      font-size: clamp(2.4rem, 4vw, 4rem);
      font-weight: 500;
    }
    .value p { max-width: 30ch; color: rgba(47,53,45,.72); }

    .quote {
      width: min(1000px, 100%);
      margin: 0 auto;
      text-align: center;
    }
    .quote blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(3.2rem, 7vw, 7.2rem);
      font-weight: 400;
      line-height: .92;
      color: #eef0e7;
    }
    .quote p {
      margin: 2rem auto 0;
      max-width: 620px;
      color: rgba(255,255,255,.72);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      margin-top: clamp(60px, 8vw, 100px);
      background: var(--line);
    }
    .process-step {
      min-height: 310px;
      padding: 34px;
      background: var(--sand);
    }
    .process-step span { font-size: .75rem; color: var(--sage); letter-spacing: .18em; }
    .process-step h3 {
      margin: 4rem 0 1rem;
      font-family: var(--serif);
      font-size: 2.25rem;
      font-weight: 500;
      line-height: 1;
    }
    .process-step p { color: rgba(47,53,45,.72); }

    .split {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(42px, 8vw, 110px);
      align-items: center;
    }
    .split__media {
      min-height: 560px;
      border-radius: 180px 180px 20px 20px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .split__media img {
      width: 100%;
      height: 100%;
      min-height: 560px;
      object-fit: cover;
      object-position: left center;
      transform: scale(1.02);
    }
    .split__copy h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(3.3rem, 6vw, 6.4rem);
      font-weight: 500;
      line-height: .95;
    }
    .split__copy p { margin-top: 1.4rem; color: rgba(47,53,45,.75); }
    .split__copy .button { margin-top: 1.4rem; }

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(60px, 8vw, 110px);
      border-radius: 34px;
      background: linear-gradient(135deg, #e7eadb, #eee8f2 58%, #f6f2ea);
    }
    .cta-panel::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -100px;
      top: -160px;
      border: 1px solid rgba(142,155,104,.3);
      border-radius: 50%;
    }
    .cta-panel h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 900px;
      font-family: var(--serif);
      font-size: clamp(3.2rem, 7vw, 7.1rem);
      font-weight: 500;
      line-height: .9;
    }
    .cta-panel p { position: relative; z-index: 1; max-width: 600px; margin: 1.5rem 0 0; }
    .cta-panel .button { position: relative; z-index: 1; margin-top: 1.8rem; }

    footer {
      padding: 34px clamp(22px, 6vw, 100px) 48px;
      background: var(--paper);
      border-top: 1px solid var(--line);
    }
    .footer-inner {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: end;
    }
    .footer-brand { width: 150px; }
    .footer-meta { text-align: right; font-size: .78rem; color: rgba(47,53,45,.6); }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1060px) {
      .site-header { grid-template-columns: 180px 1fr auto; }
      .main-nav { display: none; }
      .menu-toggle { display: block; justify-self: end; }
      .header-cta { display: none; }
      .main-nav.is-open {
        position: fixed;
        inset: 78px 18px auto;
        display: block;
        padding: 28px;
        background: rgba(251,250,246,.97);
        border-radius: 20px;
        box-shadow: var(--shadow);
      }
      .main-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 20px; }
      .hero__content { width: min(640px, 58vw); margin-right: 5vw; }
      .process-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 760px) {
      .site-header { min-height: 74px; padding: 12px 18px; grid-template-columns: 155px 1fr auto; }
      .hero { min-height: 100svh; align-items: end; }
      .hero__image { object-position: 37% center; }
      .hero__veil {
        background:
          linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.04) 34%, rgba(32,37,31,.22) 100%),
          linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.48) 100%);
      }
      .hero__content {
        width: auto;
        margin: 0;
        padding: 130px 22px 92px;
      }
      .hero h1 { font-size: clamp(4rem, 21vw, 7rem); line-height: .84; }
      .hero__statement { max-width: 12ch; font-size: clamp(2rem, 9vw, 3.2rem); }
      .hero__text { max-width: 31ch; }
      .hero__actions { gap: .65rem; }
      .button { min-height: 46px; padding-inline: 1rem; }
      .section-intro,
      .split,
      .footer-inner { grid-template-columns: 1fr; }
      .values,
      .process-grid { grid-template-columns: 1fr; }
      .value { min-height: auto; }
      .split__media,
      .split__media img { min-height: 420px; }
      .split__media { border-radius: 120px 120px 18px 18px; }
      .footer-meta { text-align: left; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }


    /* ===== PASO 2 · CONTINUACIÓN EDITORIAL BAJO EL HERO ===== */
    .mirar-intro {
      position: relative;
      overflow: hidden;
      padding: clamp(7rem, 12vw, 12rem) 0 clamp(6rem, 10vw, 10rem);
      background: #fbfaf7;
    }
    .mirar-intro::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 180px;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(244,241,233,.9), rgba(251,250,247,0));
    }
    .mirar-intro__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
      align-items: center;
      gap: clamp(4rem, 9vw, 10rem);
    }
    .mirar-intro__copy { max-width: 690px; }
    .mirar-intro__kicker {
      display: inline-flex;
      align-items: center;
      gap: .9rem;
      margin-bottom: 1.4rem;
      color: #7f9272;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .mirar-intro__kicker::before {
      content: "";
      width: 44px;
      height: 1px;
      background: currentColor;
    }
    .mirar-intro h2 {
      max-width: 700px;
      margin: 0;
      color: #2f302c;
      font-family: var(--serif);
      font-size: clamp(3.5rem, 6.4vw, 7.1rem);
      font-weight: 400;
      line-height: .96;
      letter-spacing: -.025em;
    }
    .mirar-intro__text {
      max-width: 610px;
      margin: 2rem 0 0;
      color: #55594f;
      font-size: clamp(1.05rem, 1.35vw, 1.35rem);
      line-height: 1.85;
    }
    .mirar-intro__text p { margin: 0 0 1.15rem; }
    .mirar-intro__media {
      position: relative;
      min-height: clamp(500px, 62vw, 760px);
      overflow: hidden;
      border-radius: 30px;
      box-shadow: 0 28px 75px rgba(71, 75, 64, .13);
      background: #e8e2d8;
    }
    .mirar-intro__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 48% center;
      filter: saturate(.72) contrast(.96) brightness(1.05);
      transform: scale(1.015);
    }
    .mirar-intro__caption {
      position: absolute;
      right: 1.35rem;
      bottom: 1.25rem;
      padding: .55rem .75rem;
      border-radius: 999px;
      color: #f8f7f2;
      background: rgba(47,48,44,.48);
      backdrop-filter: blur(10px);
      font-size: .66rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .mirar-pillars {
      padding: clamp(5.5rem, 9vw, 9rem) 0;
      border-top: 1px solid rgba(47,48,44,.1);
      border-bottom: 1px solid rgba(47,48,44,.1);
      background: #f4f1e9;
    }
    .mirar-pillars__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .mirar-pillar {
      min-height: 290px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1rem clamp(1.5rem, 3vw, 3.5rem);
    }
    .mirar-pillar + .mirar-pillar { border-left: 1px solid rgba(47,48,44,.14); }
    .mirar-pillar__mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(127,146,114,.58);
      border-radius: 50%;
      color: #7f9272;
      font-family: var(--serif);
      font-size: 1.15rem;
    }
    .mirar-pillar h3 {
      margin: 2.5rem 0 .55rem;
      color: #4f5747;
      font-family: var(--serif);
      font-size: clamp(2.8rem, 4.7vw, 5.3rem);
      font-weight: 400;
      line-height: .95;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .mirar-pillar p {
      max-width: 320px;
      margin: 0;
      color: #62665d;
      font-size: .96rem;
      line-height: 1.7;
    }

    .mirar-philosophy {
      padding: clamp(7rem, 12vw, 12rem) 0;
      background: #fbfaf7;
    }
    .mirar-philosophy__grid {
      display: grid;
      grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
      align-items: center;
      gap: clamp(4rem, 8vw, 9rem);
    }
    .mirar-philosophy__media {
      min-height: clamp(420px, 48vw, 620px);
      overflow: hidden;
      border-radius: 4px 90px 4px 4px;
      background: #e6e1d6;
    }
    .mirar-philosophy__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(.68) contrast(.95) brightness(1.06);
    }
    .mirar-philosophy__copy { max-width: 760px; }
    .mirar-philosophy__copy .section-kicker { color: #7f9272; }
    .mirar-philosophy__copy h2 {
      margin: 1.1rem 0 1.8rem;
      color: #2f302c;
      font-family: var(--serif);
      font-size: clamp(3.6rem, 6vw, 7rem);
      font-weight: 400;
      line-height: .98;
      letter-spacing: -.03em;
    }
    .mirar-philosophy__copy p {
      max-width: 620px;
      margin: 0;
      color: #55594f;
      font-size: clamp(1.15rem, 1.65vw, 1.6rem);
      line-height: 1.7;
    }
    .mirar-philosophy__rule {
      width: 64px;
      height: 1px;
      margin: 2.25rem 0;
      background: #7f9272;
    }

    @media (max-width: 960px) {
      .mirar-intro__grid,
      .mirar-philosophy__grid { grid-template-columns: 1fr; }
      .mirar-intro__media { min-height: 560px; }
      .mirar-philosophy__media { order: 2; min-height: 480px; }
      .mirar-pillars__grid { grid-template-columns: 1fr; }
      .mirar-pillar { min-height: 240px; }
      .mirar-pillar + .mirar-pillar {
        border-left: 0;
        border-top: 1px solid rgba(47,48,44,.14);
      }
    }
    @media (max-width: 640px) {
      .mirar-intro { padding-top: 6rem; }
      .mirar-intro__grid { gap: 3.25rem; }
      .mirar-intro__media { min-height: 470px; border-radius: 22px; }
      .mirar-pillar { padding: 2.3rem .2rem; }
      .mirar-philosophy__media { min-height: 390px; border-radius: 3px 48px 3px 3px; }
    }

  

/* ENTREGA 3 */
:focus-visible{outline:3px solid rgba(142,155,104,.55);outline-offset:4px}
.stories{position:relative}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(54px,7vw,96px)}
.story-card{display:flex;flex-direction:column;min-height:360px;padding:clamp(28px,4vw,48px);border:1px solid var(--line);background:var(--sand);transition:transform .3s ease,box-shadow .3s ease}.story-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.story-card__quote{margin:0 0 2rem;font-family:var(--serif);font-size:clamp(1.8rem,2.8vw,2.75rem);line-height:1.05;color:var(--ink-deep)}.story-card>p:not(.story-card__quote){color:rgba(47,53,45,.72)}.story-card>span{margin-top:auto;padding-top:2rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(48px,8vw,120px);align-items:start}.faq-list{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{position:relative;padding:26px 54px 26px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.15}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:8px;top:20px;font-family:var(--sans);font-size:1.6rem;font-weight:300;transition:transform .25s}.faq details[open] summary::after{transform:rotate(45deg)}.faq details p{margin:0;padding:0 52px 28px 0;color:rgba(47,53,45,.72)}
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,8vw,110px);align-items:start}.contact__direct{margin-top:2rem}.contact__direct a{border-bottom:1px solid currentColor}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:clamp(26px,4vw,48px);background:var(--sand);border:1px solid var(--line)}.form-row{display:grid;gap:8px}.form-row--full,.form-consent,.contact-form>.button,.form-status{grid-column:1/-1}.form-row label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.form-row label span{font-weight:400;text-transform:none;letter-spacing:0}.form-row input,.form-row textarea{width:100%;border:0;border-bottom:1px solid rgba(47,53,45,.35);border-radius:0;padding:12px 2px;background:transparent;color:var(--ink-deep);outline:none;transition:border-color .2s}.form-row input:focus,.form-row textarea:focus{border-color:var(--sage)}.form-row textarea{resize:vertical;min-height:140px}.form-consent{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:rgba(47,53,45,.72)}.form-consent input{margin-top:5px}.contact-form>.button{justify-self:start}.form-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.form-status{min-height:1.5em;margin:0;font-size:.9rem}.form-status.is-error{color:#8a3434}.form-status.is-success{color:#40633d}
.footer-inner--expanded{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}.footer-column{display:grid;gap:10px}.footer-column strong{margin-bottom:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}.footer-column a{color:rgba(255,255,255,.72)}.footer-column a:hover{color:#fff}.footer-column--brand p{color:rgba(255,255,255,.62)}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;padding-top:28px;margin-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:.78rem;color:rgba(255,255,255,.6)}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}.story-card{min-height:0}.faq__grid,.contact__grid{grid-template-columns:1fr}.footer-inner--expanded{grid-template-columns:1fr 1fr}.footer-column--brand,.footer-bottom{grid-column:1/-1}.contact-form{grid-template-columns:1fr}.form-row{grid-column:1/-1}}
@media(max-width:600px){.footer-inner--expanded{grid-template-columns:1fr}.footer-column,.footer-column--brand,.footer-bottom{grid-column:1}.footer-bottom{flex-direction:column}.contact-form{padding:24px 18px}.faq summary{padding-right:42px}.hero__content{width:auto;margin:0;padding:120px 22px 70px}.hero h1{font-size:clamp(4.4rem,24vw,7rem)}}

/* ENTREGA 4 — producción, accesibilidad y rendimiento */
.hero picture { position: absolute; inset: 0; z-index: -3; }
.hero picture .hero__image { position: absolute; inset: 0; }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 4px; }
.contact__note { margin: .65rem 0 0; font-size: .9rem; color: rgba(47,53,45,.68); }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form button[disabled] { opacity: .65; cursor: wait; transform: none; }
img[loading="lazy"] { content-visibility: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 560px) {
  .hero__actions .button { width: 100%; }
  .contact-form .button { width: 100%; }
  .footer-bottom { gap: .8rem; align-items: flex-start; }
}

/* ENTREGA 5 — claridad, conversión y refinamiento responsive */
.expectations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(52px, 7vw, 92px);
}
.expectation-card {
  position: relative;
  min-height: 100%;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.48);
}
.expectation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--sage);
}
.expectation-card--no::before { background: var(--lavender); }
.expectation-card__label {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
}
.expectation-card--no .expectation-card__label { color: #776b88; }
.expectation-card ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.expectation-card li { position: relative; padding-left: 1.8rem; color: rgba(47,53,45,.78); }
.expectation-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}
.cta-band { padding: clamp(54px, 7vw, 86px) 0; background: var(--ink-deep); color: var(--paper); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.cta-band .section-kicker { color: rgba(255,255,255,.62); }
.cta-band h2 { max-width: 800px; margin: .8rem 0 0; font-family: var(--serif); font-size: clamp(2.5rem, 4.5vw, 5rem); font-weight: 400; line-height: 1; }
.cta-band .button { flex: 0 0 auto; background: var(--paper); color: var(--ink-deep); border-color: var(--paper); }
.cta-band .button:hover { background: transparent; color: var(--paper); }
.form-help { grid-column: 1/-1; margin: 0 0 .35rem; font-size: .84rem; color: rgba(47,53,45,.68); }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: #8a3434; }
.form-row input:focus-visible, .form-row textarea:focus-visible { outline: 2px solid rgba(142,155,104,.32); outline-offset: 3px; }
.main-nav a[aria-current="true"] { color: var(--sage); }
.main-nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .expectations__grid { grid-template-columns: 1fr; }
  .cta-band__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .expectation-card { padding: 28px 24px; }
  .cta-band .button { width: 100%; }
}


/* V2.1 — WhatsApp Business y sección ¿Es MIRAR para ti? */
.button--whatsapp { white-space: nowrap; }
.fit__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 7vw, 88px);
  background: var(--line);
  border: 1px solid var(--line);
}
.fit-card {
  min-height: 250px;
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--paper);
}
.fit-card span {
  display: block;
  margin-bottom: 3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--sage);
}
.fit-card p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink-deep);
}
.fit__closing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  margin-top: clamp(36px, 5vw, 58px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.fit__closing h3 {
  margin: 0 0 .55rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 400;
}
.fit__closing p { max-width: 720px; margin: 0; color: rgba(47,53,45,.72); }
.contact__whatsapp {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.contact__whatsapp strong {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
}
.contact__whatsapp p { max-width: 540px; margin: 0 0 1.2rem; color: rgba(47,53,45,.72); }
.contact__whatsapp .button { display: inline-flex; }
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  width: 60px;
  height: 60px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;

  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.whatsapp-float span {
  display: none;
}
@media (max-width: 1050px) {
  .fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-card:last-child { grid-column: 1/-1; min-height: 190px; }
}
@media (max-width: 680px) {
  .fit__grid { grid-template-columns: 1fr; }
  .fit-card, .fit-card:last-child { grid-column: auto; min-height: 0; }
  .fit-card span { margin-bottom: 1.4rem; }
  .fit__closing { align-items: flex-start; flex-direction: column; }
  .fit__closing .button, .contact__whatsapp .button { width: 100%; }
  .whatsapp-float { width: 56px; height: 56px; min-height: 56px; padding: 0; justify-content: center; }
  .whatsapp-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.site-header {
  grid-template-columns: 1fr auto;
  min-height: 78px;
  padding: 8px 18px;
}

.brand {
  width: min(155px, 44vw);
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

.header-cta {
  display: none;
}}

/* MIRAR V2.4 — MOBILE HERO Safari / Chrome */
@media (max-width: 680px) {
  html, body { width: 100%; overflow-x: hidden; }

  .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    min-height: 0;
    padding: max(18px, env(safe-area-inset-top)) 18px 10px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand { width: 132px; max-width: 38vw; }
  .brand img { display:block; width:100%; height:auto; }
  .main-nav, .header-cta { display:none; }
  .menu-toggle {
    display:block;
    width:46px; height:46px;
    margin-top:0;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .main-nav.is-open {
    display:block;
    position:absolute;
    top:76px; left:14px; right:14px;
    padding:18px;
    background:rgba(250,248,242,.97);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(30,35,28,.14);
  }
  .main-nav.is-open ul { display:grid; gap:8px; }
  .main-nav.is-open a { display:block; padding:10px 8px; }

  .hero {
    position:relative;
    width:100%;
    height:100svh;
    min-height:640px;
    max-height:none;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0;
    background:#ece8df;
  }
  .hero picture { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:0; }
  .hero__image {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:34% center;
    transform:none !important;
  }
  .hero__veil {
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(90deg, rgba(250,248,242,.02) 0%, rgba(250,248,242,.08) 42%, rgba(250,248,242,.74) 67%, rgba(250,248,242,.94) 100%),
      linear-gradient(180deg, rgba(250,248,242,.10) 0%, rgba(250,248,242,0) 50%, rgba(31,38,30,.08) 100%);
  }
  .hero__content {
    position:relative;
    z-index:2;
    width:47vw;
    max-width:205px;
    margin:0 14px 0 auto;
    padding:calc(76px + env(safe-area-inset-top)) 0 max(58px, calc(44px + env(safe-area-inset-bottom)));
    text-align:left;
  }
  .hero .eyebrow {
    margin:0 0 .55rem;
    font-size:.52rem;
    letter-spacing:.14em;
    line-height:1.35;
    white-space:normal;
  }
  .hero h1 {
    margin:0;
    font-size:clamp(2.75rem, 13vw, 4rem);
    line-height:.86;
    letter-spacing:.035em;
  }
  .hero__statement {
    max-width:10ch;
    margin:.72rem 0 0;
    font-size:clamp(1.28rem, 5.8vw, 1.8rem);
    line-height:1.03;
  }
  .hero__text {
    max-width:24ch;
    margin:.72rem 0 0;
    font-size:clamp(.68rem, 2.9vw, .82rem);
    line-height:1.45;
    color:rgba(40,46,38,.94);
  }
  .hero .button--whatsapp {
    display:inline-flex;
    width:auto;
    min-height:42px;
    margin-top:.85rem;
    padding:0 14px;
    border-radius:999px;
    font-size:.56rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }
  .hero__scroll {
    left:50%; bottom:max(12px, env(safe-area-inset-bottom));
    transform:translateX(-50%);
    font-size:.54rem;
    letter-spacing:.16em;
    white-space:nowrap;
    z-index:3;
  }
  .whatsapp-float {
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, calc(10px + env(safe-area-inset-bottom)));
  }
}

@media (max-width: 390px) {
  .brand { width:122px; }
  .hero__image { object-position:33% center; }
  .hero__content { width:48vw; max-width:185px; margin-right:10px; }
  .hero h1 { font-size:clamp(2.55rem, 13vw, 3.35rem); }
  .hero__statement { font-size:clamp(1.18rem, 5.6vw, 1.55rem); }
  .hero__text { font-size:.68rem; line-height:1.4; }
  .hero .button--whatsapp { padding:0 11px; font-size:.52rem; }
}

/* Safari iOS: fallback when svh is not available */
@supports not (height: 100svh) {
  @media (max-width: 680px) {
    .hero { height:100vh; }
  }
}