/* =========================================================
   Felinos Axarquía · Hoja de estilos
   Paleta sacada del logotipo (melocotón, tinta, rosa y corazón) + azul mar de la costa de la Axarquía.
   Motivos: el arco (la puerta de casa) y la chapa identificativa con el nombre de cada gato.
   Diseño y desarrollo: Oballe Studio Web · 2026 · Sin frameworks.
   Fuentes autoalojadas: Fredoka y Figtree (licencia OFL).
   ========================================================= */

/* ---------- Fuentes ---------- */
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --blanco:#ffffff;
  --melocoton:#efb07d;        /* color principal del logotipo */
  --melocoton-claro:#fdf1e7;
  --rosa:#facccc;             /* orejas y mejillas del gato del logo */
  --mar:#0e5e63;              /* azul mar, acciones y enlaces */
  --mar-osc:#0a4246;
  --tinta:#2b1a17;            /* trazo del logotipo */
  --gris:#5e4d48;
  --corazon:#c93a3a;          /* avisos urgentes */
  --linea:#ead8ca;
  --titulo:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --texto:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --ancho:1180px;
  --medida:66ch;
  --radio:14px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;font-family:var(--texto);font-size:1.0938rem;line-height:1.65;color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased}
body.sin-scroll{overflow:hidden}
h1,h2,h3{font-family:var(--titulo);font-weight:600;color:var(--tinta);line-height:1.15;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.6rem,3vw,2.25rem)}
h3{font-size:1.25rem;line-height:1.25;font-weight:500}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em}
a{color:var(--mar);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--mar-osc);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--melocoton);outline-offset:2px}
img,video{max-width:100%;display:block}
img{height:auto}
strong{font-weight:700}
.saltar{position:absolute;left:-9999px;top:0}
.saltar:focus{left:1rem;top:1rem;z-index:200;background:#fff;padding:.6rem 1rem;border:2px solid var(--mar)}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Estructura ---------- */
.contenedor{width:min(100% - 2rem,var(--ancho));margin-inline:auto}
.seccion{padding-block:clamp(3rem,7vw,5.5rem)}
.seccion--suave{background:var(--melocoton-claro)}
.prosa{max-width:var(--medida)}
.prosa ul,.prosa ol{padding-left:1.25em}
.prosa li{margin-bottom:.5em}
.prosa h2{margin-top:1.6em}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:1.4em}
.lead{font-size:clamp(1.12rem,1.6vw,1.25rem);line-height:1.6;color:var(--gris);max-width:60ch}
.intro-seccion{max-width:62ch;margin-bottom:2rem}
.intro-seccion p{color:var(--gris)}
.dos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.dos--centro{align-items:center}
@media (max-width:900px){.dos{grid-template-columns:1fr}}
.actualizado{font-size:.95rem;color:var(--gris);margin:1rem 0 0}

