/* =========================================================================
   CASA MICHI — sistema visual
   Cálido, redondeado y con mucha foto, en la línea de patitasco.com/refugio
   ========================================================================= */
:root{
  --cream:#FFF9FB; --sand:#FDF0F5; --surface:#FFFFFF;
  --ink:#2E1F26; --ink-2:#5A454E; --muted:#8D7580; --line:#F7E6EC;
  --brand:#F6B3CB;            /* rosa palo: rellenos */
  --brand-ink:#6E2444;        /* texto sobre rosa palo */
  --brand-dark:#A85C7C;       /* rosa apagado: textos de acento */
  --brand-soft:#FFEEF4;
  --coral:#F4623A;
  --green:#1F8A70; --green-soft:#E2F1EC;
  --mint:#BCE2D4; --mint-ink:#125647;   /* verde pastel para botones */
  --lila:#D2C8F7; --lila-ink:#3F2F91;
  --sun:#FFB03B; --sun-soft:#FFF1D9;
  --lilac:#6F5AC8; --lilac-soft:#EDE9FB;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow:0 1px 2px rgba(46,31,38,.05), 0 8px 24px rgba(46,31,38,.07);
  --shadow-lg:0 2px 6px rgba(46,31,38,.06), 0 24px 48px rgba(46,31,38,.12);
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --display:'Fredoka','Baloo 2',var(--sans);
  --wrap:1180px;
  --formato-foto:4/5;      /* retrato: las fotos del refugio son de móvil */
  --formato-escena:4/3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}
.hide{display:none !important}
.stack>*+*{margin-top:14px}

