/* Web pública. Layout: retrato editorial asimétrico — mucho aire, fotos grandes, texto en columnas angostas a un lado */

/* Aviso de modo demo */
.draft{background:var(--earth);font-family:var(--f-label);font-size:var(--s-xs);color:var(--paper);text-align:center;padding:.5rem var(--gutter-r) .5rem var(--gutter)}

/* Cabecera */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--earth)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--earth);font-family:var(--f-display);font-stretch:80%;font-size:1.0625rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.brand em{font-style:normal;font-weight:400;color:var(--ochre)}
.bar-der{display:flex;align-items:center;gap:1.75rem}
nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
nav a{position:relative;text-decoration:none;font-size:var(--s-sm);color:var(--ink-soft);transition:color .25s}
nav a:hover{color:var(--earth)}

/* Acceso a "Mi selección" en la cabecera */
.b-seleccion{position:relative;display:grid;place-items:center;width:34px;height:34px;border:0;background:none;color:var(--earth);cursor:pointer;padding:0}
.b-seleccion .i-corazon{width:20px;height:20px}
.b-seleccion.con .i-corazon{fill:currentColor}
.sel-n{position:absolute;top:0;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--earth);color:var(--paper);font-size:.625rem;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}

/* Botón de idioma: muestra el idioma al que se cambia */
.idioma{font:inherit;font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.12em;background:none;border:1px solid var(--line);color:var(--earth);border-radius:999px;padding:.3rem .7rem;cursor:pointer;transition:border-color .25s,background .25s}
.idioma:hover{border-color:var(--earth);background:var(--raw)}

/* Botón de menú: dos líneas que se cruzan al abrir */
.menu-btn{display:none;align-items:center;gap:.6rem;background:none;border:0;font:inherit;font-size:var(--s-sm);color:var(--ink);cursor:pointer;padding:.35rem 0}
.menu-icono{position:relative;width:18px;height:10px;flex:none}
.menu-icono i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:top .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.menu-icono i:first-child{top:0}
.menu-icono i:last-child{top:8.5px}
.menu-btn[aria-expanded="true"] .menu-icono i{top:4.25px}
.menu-btn[aria-expanded="true"] .menu-icono i:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icono i:last-child{transform:rotate(-45deg)}

@media (min-width:761px){
  /* Subrayado fino que se dibuja de izquierda a derecha */
  nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--earth);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
}
.brand span{white-space:nowrap}
@media (max-width:430px){
  /* En celulares chicos el menú queda solo con el ícono, para que el nombre entre en una línea */
  .brand{letter-spacing:.05em;gap:.55rem}
  #menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:760px){
  .bar-der{gap:1rem}
  .menu-btn{display:inline-flex}
  /* El menú baja apenas y aparece con un fundido; los enlaces lo siguen escalonados */
  nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--earth);
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
  nav.abierto{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  nav ul{flex-direction:column;gap:0;padding:.25rem var(--gutter-r) .75rem var(--gutter)}
  nav li{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
  nav.abierto li{opacity:1;transform:none}
  nav.abierto li:nth-child(2){transition-delay:.04s}
  nav.abierto li:nth-child(3){transition-delay:.08s}
  nav.abierto li:nth-child(4){transition-delay:.12s}
  nav a{display:block;padding:.8rem 0;font-size:var(--s-md);color:var(--ink);border-bottom:1px solid var(--line)}
  nav li:last-child a{border-bottom:0}
}

/* Fotos y marcadores */
.ph{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--ph-a);max-width:100%}
.ph svg{width:62%;height:auto;aspect-ratio:1/1;max-height:82%;overflow:visible}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .tag{position:absolute;left:.75rem;bottom:.6rem;font-family:var(--f-label);font-size:.6875rem;letter-spacing:.08em;color:var(--stone)}
.ph.b{background:var(--ph-b)} .ph.c{background:var(--ph-c)} .ph.d{background:var(--ph-d)}

/* Inicio */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero-text{display:flex;flex-direction:column;gap:1.75rem;padding-top:clamp(1rem,4vw,3.5rem);min-width:0}
.hero h1{font-size:var(--s-2xl);font-weight:500;font-stretch:65%;text-transform:uppercase;line-height:.92;letter-spacing:0}
.hero h1 em{display:block;font-style:normal;font-weight:300;color:var(--ochre)}
.hero .lede{font-family:var(--f-body);font-size:var(--s-lg);font-weight:300;line-height:1.45;color:var(--ink-soft);max-width:28ch}
.hero .ph{aspect-ratio:4/5}
.hero .ph svg{width:56%}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero .ph{aspect-ratio:1/1;order:-1}}