/* ---------- Botones ---------- */
.botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1.05rem/1.1 var(--titulo);padding:.85rem 1.4rem;border-radius:999px;border:2px solid var(--mar);background:var(--mar);color:#fff;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.btn:hover{background:var(--mar-osc);border-color:var(--mar-osc);color:#fff}
.btn--linea{background:transparent;color:var(--mar)}
.btn--linea:hover{background:var(--mar);color:#fff}
.btn--claro{background:#fff;border-color:#fff;color:var(--mar-osc)}
.btn--claro:hover{background:var(--melocoton-claro);border-color:var(--melocoton-claro);color:var(--mar-osc)}
.btn--melocoton{background:var(--melocoton);border-color:var(--melocoton);color:var(--tinta)}
.btn--melocoton:hover{background:#e89e64;border-color:#e89e64;color:var(--tinta)}
.btn--peq{font-size:.95rem;padding:.55rem 1rem}
.enlace-fuerte{font-weight:700}

/* ---------- Franja superior ---------- */
.franja{background:var(--tinta);color:#f3e4d8;font-size:.92rem}
.franja .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px}
.franja a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.franja a:hover{text-decoration:underline}
.franja__datos{display:flex;gap:1.25rem;flex-wrap:wrap}
.franja svg{width:16px;height:16px;flex:none}
@media (max-width:560px){.franja__email span{display:none}.franja .redes{display:none}}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linea)}
.cabecera__fila{display:flex;align-items:center;gap:1.25rem;min-height:80px}
.logo{flex:none;display:block}
.logo img{height:64px;width:auto}
.nav{margin-left:auto}
.nav__lista{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.nav__lista>li{position:relative}
.nav__grupo>button,.nav__lista>li>a{font:500 1.04rem/1 var(--titulo);color:var(--tinta);background:none;border:0;padding:.75rem .7rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;border-radius:999px}
.nav__grupo>button::after{content:"";width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav__grupo>button:hover,.nav__lista>li>a:hover,.nav__grupo.abierto>button{background:var(--melocoton-claro);color:var(--mar)}
.nav__lista>li>a[aria-current="page"],.nav__grupo--activo>button{color:var(--mar);background:var(--melocoton-claro)}
.submenu{list-style:none;margin:0;padding:.5rem;position:absolute;top:calc(100% + 4px);left:0;min-width:250px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 16px 32px rgba(43,26,23,.12);display:none}
.nav__grupo:hover>.submenu,.nav__grupo:focus-within>.submenu,.nav__grupo.abierto>.submenu{display:block}
.nav__grupo::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.submenu a{display:block;padding:.55rem .8rem;border-radius:8px;color:var(--tinta);text-decoration:none;font-size:1rem}
.submenu a:hover,.submenu a[aria-current="page"]{background:var(--melocoton-claro);color:var(--mar)}
.acciones{display:flex;gap:.5rem;flex:none}
.btn-menu{display:none;flex:none;width:46px;height:46px;border:2px solid var(--mar);border-radius:50%;background:#fff;color:var(--mar);cursor:pointer;align-items:center;justify-content:center}
.btn-menu span,.btn-menu span::before,.btn-menu span::after{display:block;width:18px;height:2px;background:currentColor;position:relative;content:""}
.btn-menu span::before{position:absolute;top:-6px}
.btn-menu span::after{position:absolute;top:6px}
.btn-menu[aria-expanded="true"] span{background:transparent}
.btn-menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.btn-menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.nav__extra{display:none}

@media (max-width:1100px){
  .cabecera__fila{min-height:70px;gap:.75rem}
  .logo img{height:54px}
  .btn-menu{display:inline-flex;order:3}
  .acciones{margin-left:auto}
  .acciones .btn--linea{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--melocoton);max-height:calc(100vh - 110px);overflow-y:auto;padding:1rem 1rem 1.5rem}
  .nav.abierta{display:block}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0}
  .nav__grupo>button{pointer-events:none;width:100%;font:600 1.15rem/1.2 var(--titulo);padding:1rem 0 .35rem;background:none!important}
  .nav__grupo>button::after,.nav__grupo::after{display:none}
  .submenu{display:block;position:static;border:0;box-shadow:none;padding:0;min-width:0}
  .submenu a{padding:.55rem .8rem}
  .nav__lista>li>a{padding:1rem 0;font:600 1.15rem/1.2 var(--titulo);background:none!important}
  .nav__extra{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
}
@media (max-width:380px){.acciones .btn{padding:.6rem .85rem;font-size:.95rem}}

/* ---------- Portada (inicio) ---------- */
.portada{background:var(--melocoton-claro);padding-block:clamp(2rem,5vw,4.5rem)}
.portada__rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.portada h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:.45em}
.portada__nota{margin-top:1.75rem;font-size:.98rem;color:var(--gris);max-width:52ch}
@media (max-width:900px){.portada__rejilla{grid-template-columns:1fr}}

/* El arco: la puerta de casa que buscan todos los gatos */
.arco{margin:0;position:relative;max-width:470px;justify-self:end;width:100%}
.arco img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:42% 50%;border-radius:999px 999px var(--radio) var(--radio);border:6px solid #fff;box-shadow:0 0 0 2px var(--melocoton);background:var(--linea)}
@media (max-width:900px){.arco{justify-self:center;max-width:420px}.arco img{aspect-ratio:1}}

/* ---------- Cabecera de página interior ---------- */
.cabecera-pagina{background:var(--melocoton-claro);padding-block:clamp(1.75rem,4vw,3rem) clamp(2rem,4.5vw,3.25rem)}
.cabecera-pagina h1{margin-bottom:.35em}
.cabecera-pagina .lead{margin-bottom:0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 1.1rem;padding:0;font-size:.95rem;color:var(--gris)}
.migas li+li::before{content:"/";margin-right:.5rem;color:#b9a194}
.migas a{color:var(--gris)}

/* ---------- Chapa identificativa (nombre del gato) ---------- */
.chapa{position:relative;display:inline-grid;place-items:center;min-width:5.6rem;height:5.6rem;padding:0 .6rem;border-radius:50%;background:var(--melocoton);color:var(--tinta);font:600 1.15rem/1 var(--titulo);border:4px solid #fff;box-shadow:0 6px 14px rgba(43,26,23,.18)}
.chapa::before{content:"";position:absolute;top:-14px;left:50%;width:16px;height:16px;margin-left:-8px;border:3px solid var(--tinta);border-radius:50%;background:transparent}

/* ---------- Tarjetas de gatos (inicio) ---------- */
.gatos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:2.5rem 1.75rem}
.gato__imagen{display:block;position:relative;text-decoration:none}
.gato__imagen img{width:100%;aspect-ratio:1548/1016;object-fit:cover;border-radius:var(--radio);background:var(--linea)}
.gato__imagen .chapa{position:absolute;right:1rem;bottom:-2.8rem}
.gato h3{margin:1.2rem 0 .3rem;font-size:1.3rem;padding-right:6.5rem}
.gato p{margin:0 0 .4rem;font-size:1.02rem;color:var(--gris);line-height:1.5;max-width:30ch}
.aviso{display:inline-block;background:var(--corazon);color:#fff;font-weight:700;font-size:.9rem;padding:.2rem .7rem;border-radius:999px;margin-bottom:.6rem}

/* ---------- Banda Teaming ---------- */
.teaming{background:var(--mar-osc);color:#e3f0ef}
.teaming h2{color:#fff}
.teaming__rejilla{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.teaming__euro{font:600 clamp(5.5rem,14vw,10rem)/.85 var(--titulo);color:var(--melocoton);margin:0;letter-spacing:-.03em}
.teaming__euro small{display:block;font:500 1.15rem/1.3 var(--titulo);color:#fff;letter-spacing:0;margin-top:.6rem;text-align:center}
.teaming p{max-width:58ch}
.teaming__pasos{list-style:none;counter-reset:t;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1rem}
.teaming__pasos li{counter-increment:t;display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;line-height:1.45}
.teaming__pasos li::before{content:counter(t);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--melocoton);color:var(--tinta);font:600 1rem/1 var(--titulo)}
.teaming a:not(.btn){color:#fff}
@media (max-width:700px){.teaming__rejilla{grid-template-columns:1fr}.teaming__euro small{text-align:left}}

/* ---------- Formas de ayudar ---------- */
.ayudas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1rem 2.5rem}
.ayuda{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--linea)}
.ayuda__punto{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--melocoton);border:3px solid #fff;box-shadow:0 0 0 2px var(--melocoton);position:relative;margin-top:.1rem}
.ayuda__punto::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#fff}
.ayuda--destacada .ayuda__punto{background:var(--mar);box-shadow:0 0 0 2px var(--mar)}
.ayuda h3{margin:0 0 .25rem;font-size:1.25rem}
.ayuda p{margin:0 0 .35rem;font-size:1.02rem;color:var(--gris);line-height:1.5}
.ayuda a{font-weight:700;font-size:1rem}

/* ---------- Pasos (secuencias reales) ---------- */
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.75rem}
.pasos li{counter-increment:paso}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#fff;border:2px solid var(--melocoton);font:600 1.35rem/1 var(--titulo);color:var(--mar);margin-bottom:.8rem}
.pasos h3{margin-bottom:.35rem}
.pasos p{margin:0;color:var(--gris);font-size:1.02rem}

/* ---------- Datos clave ---------- */
.datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.65rem 1.5rem;margin:0;padding:1.4rem 1.6rem;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);font-size:1rem}
.datos dt{font-weight:700}
.datos dd{margin:0}
@media (max-width:560px){.datos{grid-template-columns:1fr;gap:.1rem}.datos dd{margin-bottom:.6rem}}

/* ---------- Mosaico y galería ---------- */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:0}
.mosaico img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radio);background:var(--linea)}
.mosaico img:first-child{grid-column:1/-1;aspect-ratio:451/400}
.galeria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,180px),1fr));gap:.6rem}
.galeria a{display:block;border-radius:10px;overflow:hidden}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--linea);transition:transform .25s}
.galeria a:hover img{transform:scale(1.03)}