/* ------------------------------------------------------------- cabecera */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,249,244,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; gap:22px; height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.12rem}
.logo .mark{
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(140deg,#F6B3CB,#F4A07A 55%,var(--sun));
}
.logo .mark img{width:100%; height:100%; object-fit:cover; display:block}
.logo small{display:block; font-family:var(--sans); font-weight:400; font-size:.72rem; color:var(--muted); line-height:1}
.nav{display:flex; gap:6px; margin-left:auto}
.nav a{
  text-decoration:none; padding:9px 14px; border-radius:999px; font-size:.94rem;
  font-weight:500; color:var(--ink-2); transition:background .15s,color .15s;
}
.nav a:hover{background:var(--sand)}
.nav a.active{background:var(--brand-soft); color:var(--brand-dark)}
.burger{display:none; margin-left:auto; background:none; border:0; font-size:1.5rem; cursor:pointer; padding:6px}

/* -------------------------------------------------------------- botones */
.btn{
  --bg:var(--brand); --fg:var(--brand-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg); color:var(--fg); border:0; border-radius:999px;
  padding:13px 24px; font-weight:600; font-size:.97rem; text-decoration:none;
  cursor:pointer; transition:transform .12s ease, filter .15s ease, box-shadow .15s;
  box-shadow:0 6px 16px rgba(196,131,157,.32);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn.green{--bg:var(--mint); --fg:var(--mint-ink); box-shadow:0 6px 16px rgba(120,180,163,.32)}
.btn.lilac{--bg:var(--lila); --fg:var(--lila-ink); box-shadow:0 6px 16px rgba(150,132,215,.32)}
.btn.dark{--bg:var(--ink); --fg:#fff; box-shadow:0 6px 16px rgba(42,23,32,.2)}
.btn.coral{--bg:var(--coral); --fg:#fff; box-shadow:0 6px 16px rgba(244,98,58,.24)}
.btn.ghost{--bg:transparent; --fg:var(--ink); border:1.5px solid var(--line); box-shadow:none; background:var(--surface)}
.btn.ghost:hover{border-color:var(--brand); color:var(--brand-dark)}
.btn.sm{padding:9px 16px; font-size:.88rem}
.btn.block{width:100%}

/* ---------------------------------------------------------------- hero */
.hero{padding:46px 0 14px}
.hero-panel{
  background:linear-gradient(160deg,#FFEAF1 0%, #FFF5EC 48%, #EDF4EF 100%);
  border-radius:var(--r-xl); padding:clamp(28px,5vw,58px); position:relative; overflow:hidden;
}
.hero-panel::after{
  content:''; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:rgba(255,255,255,.5);
}
.hero-panel{display:grid; grid-template-columns:1fr; gap:30px; align-items:center}
.hero-inner{position:relative; z-index:1; max-width:760px}
.hero-art{display:none; position:relative; z-index:1; height:330px}
.hero-art img{
  position:absolute; width:172px; height:215px; object-fit:cover;
  border-radius:26px; box-shadow:var(--shadow-lg); border:5px solid #fff;
  transform:rotate(var(--r)); background:#fff;
}
.hero-art img:nth-child(1){left:0; top:0}
.hero-art img:nth-child(2){right:0; top:26px}
.hero-art img:nth-child(3){left:96px; bottom:0}
@media (min-width:1020px){
  .hero-panel{grid-template-columns:1.2fr .8fr}
  .hero-art{display:block}
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border-radius:999px; padding:7px 15px; font-size:.83rem; font-weight:600;
  color:var(--brand-dark); box-shadow:var(--shadow); margin-bottom:18px;
}
.hero p.lead{font-size:1.12rem; color:var(--ink-2); max-width:56ch; margin:16px 0 26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-stats{display:flex; flex-wrap:wrap; gap:34px; margin-top:34px; position:relative; z-index:1}
.hero-stats b{display:block; font-family:var(--display); font-size:1.9rem; line-height:1; color:var(--brand-dark)}
.hero-stats span{font-size:.86rem; color:var(--ink-2)}

/* -------------------------------------------------- tarjetas de acción */
.section{padding:52px 0}
.section-head{max-width:660px; margin-bottom:28px}
.section-head.center{margin-inline:auto}
.action-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.action-card{
  background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease; text-decoration:none;
}
.action-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.action-card .thumb{aspect-ratio:var(--formato-escena); background:var(--sand); min-height:0; overflow:hidden}
.action-card .thumb img{width:100%; height:100%; object-fit:cover}
.action-card .body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.action-card p{color:var(--muted); font-size:.95rem; margin:0; flex:1}

/* ------------------------------------------------------- fichas de gato */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px}
.cat-card{
  background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.cat-photo{position:relative; aspect-ratio:var(--formato-foto); background:var(--sand); display:block; min-height:0; overflow:hidden}
.cat-photo img{width:100%; height:100%; object-fit:cover}
.cat-badges{position:absolute; left:12px; top:12px; right:96px; display:flex; gap:6px; flex-wrap:wrap}
.cat-badges .chip{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip{
  background:rgba(255,255,255,.94); border-radius:999px; padding:5px 11px;
  font-size:.75rem; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow);
}
.chip.brand{background:var(--brand); color:var(--brand-ink)}
.chip.green{background:var(--green); color:#fff}
.chip.sun{background:var(--sun); color:#4a3000}
.chip.line{background:transparent; border:1px solid var(--line); box-shadow:none}
.cat-status{position:absolute; right:12px; top:12px}
.cat-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1}
.cat-body h3{font-size:1.32rem}
.cat-body .breed{font-size:.83rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.cat-body .edad{font-size:.86rem; color:var(--muted); margin:2px 0 0; flex:none}
.cat-body p{font-size:.92rem; color:var(--ink-2); margin:4px 0 0; flex:1}
.cat-body .junta{font-size:.85rem; color:var(--brand-dark); font-weight:600; flex:none; margin-top:8px}
.cat-actions{display:flex; gap:8px; margin-top:14px}
.cat-actions .btn{flex:1; padding:11px 10px; font-size:.9rem}
.cat-card.is-adopted .cat-photo img{filter:grayscale(.35) opacity(.9)}

/* --------------------------------------------------------------- filtros */
.filters{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; margin-bottom:26px; display:flex; flex-wrap:wrap; gap:18px 28px;
}
.filter-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.filter-group>span{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.pill{
  border:1.5px solid var(--line); background:var(--surface); border-radius:999px;
  padding:7px 15px; font-size:.88rem; cursor:pointer; transition:.15s; font-weight:500;
}
.pill:hover{border-color:var(--brand)}
.pill.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ------------------------------------------------------ ficha detallada */
.detail{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start; padding:36px 0 10px}
.gallery{position:sticky; top:96px}
.gallery .main{border-radius:var(--r-xl); overflow:hidden; background:var(--sand); aspect-ratio:var(--formato-foto); box-shadow:var(--shadow)}
.gallery .main img{width:100%; height:100%; object-fit:cover}
.gallery .thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.gallery .thumbs img{width:70px; height:70px; object-fit:cover; border-radius:14px; cursor:pointer; border:2px solid transparent}
.gallery .thumbs img.on{border-color:var(--brand)}
.detail h1{margin-bottom:6px}
.trait-list{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0}
.story{white-space:pre-line; color:var(--ink-2)}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0}
.fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.fact b{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.health{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 22px}
.health .ok{background:var(--green-soft); color:#155c4a; border-radius:999px; padding:6px 13px; font-size:.85rem; font-weight:600}
.health .no{background:#FBECEC; color:#9A3B2F; border-radius:999px; padding:6px 13px; font-size:.85rem; font-weight:600}

.cta-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow); margin-top:8px;
}
.progress{height:10px; border-radius:999px; background:var(--sand); overflow:hidden; margin:12px 0 8px}
.progress i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green),#66C2A5)}

/* --------------------------------------------------------------- formas */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.87rem; font-weight:600; color:var(--ink-2)}
.field .hint{font-size:.8rem; color:var(--muted); font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],select,textarea{
  background:var(--cream); border:1.5px solid var(--line); border-radius:14px;
  padding:12px 14px; font-size:.96rem; width:100%; transition:border-color .15s, background .15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); background:var(--surface)}
textarea{min-height:120px; resize:vertical}
.check{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--ink-2)}
.check input{margin-top:4px; width:18px; height:18px; accent-color:var(--brand)}

/* ------------------------------------------------------- importes (pago) */
.amounts{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin:14px 0}
.amount{
  border:2px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:16px 8px; font-family:var(--display); font-size:1.35rem; font-weight:600;
  cursor:pointer; transition:.15s;
}
.amount:hover{border-color:var(--brand)}
.amount.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark)}
.toggle{display:inline-flex; background:var(--sand); border-radius:999px; padding:5px; gap:4px}
.toggle button{border:0; background:none; border-radius:999px; padding:9px 20px; font-weight:600; cursor:pointer; font-size:.92rem; color:var(--muted)}
.toggle button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

.notice{border-radius:var(--r); padding:14px 16px; font-size:.9rem; display:flex; gap:10px; align-items:flex-start}
.notice.demo{background:var(--sun-soft); color:#7A4E00}
.notice.err{background:#FBECEC; color:#9A3B2F}
.notice.ok{background:var(--green-soft); color:#155c4a}

/* --------------------------------------------------------------- footer */
.site-footer{background:var(--ink); color:#FBEEF3; margin-top:60px; padding:52px 0 30px}
.site-footer a{color:#FBEEF3; text-decoration:none; opacity:.8}
.site-footer a:hover{opacity:1}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.footer-grid h4{font-size:1rem; margin-bottom:12px}
.footer-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.92rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:32px; padding-top:18px; font-size:.82rem; opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

.skeleton{background:linear-gradient(90deg,var(--sand),#fff,var(--sand)); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--r-lg); min-height:300px}
@keyframes sk{to{background-position:-200% 0}}

.breadcrumb{font-size:.86rem; color:var(--muted); padding:18px 0 0}
.breadcrumb a{text-decoration:none}

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
  .action-grid{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr; gap:26px}
  .gallery{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{
    position:fixed; inset:72px 0 auto 0; background:var(--surface); flex-direction:column;
    padding:14px 20px 22px; box-shadow:var(--shadow-lg); display:none; gap:2px;
  }
  .nav.open{display:flex}
  .burger{display:block}
  .form-grid{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .facts{grid-template-columns:1fr}
}

/* ------------------------------------------------- llamada al modo swipe */
.swipe-cta{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center;
  background:linear-gradient(150deg,#FFF6EE,#FFECF3 55%,#FFE3EE)}
.swipe-mini{position:relative; height:280px}
.swipe-mini img{
  position:absolute; left:50%; top:50%; width:190px; height:230px; object-fit:cover;
  border-radius:24px; box-shadow:var(--shadow-lg); border:5px solid #fff;
  transform:translate(-50%,-50%) rotate(var(--r));
}
.swipe-mini img:nth-child(1){margin-left:-84px; margin-top:14px}
.swipe-mini img:nth-child(2){margin-left:84px; margin-top:6px}
.swipe-mini img:nth-child(3){margin-left:0; margin-top:-10px}
.swipe-mini span{
  position:absolute; top:50%; width:46px; height:46px; border-radius:50%; display:grid;
  place-items:center; background:var(--surface); box-shadow:var(--shadow); font-weight:700; font-size:1.1rem;
}
.swipe-mini .mini-no{left:6%; color:#E0503A; transform:translateY(-50%)}
.swipe-mini .mini-si{right:6%; color:var(--green); transform:translateY(-50%)}
@media (max-width:860px){
  .swipe-cta{grid-template-columns:1fr}
  .swipe-mini{height:250px}
}

/* ------------------------------------------------------ firma de la autora */
.author-chip{
  display:inline-flex; align-items:center; gap:11px; background:var(--surface);
  border-radius:999px; padding:6px 20px 6px 6px; box-shadow:var(--shadow);
  text-decoration:none; margin-bottom:18px; transition:transform .15s, box-shadow .15s;
}
.author-chip:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg)}
.author-chip img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.author-chip b{display:block; font-family:var(--display); font-size:.98rem; line-height:1.15}
.author-chip small{font-size:.8rem; color:var(--brand-dark); font-weight:600}

.creadora{
  display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:center;
  background:linear-gradient(140deg,#FFEDF3,#FFF6F9 55%,#FFFBFC);
}
.creadora .retrato{position:relative; justify-self:center}
.creadora .retrato img{width:230px; height:230px; border-radius:50%; object-fit:cover}
.creadora .ig{
  position:absolute; right:2px; bottom:8px; background:var(--surface); border-radius:999px;
  padding:7px 14px; font-size:.83rem; font-weight:700; box-shadow:var(--shadow); color:var(--brand-dark);
  text-decoration:none; white-space:nowrap;
}
.creadora blockquote{margin:0 0 18px; font-size:1.08rem; color:var(--ink-2)}
.creadora .cifras{display:flex; gap:26px; flex-wrap:wrap; margin:18px 0 22px}
.creadora .cifras b{display:block; font-family:var(--display); font-size:1.5rem; color:var(--brand-dark); line-height:1}
.creadora .cifras span{font-size:.83rem; color:var(--muted)}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.footer-brand img{width:52px; height:52px; border-radius:50%; object-fit:cover}
.footer-brand h4{margin:0}
.footer-brand small{font-size:.8rem; opacity:.75}
@media (max-width:860px){
  .creadora{grid-template-columns:1fr; text-align:center}
  .creadora .cifras{justify-content:center}
}

/* --------------------------------------- cabecera del listado: ocupar ancho */
.section-head.listado{max-width:none}
.section-head.listado h1{max-width:20ch; margin-bottom:12px}
.section-head.listado > .muted{max-width:70ch; font-size:1.04rem; color:var(--ink-2)}
.aviso-adopcion{margin-top:18px; padding:18px 22px; align-items:flex-start}
.aviso-adopcion span{columns:2; column-gap:42px; line-height:1.6}
@media (max-width:820px){ .aviso-adopcion span{columns:1} }

/* --------------------------------------------- bloque de apadrinamiento */
.panel-apadrinar{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center}
.panel-apadrinar h2{margin:14px 0 12px}
.panel-apadrinar .muted{margin-bottom:22px}
.panel-apadrinar img{
  width:100%; border-radius:var(--r-lg);
  aspect-ratio:var(--formato-escena); object-fit:cover;
}
.eyebrow.verde{box-shadow:none; background:var(--green-soft); color:#155c4a}

@media (max-width:820px){
  /* en móvil: foto arriba, texto debajo y a todo el ancho */
  .panel-apadrinar{grid-template-columns:1fr; gap:22px}
  .panel-apadrinar img{order:-1; aspect-ratio:16/10}
  .panel-apadrinar .btn{width:100%; text-align:center}
}