/* Secciones */
section{scroll-margin-top:5rem}
.sec{padding-block:clamp(4rem,9vw,7.5rem);border-top:1px solid var(--earth)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:var(--s-xl)}
.sec-head p{max-width:58ch;color:var(--ink-soft)}

/* Obras */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filters button{font:inherit;font-size:var(--s-sm);background:none;border:1px solid var(--line);color:var(--ink-soft);padding:.45rem 1rem;border-radius:999px;cursor:pointer;transition:all .2s}
.filters button:hover{color:var(--ink);border-color:var(--stone)}
.filters button[aria-pressed="true"]{background:var(--earth);color:var(--paper);border-color:var(--earth)}
.col-desc{max-width:62ch;margin:-1rem 0 2.5rem;font-family:var(--f-display);font-stretch:85%;font-weight:300;font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.45;color:var(--earth);white-space:pre-line}
.col-desc.aparece{animation:subir .4s cubic-bezier(.2,.7,.2,1)}
@keyframes subir{from{opacity:0;transform:translateY(6px)}}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.75rem)}
.work{grid-column:span 4;position:relative;min-width:0}
.work-abrir{display:flex;flex-direction:column;gap:.9rem;width:100%;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in}

/* Corazón de "Mi selección" */
.corazon{position:absolute;top:.6rem;right:.6rem;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--earth);cursor:pointer;transition:background .25s,transform .25s}
.corazon:hover{background:var(--paper)}
.corazon svg,.i-corazon{width:18px;height:18px;fill:transparent;stroke:currentColor;stroke-width:1.6;transition:fill .25s}
.corazon[aria-pressed="true"] svg,.lb-guardar[aria-pressed="true"] svg{fill:currentColor}
.latido{animation:latido .45s cubic-bezier(.2,.7,.2,1)}
@keyframes latido{40%{transform:scale(1.18)}}
.work .ph{aspect-ratio:4/5;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work:hover .ph{transform:scale(.985)}
.work .cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.work h3{font-size:1.25rem}
.work .yr{font-family:var(--f-label);font-size:var(--s-xs);color:var(--stone);font-variant-numeric:tabular-nums}
.work .mat{font-size:var(--s-sm);color:var(--ink-soft);margin-top:-.5rem}
.work .estado{position:absolute;top:.75rem;left:.75rem;font-size:.6875rem;letter-spacing:.06em;padding:.3rem .6rem;border-radius:999px;background:var(--paper);color:var(--earth)}
.work[hidden]{display:none!important}
.gallery .vacio{grid-column:1/-1;color:var(--ink-soft);text-align:center;padding-block:3rem}
@media (max-width:760px){.work{grid-column:span 6}}
@media (max-width:480px){.work{grid-column:span 12}}

/* Detalle de obra */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);max-width:min(1040px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgba(20,16,12,.55)}
/* Apertura del detalle: fundido corto y un leve acercamiento */
dialog[open]{animation:aparecer .3s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:fundido .3s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes fundido{from{opacity:0}}
.lb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.lb-media{display:flex;flex-direction:column;min-width:0;background:var(--ph-a)}
.lb .ph{aspect-ratio:4/5}
.lb-foto{position:relative;touch-action:pan-y}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 85%,transparent);color:var(--earth);font-size:1.6rem;line-height:1;cursor:pointer;opacity:.85;transition:opacity .25s,background .25s}
.lb-nav:hover{opacity:1;background:var(--paper)}
.lb-nav span{margin-top:-3px}
.lb-nav.ant{left:.6rem}.lb-nav.sig{right:.6rem}
.lb-puntos{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:6px;pointer-events:none}
.lb-puntos i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--paper) 70%,transparent);transition:background .25s}
.lb-puntos i.si{background:var(--earth)}
.lb-arriba{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lb-pos{font-family:var(--f-label);font-size:var(--s-xs);color:var(--stone);font-variant-numeric:tabular-nums}
.lb.cambio .lb-foto .ph,.lb.cambio .lb-info{animation:cambio .35s ease}
@keyframes cambio{from{opacity:.25}}
@media (hover:hover){.lb-puntos{display:none}}
.lb-thumbs{display:flex;gap:6px;padding:6px;overflow-x:auto}
.lb-thumbs button{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;background:var(--ph-b);cursor:pointer}
.lb-thumbs button[aria-current="true"]{border-color:var(--earth)}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-info{padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1.25rem;min-width:0;overflow-y:auto}
.lb-info h3{font-size:var(--s-xl)}
.lb-desc{color:var(--ink-soft);white-space:pre-line}
.lb-info dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:0;font-size:var(--s-sm)}
.lb-info dt{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-top:.15rem}
.lb-info dd{margin:0}
.lb-acc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.5rem}
.lb-acc button{font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.2rem;cursor:pointer}
.lb-consultar{background:var(--earth);color:var(--paper);border:1px solid var(--earth)}
.lb-close{background:none;border:1px solid var(--line);color:var(--ink)}
.lb-wa{font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.2rem;border:1px solid var(--earth);color:var(--earth);text-decoration:none}
.lb-wa:hover{background:var(--raw)}
.lb-acc .lb-close{margin-left:auto}
.lb-guardar{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.1rem;cursor:pointer;background:none;border:1px solid var(--earth);color:var(--earth)}
.lb-guardar:hover{background:var(--raw)}

