/* Perrito Feliz — sitio estático */
:root {
  color-scheme: light dark;
  --fondo: #FFF9F2;
  --tarjeta: #FFFFFF;
  --tinta: #2D2A26;
  --tinta-suave: #6B6459;
  --marca: #E8722A;
  --marca-oscura: #C55A1B;
  --borde: #EFE5D8;
  --aviso-fondo: #FFF3E6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1C1917;
    --tarjeta: #26221E;
    --tinta: #F2EDE6;
    --tinta-suave: #A89F93;
    --marca: #F08A45;
    --marca-oscura: #F5A36B;
    --borde: #3A342E;
    --aviso-fondo: #33281D;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.65;
  font-size: 17px;
}
main { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; }
a { color: var(--marca-oscura); }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.6em 0 0.4em; }
h2 { font-size: 1.25rem; margin: 1.6em 0 0.4em; }
p, li { color: var(--tinta); }
.suave { color: var(--tinta-suave); }
.fecha { color: var(--tinta-suave); font-size: 0.9rem; }

header.sitio {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto; padding: 18px 20px 0;
}
header.sitio a { text-decoration: none; color: var(--tinta); font-weight: 700; font-size: 1.05rem; }
header.sitio .logo { font-size: 1.5rem; }

footer.sitio {
  max-width: 720px; margin: 0 auto; padding: 24px 20px 48px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 0.9rem;
}
footer.sitio nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
footer.sitio a { color: var(--tinta-suave); }

/* Landing */
.hero { text-align: center; padding: 40px 0 16px; }
.hero .perrito { font-size: 4rem; line-height: 1; }
.hero h1 { font-size: 2.3rem; margin: 0.3em 0 0.2em; }
.hero .lema { font-size: 1.2rem; color: var(--tinta-suave); margin: 0 auto 18px; max-width: 34ch; }
.badge {
  display: inline-block; background: var(--aviso-fondo); border: 1px solid var(--borde);
  border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 0.95rem;
}
.rasgos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.rasgos li {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
}
.rasgos .icono { font-size: 1.6rem; line-height: 1.3; }
.rasgos strong { display: block; margin-bottom: 2px; }
.rasgos p { margin: 0; color: var(--tinta-suave); font-size: 0.97rem; }

/* Aviso destacado (ChatVET / legales) */
.aviso {
  background: var(--aviso-fondo); border: 1px solid var(--borde);
  border-left: 4px solid var(--marca); border-radius: 10px;
  padding: 12px 16px; margin: 18px 0;
}
.aviso p { margin: 0; }

/* Botón correo (soporte) */
.boton {
  display: inline-block; background: var(--marca); color: #fff !important;
  text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 12px;
}
.boton:hover { background: var(--marca-oscura); }

table.datos { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.95rem; }
table.datos th, table.datos td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.datos th { color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }