:root {
  --papel: #e7e4d2;
  --siena: #7a3f28;
  --siena-hondo: #4a2416;
  --mostaza: #e8b44a;
  --lila: #cbb4d4;
  --hoja: #f9f5ea;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --negrita: 'Arimo', Arial, Helvetica, sans-serif;
  --u: min(1vw, 18px);
  --curva: cubic-bezier(.19, 1, .22, 1);
}
@media (max-width: 767px) { :root { --u: min(1vw, 4.6px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; }
body {
  margin: 0; background: var(--papel); color: var(--siena);
  font-family: var(--sans); font-weight: 400; font-size: calc(1.653 * var(--u)); line-height: 1.3;
  letter-spacing: -.045em; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
.foto { filter: saturate(.94) contrast(1.03) sepia(.04); }

.salto { position: fixed; left: 8px; top: -80px; z-index: 100; background: var(--siena); color: var(--papel); padding: 12px 18px; text-decoration: underline; }
.salto:focus { top: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.pie :focus-visible, .oferta :focus-visible { outline-color: var(--mostaza); }


.boton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: calc(1.18 * var(--u)); letter-spacing: -.04em; line-height: 1;
  color: var(--siena); background: transparent; border: 1px solid currentColor; border-radius: 0;
  padding: 0 calc(2.2 * var(--u)); height: calc(3.4 * var(--u)); min-width: calc(8.75 * var(--u));
  transition: background-color .35s ease, color .35s ease;
}
.boton:hover { background: var(--siena); color: var(--papel); }
.boton-ancho { width: calc(21.5 * var(--u)); height: calc(4.86 * var(--u)); }
.boton-claro { color: var(--lila); }
.boton-claro:hover { background: var(--lila); color: var(--siena); }
.boton-oscuro { width: calc(22.4 * var(--u)); height: calc(4.72 * var(--u)); }


.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: calc(6.94 * var(--u));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2vw;
  padding: calc(.14 * var(--u)) calc(4.03 * var(--u)) 0;
  background: transparent; transition: background-color .3s ease-in-out, transform .14s ease-in-out .14s;
}
.cab.fija { background: var(--papel); }
.cab.oculta { transform: translateY(-100%); }
.cab-nav ul { display: flex; gap: calc(1.25 * var(--u)); }
.cab-nav a {
  position: relative; display: inline-block; text-decoration: none; font-size: calc(1.4167 * var(--u)); line-height: 1.5;
  letter-spacing: -.045em; padding: 0 0 2px;
}
.cab-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--curva);
}
.cab-nav a:hover::after, .cab-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.cab-logo { display: block; width: calc(15.97 * var(--u)); justify-self: center; color: #2b1a12; }
.cab-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.cab-logo text { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.cab-logo circle { fill: var(--lila); }
.cab-accion { justify-self: end; width: calc(8.75 * var(--u)); height: calc(3.4 * var(--u)); padding: 0; }
.cab-burger { display: none; }


.js .cab-nav li, .js .cab-logo, .js .cab-accion { opacity: 0; transform: translateY(.6em); transition: opacity .8s var(--curva), transform .8s var(--curva), background-color .35s ease, color .35s ease; }
.js .cab-nav li:nth-child(2) { transition-delay: .0227s, .0227s; }
.js .cab-nav li:nth-child(3) { transition-delay: .0454s, .0454s; }
.js .cab-logo { transition-delay: .0681s, .0681s; }
.js .cab-accion { transition-delay: .0909s, .0909s, 0s, 0s; }
.js .cab.lista .cab-nav li, .js .cab.lista .cab-logo, .js .cab.lista .cab-accion { opacity: 1; transform: none; }


.hero { background: var(--papel); }
.hero-lienzo {
  position: relative; width: 100%; max-width: 1800px; margin: 0 auto; aspect-ratio: 1440 / 1013; container-type: inline-size; overflow: hidden;
}
.h-img { position: absolute; display: block; object-fit: cover; }
.h-1 { left: 3.89%; top: 15.70%; width: 21.18%; height: 30.11%; }
.h-2 { left: 38%; top: 8.0%; width: 24%; height: 24.7%; }
.h-3 { left: 81.32%; top: 26.26%; width: 18.68%; height: 30.11%; }
.h-4 { left: 32.85%; top: 62.98%; width: 23.89%; height: 33.96%; overflow: hidden; }
.h-4 img { width: 100%; height: 100%; object-fit: cover; }
.h-5 { left: 60.76%; top: 62.78%; width: 34.03%; height: 30.11%; }
.h-6 { left: 0; top: 54.29%; width: 29.65%; height: 26.16%; }
.h-titulo {
  position: absolute; left: 24%; width: 52%; top: 35.5%; text-align: center; font-family: var(--serif); font-weight: 500;
  font-size: 7.083cqw; line-height: 6.8cqw; letter-spacing: -.03em; color: var(--siena); font-optical-sizing: auto;
}


.oferta { background: var(--siena); color: var(--papel); padding: calc(5.76 * var(--u)) calc(4.03 * var(--u)) calc(4.5 * var(--u)); }
.oferta-lema {
  max-width: calc(80.2 * var(--u)); font-family: var(--serif); font-weight: 400; font-size: calc(2.833 * var(--u)); line-height: 1.152;
  letter-spacing: -.025em; color: var(--papel); font-optical-sizing: auto;
}
.servicios {
  margin-top: calc(4.72 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: calc(9.86 * var(--u));
}
.servicios li { border-top: 1px solid var(--lila); padding: calc(4.24 * var(--u)) 0 calc(1.62 * var(--u)); }
.servicios li:nth-child(3), .servicios li:nth-child(6) { border-bottom: 1px solid var(--lila); }
.servicios h3 { font-family: var(--negrita); font-weight: 700; font-size: calc(2.361 * var(--u)); line-height: 1.152; letter-spacing: -.02em; color: var(--mostaza); }
.oferta .boton { margin-top: calc(6.04 * var(--u)); }


.franja { background: var(--papel); overflow: hidden; height: calc(50 * var(--u)); position: relative; }
.franja-pista { display: flex; height: 100%; width: max-content; transition: transform .5s ease-out; will-change: transform; }
.franja-item { flex: none; height: 100%; }
.franja-slide { display: block; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .5s ease-out; }
.franja-slide.activa { opacity: 1; }
.franja-slide img { height: 100%; width: auto; aspect-ratio: 3 / 2; max-width: none; object-fit: cover; }
.franja-slide:focus-visible { outline-offset: -4px; }


.estudio {
  background: var(--lila); color: var(--siena); display: grid; grid-template-columns: calc(45.63 * var(--u)) calc(41.74 * var(--u));
  justify-content: space-between; align-items: start; padding: calc(5.49 * var(--u)) calc(4.03 * var(--u)) calc(4.24 * var(--u));
}
.estudio h2 { font-family: var(--serif); font-weight: 500; font-size: calc(4.132 * var(--u)); line-height: 1.08; letter-spacing: -.03em; font-optical-sizing: auto; }
.estudio p { max-width: calc(41.74 * var(--u)); font-size: calc(1.653 * var(--u)); line-height: 1.3; letter-spacing: -.055em; }
.estudio h2 + p { margin-top: calc(6.53 * var(--u)); }
.estudio p + p { margin-top: calc(2.15 * var(--u)); }
.estudio .boton { margin-top: calc(3.54 * var(--u)); }
.estudio-foto { display: block; }
.estudio-foto img { width: 100%; aspect-ratio: 601 / 859; object-fit: cover; }


.rejilla { background: var(--papel); padding-bottom: calc(.55 * var(--u)); }
.rejilla ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.rejilla li { position: relative; aspect-ratio: 1; overflow: hidden; background: #d9d6c6; }
.rejilla a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.rejilla img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.rejilla a:hover img { transform: scale(1.03); }
.ver { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .rev { opacity: 0; transform: translateY(1.6em); transition: opacity .8s var(--curva), transform .8s var(--curva); }
.js .rev.en-vista { opacity: 1; transform: none; }
.js .rev:nth-child(3n+2) { transition-delay: .08s; }
.js .rev:nth-child(3n) { transition-delay: .16s; }


.contacto {
  background: var(--mostaza); color: var(--siena-hondo); display: grid; grid-template-columns: calc(34 * var(--u)) calc(45.6 * var(--u));
  justify-content: space-between; align-items: start; padding: calc(7.01 * var(--u)) calc(4.03 * var(--u)) calc(5.7 * var(--u));
}
.contacto h2 { font-family: var(--serif); font-weight: 500; font-size: calc(4.132 * var(--u)); line-height: 1.08; letter-spacing: -.03em; font-optical-sizing: auto; }
.contacto-texto p { margin-top: calc(3.82 * var(--u)); font-size: calc(1.889 * var(--u)); line-height: 1.3; letter-spacing: -.05em; max-width: calc(30.1 * var(--u)); }
.form { font-size: calc(1.4167 * var(--u)); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; font-size: calc(1.65 * var(--u)); line-height: 1.3; letter-spacing: -.04em; }
.f-par { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(.76 * var(--u)); }
.form label { display: block; letter-spacing: -.04em; line-height: 1.3; }
.f-campo { margin-top: calc(2.65 * var(--u)); font-size: calc(1.65 * var(--u)); }
.f-par { margin-top: calc(.2 * var(--u)); }
.form small { font-size: .86em; opacity: .62; }
.form input, .form textarea {
  display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--siena-hondo) 70%, transparent);
  border-radius: 0; padding: .35em 0; font: inherit; font-size: calc(1.5 * var(--u)); letter-spacing: -.03em; color: var(--siena-hondo);
  height: calc(2.35 * var(--u)); margin-top: calc(.2 * var(--u)); outline: none; resize: none;
}
.form textarea { height: calc(6.3 * var(--u)); resize: vertical; }
.form input:focus, .form textarea:focus { border-bottom-color: var(--siena-hondo); box-shadow: 0 1px 0 var(--siena-hondo); }
.form input:user-invalid, .form textarea:user-invalid { border-bottom-color: #a3281a; }
.f-pie { display: flex; align-items: center; gap: calc(1.4 * var(--u)); margin-top: calc(1.45 * var(--u)); }
.f-pie .boton { width: calc(8.35 * var(--u)); height: calc(3.4 * var(--u)); padding: 0; }
.f-estado { font-size: calc(1.3 * var(--u)); line-height: 1.25; letter-spacing: -.04em; }


.pie { position: relative; background: var(--papel); color: var(--siena); padding: calc(5.83 * var(--u)) calc(4.03 * var(--u)) calc(1.5 * var(--u)); overflow: hidden; }
.pie-cols { display: grid; grid-template-columns: calc(18.5 * var(--u)) calc(18.5 * var(--u)); justify-content: start; margin-left: calc(57.9 * var(--u)); column-gap: calc(1.4 * var(--u)); }
.pie h2 { font-family: var(--serif); font-weight: 500; font-size: calc(1.889 * var(--u)); line-height: 1.17; letter-spacing: -.02em; font-optical-sizing: auto; }
.pie ul { margin-top: calc(1.35 * var(--u)); }
.pie li { font-size: calc(1.4167 * var(--u)); line-height: 1.3; letter-spacing: -.045em; }
.pie li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; transition: opacity .3s ease; }
.pie li a:hover { opacity: .6; }
.pie-marca { display: block; width: calc(68.8 * var(--u)); height: auto; margin: calc(1.94 * var(--u)) auto 0; fill: var(--hoja); position: relative; left: 0; }
.pie-marca text { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.aviso { margin-top: calc(.5 * var(--u)); text-align: center; font-size: calc(1.1 * var(--u)); line-height: 1.3; letter-spacing: -.03em; }
.aviso a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }


.luz { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(30, 17, 11, .94); color: #f4ece0; opacity: 0; transition: opacity .35s ease; }
.luz[hidden] { display: none; }
.luz.abierta { opacity: 1; }
.luz figure { max-width: min(88vw, 1000px); text-align: center; }
.luz img { max-height: 82vh; width: auto; max-width: 100%; margin: 0 auto; }
.luz figcaption { margin-top: 14px; font-size: 16px; letter-spacing: -.02em; opacity: .8; }
.luz button { position: absolute; background: none; border: 0; cursor: pointer; color: inherit; font-family: var(--sans); font-weight: 300; line-height: 1; padding: 14px 18px; opacity: .8; transition: opacity .25s ease; }
.luz button:hover { opacity: 1; }
.luz-cerrar { top: 10px; right: 14px; font-size: 44px; }
.luz-ant, .luz-sig { top: 50%; margin-top: -30px; font-size: 56px; }
.luz-ant { left: 10px; } .luz-sig { right: 10px; }


.menu { display: none; }


@media (max-width: 767px) {
  body { font-size: calc(5.14 * var(--u)); }
  .boton { font-size: calc(4.1 * var(--u)); height: calc(11.5 * var(--u)); padding: 0 calc(6 * var(--u)); min-width: calc(50 * var(--u)); }
  .boton-ancho, .boton-oscuro { width: 100%; height: calc(15.2 * var(--u)); }

  .cab { height: calc(20.3 * var(--u)); grid-template-columns: 1fr auto; padding: 0 calc(5.9 * var(--u)); column-gap: 0; }
  .cab-nav, .cab-accion { display: none; }
  .cab-logo { grid-column: 1; justify-self: start; width: calc(46 * var(--u)); margin-top: calc(.4 * var(--u)); }
  .cab-burger {
    display: block; position: relative; grid-column: 2; justify-self: end; width: calc(12.05 * var(--u)); height: calc(9.5 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; color: var(--siena); z-index: 70;
  }
  .cab-burger span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .45s var(--curva), top .45s var(--curva); }
  .cab-burger span:first-child { top: 32%; }
  .cab-burger span:last-child { top: 68%; }
  body.menu-abierto .cab-burger span:first-child { top: 50%; transform: rotate(45deg); }
  body.menu-abierto .cab-burger span:last-child { top: 50%; transform: rotate(-45deg); }
  body.menu-abierto .cab { background: transparent; transform: none; }
  body.menu-abierto { overflow: hidden; }
  .menu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 40; background: var(--papel);
    opacity: 0; visibility: hidden; transition: visibility .6s cubic-bezier(.4, 0, .2, 1), opacity .4s cubic-bezier(.4, 0, .2, 1);
  }
  .menu.abierto { opacity: 1; visibility: visible; }
  .menu ul { text-align: center; }
  .menu li + li { margin-top: calc(5.7 * var(--u)); }
  .menu li a { font-size: calc(8.5 * var(--u)); line-height: 1; letter-spacing: -.045em; text-decoration: none; }
  .menu-contacto { position: absolute; bottom: calc(5.4 * var(--u)); left: 50%; margin-left: calc(-26.9 * var(--u)); width: calc(53.8 * var(--u)); height: calc(11.6 * var(--u)); }

  .hero-lienzo { aspect-ratio: 390 / 672; }
  .h-1 { left: -.77%; top: 16.96%; width: 33.08%; height: 19.2%; }
  .h-2 { left: 33.6%; top: 24.8%; width: 37%; height: 14.5%; }
  .h-3 { left: 74.1%; top: 21.13%; width: 25.9%; height: 19.2%; }
  .h-4 { left: 64.87%; top: 69.64%; width: 31.28%; height: 18.15%; }
  .h-5 { display: none; }
  .h-6 { left: 0; top: 72.6%; width: 46.4%; height: 14%; }
  .h-titulo { left: 5.9%; width: 88.2%; top: 41.96%; font-size: 16.67cqw; line-height: 16cqw; letter-spacing: -.035em; }

  .oferta { padding: calc(9.5 * var(--u)) calc(7.7 * var(--u)) calc(5.2 * var(--u)); }
  .oferta-lema { font-size: calc(9.03 * var(--u)); line-height: 1.152; }
  .servicios { margin-top: calc(6.1 * var(--u)); grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .servicios li { padding: calc(11 * var(--u)) 0 calc(1.3 * var(--u)); }
  .servicios li:nth-child(3) { border-bottom: 0; }
  .servicios li:last-child { border-bottom: 1px solid var(--lila); }
  .servicios h3 { font-size: calc(5.74 * var(--u)); line-height: 1.152; }
  .oferta .boton { margin-top: calc(11 * var(--u)); }

  .franja { height: calc(50 * var(--u)); margin-bottom: calc(5.4 * var(--u)); }

  .estudio { display: block; padding: calc(9 * var(--u)) calc(5.9 * var(--u)) 0; }
  .estudio h2 { font-size: calc(9.6 * var(--u)); line-height: 1.08; }
  .estudio p { max-width: none; font-size: calc(5.14 * var(--u)); line-height: 1.3; }
  .estudio h2 + p { margin-top: calc(7.4 * var(--u)); }
  .estudio p + p { margin-top: calc(5.2 * var(--u)); }
  .estudio .boton { margin-top: calc(6 * var(--u)); }
  .estudio-foto { margin: calc(7.7 * var(--u)) calc(-5.9 * var(--u)) 0; }
  .estudio-foto img { aspect-ratio: 390 / 409; }

  .rejilla { padding-bottom: calc(16 * var(--u)); }
  .rejilla ul { grid-template-columns: repeat(2, 1fr); }

  .contacto { display: block; padding: calc(10.8 * var(--u)) calc(5.9 * var(--u)) calc(11 * var(--u)); }
  .contacto h2 { font-size: calc(10.6 * var(--u)); }
  .contacto-texto p { margin-top: calc(7 * var(--u)); font-size: calc(5.66 * var(--u)); max-width: none; }
  .form { margin-top: calc(9 * var(--u)); font-size: calc(4.1 * var(--u)); }
  .form legend { font-size: calc(5.14 * var(--u)); }
  .f-campo { font-size: calc(5.14 * var(--u)); margin-top: calc(7 * var(--u)); }
  .form input, .form textarea { height: calc(9 * var(--u)); font-size: calc(5 * var(--u)); }
  .form textarea { height: calc(26 * var(--u)); }
  .f-pie { flex-wrap: wrap; margin-top: calc(6 * var(--u)); }
  .f-pie .boton { width: calc(29 * var(--u)); height: calc(11.5 * var(--u)); }
  .f-estado { font-size: calc(4 * var(--u)); }

  .pie { padding: calc(8 * var(--u)) calc(5.9 * var(--u)) calc(3 * var(--u)); }
  .pie-cols { display: block; margin-left: 0; }
  .pie h2 { font-size: calc(6.9 * var(--u)); }
  .pie ul { margin-top: calc(2.4 * var(--u)); }
  .pie li { font-size: calc(4.1 * var(--u)); line-height: 1.4; }
  .pie nav + nav { margin-top: calc(7.5 * var(--u)); }
  .pie-marca { width: 100%; margin-top: calc(4 * var(--u)); }
  .aviso { margin-top: calc(1.5 * var(--u)); font-size: calc(3.5 * var(--u)); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .cab-nav li, .js .cab-logo, .js .cab-accion, .js .rev { opacity: 1; transform: none; }
}