/* TodosSantos.com · /contact/ — maqueta "Contact & Sell" (Claude Design) */
.tsm-contact { --sand:#D8C9AE; --mist:#D8D2C6; --olive:#4F553C; --ink-08:rgba(29,28,26,.08); --ink-14:rgba(29,28,26,.14); --ink-18:rgba(29,28,26,.18); --ink-30:rgba(29,28,26,.3); --ease:cubic-bezier(.2,.7,.2,1); --gap:clamp(64px,9vw,120px);
  width:calc(100vw - var(--tsm-sb,0px)); margin-left:calc(50% - 50vw + var(--tsm-sb,0px) / 2); padding:0 0 var(--gap); display:flex; flex-direction:column; gap:var(--gap); overflow-x:clip; }
.tsm-contact__sec { width:100%; max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,40px); box-sizing:border-box; }
.tsm-contact__eyebrow { margin:0; font:500 11px var(--font); letter-spacing:.28em; text-transform:uppercase; color:var(--ocean); }
.tsm-contact__eyebrow--sand, .tsm-contact__label--sand { color:var(--sand) !important; }
.tsm-contact__label { margin:0; font:500 10px var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }

/* Portada */
.tsm-contact__hero { padding-top:clamp(48px,7vw,104px); display:flex; flex-direction:column; gap:40px; animation:tscIn .9s var(--ease) both; }
.tsm-contact__hero-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:32px 64px; align-items:end; }
.tsm-contact__hero-grid > div { display:flex; flex-direction:column; gap:24px; }
.tsm-contact__h1 { margin:0; font:500 clamp(64px,10vw,144px)/.95 var(--display); letter-spacing:-.01em; color:var(--ink); }
.tsm-contact__intro { margin:0 0 12px; font:400 18px/1.6 var(--font); color:var(--ink-3); max-width:42ch; text-wrap:pretty; }
.tsm-contact__rule { margin:0; border:0; height:1px; background:var(--ink); }
.tsm-contact__details { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; }
.tsm-contact__details > div { display:flex; flex-direction:column; gap:10px; padding:4px 0 8px; }
.tsm-contact__details dt { font:500 10px var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
.tsm-contact__details dd { margin:0; font:500 22px/1.25 var(--display); color:var(--ink); }
.tsm-contact__details dd a { color:inherit; text-decoration:none; word-break:break-all; transition:color .2s; }
.tsm-contact__details dd a:hover { color:var(--ocean); }
.tsm-contact__details dd small { display:block; margin-top:4px; font:400 12px/1.4 var(--font); color:var(--ink-3); }

/* 01 · Escríbenos */
.tsm-contact__write { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:8px; align-items:stretch; }
.tsm-contact__panel { background:var(--ink); color:var(--paper); padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; gap:40px; justify-content:space-between; animation:tscIn .9s var(--ease) .05s both; }
.tsm-contact__panel-top { display:flex; flex-direction:column; gap:20px; }
.tsm-contact__headline { margin:0; font:500 clamp(32px,3.4vw,44px)/1.1 var(--display); color:var(--paper); text-wrap:pretty; transition:opacity .25s; }
.tsm-contact__body { margin:0; font:400 14px/1.65 var(--font); color:var(--mist); max-width:40ch; text-wrap:pretty; }
.tsm-contact__intents { display:flex; flex-direction:column; gap:14px; }
.tsm-contact__rows { display:flex; flex-direction:column; }
.tsm-contact__row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid rgba(244,240,232,.2); cursor:pointer; color:var(--paper); transition:color .2s,padding-left .35s var(--ease); position:relative; }
.tsm-contact__row input { position:absolute; opacity:0; width:0; height:0; }
.tsm-contact__row:hover { color:var(--sand); }
.tsm-contact__row.is-on { color:var(--sand); padding-left:6px; }
.tsm-contact__row-l { font:500 24px/1 var(--display); }
.tsm-contact__row-n { font:400 11px var(--font); letter-spacing:.22em; text-transform:uppercase; color:rgba(244,240,232,.45); }
.tsm-contact__row.is-on .tsm-contact__row-n { color:var(--sand); }
.tsm-contact__row.is-on .tsm-contact__row-n::before { content:"— "; }
.tsm-contact__row input:focus-visible ~ .tsm-contact__row-l { outline:1px solid var(--sand); outline-offset:4px; }

