/* Web de Dendrika. Identidad PROVISIONAL: cuando tengas logo y colores,
   cambia solo estas variables (y el logo en cada página). */
:root {
  --acento: #1e3a8a;        /* color principal (provisional) */
  --acento-suave: #e8edf8;
  --fondo: #f7f8fa;
  --superficie: #ffffff;
  --texto: #111827;
  --secundario: #5b6475;
  --borde: #e3e6ec;
  --radio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --acento: #93b4ff; --acento-suave: #1b2540; --fondo: #0d1117; --superficie: #161b22;
    --texto: #e6e9ef; --secundario: #9aa3b2; --borde: #2a313c; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.6; }
a { color: var(--acento); }
a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.ancho { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
header.barra { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; }
.logo { font-weight: 800; font-size: 1.2rem; color: var(--texto); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--acento); }
header nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
header nav a { color: var(--secundario); text-decoration: none; font-weight: 500; }
header nav a:hover { color: var(--texto); }
.hero { padding: 4rem 0 3.5rem; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.2rem; max-width: 18ch; }
.hero p { font-size: 1.15rem; color: var(--secundario); max-width: 38rem; margin: 0 0 1.8rem; }
.boton { display: inline-block; background: var(--acento); color: var(--superficie); padding: .8rem 1.3rem; border-radius: 10px; text-decoration: none; font-weight: 600; }
.boton.secundario { background: transparent; color: var(--acento); border: 1px solid var(--borde); }
.botones { display: flex; flex-wrap: wrap; gap: .7rem; }
section { padding: 3rem 0; border-top: 1px solid var(--borde); }
section h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; margin: 0 0 .6rem; }
section > .ancho > p.intro { color: var(--secundario); max-width: 40rem; margin: 0 0 1.8rem; }
.productos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.producto { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; display: grid; gap: .6rem; align-content: start; }
.producto h3 { margin: 0; font-size: 1.25rem; }
.producto p { margin: 0; color: var(--secundario); }
.etiqueta { justify-self: start; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--acento-suave); color: var(--acento); }
.producto ul { margin: 0; padding-left: 1.1rem; color: var(--secundario); }
.producto .boton { justify-self: start; margin-top: .4rem; }
.valores { display: grid; gap: 1.5rem; }
.valores h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.valores p { margin: 0; color: var(--secundario); }
.contacto { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem; max-width: 40rem; }
.contacto p { margin: 0 0 1rem; color: var(--secundario); }
footer { padding: 2rem 0 3rem; border-top: 1px solid var(--borde); color: var(--secundario); font-size: .92rem; }
footer .ancho { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
footer a { color: var(--secundario); }
footer .copy { margin-left: auto; }
.legal { padding: 2rem 0 4rem; }
.legal dl { display: grid; gap: .5rem; }
.legal dl div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .8rem; }
.legal dt { color: var(--secundario); }
.legal dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 820px) { .valores { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { header nav { gap: .9rem; font-size: .95rem; } footer .copy { margin-left: 0; } }