/* Busco Mi Mascota · diseño actualizado. Paleta heredada de la web original. */
:root {
  --barra: #5a8a03;
  --barra-2: #6ea50a;
  --lima: #86c111;
  --verde: #458b00;
  --verde-oscuro: #2f4f02;
  --etiqueta: #4b8a08;
  --oliva: #9b9b0d;
  --dorado: #daa520;
  --arena: #f5d8a2;
  --amarillo: #eec400;
  --fondo: #f3f1e4;
  --superficie: #ffffff;
  --superficie-2: #faf8ee;
  --borde: #e6e2cc;
  --texto: #3a3d33;
  --suave: #6b6e60;
  --enlace: #0a7a0a;
  --enlace-hover: #cc0000;
  --perdido: #cc0000;
  --encontrado: #008800;
  --adopcion: #c8901a;
  --sombra: 0 1px 2px rgba(50,60,20,.08), 0 8px 24px rgba(50,60,20,.10);
  --sombra-alta: 0 2px 4px rgba(50,60,20,.10), 0 16px 36px rgba(50,60,20,.18);
  --radio: 20px;
  --radio-s: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12150c;
    --superficie: #1c2113;
    --superficie-2: #232a18;
    --borde: #353d26;
    --texto: #e6e8d8;
    --suave: #a6aa95;
    --enlace: #8fd14a;
    --enlace-hover: #ff7b7b;
    --etiqueta: #9fd05a;
    --verde: #7bbf1c;
    --arena: #5a4a22;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --sombra-alta: 0 2px 4px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.5);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--texto); background: var(--fondo);
  font: 16.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-hover); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 6px; }
.contenedor { width: min(1120px, 100% - 32px); margin-inline: auto; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--amarillo); color: #222; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* ---------- Fondo con parallax (huellas en capas que se mueven con el scroll) ---------- */
.fondo { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.fondo__capa {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 1300px);
  background: url("../img/huella-fondo.svg") 0 0 / var(--t) var(--t) repeat; opacity: var(--o);
  will-change: transform;
}
.fondo__capa:nth-child(1) { --t: 640px; --o: .09; }
.fondo__capa:nth-child(2) { --t: 440px; --o: .07; background-position: 120px 160px; }
.fondo__capa:nth-child(3) { --t: 300px; --o: .06; background-position: 60px 220px; }
@media (prefers-color-scheme: dark) { .fondo__capa { filter: brightness(1.6); } .fondo__capa:nth-child(1) { --o: .07; } }