.tsm-contact__card { background:var(--white); box-shadow:inset 0 0 0 1px var(--ink-08); padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; animation:tscIn .9s var(--ease) .12s both; }
.tsm-contact__form { display:flex; flex-direction:column; gap:28px; }
.tsm-contact__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:24px 32px; }
.tsm-contact .tsm-f { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tsm-contact .tsm-f > span { font:500 10px var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
.tsm-contact .tsm-f[hidden] { display:none; }
.tsm-contact .tsm-f input:not([type=checkbox]), .tsm-contact .tsm-f textarea, .tsm-contact .tsm-f .tsm-sel select { width:100%; background:transparent; border:0; border-bottom:1px solid var(--ink-30); border-radius:0; padding:10px 0; height:auto; font:400 16px/1.4 var(--font); color:var(--ink); outline:0; box-shadow:none; letter-spacing:0; text-transform:none; transition:border-color .2s; }
.tsm-contact .tsm-f .tsm-sel { position:relative; display:flex; align-items:center; }
.tsm-contact .tsm-f .tsm-sel select { padding-right:28px; cursor:pointer; }
.tsm-contact .tsm-f .tsm-sel > svg { right:0; }
.tsm-contact .tsm-f textarea { resize:vertical; line-height:1.5; }
.tsm-contact .tsm-f input:focus, .tsm-contact .tsm-f textarea:focus, .tsm-contact .tsm-f select:focus { border-bottom-color:var(--ink); }
.tsm-contact .tsm-f input::placeholder { color:rgba(29,28,26,.4); }
.tsm-contact .is-invalid input, .tsm-contact .is-invalid textarea { border-bottom-color:var(--coral); }
.tsm-contact__reply { display:flex; flex-direction:column; gap:12px; }
.tsm-contact__chips { display:flex; gap:8px; flex-wrap:wrap; }
.tsm-contact__chips label { position:relative; cursor:pointer; }
.tsm-contact__chips input { position:absolute; opacity:0; width:0; height:0; }
.tsm-contact__chips label > span { display:inline-flex; align-items:center; height:32px; padding:0 14px; border:1px solid var(--ink-30); font:500 11px var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); transition:background .2s,border-color .2s,color .2s; }
.tsm-contact__chips label:hover > span { border-color:var(--ink); }
.tsm-contact__chips input:checked + span { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tsm-contact__chips input:focus-visible + span { outline:1px solid var(--ink); outline-offset:2px; }
.tsm-contact .tsm-check { display:flex; align-items:flex-start; gap:10px; font:400 12px/1.5 var(--font); color:var(--ink-3); cursor:pointer; max-width:60ch; }
.tsm-contact .tsm-check input { margin:2px 0 0; width:16px; height:16px; flex:none; accent-color:var(--ink); }
.tsm-contact .tsm-check a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.tsm-contact .tsm-check.is-invalid { color:var(--coral); }
.tsm-contact__submit { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.tsm-contact .tsm-btn { border-radius:0; height:44px; padding:0 22px; font:500 12px var(--font); letter-spacing:.18em; margin-left:auto; }
.tsm-contact__msg { margin:0; font:500 13px var(--font); color:var(--ocean); flex:1; min-width:200px; }
.tsm-contact__msg:empty { display:none; }
.tsm-contact__msg.is-err { color:var(--coral); }
.tsm-contact__done { display:flex; flex-direction:column; gap:16px; min-height:320px; justify-content:center; }
.tsm-contact__done h2 { margin:0; font:500 48px/1 var(--display); color:var(--ink); }
.tsm-contact__done p { margin:0; font:400 16px/1.65 var(--font); color:var(--ink-3); max-width:40ch; }
.tsm-contact__done a { color:var(--ink); text-decoration:none; font:500 12px var(--font); letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.tsm-hp { position:absolute; left:-9999px; }

/* 02 · El pueblo */
.tsm-contact__head { display:flex; align-items:baseline; gap:32px; border-top:1px solid var(--ink); padding-top:20px; margin:0 0 40px; }
.tsm-contact__head > b { font:500 11px var(--font); letter-spacing:.28em; flex:none; }
.tsm-contact__head h2 { margin:0; font:500 clamp(34px,3.6vw,48px)/1.05 var(--display); color:var(--ink); }
.tsm-contact__head p { margin:12px 0 0; font:400 15px/1.65 var(--font); color:var(--ink-3); max-width:52ch; text-wrap:pretty; }
.tsm-contact__town-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:8px; }
.tsm-contact__fig { position:relative; grid-column:span 2; margin:0; aspect-ratio:16/9; min-height:320px; background:var(--sand); overflow:hidden; }
.tsm-contact__fig img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.tsm-contact__fig:hover img { transform:scale(1.03); }
.tsm-contact__fig figcaption { position:absolute; left:0; right:0; bottom:0; background:var(--ink); color:var(--paper); padding:14px 20px; display:flex; justify-content:space-between; gap:16px; font:400 11px var(--font); letter-spacing:.22em; text-transform:uppercase; }
.tsm-contact__fig figcaption em { font-style:normal; color:var(--sand); }
.tsm-contact__find { background:var(--olive); color:var(--paper); padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; min-height:320px; }
.tsm-contact__find-rows { display:flex; flex-direction:column; gap:14px; }
.tsm-contact__find-rows > div { display:flex; flex-direction:column; gap:4px; border-top:1px solid rgba(244,240,232,.2); padding-top:12px; }
.tsm-contact__find-rows small { font:400 10px var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--mist); }
.tsm-contact__find-rows b { font:500 22px/1.2 var(--display); }
.tsm-contact__maplink { align-self:flex-start; font:500 12px var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--paper); text-decoration:none; border-bottom:1px solid var(--paper); padding-bottom:4px; transition:color .2s,border-color .2s; }
.tsm-contact__maplink:hover { color:var(--sand); border-color:var(--sand); }

@keyframes tscIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) { .tsm-contact * { animation:none !important; transition:none !important } }
@media (max-width:960px) { .tsm-contact__fig { grid-column:auto; } }
@media (max-width:700px) {
  .tsm-contact { --gap:64px; }
  .tsm-contact__hero { padding-top:40px; gap:28px; }
  .tsm-contact__card, .tsm-contact__panel { padding:24px 18px; }
  .tsm-contact__row-l { font-size:21px; }
  .tsm-contact__find { padding:24px 18px; min-height:0; }
  .tsm-contact__head { gap:20px; }
}

.tsm-contact :where(dd,b,.tsm-contact__row-l,h1,h2) .ts-num { font-size:1em; font-weight:inherit; }

.tsm-contact button.tsm-btn--primary { background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; border-radius:0 !important; box-shadow:none !important; }
.tsm-contact button.tsm-btn--primary:hover { background:var(--ocean) !important; border-color:var(--ocean) !important; }