:root {
  --ciruela: #241b29;
  --ciruela-profunda: #1b1420;
  --porcelana: #faf9f7;
  --tinta: #302735;
  --champan: #d6bd93;
  --lila: #ddd3e1;
  --gris: #6f6573;
  --serif: "Bodoni Moda", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--porcelana);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
* { box-sizing: border-box; }
body { margin: 0; }
body.bloqueado { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:not(:disabled), a { cursor: pointer; }
img { max-width: 100%; display: block; }
picture { display: block; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { color: var(--ciruela); background: var(--champan); }
:focus-visible { outline: 3px solid #967031; outline-offset: 6px; }
.contenedor { width: min(100% - 112px, 1280px); margin-inline: auto; }
.seccion { padding-block: 112px; }
.salto { position: fixed; inset: 10px auto auto 10px; z-index: 100; padding: 12px 20px; background: var(--champan); color: var(--ciruela); transform: translateY(-200%); }
.salto:focus { transform: translateY(0); }
.cabecera { background: var(--ciruela); color: var(--porcelana); border-bottom: 1px solid #ffffff15; position: sticky; top: 0; z-index: 30; }
.cabecera-interior { display: flex; align-items: center; justify-content: space-between; min-height: 91px; gap: 32px; }
.marca { flex-shrink: 0; font: 400 27px/1.2 var(--serif); letter-spacing: -1px; display: flex; align-items: center; gap: 13px; }
.marca-punto { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--champan); }
.navegacion { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 34px); }
.navegacion a { font-size: 11px; letter-spacing: .04em; line-height: 1.5; transition: color 150ms; }
.navegacion a:hover { color: var(--champan); }
.navegacion-contacto { padding: 13px 17px; border: 1px solid #d6bd9360; }
.navegacion-contacto span { margin-left: 12px; font-size: 16px; }
.boton-menu { display: none; }
.portada { background: var(--ciruela); color: var(--porcelana); position: relative; padding: 78px 0 76px; }
.portada-interior { display: grid; grid-template-columns: 1.35fr 1fr; gap: 35px; align-items: center; }
.portada-copy { position: relative; z-index: 2; }
.disciplina { color: var(--champan); font-size: 11px; letter-spacing: .22em; margin-bottom: 35px; }
h1 { font: 400 clamp(65px, 7.6vw, 112px)/1.02 var(--serif); letter-spacing: -.06em; margin-left: -5px; }
h1 span { display: block; text-transform: lowercase; }
h1 span:first-child::first-letter { text-transform: uppercase; }
.portada-subtitulo { margin-top: 30px; font-size: 17px; font-weight: 400; line-height: 1.65; color: #e4dbe7; }
.boton { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 19px 25px; font-size: 10px; font-weight: 600; letter-spacing: .055em; min-height: 56px; }
.boton span { font-size: 20px; font-weight: 400; }
.boton-dorado { color: var(--ciruela-profunda); background: var(--champan); transition: background 150ms; }
.boton-dorado:hover { background: #e6cda4; }
.portada .boton { margin-top: 37px; }
.portada-firma { font: 400 22px/1.5 var(--serif); margin-top: 50px; color: #cfbfcb; }
.portada-visual { position: relative; padding: 9px 0 30px 10px; isolation: isolate; }
.portada-retrato { overflow: hidden; border-radius: 260px 260px 3px 3px; height: 558px; background: #97939f; position: relative; }
.portada-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 59% 40%; }
.portada-arco { position: absolute; inset: -8px -15px 50px -8px; border: 1px solid #d6bd9380; border-radius: 270px 270px 0 0; z-index: -1; }
.portada-cartel { display: flex; align-items: center; gap: 16px; position: absolute; bottom: 0; right: 0; }
.cartel-trazo { width: 38px; height: 1px; background: var(--champan); }
.portada-cartel p { font: 400 18px/1.4 var(--serif); color: #e3d6df; }
.descubrir { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #ffffff30; display: grid; place-items: center; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--champan); font-size: 19px; }
h2 { font: 400 clamp(38px, 4.2vw, 60px)/1.15 var(--serif); letter-spacing: -.045em; text-transform: lowercase; }
h2::first-letter { text-transform: uppercase; }
.enfoque-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 55px; }
.sello { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #ad8d5950; border-radius: 50%; color: #9f8055; font: 400 27px var(--serif); letter-spacing: -5px; padding-right: 5px; }
.enfoque-columnas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 100px; }
.enfoque-manifiesto { font: 400 clamp(25px, 2.2vw, 33px)/1.55 var(--serif); letter-spacing: -.03em; }
.enfoque-manifiesto p + p { margin-top: 22px; }
.enfoque-sentidos { color: #826442; }
.enfoque-texto { font-size: 14px; line-height: 1.9; color: var(--gris); padding-top: 5px; }
.enfoque-texto p + p { margin-top: 16px; }
.enfoque-texto .enfoque-elementos { margin-block: 25px; padding-left: 20px; border-left: 1px solid #ac8e60; color: var(--tinta); }
.proyectos { background: #eeeaf0; padding-block: 95px; }
.proyectos-interior { display: grid; grid-template-columns: 1fr 1.2fr; gap: 110px; align-items: center; }
.proyectos-presentacion h2 { margin-bottom: 28px; }
.proyectos-foto { width: min(100%, 330px); height: 213px; overflow: hidden; }
.proyectos-foto img { width: 100%; height: 100%; object-fit: cover; }
.proyectos-lista li { border-bottom: 1px solid #30273522; padding-block: 21px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 400 clamp(21px, 2.15vw, 31px)/1.4 var(--serif); letter-spacing: -.02em; }
.proyectos-lista li:first-child { border-top: 1px solid #30273522; }
.proyectos-lista span { color: #947744; font: 400 20px var(--sans); }
.portfolio-cabecera { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: end; margin-bottom: 65px; }
.portfolio-cabecera > p { max-width: 410px; font-size: 14px; line-height: 1.9; color: var(--gris); padding-bottom: 6px; }
.portfolio-proyecto { display: grid; grid-template-columns: 1fr 1fr; background: var(--ciruela); color: var(--porcelana); margin-bottom: 28px; overflow: hidden; }
.portfolio-video { position: relative; display: flex; justify-content: center; min-height: 565px; background: #100e13; }
.portfolio-video video { display: block; width: 100%; height: 565px; object-fit: contain; }
.portfolio-descripcion { padding: 75px 55px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.portfolio-lugar { color: var(--champan); font-size: 12px; margin-bottom: 27px; }
.portfolio-descripcion h3 { font: 400 clamp(35px, 4vw, 57px)/1.15 var(--serif); letter-spacing: -.045em; }
.portfolio-rol { color: #d1c4d3; font-size: 13px; margin-top: 27px; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.galeria-imagen { position: relative; border: 0; padding: 0; background: #eeece8; display: block; overflow: hidden; }
.galeria-imagen img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 16/9; }
.ampliar { position: absolute; bottom: 12px; right: 12px; width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: var(--ciruela); color: var(--porcelana); font-size: 19px; transition: background 150ms; }
.galeria-imagen:hover .ampliar { background: #6b526e; }
.enlace-portfolio { margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 48px; width: fit-content; padding-bottom: 13px; border-bottom: 1px solid #96805f; font-size: 11px; letter-spacing: .045em; }
.enlace-portfolio span { font-size: 20px; }
.imaginacion { background: var(--ciruela); color: var(--porcelana); padding-block: 90px; }
.imaginacion-interior { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
.imaginacion-intro { position: relative; }
.imaginacion-intro h2 { position: relative; z-index: 1; font-size: clamp(36px, 3.65vw, 52px); }
.imaginacion-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.imaginacion-lista li { padding: 19px 0; border-top: 1px solid #d6bd933b; font-size: 13px; line-height: 1.65; color: #e5dae6; }
.ofertas-cabecera { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; margin-bottom: 65px; }
.ofertas-cabecera > div { font-size: 14px; line-height: 1.85; color: var(--gris); }
.ofertas-cabecera p + p { margin-top: 15px; }
.ofertas-columnas { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #d8d0d9; }
.oferta { padding: 37px 31px 38px; }
.oferta + .oferta { border-left: 1px solid #d8d0d9; }
.oferta h3 { font-size: 13px; line-height: 1.45; letter-spacing: .09em; font-weight: 500; min-height: 40px; }
.oferta-precio { font-size: 12px; color: var(--gris); margin: 21px 0 33px; }
.oferta-precio span { display: block; font: 400 57px/1.25 var(--serif); letter-spacing: -.045em; margin-top: 3px; color: var(--tinta); }
.oferta ul { font-size: 13px; line-height: 1.75; }
.oferta li { position: relative; padding-left: 17px; margin-bottom: 12px; }
.oferta li::before { content: ""; position: absolute; width: 4px; height: 4px; background: #aa8857; top: 9px; left: 0; transform: rotate(45deg); }
.oferta li:last-child { margin-top: 22px; color: var(--gris); }
.oferta-experiencia { background: #eeeaf0; }
.oferta-incluye { font-size: 12px; font-weight: 600; margin-bottom: 19px; }
.oferta-direccion { background: var(--ciruela); color: var(--porcelana); }
.oferta-presupuesto { font: 400 39px/1.3 var(--serif); color: var(--champan); margin-block: 30px 46px; }
.oferta-esencia { font: 400 23px/1.45 var(--serif); margin-bottom: 17px; }
.oferta-direccion > p:last-child { font-size: 12px; line-height: 1.85; color: #d8cddc; }
.ofertas-nota { text-align: center; color: var(--gris); font-size: 11px; line-height: 1.8; margin-top: 26px; }
.contacto { background: var(--ciruela-profunda); color: var(--porcelana); padding-block: 105px; text-align: center; }
.contacto-pregunta { font-size: 10px; letter-spacing: .16em; color: var(--champan); margin-bottom: 29px; }
.contacto h2 { text-transform: none; font-size: clamp(36px, 4.85vw, 69px); line-height: 1.2; }
.contacto-texto { max-width: 480px; margin: 26px auto 35px; color: #d4c7d8; font-size: 13px; line-height: 1.85; }
.pie { background: var(--ciruela-profunda); color: var(--porcelana); }
.pie-interior { border-top: 1px solid #ffffff1b; padding-block: 34px 38px; display: flex; align-items: center; gap: 30px; }
.pie-marca { font: 400 20px/1.4 var(--serif); letter-spacing: .025em; }
.pie-disciplina { margin-top: 5px; font-size: 10px; color: #c7baca; }
.pie-redes { display: flex; gap: 15px; font-size: 12px; margin-left: auto; }
.pie-redes a:hover { color: var(--champan); }
.pie-redes span { color: var(--champan); }
.volver { width: 38px; height: 38px; margin-left: 35px; border: 1px solid #ffffff30; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--champan); }
.visor { inset: 0; max-width: none; max-height: none; width: 100%; height: 100dvh; margin: 0; padding: 80px 75px 35px; border: 0; background: #1b1420f7; color: var(--porcelana); }
.visor::backdrop { background: var(--ciruela-profunda); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor button { color: var(--porcelana); background: transparent; border: 1px solid #ffffff30; display: grid; place-items: center; }
.visor-cerrar { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; font-size: 32px; line-height: 1; }
.visor-anterior, .visor-siguiente { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 50px; font-size: 38px; line-height: 1; }
.visor-anterior { left: 18px; }
.visor-siguiente { right: 18px; }
.visor-figura { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.visor-foto { max-width: 100%; max-height: calc(100dvh - 155px); width: auto; height: auto; object-fit: contain; }
.visor-contador { font-size: 11px; color: #d3c3d8; }
@media (min-width: 1600px) { .portada { padding-block: 92px; } }
@media (max-width: 1150px) {
  .contenedor { width: calc(100% - 72px); }
  .navegacion { gap: 18px; }
  .marca { font-size: 23px; }
  .navegacion-contacto { padding: 11px; }
  .portada { padding-top: 65px; }
  h1 { font-size: 8vw; }
  .portada-retrato { height: 510px; }
  .enfoque-columnas, .proyectos-interior, .portfolio-cabecera, .imaginacion-interior, .ofertas-cabecera { gap: 60px; }
  .portfolio-descripcion { padding: 45px 35px; }
  .oferta { padding: 32px 22px; }
  .oferta h3 { font-size: 11px; }
}
@media (max-width: 1100px) {
  .cabecera-interior { min-height: 76px; }
  .boton-menu { display: flex; width: 42px; height: 42px; border: 1px solid #d6bd9360; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; z-index: 32; }
  .boton-menu span { width: 18px; height: 1px; background: var(--champan); transition: transform 150ms; }
  .boton-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .boton-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .navegacion { position: absolute; left: 0; right: 0; top: 100%; padding: 28px 36px 36px; background: var(--ciruela); box-shadow: 0 14px 25px #00000020; display: none; flex-direction: column; align-items: stretch; gap: 0; }
  .navegacion.abierta { display: flex; }
  .navegacion a { font-size: 12px; padding: 20px 0; border-bottom: 1px solid #ffffff20; }
  .navegacion .navegacion-contacto { padding: 17px; margin-top: 22px; }
  .portada-interior { gap: 25px; }
  .portada-retrato { height: 455px; }
  .portada-firma { font-size: 20px; margin-top: 30px; }
  .portada-subtitulo { font-size: 15px; }
  .boton { gap: 18px; padding: 17px 20px; font-size: 9px; }
  .seccion { padding-block: 85px; }
  .proyectos-lista li { font-size: 24px; }
  .proyectos-foto { height: 195px; }
  .portfolio-video { min-height: 475px; }
  .portfolio-video video { height: 475px; }
  .ofertas-columnas { grid-template-columns: 1fr 1fr; }
  .oferta-direccion { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px 40px; border-top: 1px solid #d8d0d9; }
  .oferta-direccion h3 { grid-column: 1; grid-row: 1; }
  .oferta-direccion .oferta-presupuesto { grid-column: 1; grid-row: 2 / 4; margin-block: 12px 0; }
  .oferta-direccion .oferta-esencia { grid-column: 2; grid-row: 1; margin: 0; }
  .oferta-direccion > p:last-child { grid-column: 2; grid-row: 2 / 4; }
  .imaginacion-lista { grid-template-columns: 1fr; }
  .imaginacion-interior { gap: 50px; }
}
@media (max-width: 760px) {
  :root { scroll-padding-top: 74px; }
  .contenedor { width: calc(100% - 44px); }
  .cabecera-interior { min-height: 74px; }
  .marca { font-size: 23px; gap: 10px; }
  .portada { padding: 45px 0 60px; }
  .portada-interior { display: flex; flex-direction: column; align-items: stretch; gap: 43px; }
  .disciplina { font-size: 9px; margin-bottom: 24px; }
  h1 { font-size: clamp(56px, 14.3vw, 95px); margin-left: -2px; letter-spacing: -.065em; }
  .portada-subtitulo { font-size: 14px; margin-top: 23px; }
  .portada .boton { margin-top: 27px; }
  .portada-firma { margin-top: 27px; font-size: 20px; }
  .portada-visual { width: 88%; max-width: 380px; align-self: center; padding-left: 8px; }
  .portada-retrato { height: 400px; }
  .portada-arco { right: -12px; }
  .portada-cartel p { font-size: 16px; }
  .descubrir { bottom: 15px; width: 28px; height: 28px; font-size: 15px; }
  .seccion { padding-block: 65px; }
  h2 { font-size: 39px; }
  .enfoque-cabecera { margin-bottom: 30px; }
  .sello { width: 48px; height: 48px; font-size: 22px; letter-spacing: -4px; }
  .enfoque-columnas { grid-template-columns: 1fr; gap: 27px; }
  .enfoque-manifiesto { font-size: 27px; }
  .enfoque-manifiesto p + p { margin-top: 19px; }
  .enfoque-texto { font-size: 13px; line-height: 1.85; }
  .proyectos { padding-block: 60px; }
  .proyectos-interior { grid-template-columns: 1fr; gap: 32px; }
  .proyectos-presentacion { display: grid; grid-template-columns: 1.1fr 1fr; gap: 23px; align-items: center; }
  .proyectos-presentacion h2 { font-size: 32px; margin: 0; }
  .proyectos-foto { height: 150px; width: 100%; }
  .proyectos-foto img { object-position: 60%; }
  .proyectos-lista li { font-size: 24px; padding-block: 19px; gap: 12px; }
  .proyectos-lista span { font-size: 16px; }
  .portfolio-cabecera { grid-template-columns: 1fr; gap: 23px; margin-bottom: 35px; }
  .portfolio-cabecera > p { font-size: 13px; max-width: 100%; }
  .portfolio-proyecto { grid-template-columns: 1fr; }
  .portfolio-video { min-height: 460px; }
  .portfolio-video video { height: 460px; }
  .portfolio-descripcion { padding: 35px 27px 42px; }
  .portfolio-lugar { font-size: 10px; margin-bottom: 15px; }
  .portfolio-descripcion h3 { font-size: 38px; }
  .portfolio-rol { font-size: 11px; margin-top: 17px; }
  .galeria { grid-template-columns: 1fr; gap: 16px; }
  .galeria .galeria-imagen { grid-column: auto; }
  .galeria-imagen img { height: auto; }
  .ampliar { bottom: 9px; right: 9px; width: 31px; height: 31px; }
  .enlace-portfolio { font-size: 9px; gap: 35px; margin-top: 28px; }
  .imaginacion { padding-block: 60px; overflow: hidden; }
  .imaginacion-interior { grid-template-columns: 1fr; gap: 34px; }
  .imaginacion-intro h2 { font-size: 36px; }
  .imaginacion-lista { grid-template-columns: 1fr 1fr; gap: 0 23px; }
  .imaginacion-lista li { font-size: 12px; padding-block: 18px; }
  .ofertas-cabecera { grid-template-columns: 1fr; gap: 24px; margin-bottom: 33px; }
  .ofertas-cabecera > div { font-size: 13px; }
  .ofertas-columnas { grid-template-columns: 1fr; }
  .oferta { padding: 31px 28px 35px; }
  .oferta + .oferta { border-left: 0; border-top: 1px solid #d8d0d9; }
  .oferta h3 { font-size: 12px; min-height: 0; }
  .oferta h3 br { display: none; }
  .oferta-precio { margin-block: 18px 26px; }
  .oferta-precio span { font-size: 54px; }
  .oferta ul { font-size: 13px; }
  .oferta-direccion { display: block; }
  .oferta-direccion .oferta-presupuesto { margin-block: 22px 30px; }
  .oferta-direccion .oferta-esencia { margin-bottom: 18px; }
  .oferta-direccion > p:last-child { font-size: 13px; }
  .ofertas-nota { text-align: left; font-size: 10px; }
  .contacto { padding-block: 68px; }
  .contacto-pregunta { font-size: 9px; margin-bottom: 23px; }
  .contacto h2 { font-size: clamp(32px, 8.5vw, 48px); }
  .contacto-texto { font-size: 12px; margin-block: 23px 27px; }
  .pie-interior { flex-wrap: wrap; align-items: flex-start; padding-block: 29px; gap: 22px; }
  .pie-interior > div:first-child { flex: 1 1 calc(100% - 65px); }
  .pie-marca { font-size: 18px; }
  .pie-disciplina { font-size: 9px; }
  .pie-redes { order: 3; margin-left: 0; font-size: 11px; }
  .volver { margin-left: 0; width: 33px; height: 33px; }
  .visor { padding: 75px 10px 85px; }
  .visor-cerrar { top: 17px; right: 16px; }
  .visor-foto { max-height: calc(100dvh - 200px); }
  .visor-anterior, .visor-siguiente { top: auto; bottom: 22px; transform: none; width: 44px; height: 44px; }
  .visor-anterior { left: calc(50% - 60px); }
  .visor-siguiente { right: calc(50% - 60px); }
}
@media (max-width: 370px) {
  .contenedor { width: calc(100% - 36px); }
  .marca { font-size: 20px; }
  .portada-retrato { height: 355px; }
  .proyectos-presentacion { gap: 15px; }
  .proyectos-presentacion h2 { font-size: 29px; }
  .proyectos-lista li { font-size: 21px; }
  .enfoque-manifiesto { font-size: 24px; }
  .imaginacion-lista { column-gap: 15px; }
  .boton { padding-inline: 16px; font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}