/* ---------- Vídeo ---------- */
.video{margin:0}
.video video{width:100%;aspect-ratio:16/9;background:#1d1210;border-radius:var(--radio)}
.video figcaption{font-size:.95rem;color:var(--gris);margin-top:.5rem}

/* ---------- Cita ---------- */
.cita{margin:0;padding:clamp(1.5rem,4vw,2.25rem);background:var(--melocoton-claro);border-radius:var(--radio)}
.cita p{font:italic 400 clamp(1.25rem,2.4vw,1.6rem)/1.45 var(--texto);max-width:32ch;margin:0}
.cita footer{margin-top:.75rem;font-weight:700;color:var(--gris)}

/* ---------- Preguntas frecuentes ---------- */
.preguntas{max-width:78ch}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas details:first-child{border-top:1px solid var(--linea)}
.preguntas summary{list-style:none;cursor:pointer;position:relative;padding:1.1rem 3rem 1.1rem 0}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--melocoton-claro);font:600 1.3rem/1 var(--titulo);color:var(--mar)}
.preguntas details[open] summary::after{content:"\2013"}
.preguntas summary h3{font:500 1.15rem/1.35 var(--titulo);margin:0;display:inline}
.respuesta{padding:0 0 1.25rem;max-width:var(--medida)}
.respuesta p:last-child{margin-bottom:0}

