@layer pages {

  .p-contacto [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

  .p-contacto__hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    overflow: clip;
  }

  .p-contacto__hero .eyebrow { margin-bottom: var(--space-4); }

  .p-contacto__title {
    display: grid;
    row-gap: 0.02em;
    font-size: clamp(44px, 8.6vw, 118px);
    font-weight: 345;
    line-height: 0.97;
  }

  .p-contacto__title-line {
    display: block;
    white-space: nowrap;
    width: fit-content;
  }

  .p-contacto__lede {
    font-size: clamp(16.5px, 1.35vw, 20px);
    color: var(--muted);
  }

  .p-contacto__routes {
    position: relative;
    overflow: clip;
    padding-block: clamp(72px, 11svh, 132px);
    background:
      radial-gradient(42rem 28rem at 6% 22%, color-mix(in srgb, var(--blush) 42%, transparent), transparent 72%),
      radial-gradient(38rem 24rem at 96% 88%, color-mix(in srgb, var(--cream-deep) 68%, transparent), transparent 72%),
      var(--paper);
  }

  .p-contacto__routes::before {
    content: "conversemos";
    position: absolute;
    right: -.04em;
    top: -.12em;
    color: color-mix(in srgb, var(--mist-strong) 72%, transparent);
    font: italic 330 clamp(94px, 17vw, 250px) / 1 var(--font-display);
    letter-spacing: -.055em;
    pointer-events: none;
  }

  .p-contacto__routes > .container { position: relative; z-index: 1; }

  .p-contacto__routes .eyebrow { margin-bottom: var(--space-3); }

  .p-contacto__routes h2 {
    font-size: clamp(34px, 4.2vw, 58px);
    margin-bottom: clamp(26px, 5svh, 50px);
  }

  .p-contacto__routes-list {
    counter-reset: contact-route;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .p-contacto__routes-list > li {
    counter-increment: contact-route;
    min-width: 0;
  }

  .p-contacto__route {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "kicker"
      "title"
      "note"
      "arrow";
    align-items: start;
    gap: 10px;
    min-height: clamp(270px, 25vw, 340px);
    padding: clamp(24px, 2.6vw, 36px);
    border: 1px solid color-mix(in srgb, var(--brass) 25%, transparent);
    border-radius: clamp(22px, 2vw, 30px);
    background:
      linear-gradient(145deg, rgb(255 252 248 / 94%), color-mix(in srgb, var(--porcelain) 82%, transparent));
    box-shadow:
      inset 0 1px rgb(255 255 255 / 72%),
      0 28px 68px -54px rgb(67 16 31 / 54%);
    text-decoration: none;
    transition:
      transform var(--dur-enter) var(--ease-emph),
      border-color var(--dur-ui) var(--ease-out),
      box-shadow var(--dur-enter) var(--ease-out);
  }

  .p-contacto__route::before {
    content: "0" counter(contact-route);
    position: absolute;
    right: -.02em;
    top: -.16em;
    z-index: -1;
    color: color-mix(in srgb, var(--blush) 42%, transparent);
    font: italic 330 clamp(88px, 9vw, 138px) / 1 var(--font-display);
    letter-spacing: -.06em;
    transition: color var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-emph);
  }

  .p-contacto__route::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(32rem circle at 100% 0%, color-mix(in srgb, var(--blush) 44%, transparent), transparent 58%);
    opacity: 0;
    transition: opacity var(--dur-enter) var(--ease-out);
  }

  .p-contacto__route-kicker {
    grid-area: kicker;
    color: var(--brass-text);
    font: 600 12px / 1.3 var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .p-contacto__route-title {
    grid-area: title;
    max-width: 10ch;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.04;
    font-weight: 380;
    letter-spacing: -0.015em;
    color: var(--cocoa);
    transition: color var(--dur-ui) var(--ease-out), transform var(--dur-enter) var(--ease-emph);
  }

  .p-contacto__route-note {
    grid-area: note;
    align-self: end;
    max-width: 32ch;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
  }

  .p-contacto__route-arrow {
    grid-area: arrow;
    display: grid;
    width: 42px;
    height: 42px;
    margin-top: 6px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--wine) 24%, transparent);
    border-radius: 50%;
    color: var(--wine);
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    transition: color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), transform var(--dur-enter) var(--ease-emph);
  }

  @media (hover: hover) {
    .p-contacto__route:hover {
      border-color: color-mix(in srgb, var(--brass) 58%, transparent);
      box-shadow: inset 0 1px rgb(255 255 255 / 82%), 0 34px 74px -46px rgb(67 16 31 / 56%);
      transform: translateY(-8px);
    }

    .p-contacto__route:hover::before { color: color-mix(in srgb, var(--wine-soft) 18%, transparent); transform: translate(-5px, 5px); }
    .p-contacto__route:hover::after { opacity: 1; }
    .p-contacto__route:hover .p-contacto__route-title { color: var(--wine); transform: translateY(-2px); }

    /* El desplazamiento lo pone ya la flecha animada (motion.css §8). */
    .p-contacto__route:hover .p-contacto__route-arrow {
      color: var(--white);
      background: var(--wine);
    }
  }

  .p-contacto__legal {
    padding-block: var(--space-6) clamp(64px, 12svh, 140px);
  }

  .p-contacto__legal h2 {
    font-size: clamp(30px, 3.8vw, 52px);
    margin-bottom: clamp(24px, 4svh, 44px);
  }

  .p-contacto__legal-items { border-top: 1px solid var(--hairline); }

  .p-contacto__legal-item { border-bottom: 1px solid var(--hairline); }

  .p-contacto__legal-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(18px, 3svh, 26px) 6px clamp(18px, 3svh, 26px) 0;
    cursor: pointer;
    list-style: none;
    font: 600 var(--text-body) / 1.4 var(--font-sans);
    color: var(--cocoa);
  }

  .p-contacto__legal-item summary::-webkit-details-marker { display: none; }

  .p-contacto__legal-item summary svg { flex: 0 0 auto; }

  .p-contacto__legal-item summary:hover { color: var(--wine); }

  .p-contacto__legal-item p {
    max-width: 68ch;
    padding-bottom: clamp(18px, 3svh, 26px);
    color: var(--muted);
  }

  .p-contacto__legal-item p a {
    color: var(--wine);
    text-underline-offset: 4px;
  }

  .p-contacto__legal-item:target summary { color: var(--wine); }

}