/* Cajón lateral de "Mi selección" */
.cajon{margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh}
.cajon[open]{animation:deslizar .35s cubic-bezier(.2,.7,.2,1)}
@keyframes deslizar{from{transform:translateX(24px);opacity:0}}
.cajon-in{display:flex;flex-direction:column;gap:1.25rem;padding:calc(1.5rem + env(safe-area-inset-top,0px)) max(1.5rem,env(safe-area-inset-right,0px)) calc(1.5rem + env(safe-area-inset-bottom,0px)) 1.5rem}
.cajon-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cajon-head h2{font-size:2rem}
.sel-vacia{color:var(--ink-soft);font-size:var(--s-sm)}
.sel-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sel-lista li{display:flex;align-items:center;gap:.75rem;padding-block:.75rem;border-bottom:1px solid var(--line)}
.sel-lista li:first-child{border-top:1px solid var(--line)}
.sel-ver{display:flex;align-items:center;gap:.9rem;flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sel-foto{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--ph-b);overflow:hidden}
.sel-foto img{width:100%;height:100%;object-fit:cover}
.sel-foto svg{width:70%;height:70%}
.sel-txt{display:flex;flex-direction:column;min-width:0}
.sel-txt strong{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:1.25rem;color:var(--earth);line-height:1.2}
.sel-txt small{font-size:var(--s-xs);color:var(--ink-soft)}
.sel-quitar{font:inherit;font-size:var(--s-xs);background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:.25rem}
.sel-consultar{align-self:flex-start;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.7rem 1.3rem;cursor:pointer}

