/* base.css — Tipografías locales, tokens globales y piezas comunes (form, CTA móvil, accesibilidad). */

@font-face{font-family:'DM Serif Display';src:url(/assets/fonts/dm-serif-display.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(/assets/fonts/dm-serif-display-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument-sans-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --honey:#D4A853;--honey-d:#8F6F1F;--honey-l:#ECC978;
  --ink:#141311;--ink2:#1E1D1A;--ink3:#2A2825;
  --cream:#F5F0E8;--cream2:#EDE7DB;--cream3:#E3DBCC;
  --txt:#2C2A25;--txt2:#555249;--txt3:#6F6A60;
  --danger:#B3321F;--eco:#2F7A3E;
  --bdr:rgba(0,0,0,.08);--bdr-l:rgba(255,255,255,.1);
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  /* Regla de anchos: gutter fijo en px, nunca %. --wrap lo usan todas las páginas. */
  --gutter:16px;
  --wrap:calc(100% - 2 * var(--gutter));
  --max:1200px;
  --r:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:768px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--cream);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,video{max-width:100%}
img{height:auto;display:block}
a{color:inherit}
/* DM Serif Display solo tiene peso 400: evita negrita sintética en títulos */
:where(h1,h2){font-weight:400}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

.skip-link{position:absolute;left:8px;top:-100px;z-index:100000;background:var(--honey);color:var(--ink);padding:12px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip-link:focus{top:8px}

/* Todos los bloques de página: sin desbordes laterales. */
.page{overflow-x:clip}

/* ── Formulario de contacto ─────────────────────────────── */
.cf{display:grid;gap:16px;font-family:var(--sans)}
.cf__row{display:grid;gap:16px}
@media (min-width:600px){.cf__row{grid-template-columns:1fr 1fr}}
.cf__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cf__field label{font-size:.95rem;font-weight:600;color:var(--txt)}
.cf__opt{font-weight:400;color:var(--txt3)}
.cf input[type=text],.cf input:not([type]),.cf input[type=tel],.cf input[type=email],.cf textarea{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--txt);
  background:#fff;border:1.5px solid var(--cream3);border-radius:8px;transition:border-color .2s ease,box-shadow .2s ease}
.cf textarea{min-height:130px;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 3px rgba(212,168,83,.25)}
.cf [aria-invalid=true]{border-color:var(--danger)}
.cf__err{font-size:.875rem;color:var(--danger);font-weight:600}
.cf__check{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;font-size:.95rem!important;cursor:pointer}
.cf__check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--honey-d);flex-shrink:0}
.cf__check a{color:var(--honey-d);text-decoration:underline}
.cf__submit{min-height:52px;padding:14px 24px;border:0;border-radius:8px;background:var(--honey);color:var(--ink);font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;transition:background .2s ease,transform .2s ease}
.cf__submit:hover{background:var(--honey-l)}
.cf__submit:active{transform:translateY(1px)}
.cf__submit[disabled]{opacity:.6;cursor:progress}
.cf__note{margin:0;font-size:1rem;color:var(--txt3)}
.cf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf__ok,.cf__alert{padding:20px 24px;border-radius:10px;font-size:1rem;line-height:1.6}
.cf__ok{background:#EAF4EC;border:1px solid #BFDCC5;color:#1F4D29}
.cf__ok p{margin:0 0 8px}.cf__ok p:last-child{margin:0}
.cf__ok a{color:#1F4D29;font-weight:700;text-decoration:underline}
.cf__ok-title{font-family:var(--serif);font-size:1.4rem}
.cf__alert{background:#FBEDEA;border:1px solid #EFC3BA;color:#7A2415;margin-bottom:16px}

/* ── Barra de contacto fija en móvil ───────────────────── */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:9990;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom,0px));background:rgba(20,19,17,.96);border-top:1px solid rgba(255,255,255,.08)}
.mcta__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:1rem;text-decoration:none}
.mcta__btn--tel{background:var(--honey);color:var(--ink)}
.mcta__btn--wa{background:#1F8A4C;color:#fff}
@media (max-width:767px){body{padding-bottom:72px}}
@media (min-width:768px){.mcta{display:none}}

/* ── Volver arriba ──────────────────────────────────────── */
.back-to-top{position:fixed;right:16px;bottom:88px;z-index:9980;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);color:var(--honey-l);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
@media (min-width:768px){.back-to-top{right:24px;bottom:24px}}

/* Migas de pan: zona táctil cómoda en todas las páginas */
nav[aria-label="Migas de pan"] a{display:inline-block;padding-block:10px}