/* ---------- Cabecera ---------- */
.barra {
  background: linear-gradient(180deg, var(--barra-2), var(--barra));
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 2px 14px rgba(40,60,0,.28);
}
.barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 9px; flex-wrap: wrap; }
.logo img { display: block; }
.menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.enlace-menu {
  color: #fff; font-weight: 600; font-size: .95rem; padding: 8px 15px; border-radius: 999px; transition: background .15s;
}
.enlace-menu:hover { color: #fff; background: rgba(255,255,255,.18); }
.enlace-menu.activo { background: rgba(255,255,255,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.boton-publicar {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 8px 18px; border-radius: 999px;
  background: var(--amarillo); color: #2b2b00; font-weight: 800; font-size: .95rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.15); transition: transform .12s, filter .15s;
}
.boton-publicar:hover { color: #2b2b00; transform: translateY(-1px); filter: brightness(1.06); }
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; }
@media (max-width: 820px) {
  .burger { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .menu.abierto { display: flex; }
  .enlace-menu { padding: 12px 16px; border-radius: 12px; }
  .boton-publicar { margin: 6px 0 0; justify-content: center; padding: 12px; }
}

/* ---------- Contenido ---------- */
.principal { padding-block: 26px 40px; }
h1 {
  color: var(--verde); font-size: clamp(1.6rem, 3.2vw + .8rem, 2.35rem); line-height: 1.15;
  margin: 0 0 8px; letter-spacing: -.01em; font-weight: 800;
}
.subtitulo { color: var(--suave); margin: 0 0 22px; max-width: 62ch; font-size: 1.05rem; }
h2.seccion {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 38px 0 16px; font-size: 1.25rem; font-weight: 800; color: var(--texto);
}
h2.seccion::before { content: ""; width: 6px; height: 1.3em; border-radius: 3px; background: linear-gradient(var(--lima), var(--verde)); margin-right: 10px; flex: none; }
h2.seccion > span:first-child, h2.seccion > :first-child:not(a) { flex: 1; }
h2.seccion a.mas { font-size: .88rem; font-weight: 700; white-space: nowrap; }
h3 { color: var(--verde); margin: 26px 0 8px; font-size: 1.15rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0;
  font: inherit; font-weight: 700; color: #fff; padding: 11px 22px; border-radius: 999px; text-align: center;
  background: linear-gradient(#97cf2a, #7ab81a); box-shadow: 0 2px 0 #5f9511, 0 4px 12px rgba(80,130,0,.25);
  transition: transform .12s, filter .15s;
}
.btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #5f9511; }
.btn--suave { background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); }
.btn--suave:hover { color: var(--texto); }
.btn--secundario { background: linear-gradient(#c4c6b8, #a2a595); box-shadow: 0 2px 0 #84877a; }
.btn--peligro { background: linear-gradient(#e24a4a, #c40000); box-shadow: 0 2px 0 #8f0000; }
.btn--wa { background: linear-gradient(#34d36b, #1fb455); box-shadow: 0 2px 0 #148a40; }
.btn--amarillo { background: var(--amarillo); color: #2b2b00; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.btn--amarillo:hover { color: #2b2b00; }
.btn--g { padding: 14px 28px; font-size: 1.05rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }

/* ---------- Portada ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radio); padding: clamp(28px, 6vw, 60px);
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg, #4d7803 0%, #5a8a03 45%, #86c111 100%);
  box-shadow: var(--sombra-alta);
}
.hero::after {
  content: ""; position: absolute; right: -40px; bottom: -50px; width: 360px; height: 360px; opacity: .12; pointer-events: none;
  background: url("../img/huella-blanca.svg") center/contain no-repeat; transform: rotate(-14deg);
}
.hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw + .6rem, 3.1rem); max-width: 18ch; margin-bottom: 14px; }
.hero p { max-width: 54ch; font-size: 1.12rem; margin: 0 0 24px; color: rgba(255,255,255,.94); }
.hero .acciones { margin: 0; }
.estadisticas { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: -28px 16px 0; position: relative; z-index: 2; }
.dato-numero {
  background: var(--superficie); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; border-top: 4px solid var(--borde);
}
.dato-numero strong { font-size: clamp(1.5rem, 3vw + .6rem, 2.1rem); line-height: 1.1; }
.dato-numero span { color: var(--suave); font-size: .9rem; }
.dato-numero--perdido { border-top-color: var(--perdido); } .dato-numero--perdido strong { color: var(--perdido); }
.dato-numero--encontrado { border-top-color: var(--encontrado); } .dato-numero--encontrado strong { color: var(--encontrado); }
.dato-numero--adopcion { border-top-color: var(--adopcion); } .dato-numero--adopcion strong { color: var(--adopcion); }
@media (max-width: 520px) { .estadisticas { margin-inline: 4px; gap: 8px; } .dato-numero { padding: 10px 12px; } }

.categorias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 34px; }
.categoria {
  display: block; border-radius: var(--radio); overflow: hidden; color: #fff; background: var(--verde-oscuro);
  box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s;
}
.categoria i { display: block; aspect-ratio: 281 / 183; background: #e9e9e0 center/cover; }
.categoria:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.categoria span { padding: 11px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.1rem; }

.pasos-home { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos-home li {
  counter-increment: paso; background: var(--superficie); border-radius: var(--radio); padding: 22px 20px 20px; box-shadow: var(--sombra); position: relative;
}
.pasos-home li::before {
  content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 10px;
  background: linear-gradient(var(--lima), var(--verde)); color: #fff; font-weight: 800;
}
.pasos-home strong { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.pasos-home span { color: var(--suave); font-size: .96rem; }

.historia {
  display: grid; gap: 22px; margin-top: 38px; padding: 26px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde);
}
@media (min-width: 760px) { .historia { grid-template-columns: 150px 1fr; align-items: center; padding: 30px 34px; } }
.historia img { border-radius: 18px; border: 3px solid var(--arena); display: block; }
.historia h2 { margin: 0 0 8px; color: var(--verde); font-size: 1.3rem; }
.historia p { margin: 0 0 10px; }
.historia p:last-child { margin-bottom: 0; }
.banda {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 30px;
  padding: 22px 26px; border-radius: var(--radio); background: linear-gradient(135deg, #fff3c4, #ffe07a); color: #4a3b00;
}
.banda strong { font-size: 1.15rem; display: block; }
.banda p { margin: 2px 0 0; }
@media (prefers-color-scheme: dark) { .banda { background: linear-gradient(135deg, #4a3d0c, #5d4a0a); color: #ffeaa0; } }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
@media (max-width: 480px) { .rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.tarjeta {
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border-radius: 18px; overflow: hidden;
  box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s;
}
.tarjeta:hover { color: var(--texto); transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta__foto { position: relative; display: block; aspect-ratio: 4 / 3.4; background: var(--arena); overflow: hidden; }
.tarjeta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
.tarjeta__texto { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 15px; font-size: .92rem; color: var(--suave); }
.tarjeta__texto strong { color: var(--texto); font-size: 1.1rem; line-height: 1.25; }
.tarjeta__donde, .tarjeta__fecha { display: flex; align-items: center; gap: 6px; }
.tarjeta__donde .ico, .tarjeta__fecha .ico { width: .95em; height: .95em; color: var(--lima); }
@media (max-width: 480px) { .tarjeta__texto { padding: 10px 11px 12px; font-size: .86rem; } .tarjeta__texto strong { font-size: 1rem; } }
.chip {
  position: absolute; left: 10px; top: 10px; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.chip--perdido { background: var(--perdido); }
.chip--encontrado { background: var(--encontrado); }
.chip--adopcion, .chip--adoptado { background: var(--adopcion); }
.vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 30px 20px;
  background: var(--superficie-2); border: 2px dashed var(--borde); border-radius: var(--radio); color: var(--suave);
}
.vacio p { margin: 0 0 6px; }
.vacio__ico { width: 44px; height: 44px; color: var(--lima); opacity: .8; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pestana {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .93rem;
  background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); transition: background .15s;
}
.pestana small { color: var(--suave); font-weight: 600; }
.pestana:hover { color: var(--texto); background: var(--superficie-2); }
.pestana.activa { background: var(--verde); color: #fff; box-shadow: none; }
.pestana.activa small { color: rgba(255,255,255,.8); }
@media (prefers-color-scheme: dark) { .pestana.activa { background: #5f9a10; } }

/* ---------- Ficha ---------- */
.ficha { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ficha { grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; } }
.ficha__foto { position: relative; }
.ficha__foto img { width: 100%; border-radius: var(--radio); display: block; box-shadow: var(--sombra-alta); }
.ficha__foto .chip { left: 14px; top: 14px; font-size: .82rem; padding: 6px 14px; }
.ficha__titulo { margin-bottom: 4px; }
.ficha__sub { color: var(--suave); margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ficha__sub span { display: inline-flex; align-items: center; gap: 6px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.datos > div { background: var(--superficie); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--borde); }
.datos dt { color: var(--oliva); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.datos dd { margin: 2px 0 0; font-weight: 600; word-break: break-word; }
.bloque { margin-top: 24px; }
.bloque__titulo { margin: 0 0 8px; font-size: 1.05rem; color: var(--verde); }
.bloque__cuerpo { background: var(--superficie); border-radius: var(--radio-s); padding: 14px 18px; box-shadow: inset 0 0 0 1px var(--borde); white-space: pre-line; }
.botonera { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tarjeta-edicion { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 22px 22px; margin-top: 34px; }
.tarjeta-edicion summary { cursor: pointer; font-weight: 800; color: var(--verde); padding: 16px 0 6px; list-style: none; display: flex; align-items: center; gap: 8px; }
.tarjeta-edicion summary::-webkit-details-marker { display: none; }

/* ---------- Mensajes ---------- */
.error, .ok {
  display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 13px 16px; margin: 0 0 20px; font-weight: 500;
}
.error { background: #fdeaea; color: #8a1111; box-shadow: inset 0 0 0 1px #efb1b1; }
.ok { background: #e8f6d6; color: #285a00; box-shadow: inset 0 0 0 1px #b9dc8e; }
.error ul { margin: 4px 0 0; padding-left: 1.1rem; }
@media (prefers-color-scheme: dark) {
  .error { background: #3b1717; color: #ffb3b3; box-shadow: inset 0 0 0 1px #6b2a2a; }
  .ok { background: #1f3410; color: #c8ef9a; box-shadow: inset 0 0 0 1px #3d5f1f; }
}

/* ---------- Formularios ---------- */
.formulario { max-width: 780px; counter-reset: bloque; }
fieldset {
  min-width: 0; border: 0; margin: 0 0 22px; padding: 22px 22px 24px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
}
legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--texto); display: flex; align-items: center; gap: 10px; }
legend::before {
  counter-increment: bloque; content: counter(bloque); display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(var(--lima), var(--verde)); color: #fff; font-size: .95rem;
}
legend + * { clear: both; }
.campo { margin-top: 16px; }
.campo > label, .campo > .etiqueta { display: block; color: var(--etiqueta); font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=password], select, textarea {
  width: 100%; font: inherit; color: var(--texto); padding: 11px 14px; background: var(--superficie-2);
  border: 1.5px solid var(--borde); border-radius: var(--radio-s); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--lima); outline: 0; box-shadow: 0 0 0 4px rgba(134,193,17,.25); background: var(--superficie); }
textarea { min-height: 140px; resize: vertical; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px var(--borde); transition: background .15s, box-shadow .15s;
}
.opciones label:hover { background: var(--superficie); }
.opciones label:has(input:checked) { background: rgba(134,193,17,.16); box-shadow: inset 0 0 0 2px var(--lima); }
.opciones input { accent-color: var(--verde); width: 1.05em; height: 1.05em; }
.fila { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fila--2 { grid-template-columns: 1fr 1fr; } }
.ayuda-campo { color: var(--suave); font-size: .84rem; margin-top: 4px; }
.foto-zona {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px; cursor: pointer;
  border: 2px dashed var(--lima); border-radius: var(--radio); background: var(--superficie-2); color: var(--suave); transition: background .15s;
}
.foto-zona:hover { background: var(--superficie); }
.foto-zona .ico { width: 34px; height: 34px; color: var(--lima); }
.foto-zona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto-zona:focus-within { box-shadow: 0 0 0 4px rgba(134,193,17,.3); }
.vista-previa { max-width: 190px; border-radius: 14px; margin-top: 10px; display: block; box-shadow: var(--sombra); }
.oculto { display: none !important; }
.trampa { position: absolute; left: -9999px; }

/* ---------- Directorios ---------- */
.tabla-scroll { overflow-x: auto; border-radius: var(--radio-s); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { background: var(--dorado); color: #fff; text-align: left; padding: 10px 14px; white-space: nowrap; font-weight: 700; }
td { padding: 10px 14px; border-top: 1px solid var(--borde); vertical-align: top; }
tbody tr:hover td { background: var(--superficie-2); }
.buscador { max-width: 460px; margin: 0 0 16px; }
.anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.anuncios img { width: 100%; border-radius: 16px; display: block; box-shadow: var(--sombra); }

/* ---------- Textos largos ---------- */
.prose { max-width: 780px; font-size: 1.04rem; }
.prose h2 { color: var(--verde); font-size: 1.5rem; margin: 40px 0 10px; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 8px; }
.prose p { margin: 0 0 14px; }
.prose ol.pasos { list-style: none; counter-reset: p; padding: 0; margin: 18px 0; }
.prose ol.pasos > li { counter-increment: p; position: relative; padding: 4px 0 4px 54px; margin-bottom: 14px; }
.prose ol.pasos > li::before {
  content: counter(p); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(var(--lima), var(--verde)); color: #fff; font-weight: 800;
}
.prose ul { padding-left: 1.2rem; }
.prose li ul { margin-top: 8px; }
.consejo {
  margin: 10px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff6d6; color: #5a4600; box-shadow: inset 0 0 0 1px #f0dc8a;
}
.consejo strong { color: #7a5f00; }
@media (prefers-color-scheme: dark) { .consejo { background: #3b3210; color: #f3e1a0; box-shadow: inset 0 0 0 1px #5f5120; } .consejo strong { color: #ffd966; } }
.aviso-importante { margin: 18px 0; padding: 14px 18px; border-radius: 14px; background: #fdeaea; color: #8a1111; box-shadow: inset 0 0 0 1px #efb1b1; font-weight: 600; }
@media (prefers-color-scheme: dark) { .aviso-importante { background: #3b1717; color: #ffb3b3; box-shadow: inset 0 0 0 1px #6b2a2a; } }
.cierre { margin-top: 18px; font-weight: 800; font-size: 1.1rem; color: var(--verde); }
.prose .indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }

/* ---------- Pie ---------- */
.pie { background: var(--verde-oscuro); color: #dfe8cc; margin-top: 10px; }
.pie a { color: #dfe8cc; }
.pie a:hover { color: var(--amarillo); }
.pie__dentro { display: grid; gap: 28px; padding-block: 38px 22px; grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 760px) { .pie__dentro { grid-template-columns: 1fr; } }
.pie__marca p { margin: 10px 0 0; font-size: .93rem; max-width: 36ch; opacity: .9; }
.pie__enlaces { display: flex; flex-direction: column; gap: 6px; font-size: .94rem; }
.pie__enlaces strong { color: #fff; margin-bottom: 4px; font-size: 1rem; }
.pie__fin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-block: 16px 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: .84rem; opacity: .85; }

/* ---------- Botón flotante (móvil): solo el "+" ---------- */
.fab {
  display: none; position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 58px; height: 58px; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--amarillo); color: #2b2b00;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.32); transition: transform .15s;
}
.fab .ico { width: 30px; height: 30px; stroke-width: 2.6; }
.fab:hover, .fab:active { color: #2b2b00; transform: scale(1.06); }
@media (max-width: 820px) {
  .fab { display: inline-flex; } body.sin-fab .fab { display: none; }
  .pie { padding-bottom: 84px; }
  .hero { padding: 26px 22px 30px; }
  .hero h1 { font-size: 1.95rem; line-height: 1.1; }
  .hero p { font-size: 1.02rem; line-height: 1.5; margin-bottom: 20px; }
  .hero::after { width: 240px; height: 240px; opacity: .09; right: -60px; bottom: -70px; }
  .hero .btn--g { padding: 12px 22px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .fondo, .barra, .pie, .fab, .acciones, .botonera, .tarjeta-edicion { display: none !important; } body { background: #fff; } }

/* ---------- Selector de idioma (pantalla completa en el móvil) ---------- */
body.con-selector { overflow: hidden; }
.idioma {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: stretch; justify-content: center;
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(160deg, #3f6a02 0%, #5a8a03 50%, #86c111 100%);
  color: #fff; overflow-y: auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.idioma::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background: url("../img/huella-blanca.svg") 0 0 / 220px 220px repeat;
}
.idioma__caja {
  position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 26px;
  padding: 34px 22px 40px; text-align: center;
}
.idioma__logo { align-self: center; max-width: 80%; height: auto; }
.idioma__titulo { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: clamp(1.2rem, 4.6vw, 1.55rem); line-height: 1.25; font-weight: 800; }
.idioma__titulo span:not(:first-child) { font-size: .82em; font-weight: 600; opacity: .88; }
.idioma__lista { display: flex; flex-direction: column; gap: 14px; }
.idioma__opcion {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 22px; text-align: left;
  background: #fff; color: #23300a; box-shadow: 0 2px 0 rgba(0,0,0,.14), 0 12px 28px rgba(0,0,0,.25); transition: transform .15s;
}
.idioma__opcion:hover, .idioma__opcion:focus-visible { color: #23300a; transform: translateY(-3px) scale(1.01); }
.idioma__opcion img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.idioma__nombre { display: flex; flex-direction: column; line-height: 1.15; }
.idioma__nombre strong { font-size: 1.7rem; letter-spacing: .06em; color: #2f4f02; }
.idioma__nombre span { font-size: 1.05rem; color: #5a5f4a; }
.idioma__opcion--actual { box-shadow: 0 0 0 4px var(--amarillo), 0 12px 28px rgba(0,0,0,.25); }
.idioma__sugerido { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--dorado); font-size: 1.5rem; }
.idioma__cerrar {
  position: absolute; right: 14px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; font-size: 2rem; line-height: 1; background: rgba(255,255,255,.16);
}
.idioma__cerrar:hover { color: #fff; background: rgba(255,255,255,.3); }
@media (min-width: 700px) {
  .idioma { align-items: center; background: rgba(20,32,2,.72); backdrop-filter: blur(6px); }
  .idioma::before { display: none; }
  .idioma__caja {
    width: min(520px, 92vw); min-height: 0; margin: auto; border-radius: 28px; padding: 36px 36px 40px;
    background: linear-gradient(160deg, #4d7803 0%, #5a8a03 55%, #6ea50a 100%); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  }
}
.boton-idioma {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding: 7px 12px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .85rem;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.boton-idioma:hover { color: #fff; background: rgba(255,255,255,.28); }
.boton-idioma img { border-radius: 3px; display: block; }
@media (max-width: 820px) { .boton-idioma { justify-content: center; margin: 4px 0 0; padding: 12px; } }
@media print { .idioma { display: none !important; } }

/* Publicidad no invasiva (patrocinados) */
.pub { margin-top: 28px; background: var(--superficie); border-radius: var(--radio); box-shadow: inset 0 0 0 2px var(--suave), var(--sombra); padding: 14px 16px 16px; }
.pub__etiqueta { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: 10px; }
.pub__fila { display: grid; gap: 14px; grid-template-columns: 96px 1fr; align-items: center; }
.pub__logo { width: 96px; height: 96px; border-radius: 16px; background: linear-gradient(160deg, var(--lima), var(--verde-oscuro)); display: grid; place-items: center; color: #fff; }
.pub__logo .ico { width: 52px; height: 52px; }
.pub__titulo { margin: 0 0 2px; font-size: 1.1rem; color: var(--texto); font-weight: 800; }
.pub__texto { margin: 0 0 8px; color: var(--suave); font-size: .95rem; }
.pub__lugar { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--suave); margin-bottom: 10px; }
.pub__lugar .ico { width: 1em; height: 1em; color: var(--lima); }
.pub .btn { font-size: .92rem; padding: 8px 16px; }
@media (max-width: 480px) { .pub__fila { grid-template-columns: 64px 1fr; } .pub__logo { width: 64px; height: 64px; border-radius: 12px; } .pub__logo .ico { width: 36px; height: 36px; } }

/* ---------- Formulario por pasos y color según el tipo de anuncio ---------- */
.formulario { --tipo: var(--verde); }
.formulario[data-tipo="perdido"] { --tipo: var(--perdido); }
.formulario[data-tipo="encontrado"] { --tipo: var(--encontrado); }
.formulario[data-tipo="adopcion"] { --tipo: var(--adopcion); }
.formulario[data-tipo] legend::before { background: var(--tipo); }
.formulario[data-tipo] fieldset { box-shadow: var(--sombra), inset 0 4px 0 var(--tipo); }
.formulario[data-tipo] input:focus, .formulario[data-tipo] select:focus, .formulario[data-tipo] textarea:focus { border-color: var(--tipo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tipo) 25%, transparent); }
.formulario[data-tipo] .opciones label:has(input:checked) { background: color-mix(in srgb, var(--tipo) 14%, transparent); box-shadow: inset 0 0 0 2px var(--tipo); }
.formulario[data-tipo] .opciones input { accent-color: var(--tipo); }
.formulario[data-tipo] .btn:not(.btn--suave):not(.btn--peligro):not(.btn--wa) { background: var(--tipo); box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15); }
.paso--resumen legend::before { counter-increment: none; content: "✓"; }
.resumen:empty { display: none; }
.resumen__bloque { margin-top: 18px; }
.resumen__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.resumen__editar { padding: 6px 16px; font-size: .9rem; }
.resumen .vista-previa { margin-top: 12px; }
.pasos-cab {
  position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  margin: 0 0 14px; padding: 10px 14px 12px; border-radius: var(--radio-s);
  background: color-mix(in srgb, var(--superficie) 94%, transparent); box-shadow: var(--sombra); backdrop-filter: blur(6px);
}
.pasos-tipo { background: var(--tipo); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .02em; padding: 5px 14px; border-radius: 999px; }
.pasos-tipo:empty { display: none; }
.pasos-num { font-weight: 700; color: var(--suave); font-size: .92rem; }
.pasos-barra { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.pasos-barra > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--tipo); transition: width .25s; }
.pasos-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.pasos-nav .btn { flex: 1; }
@media (min-width: 640px) { .pasos-nav .btn { flex: 0 1 auto; min-width: 170px; } .pasos-nav .btn:last-child { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .pasos-barra > span { transition: none; } }

.consentimiento {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 16px; border-radius: var(--radio-s);
  background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px var(--borde); font-weight: 600; line-height: 1.45; color: var(--texto);
}
.consentimiento input { flex: none; width: 1.25em; height: 1.25em; margin-top: .15em; accent-color: var(--tipo, var(--verde)); }
.consentimiento:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tipo, var(--lima)); }
@media (max-width: 480px) { .pasos-nav .btn { padding: 12px 14px; font-size: 1rem; } }

.pie__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; }
.pie__legal a { color: #dfe8cc; text-decoration: underline; text-underline-offset: 3px; }
.pie__legal a:hover { color: #fff; }
.campo > label.consentimiento { display: flex; color: var(--texto); font-size: .98rem; font-weight: 500; margin-bottom: 0; }
.consentimiento a { font-weight: 700; }

/* ---------- Aviso tras publicar un anuncio ---------- */
.aviso-zona { margin: 0 0 24px; padding: 20px 22px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra), inset 0 4px 0 var(--verde); }
.aviso-zona--perdido { box-shadow: var(--sombra), inset 0 4px 0 var(--perdido); }
.aviso-zona--adopcion { box-shadow: var(--sombra), inset 0 4px 0 var(--adopcion); }
.aviso-zona h2 { margin: 0 0 10px; font-size: 1.25rem; }
.az-pasos { margin: 0 0 8px; padding-left: 1.3rem; }
.az-pasos li { margin-bottom: 4px; }
.az-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 10px; }
.az-bloque { background: var(--superficie-2); border-radius: var(--radio-s); padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--borde); }
.az-bloque h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; color: var(--verde); }
.az-bloque h3 .ico { color: var(--lima); }
.az-bloque ul { margin: 0 0 8px; padding: 0; list-style: none; font-size: .94rem; }
.az-bloque li { margin-bottom: 8px; line-height: 1.35; }
.az-bloque p { margin: 0 0 4px; font-size: .92rem; }
.dato-numero { min-width: 0; }
.dato-numero span { font-size: clamp(.72rem, 2.9vw, .9rem); overflow-wrap: anywhere; }

/* ---------- Donaciones ---------- */
.pie__donar { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: #dfe8cc; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); text-decoration: none; }
.pie__donar:hover { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.pie__donar .ico { width: 1em; height: 1em; }
dialog.donar { max-width: min(92vw, 420px); border: 0; border-radius: var(--radio); padding: 22px 24px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); }
dialog.donar::backdrop { background: rgba(20,38,0,.55); }
dialog.donar h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--verde); }
.donar__tel { font-size: 1.05rem; }
.donar__tel strong { display: block; font-size: 1.9rem; letter-spacing: .02em; color: var(--verde-oscuro); }
.donar__tel--pagina strong { display: inline; }
.donar__botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Negocios ---------- */
.negocio__oferta { display: block; padding: 6px 10px; border-radius: 10px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--dorado); }

/* ---------- Mapa por niveles ---------- */
.mapa { margin: 8px 0 22px; }
.mapa__svg { display: block; width: 100%; max-width: 760px; max-height: 70vh; margin: 0 auto; background: var(--superficie); border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--borde); }
.mapa__mun { fill: var(--superficie-2); stroke: var(--suave); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.mapa__mun--todos { --tono: var(--verde); } .mapa__mun--perdido { --tono: var(--perdido); } .mapa__mun--encontrado { --tono: var(--encontrado); } .mapa__mun--adopcion { --tono: var(--adopcion); }
.mapa__mun { fill: color-mix(in srgb, var(--tono, var(--verde)) calc(var(--alfa, 0) * 100%), var(--superficie-2)); }
a:hover > .mapa__mun, a:focus-visible > .mapa__mun { stroke: var(--texto); stroke-width: 2px; }
.mapa__mun--sel { stroke: var(--texto); stroke-width: 2.5px; }
.mapa__n { fill: var(--texto); font-weight: 800; paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; }
.migas { margin: 0 0 12px; color: var(--suave); }
.lista-mapa { columns: 2 200px; list-style: none; padding: 0; margin: 0 0 20px; }
.lista-mapa li { padding: 4px 0; break-inside: avoid; }
.lista-mapa small { color: var(--suave); margin-left: 4px; }
.estrellas { color: var(--dorado); letter-spacing: 2px; font-size: 1.05em; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.negocio__op { display: block; }
.negocio__resena { display: block; padding: 4px 0 4px 10px; border-left: 3px solid var(--borde); font-size: .9rem; }
.negocio__opinar { margin-top: 6px; }
.negocio__opinar summary { cursor: pointer; color: var(--verde); font-weight: 700; }

/* ---------- Ajustes para móvil ---------- */
.formulario:not([data-pasos]) legend::before { display: none; }
.acciones--fila { flex-wrap: nowrap; }
.acciones--fila .btn { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: 12px; }
.historia__enlace { display: none; font-weight: 700; }
.consejo + .subtitulo, .consejo + p { margin-top: 16px; }
@media (max-width: 560px) {
  main.principal { padding-top: 18px; }
  h1 { font-size: 1.7rem; margin-bottom: 8px; }
  .subtitulo { font-size: .98rem; margin-bottom: 16px; }
  .hero { padding: 20px 18px 22px; border-radius: 20px; }
  .hero h1 { font-size: 1.5rem; max-width: none; margin-bottom: 8px; }
  .hero p { font-size: .95rem; line-height: 1.45; margin-bottom: 16px; }
  .acciones--fila { gap: 8px; }
  .acciones--fila .btn { padding: 11px 6px; font-size: .95rem; gap: 5px; }
  .acciones--fila .btn .ico { width: 1.05em; height: 1.05em; }
  .estadisticas { margin-top: -22px; }
  .categorias { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .categoria { border-radius: 16px; }
  .categoria i { aspect-ratio: 1 / 1; }
  .categoria span { padding: 8px 10px; font-size: .92rem; }
  .categoria span .ico { display: none; }
  .seccion { margin-top: 26px; }
  .pasos-home { gap: 10px; }
  .pasos-home li { padding: 14px 16px 14px 62px; min-height: 0; }
  .pasos-home li::before { position: absolute; left: 16px; top: 14px; margin: 0; }
  .pasos-home strong { font-size: 1rem; margin-bottom: 2px; }
  .pasos-home span { font-size: .9rem; display: block; }
  .historia { padding: 18px 18px 20px; gap: 12px; }
  .historia img { width: 72px; height: 72px; border-width: 2px; border-radius: 14px; }
  .historia h2 { font-size: 1.15rem; }
  .historia p { font-size: .95rem; }
  .historia__mas { display: none; }
  .historia__enlace { display: inline-flex; align-items: center; gap: 4px; }
  .banda { padding: 18px; }
  /* Pie: los enlaces en dos columnas */
  .pie__dentro { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-block: 26px 14px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__enlaces { font-size: .9rem; }
  .pie { padding-bottom: 72px; }
  .fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .fab .ico { width: 26px; height: 26px; }
  /* Formularios más compactos */
  fieldset { padding: 16px 16px 18px; margin-bottom: 16px; border-radius: 18px; }
  legend { font-size: 1.05rem; }
  .campo { margin-top: 12px; }
  .formulario--filtros .fila--2, .formulario--filtros .fila { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .formulario--filtros .campo { margin-top: 10px; }
  .consentimiento { padding: 10px 12px; font-size: .92rem; }
  .pestanas { gap: 6px; }
  .pestana { padding: 7px 13px; font-size: .9rem; }
  .anuncios { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .banda { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Tablas de directorios como tarjetas */
  .tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas tr { padding: 12px 14px; border-top: 1px solid var(--borde); }
  .tabla--tarjetas tbody tr:first-child { border-top: 0; }
  .tabla--tarjetas td { border: 0; padding: 2px 0; }
  .tabla--tarjetas td:empty, .tabla--tarjetas .celda-vacia { display: none; }
  #vets td:first-child { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
  #vets td:nth-child(2) { font-size: 1.02rem; }
  #vets td:nth-child(2)::before { display: none; }
  .tabla--tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--suave); font-size: .8rem; }
  .tabla--tarjetas td:first-child { font-size: 1.02rem; font-weight: 700; }
  .tabla--tarjetas td:first-child::before { display: none; }
  .tabla--tarjetas tbody tr:hover td { background: none; }
  .rejilla--una { grid-template-columns: 1fr; }
  .tabla--tarjetas td:first-child small { font-weight: 400; }
  .botonera { display: flex; flex-wrap: wrap; gap: 8px; }
  .botonera .btn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; font-size: .92rem; }
  .pub { padding: 12px; }
  .tabla--tarjetas td form { display: inline-block; margin: 2px 2px 0 0; }
  .ficha__foto { border-radius: 18px; }
  .mapa__svg { max-height: 56vh; }
}

/* ---------- Mapa: zonas, contadores y volver ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mapa__volver { padding: 7px 16px; font-size: .92rem; }
.migas__ruta { color: var(--suave); }
.mapa__total { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cuentas { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.cuenta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .8rem; color: #fff; white-space: nowrap; }
.cuenta b { font-size: .95rem; }
.cuenta--perdido { background: var(--perdido); } .cuenta--encontrado { background: var(--encontrado); } .cuenta--adopcion { background: var(--adopcion); }
.cuenta--cero { background: var(--superficie-2); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.pestana--perdido.activa { background: var(--perdido); } .pestana--encontrado.activa { background: var(--encontrado); } .pestana--adopcion.activa { background: var(--adopcion); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 6px 0 0; font-size: .85rem; color: var(--suave); }
.leyenda__color { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.leyenda__color--perdido { background: var(--perdido); } .leyenda__color--encontrado { background: var(--encontrado); } .leyenda__color--adopcion { background: var(--adopcion); }
.mapa__mun--lejos { opacity: .55; }
.mapa__punto { fill: var(--superficie); stroke: var(--suave); stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; }
.mapa__punto--todos { fill: var(--verde); } .mapa__punto--perdido { fill: var(--perdido); } .mapa__punto--encontrado { fill: var(--encontrado); } .mapa__punto--adopcion { fill: var(--adopcion); }
.mapa__punto[class*="--"] { stroke: #fff; stroke-width: 1.5px; }
.mapa__punto--sel { stroke: var(--texto) !important; stroke-width: 3px !important; }
a:hover > .mapa__punto { stroke: var(--texto); stroke-width: 2px; }
.mapa__n--punto { fill: #fff; stroke: none; paint-order: normal; font-weight: 800; }
.mapa__zona { fill: var(--suave); pointer-events: none; paint-order: stroke; stroke: var(--superficie); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.lista-mapa li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lista-mapa a.actual { font-weight: 800; text-decoration: underline; }
.sin-punto { color: var(--suave); }
@media (max-width: 560px) { .lista-mapa { columns: 1; } .mapa__total { font-size: .95rem; } }

/* ---------- Menú del móvil, números de la portada y pie, sin saltos de línea ---------- */
.corto { display: none; }
@media (max-width: 820px) {
  .menu.abierto { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 10px 0 14px; align-items: stretch; }
  .menu .enlace-menu--inicio { grid-column: 1 / -1; }
  .menu .enlace-menu--perros, .menu .enlace-menu--gatos, .menu .enlace-menu--otros { grid-column: span 2; }
  .menu .enlace-menu--mapa { grid-column: 1 / -1; }
  .menu .enlace-menu--perros, .menu .enlace-menu--gatos, .menu .enlace-menu--otros, .menu .enlace-menu--inicio, .menu .enlace-menu--mapa, .menu .enlace-menu--ayuda, .menu .enlace-menu--cuenta {
    text-align: center; padding: 12px 6px; font-weight: 700; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  }
  .menu .enlace-menu--ayuda, .menu .enlace-menu--cuenta { grid-column: 1 / -1; }
  .menu .enlace-menu--ayuda { position: relative; margin-top: 10px; }
  .menu .enlace-menu--ayuda::before { content: ""; position: absolute; left: 4px; right: 4px; top: -9px; height: 1px; background: rgba(255,255,255,.35); }
  .menu .boton-idioma { grid-column: span 2; margin: 0; padding: 12px 6px; }
  .menu .boton-publicar { grid-column: span 4; margin: 0; }
}
@media (max-width: 560px) {
  .dato-numero { padding: 10px 8px; min-width: 0; }
  .dato-numero strong { font-size: 1.6rem; }
  .dato-numero span { white-space: nowrap; font-size: clamp(.68rem, 3.1vw, .85rem); }
  .largo { display: none; } .corto { display: inline; }
  .pie__enlaces { gap: 0; }
  .pie__enlaces strong { margin-bottom: 6px; }
  .pie__enlaces a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .pie__enlaces a:last-child { border-bottom: 0; }
  .fab { width: 44px; height: 44px; right: 12px; bottom: 16px; opacity: .92; }
  .fab .ico { width: 24px; height: 24px; }
}

/* ---------- Chat ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1.15rem; background: var(--verde); }
.avatar--0 { background: #4d7803; } .avatar--1 { background: #c8901a; } .avatar--2 { background: #1c7c8c; } .avatar--3 { background: #8a4fb0; } .avatar--4 { background: #c2503d; } .avatar--5 { background: #3b6ea8; }
.avatar--g { width: 64px; height: 64px; font-size: 1.7rem; }
.chat-pagina { max-width: 720px; margin: 0 auto; }
.chat__cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--superficie); border-radius: var(--radio) var(--radio) 0 0; box-shadow: inset 0 0 0 1px var(--borde); position: relative; }
.chat__atras { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--texto); background: var(--superficie-2); flex: none; }
.chat__quien { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat__quien strong { font-size: 1.05rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__sobre { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--suave); min-width: 0; }
.chat__sobre span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__mini { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.chat__mini--ico { display: inline-grid; place-items: center; background: var(--superficie-2); color: var(--verde); }
.chat__mini--ico .ico { width: 14px; height: 14px; }
.chat__menu { position: relative; }
.chat__menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--suave); }
.chat__menu summary::-webkit-details-marker { display: none; }
.chat__menu[open] summary { background: var(--superficie-2); }
.chat__menu-lista { position: absolute; right: 0; top: 44px; z-index: 5; min-width: 170px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-alta), inset 0 0 0 1px var(--borde); padding: 6px; display: grid; }
.chat__menu-lista a, .chat__menu-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: var(--texto); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.chat__menu-lista a:hover, .chat__menu-lista button:hover { background: var(--superficie-2); }
.chat__aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 7px 12px; font-size: .78rem; line-height: 1.3; color: #7a5f00; background: #fff6d6; box-shadow: inset 0 0 0 1px #f0dc96; }
.chat__aviso .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
@media (prefers-color-scheme: dark) { .chat__aviso { background: #3b3210; color: #f3e1a0; box-shadow: inset 0 0 0 1px #5f5120; } }
.chat { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; height: min(58vh, 560px); min-height: 260px; overflow-y: auto; scroll-behavior: smooth;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde); }
.chat__dia { display: flex; justify-content: center; margin: 10px 0 6px; }
.chat__dia span { font-size: .72rem; padding: 3px 12px; border-radius: 999px; background: var(--superficie); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.chat__msg { position: relative; align-self: flex-start; max-width: 82%; margin-top: 6px; padding: 8px 12px 5px; border-radius: 4px 18px 18px 18px; background: var(--superficie); box-shadow: 0 1px 1px rgba(0,0,0,.08), inset 0 0 0 1px var(--borde); overflow-wrap: anywhere; line-height: 1.35; }
.chat__msg--mio { align-self: flex-end; border-radius: 18px 4px 18px 18px; background: #dcf2b4; box-shadow: 0 1px 1px rgba(0,0,0,.08), inset 0 0 0 1px #b7d98a; color: #1e2b06; }
.chat__msg--cont { margin-top: 0; border-radius: 18px; }
@media (prefers-color-scheme: dark) { .chat__msg--mio { background: #2f4f02; color: #fff; box-shadow: inset 0 0 0 1px #4d7803; } }
.chat__txt { display: block; }
.chat__meta { display: block; text-align: right; font-size: .68rem; opacity: .62; margin-top: 1px; white-space: nowrap; }
.chat__ticks { letter-spacing: -3px; margin-left: 2px; opacity: .7; }
.chat__ticks--leido { color: #1c7c8c; opacity: 1; font-weight: 700; }
.chat__vacio { margin: auto; text-align: center; color: var(--suave); display: grid; justify-items: center; gap: 8px; max-width: 28ch; }
.chat__form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--superficie); border-radius: 0 0 var(--radio) var(--radio); box-shadow: inset 0 0 0 1px var(--borde); position: sticky; bottom: 0; }
.chat__form textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; border-radius: 22px; padding: 11px 16px; line-height: 1.3; }
.chat__enviar { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(var(--lima), var(--verde)); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.chat__enviar .ico { width: 22px; height: 22px; }
.chat__enviar:active { transform: translateY(1px); }
.chat__estado { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fdeaea; color: #8a1111; border-radius: 0 0 var(--radio) var(--radio); box-shadow: inset 0 0 0 1px #efb1b1; font-weight: 600; font-size: .92rem; }
@media (prefers-color-scheme: dark) { .chat__estado { background: #3b1717; color: #ffb3b3; box-shadow: inset 0 0 0 1px #6b2a2a; } }
.chat__lista { display: grid; gap: 8px; }
.chat__fila { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); transition: transform .12s; }
.chat__fila:hover { transform: translateY(-1px); color: var(--texto); }
.chat__fila--nuevo { box-shadow: var(--sombra), inset 4px 0 0 var(--lima); }
.chat__fila-cuerpo { min-width: 0; flex: 1; display: grid; gap: 1px; }
.chat__fila-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat__fila-top small { color: var(--suave); font-size: .75rem; white-space: nowrap; }
.chat__fila-sobre { font-size: .78rem; color: var(--verde); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__fila-ultimo { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--suave); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__fila--nuevo .chat__fila-ultimo { color: var(--texto); font-weight: 600; }
.chat__badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--lima); color: #1d3300; font-size: .78rem; font-weight: 800; }
@media (max-width: 560px) { .chat { height: calc(100vh - 330px); min-height: 220px; } .chat__msg { max-width: 88%; } }

.chat__item { position: relative; }
.chat__item .chat__fila { padding-right: 44px; }
.chat__borrar { position: absolute; right: 8px; top: 8px; margin: 0; }
.chat__borrar button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--suave); cursor: pointer; font-size: .9rem; }
.chat__borrar button:hover { background: #fdeaea; color: #8a1111; }
.chat__fin { font-style: normal; font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde); margin-right: 4px; }
.chat__estado--fin { background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); font-weight: 500; }
.chat__menu-peligro { color: #b00000 !important; }

/* ---------- Descarga de la app ---------- */
.app-descarga { display: flex; gap: 20px; align-items: center; padding: 20px; margin: 10px 0 20px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); flex-wrap: wrap; }
.app-descarga img { border-radius: 22px; box-shadow: var(--sombra); }
.app-qr { margin-top: 24px; text-align: left; }
@media (max-width: 560px) { .app-qr { display: none; } .app-descarga img { width: 72px; height: 72px; } }

/* ---------- Pantalla de inicio dentro de la app ---------- */
.app-splash { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f3f1e4; transition: opacity .45s; }
.app-splash--fuera { opacity: 0; pointer-events: none; }
.app-splash img { width: 30vmin; min-width: 110px; max-width: 220px; height: auto; }
.app-splash__nombre { margin-top: 18px; color: #3f5f02; font: 800 1.5rem/1.2 system-ui, sans-serif; letter-spacing: .01em; text-align: center; }
.app-splash__datos { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom)); text-align: center; color: #6b6e60; font: 500 .85rem/1.5 system-ui, sans-serif; }
.app-splash__datos strong { color: #3f5f02; }

.app-aviso { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9999; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta), inset 0 0 0 2px var(--lima); }
.app-aviso span { flex: 1 1 100%; font-weight: 700; }
.app-aviso .btn { padding: 8px 16px; font-size: .92rem; }