/* Cuenta del cliente */
.cuenta{border-top:1px solid var(--earth);padding-top:1.25rem;margin-top:.5rem}
.cuenta > div{display:flex;flex-direction:column;gap:1rem}
.cuenta-txt{font-size:var(--s-sm);color:var(--ink-soft)}
.b-google{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-size:var(--s-sm);background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.7rem 1.2rem;cursor:pointer}
.cu-form{display:flex;flex-direction:column;gap:.9rem}
.cu-form .lb-consultar{align-self:flex-start;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.7rem 1.3rem;cursor:pointer}
.cu-msg{font-size:var(--s-sm);color:var(--earth)}
.cu-msg:empty{display:none}
.cu-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.cu-link{font:inherit;font-size:var(--s-sm);background:none;border:0;padding:0;color:var(--earth);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
.cu-legal{font-size:var(--s-xs);color:var(--stone)}
.mi-cuenta h3{font-size:1.5rem}
.mc-perfil{display:flex;align-items:center;gap:.85rem}
.mc-avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--earth);color:var(--paper);font-family:var(--f-display);font-size:1.4rem}
.mc-avatar img{width:100%;height:100%;object-fit:cover}
.mc-datos{display:flex;flex-direction:column;min-width:0}
.mc-datos strong{font-weight:500}
.mc-datos small{font-size:var(--s-sm);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.mc-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;margin:0;font-size:var(--s-sm)}
.mc-dl dt{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-top:.15rem}
.mc-dl dd{margin:0;font-variant-numeric:tabular-nums}
.mc-acc{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.mc-borrar{color:var(--danger)}
.mc-confirmar{display:flex;flex-direction:column;gap:.75rem;background:var(--raw);padding:1rem;border-radius:4px}
.mc-confirmar p{font-size:var(--s-sm)}
.mc-si{font:inherit;font-size:var(--s-sm);background:var(--danger);color:#fff;border:0;border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}
.mini{width:min(420px,calc(100vw - 32px))}
.mini h2{font-size:1.75rem}

/* Pieza elegida en el formulario */
.f-pieza{gap:.5rem}
.f-pieza-fila{display:flex;align-items:center;gap:.9rem;background:var(--paper);border:1px solid var(--earth);padding:.6rem .75rem;min-width:0}
.f-pieza-fila img{width:48px;height:48px;object-fit:cover;flex:none}
.f-pieza-fila strong{font-weight:500;color:var(--earth);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-pieza-quitar{font:inherit;font-size:var(--s-sm);background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:.25rem}
@media (max-width:700px){.lb{grid-template-columns:1fr}.lb .ph{aspect-ratio:1/1}}

/* Sobre mí */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.about .ph{aspect-ratio:3/4}
.about-text{display:flex;flex-direction:column;gap:1.4rem;max-width:62ch;min-width:0}
.about-text h2{font-size:var(--s-xl)}
.about-text .quote{font-family:var(--f-display);font-stretch:80%;font-weight:300;font-size:clamp(1.5rem,3vw,2rem);line-height:1.3;color:var(--earth)}
.about-text p{color:var(--ink-soft)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--earth)}
.facts div{display:flex;flex-direction:column;gap:.3rem}
.facts strong{font-weight:500;font-size:var(--s-sm)}
.facts span{font-size:var(--s-sm);color:var(--ink-soft)}
.retrato{margin:0}
/* El retrato es de cuerpo entero: en el celular se recorta un poco desde abajo para mantener la cara y la vasija */
.retrato img{object-position:50% 20%}
@media (max-width:820px){.about{grid-template-columns:1fr}.about .ph{aspect-ratio:4/3}.about .retrato{aspect-ratio:4/5}}

/* Proceso */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;border-top:2px solid var(--earth);counter-increment:s;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-label);font-size:var(--s-xs);color:var(--earth-soft)}
.steps h3{font-size:1.375rem}
.steps p{font-size:var(--s-sm);color:var(--ink-soft)}
.steps .temp{font-family:var(--f-label);font-size:var(--s-xs);color:var(--earth)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.process-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(3rem,6vw,5rem)}
.process-band .ph{aspect-ratio:16/10}
.process-band .ph:last-child{aspect-ratio:auto}
@media (max-width:700px){.process-band{grid-template-columns:1fr}.process-band .ph:last-child{aspect-ratio:4/3}}

/* Encargos y contacto */
.contact{background:var(--raw)}
.contact .sec{border-top:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
.kinds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kinds li{padding-block:1.1rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
.kinds li:first-child{border-top:1px solid var(--line)}
.kinds strong{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:1.375rem;color:var(--earth)}
.kinds span{font-size:var(--s-sm);color:var(--ink-soft)}
.direct{margin-top:2rem;display:flex;flex-direction:column;gap:.4rem;font-size:var(--s-sm)}
.direct .v{font-family:var(--f-label);user-select:all;color:var(--ink)}
.direct a{color:var(--earth);text-underline-offset:3px}
.direct .row{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-content:start}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
input,select,textarea{font:inherit;font-size:var(--s-md);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.75rem .9rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--earth)}
textarea{min-height:9rem;resize:vertical}
.send{grid-column:1/-1;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.send button{font:inherit;font-size:var(--s-sm);font-weight:500;letter-spacing:.04em;background:var(--earth);color:var(--paper);border:0;padding:.9rem 2rem;border-radius:999px;cursor:pointer;transition:opacity .2s}
.send button:hover{opacity:.85}
.send button:disabled{opacity:.5;cursor:default}
.send .msg{font-size:var(--s-sm);color:var(--earth)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){form{grid-template-columns:1fr}}

footer{padding-block:2.5rem;background:var(--earth)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--s-sm);color:var(--raw)}
.foot-brand{display:inline-flex;align-items:center;gap:.9rem}
footer .logo{width:36px;height:32px;color:var(--raw)}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{text-decoration:none;opacity:.85}
.foot-links a:hover{opacity:1}