/* ---------- Fichas de adopción ---------- */
.indice-gatos{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0;padding:0;list-style:none}
.indice-gatos a{display:inline-block;padding:.45rem 1rem;border:2px solid var(--melocoton);border-radius:999px;text-decoration:none;font:500 1rem/1.2 var(--titulo);background:#fff;color:var(--tinta)}
.indice-gatos a:hover{background:var(--melocoton)}
.ficha{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--linea);scroll-margin-top:100px}
.ficha:first-of-type{padding-top:0}
.ficha__foto{position:relative;align-self:start}
@media (min-width:861px){.ficha__foto{position:sticky;top:100px}}
.ficha__foto img{width:100%;aspect-ratio:1548/1016;object-fit:cover;border-radius:var(--radio);background:var(--linea)}
.ficha__foto .chapa{position:absolute;right:1.25rem;bottom:-2.8rem}
.ficha h2{margin-bottom:.6rem}
.rasgos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.1rem;margin:0 0 1.4rem;padding:1rem 1.2rem;background:var(--melocoton-claro);border-radius:var(--radio);font-size:1rem}
.rasgos dt{font-weight:700}
.rasgos dd{margin:0}
@media (max-width:480px){.rasgos{grid-template-columns:1fr;gap:0}.rasgos dd{margin-bottom:.5rem}}
.compartir{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1.25rem;font-size:.98rem}
.compartir__titulo{font-weight:700;margin-right:.25rem}
.compartir a,.compartir button{font:500 .95rem/1 var(--titulo);padding:.5rem .85rem;border:1px solid var(--linea);border-radius:999px;background:#fff;color:var(--mar);text-decoration:none;cursor:pointer}
.compartir a:hover,.compartir button:hover{border-color:var(--mar);background:var(--melocoton-claro)}
.ingles{margin-top:1.25rem;border-top:1px dashed var(--linea);padding-top:.9rem}
.ingles summary{cursor:pointer;font-weight:700;color:var(--mar)}
.ingles[open] summary{margin-bottom:.75rem}
@media (max-width:860px){.ficha{grid-template-columns:1fr}.ficha__texto{padding-top:2.2rem}}

/* ---------- Tarjetas de actividad ---------- */
.actividades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2rem}
.actividad img{width:100%;aspect-ratio:546/315;object-fit:cover;border-radius:var(--radio);background:var(--linea);margin-bottom:1rem}
.actividad h3{margin-bottom:.35rem}
.actividad p{color:var(--gris);font-size:1.02rem}

