/* La Doble A · página de «en construcción». Colores y tipografías de la marca (los mismos que public/css/tienda.css). */
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-serif-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/noto-serif-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:400;font-display:swap;src:url(/fonts/josefin-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:600;font-display:swap;src:url(/fonts/josefin-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:400;font-display:swap;src:url(/fonts/lato-latin-400-normal.woff2) format("woff2")}

:root{
  --vino:#68102A; --vino-osc:#4b0b1e; --rosa:#C5AC9E; --rosa-suave:#F4ECE7; --crema:#FBF8F5;
  --tinta:#2B2B2B; --gris:#5E5E5E;
  --f-titulo:"Noto Serif Display",Georgia,serif; --f-ui:"Josefin Sans","Trebuchet MS",sans-serif; --f-texto:"Lato",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  min-height:100%; display:grid; place-items:center; padding:24px 16px;
  font-family:var(--f-texto); color:var(--tinta); line-height:1.6;
  background:#d9c4ad url(/img/fondo.webp) center/cover no-repeat fixed;
}
.tarjeta{
  width:100%; max-width:560px; text-align:center;
  background:rgba(251,248,245,.94); border-radius:6px;
  padding:clamp(28px,6vw,52px) clamp(20px,6vw,56px);
  box-shadow:0 18px 60px rgba(75,11,30,.22);
  border-top:4px solid var(--vino);
  animation:aparece .9s ease-out both;
}
.logo{width:min(300px,78%); height:auto; display:block; margin:0 auto 6px}
.lema{font-family:var(--f-ui); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rosa); font-weight:600}
h1{
  font-family:var(--f-titulo); font-weight:500; color:var(--vino);
  font-size:clamp(1.7rem,6vw,2.35rem); line-height:1.15; margin:26px 0 14px;
}
h1 em{font-style:italic; font-weight:400; color:var(--vino-osc)}
.texto{color:var(--gris); max-width:42ch; margin:0 auto}
.contacto{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:28px 0 22px}
.boton{
  font-family:var(--f-ui); font-weight:600; font-size:.92rem; letter-spacing:.04em;
  display:inline-block; padding:12px 20px 10px; border-radius:4px; text-decoration:none;
  background:var(--vino); color:#fff; border:2px solid var(--vino); transition:background .2s,color .2s;
  max-width:100%; overflow-wrap:anywhere;
}
.boton:hover,.boton:focus-visible{background:var(--vino-osc); border-color:var(--vino-osc)}
.boton--borde{background:transparent; color:var(--vino)}
.boton--borde:hover,.boton--borde:focus-visible{background:var(--vino); color:#fff}
.pie{font-family:var(--f-ui); font-size:.8rem; letter-spacing:.06em; color:var(--gris); border-top:1px solid #E6DCD4; padding-top:16px}
@keyframes aparece{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.tarjeta{animation:none}}
@media (max-width:600px){body{background-attachment:scroll} .lema{letter-spacing:.14em; font-size:.72rem}}