@layer pages {
  .p-contacto .p-contacto__hero::before,
  .p-contacto__hero::after { content: none; }

  .p-contacto__hero {
    min-height: max(720px, 92svh);
    padding-block: calc(var(--header-h) + clamp(54px, 8svh, 96px)) clamp(54px, 8svh, 92px);
  }

  .p-contacto__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
  }

  .p-contacto__hero-copy { position: relative; z-index: 2; }

  .p-contacto__hero-copy::before {
    content: "";
    position: absolute;
    left: -84px;
    top: -96px;
    width: 260px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--wine) 12%, transparent);
    border-radius: 49% 51% 45% 55% / 58% 43% 57% 42%;
    opacity: .6;
    pointer-events: none;
  }

  .p-contacto__title { font-size: clamp(54px, 6.8vw, 104px); }
  .p-contacto__title-line--shift { margin-inline-start: clamp(18px, 4.2vw, 78px); }
  .p-contacto__lede { max-width: 49ch; margin-top: clamp(26px, 4svh, 44px); }

  .p-contacto__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px clamp(18px, 2vw, 30px);
    margin-top: clamp(26px, 4svh, 42px);
  }

  .p-contacto__promise {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--muted);
    font-size: 12.5px;
  }

  .p-contacto__promise span {
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--wine);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--wine) 9%, transparent);
    animation: contacto-pulse 2.6s var(--ease-out) infinite;
  }

  @keyframes contacto-pulse {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--wine) 8%, transparent); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--wine) 0%, transparent); }
  }

  .p-contacto__hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1.08 / 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brass) 28%, transparent);
    border-radius: clamp(24px, 3.2vw, 48px) clamp(24px, 3.2vw, 48px) clamp(80px, 10vw, 150px) clamp(24px, 3.2vw, 48px);
    box-shadow: 0 42px 90px rgb(60 29 27 / 12%);
  }

  /* El pie es texto claro sobre foto: con el 24% de antes se perdía en
     escenas luminosas. El velo baja solo donde vive el texto. */
  .p-contacto__hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(174deg, transparent 44%, rgb(53 9 20 / 24%) 66%, rgb(40 6 15 / 66%));
    pointer-events: none;
  }

  .p-contacto__hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    transform: scale(1.02);
    transition: transform 1.4s var(--ease-emph), filter .8s var(--ease-out);
  }

  @media (hover: hover) {
    .p-contacto__hero-visual:hover img { transform: scale(1.075); filter: saturate(.9); }
  }

  .p-contacto__hero-visual figcaption {
    position: absolute;
    left: clamp(20px, 3vw, 42px);
    right: clamp(20px, 3vw, 42px);
    bottom: clamp(20px, 3vw, 38px);
    z-index: 1;
    max-width: 32ch;
    color: rgb(255 250 244 / 88%);
    font: 500 12px / 1.55 var(--font-sans);
  }

  .p-contacto__hero-visual figcaption span {
    display: block;
    color: var(--porcelain);
    font: italic 360 clamp(26px, 2.7vw, 42px) / 1.05 var(--font-display);
  }

  .p-contacto__studio {
    position: relative;
    padding-block: clamp(72px, 11svh, 132px);
    overflow: clip;
    background:
      radial-gradient(42rem 28rem at 96% 12%, rgb(234 216 221 / 38%), transparent 70%),
      var(--porcelain);
  }

  .p-contacto__studio::before {
    content: "mensaje";
    position: absolute;
    left: -.04em;
    top: .06em;
    color: color-mix(in srgb, var(--mist) 72%, transparent);
    font: italic 330 clamp(110px, 20vw, 300px) / 1 var(--font-display);
    letter-spacing: -.055em;
    pointer-events: none;
  }

  .p-contacto__studio > .container { position: relative; z-index: 1; }

  .p-contacto__studio-head {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(280px, .56fr);
    align-items: end;
    gap: 36px;
    margin-bottom: clamp(38px, 6svh, 68px);
  }

  .p-contacto__studio-head .eyebrow { margin-bottom: 14px; }
  .p-contacto__studio-head h2 { font-size: clamp(48px, 6.6vw, 94px); line-height: .94; }
  .p-contacto__studio-head > p { max-width: 48ch; color: var(--muted); }

  .p-contacto__studio-grid {
    display: grid;
    grid-template-columns: minmax(330px, .76fr) minmax(520px, 1.24fr);
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 34px);
  }

  .p-contacto__portrait {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brass) 24%, transparent);
    border-radius: var(--radius-story);
    background: var(--cream-light);
    box-shadow: var(--shadow-story);
  }

  .p-contacto__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    /* El correo es texto claro sobre un bordado dorado muy luminoso:
       el velo tiene que llegar sólido a la banda de texto. */
    background: linear-gradient(to bottom, transparent 32%, rgb(34 22 20 / 44%) 60%, rgb(26 15 13 / 86%));
    pointer-events: none;
  }

  .p-contacto__portrait > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 69% center;
  }

  .p-contacto__portrait-card {
    position: absolute;
    left: clamp(20px, 3vw, 38px);
    right: clamp(20px, 3vw, 38px);
    bottom: clamp(20px, 3vw, 38px);
    z-index: 1;
    color: var(--porcelain);
  }

  .p-contacto__portrait-card .eyebrow { color: #e0c5a9; margin-bottom: 10px; }
  .p-contacto__portrait-card > a {
    display: inline-block;
    max-width: 100%;
    color: var(--porcelain);
    font: 360 clamp(29px, 3vw, 48px) / 1 var(--font-display);
    letter-spacing: -.02em;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    overflow-wrap: anywhere;
  }

  .p-contacto__portrait-card > p:last-child { max-width: 34ch; margin-top: 16px; color: rgb(255 250 244 / 72%); font-size: 13px; }

  .p-contacto__form {
    display: grid;
    align-content: start;
    gap: clamp(23px, 3svh, 31px);
    min-width: 0;
    padding: clamp(28px, 4.2vw, 62px);
    border: 1px solid color-mix(in srgb, var(--brass) 24%, transparent);
    border-radius: var(--radius-story);
    background: color-mix(in srgb, var(--paper) 92%, white);
    box-shadow: var(--shadow-story);
  }

  .p-contacto__form-intro {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hairline);
  }

  .p-contacto__form-intro p { color: var(--cocoa); font-size: 14px; }
  .p-contacto__form-intro p span { color: var(--muted); font-size: 12px; }
  .p-contacto__form-number { color: var(--wine); font: italic 350 42px/1 var(--font-display); }

  .p-contacto__field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
  .p-contacto__field { display: grid; align-content: start; gap: 8px; min-width: 0; }

  .p-contacto__field label {
    color: var(--cocoa);
    font: 650 10.5px/1.2 var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .p-contacto__field label > span:not([aria-hidden]) { color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: none; }

  .p-contacto__field input,
  .p-contacto__field select,
  .p-contacto__field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 0 10px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cocoa) 24%, transparent);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: 400 15px/1.5 var(--font-sans);
    transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
  }

  .p-contacto__field textarea { min-height: 132px; resize: vertical; }
  .p-contacto__field select { cursor: pointer; }
  .p-contacto__field input::placeholder,
  .p-contacto__field textarea::placeholder { color: color-mix(in srgb, var(--muted) 68%, transparent); }

  .p-contacto__field input:focus,
  .p-contacto__field select:focus,
  .p-contacto__field textarea:focus {
    border-color: var(--wine);
    box-shadow: 0 1px 0 var(--wine);
  }

  .p-contacto__field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
  .p-contacto__field-meta { display: flex; justify-content: space-between; gap: 12px; min-height: 16px; color: var(--muted); }
  .p-contacto__field-meta > :last-child { margin-left: auto; }

  .p-contacto__trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .p-contacto__error { display: flex; align-items: flex-start; gap: 5px; min-height: 0; color: var(--danger); font-size: 11.5px; }
  .p-contacto__error svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; }
  .p-contacto__error:empty { display: none; }

  .p-contacto__consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
  }

  .p-contacto__consent input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--wine);
  }

  .p-contacto__consent a { color: var(--wine); text-underline-offset: 3px; }
  .p-contacto__consent.has-error input { outline: 1px solid var(--danger); outline-offset: 2px; }
  .p-contacto__error--consent { margin-top: -22px; padding-left: 32px; }

  .p-contacto__captcha { position: relative; isolation: isolate; display: grid; gap: 16px; overflow: hidden; min-width: 0; padding: 19px 20px 17px; border: 1px solid color-mix(in srgb, var(--brass) 58%, transparent); border-radius: 18px; color: #f8efe5; background: repeating-linear-gradient(118deg, transparent 0 11px, rgb(255 255 255 / .012) 12px, transparent 13px 24px), radial-gradient(circle at 92% -15%, rgb(187 119 65 / .3), transparent 38%), radial-gradient(circle at 0 120%, rgb(137 20 61 / .42), transparent 48%), linear-gradient(135deg, #24161c, #45182a 55%, #28171e); box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 22px 48px -34px rgb(37 8 19 / .76); transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }

  .p-contacto__captcha[data-security-state="ready"] { border-color: #b9cfae; box-shadow: inset 0 1px rgb(255 255 255 / .1), 0 24px 52px -30px rgb(53 109 70 / .62); }
  .p-contacto__captcha[data-security-state="error"] { border-color: #d87b8e; }
  .p-contacto__captcha-copy { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; min-width: 0; }
  .p-contacto__captcha-mark { position: relative; display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(239 207 158 / .48); border-radius: 50%; color: #f2cfa0; background: radial-gradient(circle, rgb(255 255 255 / .12), rgb(255 255 255 / .025) 68%); box-shadow: inset 0 0 18px rgb(242 207 160 / .08); }

  .p-contacto__captcha-mark::before { content: ""; position: absolute; inset: -5px; border: 1px solid rgb(239 207 158 / .18); border-radius: inherit; animation: contactSecurePulse 2.6s ease-out infinite; }
  .p-contacto__captcha-copy p { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .p-contacto__captcha-copy small { color: #d7ae76; font: 650 8.5px/1.2 var(--font-sans); letter-spacing: .17em; text-transform: uppercase; }
  .p-contacto__captcha-copy strong { color: #fffaf4; font: 500 16px/1.25 var(--font-display); letter-spacing: .02em; }
  .p-contacto__captcha-copy p > span { color: rgb(248 239 229 / .68); font-size: 11.5px; }
  .p-contacto__captcha-live { display: inline-flex; align-items: center; gap: 7px; align-self: start; padding: 6px 9px; border: 1px solid rgb(255 255 255 / .13); border-radius: 999px; color: rgb(255 250 244 / .82); background: rgb(255 255 255 / .06); font: 650 8.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .p-contacto__captcha-live i { width: 5px; height: 5px; border-radius: 50%; background: #f0c887; box-shadow: 0 0 0 4px rgb(240 200 135 / .1); animation: contactSecureBlink 1.8s ease-in-out infinite; }
  .p-contacto__captcha[data-security-state="ready"] .p-contacto__captcha-live i { background: #b9d3ad; box-shadow: 0 0 0 4px rgb(185 211 173 / .12); }
  .p-contacto__captcha-signals { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 13px; border-top: 1px solid rgb(255 255 255 / .11); }
  .p-contacto__captcha-signals span { display: flex; align-items: center; gap: 7px; min-width: 0; color: rgb(248 239 229 / .72); font: 550 9.5px/1.25 var(--font-sans); }
  .p-contacto__captcha-signals i { color: #d7ae76; font: 600 8px/1 var(--font-sans); letter-spacing: .08em; }
  .p-contacto__captcha-widget { position: relative; z-index: 2; min-width: 0; overflow: hidden; border-radius: 9px; }
  .p-contacto__captcha-widget:empty { display: none; }
  .p-contacto__captcha-widget iframe { max-width: 100%; }

  @keyframes contactSecurePulse { 0% { transform: scale(.9); opacity: 0; } 35% { opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
  @keyframes contactSecureBlink { 50% { opacity: .45; } }

  .p-contacto__form-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(16px, 2vw, 28px); }
  .p-contacto__submit { display: inline-flex; gap: 34px; justify-content: space-between; min-width: 214px; }
  .p-contacto__form-foot > p { max-width: 38ch; color: var(--muted); font-size: 11.5px; }
  .p-contacto__status { min-height: 20px; color: var(--wine); font-size: 12px; }

  @media (max-width: 1050px) {
    .p-contacto__hero-grid { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 34px; }
    .p-contacto__studio-grid { grid-template-columns: minmax(280px, .7fr) minmax(480px, 1.3fr); }
  }

  @media (max-width: 899.98px) {
    /* El checkbox de privacidad va dentro de su label: el área activa es la
       etiqueta entera, que se quedaba en 41px. Los dos enlaces sueltos de al
       lado (correo de la tarjeta y aviso) subían de 31px y 17px. El correo
       que aparece DENTRO de una frase se deja como está: es un enlace en
       línea y estirarlo rompería el renglón. */
    .p-contacto__consent { min-height: 44px; }

    .p-contacto__portrait-card > a,
    .p-contacto__consent a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    .p-contacto__hero { min-height: auto; }
    .p-contacto__hero-grid { grid-template-columns: 1fr; }
    .p-contacto__hero-copy { max-width: 720px; }
    .p-contacto__hero-visual { aspect-ratio: 1.6 / 1; }
    .p-contacto__studio-head { grid-template-columns: 1fr; align-items: start; }
    .p-contacto__studio-grid { grid-template-columns: 1fr; }
    .p-contacto__portrait { min-height: 460px; }
    .p-contacto__routes-list { grid-template-columns: 1fr; }
    .p-contacto__route {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto 1fr;
      grid-template-areas:
        "kicker arrow"
        "title arrow"
        "note arrow";
      min-height: 0;
    }
    .p-contacto__route-arrow { align-self: center; margin-top: 0; }
  }

  @media (max-width: 719.98px) {
    .p-contacto__hero {
      padding-block: calc(var(--header-h) + 34px) 54px;
    }

    .p-contacto__hero-grid { gap: 34px; }
    .p-contacto__hero-copy::before { left: -94px; top: -72px; width: 210px; }
    .p-contacto__title { font-size: clamp(44px, 14.5vw, 68px); }
    .p-contacto__title-line { white-space: normal; }
    .p-contacto__title-line--shift { margin-inline-start: 0; }
    .p-contacto__lede { margin-top: 22px; font-size: 16px; }
    .p-contacto__hero-actions { align-items: stretch; margin-top: 26px; }
    .p-contacto__hero-actions .f-button--primary { flex: 1 1 100%; }
    .p-contacto__promise { line-height: 1.35; }
    .p-contacto__hero-visual { aspect-ratio: .88 / 1; border-radius: 22px 22px 70px 22px; }
    .p-contacto__hero-visual img { object-position: 69% center; }
    .p-contacto__hero-visual figcaption { font-size: 11px; }

    .p-contacto__studio { padding-block: 68px; }
    .p-contacto__studio::before { top: 20px; font-size: 29vw; }
    .p-contacto__studio-head { gap: 18px; margin-bottom: 34px; }
    .p-contacto__studio-head h2 { font-size: clamp(48px, 15vw, 68px); }
    .p-contacto__portrait { min-height: 370px; border-radius: 22px; }
    .p-contacto__portrait-card > a { font-size: clamp(27px, 8vw, 38px); }

    .p-contacto__form { gap: 22px; padding: 27px 20px 30px; border-radius: 22px; }
    .p-contacto__field-row { grid-template-columns: 1fr; gap: 22px; }
    .p-contacto__field input,
    .p-contacto__field select,
    .p-contacto__field textarea { min-height: 54px; font-size: 16px; }
    .p-contacto__field textarea { min-height: 142px; }
    .p-contacto__form-foot { grid-template-columns: 1fr; }
    .p-contacto__captcha { padding: 15px; }
    .p-contacto__submit { width: 100%; min-height: 52px; }
    .p-contacto__form-foot > p { max-width: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .p-contacto__promise span, .p-contacto__captcha-mark::before, .p-contacto__captcha-live i { animation: none; }
    .p-contacto__hero-visual img { transition: none; }
  }
}