/* ---------- Bloques de donación ---------- */
.formas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.25rem;margin:0;padding:0;list-style:none}
.forma{background:#fff;border:2px solid var(--linea);border-radius:var(--radio);padding:1.5rem}
.forma--destacada{border-color:var(--mar);background:var(--mar-osc);color:#e3f0ef}
.forma--destacada h3{color:#fff}
.forma--destacada p{color:#e3f0ef!important}
.forma h3{margin-bottom:.4rem}
.forma p{font-size:1.02rem;color:var(--gris)}
.iban{display:block;font:700 1.15rem/1.3 var(--texto);letter-spacing:.02em;margin:.25rem 0 .75rem;word-break:break-word}
.lista-necesidades{columns:2 220px;column-gap:2rem;padding-left:1.2em}
.lista-necesidades li{margin-bottom:.45rem;break-inside:avoid}

/* ---------- Banda final (otras formas de ayudar) ---------- */
.banda{background:var(--melocoton-claro)}
.banda__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.banda__lista a{display:block;height:100%;padding:1.1rem 1.25rem;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);color:var(--tinta);text-decoration:none}
.banda__lista a:hover{border-color:var(--mar)}
.banda__lista strong{display:block;font:600 1.15rem/1.25 var(--titulo);color:var(--mar);margin-bottom:.25rem}
.banda__lista span{font-size:.98rem;color:var(--gris)}
.banda__lista .destacada a{background:var(--mar-osc);border-color:var(--mar-osc)}
.banda__lista .destacada strong{color:var(--melocoton)}
.banda__lista .destacada span{color:#e3f0ef}

/* ---------- Motivos de contacto ---------- */
.motivos{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.motivos a{display:block;padding:1rem 1.2rem;border:1px solid var(--linea);border-radius:var(--radio);text-decoration:none;color:var(--tinta);background:#fff}
.motivos a:hover{border-color:var(--mar)}
.motivos strong{display:block;font:600 1.12rem/1.25 var(--titulo)}
.motivos span{font-size:1rem;color:var(--mar)}

/* ---------- Instagram ---------- */
.instagram{position:relative}
.instagram__rejilla{display:grid;grid-template-columns:repeat(6,1fr)}
.instagram__rejilla img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--linea)}
.instagram__boton{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.25)}
@media (max-width:700px){.instagram__rejilla{grid-template-columns:repeat(3,1fr)}}

/* ---------- Formulario de adopción ---------- */
.formulario{max-width:860px}
.formulario fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:1.25rem clamp(1rem,3vw,1.75rem) .5rem;margin:0 0 1.75rem;background:#fff}
.formulario legend{font:600 1.25rem/1.2 var(--titulo);padding:0 .5rem}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-weight:700;margin-bottom:.3rem;font-size:1rem;line-height:1.35}
.campo .pista{display:block;font-weight:400;font-size:.93rem;color:var(--gris)}
.formulario input[type=text],.formulario input[type=email],.formulario input[type=tel],.formulario input[type=number],.formulario select,.formulario textarea{width:100%;font:inherit;font-size:1rem;padding:.65rem .8rem;border:1px solid #c6ab9b;border-radius:8px;background:#fff;color:var(--tinta)}
.formulario textarea{min-height:5.5em;resize:vertical}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:3px solid var(--melocoton);border-color:var(--mar)}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
@media (max-width:640px){.campos-2{grid-template-columns:1fr}}
.casilla{display:flex;gap:.6rem;align-items:flex-start;font-size:1rem;margin:1rem 0}
.casilla input{width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none;accent-color:var(--mar)}
.obligatorio{color:var(--corazon)}
.resultado{margin-top:2rem;padding:1.5rem;border:2px solid var(--mar);border-radius:var(--radio);background:var(--melocoton-claro)}
.resultado textarea{width:100%;min-height:14em;font:.95rem/1.45 ui-monospace,Consolas,monospace;padding:.75rem;border:1px solid var(--linea);border-radius:8px;background:#fff}

/* ---------- Pie ---------- */
.pie{background:var(--tinta);color:#ecdcd0;font-size:1rem}
.pie a{color:#fff}
.pie__rejilla{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;gap:2.25rem;padding-block:3.5rem 2.5rem}
.pie h2{font:600 1.1rem/1.3 var(--titulo);color:var(--melocoton);margin:0 0 .8rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.45rem}
.pie__logo{display:inline-block;background:#fff;padding:.4rem;border-radius:50%;margin-bottom:1rem}
.pie__logo img{width:96px;height:96px;border-radius:50%}
.pie__texto{max-width:36ch}
.pie__base{border-top:1px solid rgba(255,255,255,.15);padding-block:1.25rem 1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.92rem}
.pie__base ul{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.redes{display:flex;gap:.55rem;list-style:none;margin:1rem 0 0;padding:0}
.redes a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff}
.redes a:hover{background:var(--melocoton);border-color:var(--melocoton);color:var(--tinta)}
.redes svg{width:18px;height:18px}
.franja .redes{margin:0;gap:.25rem}
.franja .redes a{border:0;width:30px;height:30px}
.franja .redes a:hover{background:rgba(255,255,255,.15);color:#fff}
@media (max-width:900px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__rejilla{grid-template-columns:1fr}}

/* ---------- Visor de fotos ---------- */
dialog.visor{padding:0;border:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh;overflow:visible}
dialog.visor::backdrop{background:rgba(30,18,16,.9)}
.visor img{max-width:100%;max-height:88vh;width:auto;margin:auto;border-radius:var(--radio)}
.visor__cerrar{position:fixed;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:var(--mar);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}

/* ---------- Movimiento reducido e impresión ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.franja,.cabecera,.pie,.banda,.compartir,.instagram,.teaming{display:none}body{font-size:12pt}}

/* ---------- Ajustes ---------- */
.contenedor.prosa{max-width:none}
.contenedor.prosa>*{max-width:var(--medida)}
.forma--destacada a:not(.btn){color:#fff}