/*
Theme Name: RBF Theme
Theme URI: https://hrbf.cl
Author: geekdev
Author URI: https://geekdev.cl
Description: Tema personalizado para Refugio RBF (rescate y hotel canino en Naltagua). Portado desde el prototipo estático, con paleta verde musgo pastel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rbf-theme
*/

:root{
  --brand:#4F6B48; --brand-light:#71915F; --brand-dark:#37492F;
  --accent:#B97D52; --accent-dark:#9C6640;
  --bg:#F6F7F1; --card-bg:#ffffff; --text:#2a322a; --muted:#6c766a;
  --border:#e2e7da; --radius:12px; --radius-sm:8px; --gap:20px;
  --shadow:0 1px 2px rgba(55,73,47,.05), 0 6px 20px rgba(55,73,47,.07);
  --font-head:Georgia,'Times New Roman',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; padding:0; font-family:var(--font-body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;}
#site{background:var(--bg); color:var(--text);}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

/* ---------- placeholder de imagen (sin fotos reales aún) ---------- */
.ph{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background:#dce6d2; color:var(--brand); border-radius:var(--radius); min-height:120px;
}
.ph.accent{background:#f1e4d2; color:var(--accent);}
.ph::before{
  content:''; width:30px; height:30px; background-color:currentColor; opacity:.4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6.5' ry='5'/%3E%3Ccircle cx='5.5' cy='8' r='2.3'/%3E%3Ccircle cx='12' cy='5.7' r='2.3'/%3E%3Ccircle cx='18.5' cy='8' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6.5' ry='5'/%3E%3Ccircle cx='5.5' cy='8' r='2.3'/%3E%3Ccircle cx='12' cy='5.7' r='2.3'/%3E%3Ccircle cx='18.5' cy='8' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph .cap{font-size:11.5px; letter-spacing:.02em; opacity:.8; text-align:center; padding:0 10px;}

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border); padding:14px 0;
}
header.site-header .row{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--brand-dark); background:none; border:none; cursor:pointer; padding:4px; transition:color .15s ease; text-decoration:none;}
.logo:hover{color:var(--brand);}
.logo svg{width:36px; height:36px; display:block;}
nav.main-nav{display:flex; gap:22px; flex-wrap:wrap; align-items:center;}
nav.main-nav .nav-link{
  background:none; border:none; font:inherit; font-size:14px; font-weight:600; color:var(--text);
  cursor:pointer; padding:6px 0; position:relative; text-decoration:none; display:inline-block;
}
nav.main-nav .nav-link:hover{color:var(--brand);}
nav.main-nav .nav-link.active{color:var(--brand);}
nav.main-nav .nav-link.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--accent); border-radius:2px;
}
nav.main-nav .nav-cta{
  margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); text-decoration:none;
  border:1.5px solid var(--accent); border-radius:20px; padding:8px 18px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
nav.main-nav .nav-cta:hover{background:var(--accent); color:#fff;}

/* ---------- menú hamburguesa (móvil) ---------- */
.nav-toggle{
  display:none; width:38px; height:38px; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--brand-dark); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- botones ---------- */
.btn{
  display:inline-block; padding:11px 20px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-light); box-shadow:var(--shadow); transform:translateY(-1px);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-dark); box-shadow:var(--shadow); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand);}
.btn-outline:hover{background:var(--brand); color:#fff;}

section{padding:52px 0;}
section.tight{padding:32px 0;}
h1{font-family:var(--font-head); font-size:33px; line-height:1.2; margin:0 0 14px; color:var(--text);}
h2{font-family:var(--font-head); font-size:25px; margin:0 0 10px; color:var(--text);}
h3{font-family:var(--font-head); font-size:17px; margin:0 0 6px; color:var(--text);}
p{line-height:1.7; color:var(--muted); font-size:15px; margin:0 0 12px;}
.eyebrow{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:8px;}

.hero{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
.cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

.hero-media{display:flex; flex-direction:column; gap:12px;}
.carousel{position:relative; height:340px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.carousel .slide{position:absolute; inset:0; display:none; border-radius:0;}
.carousel .slide.active{display:flex;}
.carousel-dots{display:flex; gap:6px; justify-content:center;}
.carousel-dots button{width:7px; height:7px; border-radius:50%; border:none; background:var(--border); padding:0; cursor:pointer; transition:background .15s ease, transform .15s ease;}
.carousel-dots button.active{background:var(--brand); transform:scale(1.3);}

.hotel-cta{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 26px; box-shadow:var(--shadow);
}
.hotel-cta h3{margin:0 0 4px;}
.hotel-cta p{margin:0;}

.donate-banner{background:var(--brand-dark); color:#fff; padding:48px 0;}
.donate-banner h2{color:#fff;}
.donate-banner .lead{font-size:14.5px; opacity:.85; max-width:540px; margin:0 0 22px; color:#dce8d2;}
.donate-banner .payment-icons span{border-color:rgba(255,255,255,.3); color:#e7efde;}

.newsletter{background:var(--card-bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:40px 0;}
.newsletter-inner{display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;}
.newsletter-text{flex:1 1 320px; min-width:260px;}
.newsletter-text h2{margin-bottom:6px;}
.newsletter-text .lead{color:var(--muted); margin:0; max-width:480px;}
.newsletter-form{flex:1 1 340px; min-width:280px;}
.newsletter-row{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-row input[type="email"]{
  flex:1 1 200px; padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  font:inherit; font-size:14px; color:var(--text); background:#fff;
}
.newsletter-row input[type="email"]:focus{outline:none; border-color:var(--brand);}
.newsletter-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muted); margin-top:12px; cursor:pointer; line-height:1.5;}
.newsletter-check input{margin-top:3px;}
.newsletter-note{font-size:13px; margin:10px 0 0; color:var(--brand); font-weight:600; min-height:0;}
.newsletter-note:empty{display:none;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}
.stats .num{font-family:var(--font-head); font-size:28px; font-weight:700; color:var(--brand-dark);}
.stats .lbl{font-size:12px; color:var(--muted);}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
.card{background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(55,73,47,.12);}
.card h3{color:var(--text);}
.card .ph{height:150px; border-radius:0;}
.card .card-body{padding:16px;}
.tag{display:inline-block; font-size:11px; padding:3px 9px; border-radius:20px; background:var(--bg); border:1px solid var(--border); color:var(--muted); margin:0 6px 6px 0;}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.filters select{padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:13px; background:var(--card-bg); color:var(--text); cursor:pointer;}

.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.empty-state{grid-column:1/-1; text-align:center; padding:40px 0; color:var(--muted); font-size:14px;}

.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:18px;}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.gallery-main{height:290px; margin-bottom:10px;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.gallery-thumbs .ph{height:64px;}
.gallery-thumbs .ph::before{width:18px; height:18px;}

table{width:100%; border-collapse:collapse; font-size:14px;}
table th, table td{text-align:left; padding:12px; border-bottom:1px solid var(--border);}
table th{color:var(--brand-dark); font-family:var(--font-head);}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.step-num{width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-bottom:10px;}

.payment-icons{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.payment-icons span{padding:8px 15px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--muted);}

form.contact-form{display:grid; gap:14px; max-width:480px;}
form.contact-form input, form.contact-form textarea{
  padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border);
  font-family:inherit; font-size:14px; width:100%; background:var(--card-bg); color:var(--text);
}
form.contact-form input:focus, form.contact-form textarea:focus{outline:2px solid var(--brand-light); outline-offset:1px;}

.quote{border-left:3px solid var(--accent); padding-left:16px; font-family:var(--font-head); font-style:italic; font-size:16px; color:var(--text); margin:0 0 18px;}

.social-list{list-style:decimal; margin:0 0 18px; padding-left:20px; display:grid; gap:12px;}
.social-list li::marker{color:var(--accent); font-weight:700;}
.social-list a{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--text); font-size:14.5px; font-weight:600; transition:color .15s ease;
}
.social-list a:hover{color:var(--brand);}
.social-icon{display:inline-flex; width:20px; height:20px; color:var(--muted); flex-shrink:0; transition:color .15s ease;}
.social-icon svg{width:100%; height:100%;}
.social-list a:hover .social-icon{color:var(--brand);}

footer.site-footer{background:var(--brand-dark); color:#eef3f4; padding:30px 0;}
footer.site-footer .row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px;}
footer.site-footer .fine-print{opacity:.55; font-size:11.5px; margin-top:14px;}
footer.site-footer .credits{font-size:11.5px; opacity:.75; margin-top:6px;}
footer.site-footer a{color:#eef3f4; text-decoration:underline; text-underline-offset:2px;}
footer.site-footer a:hover{color:var(--accent);}

.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery-grid .ph{height:170px;}
.gallery-grid .ph .cap{font-size:11px;}

.testimonial{display:flex; gap:14px; align-items:flex-start; box-sizing:border-box;}
.avatar-ph{width:44px; height:44px; min-width:44px; border-radius:50%; background:#dce6d2; color:var(--brand); display:flex; align-items:center; justify-content:center;}
.avatar-ph::before{
  content:''; width:18px; height:18px; background-color:currentColor; opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6.5' ry='5'/%3E%3Ccircle cx='5.5' cy='8' r='2.3'/%3E%3Ccircle cx='12' cy='5.7' r='2.3'/%3E%3Ccircle cx='18.5' cy='8' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6.5' ry='5'/%3E%3Ccircle cx='5.5' cy='8' r='2.3'/%3E%3Ccircle cx='12' cy='5.7' r='2.3'/%3E%3Ccircle cx='18.5' cy='8' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.testimonial .quote{margin:0 0 6px;}
.testimonial .who{font-size:12.5px; color:var(--muted);}

.testimonial-carousel{max-width:640px;}
.testimonial-viewport{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;}
.testimonial-viewport::-webkit-scrollbar{display:none;}
.testimonial-viewport .testimonial{flex:0 0 100%; scroll-snap-align:start; padding:26px 28px; background:var(--card-bg); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius);}
.testimonial-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px;}
.testimonial-arrow{width:34px; height:34px; min-width:34px; border-radius:50%; border:1px solid var(--border); background:var(--card-bg); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--brand-dark); padding:0; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.testimonial-arrow svg{width:16px; height:16px;}
.testimonial-arrow:hover{background:var(--brand); color:#fff; border-color:var(--brand);}
.testimonial-dots{display:flex; gap:7px;}
.testimonial-dot{width:8px; height:8px; border-radius:50%; background:var(--border); border:none; padding:0; cursor:pointer;}
.testimonial-dot.active{background:var(--brand);}

.animal-note{font-size:13px; color:var(--muted); margin:8px 0 0;}

.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.team-card{text-align:center;}
.team-card .ph{height:150px; width:150px; border-radius:50%; margin:0 auto 14px;}
.team-card h3{margin-bottom:2px;}
.team-card .role{font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:8px;}

.timeline-frame{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px 40px 6px; margin-top:8px;
}
.timeline{display:grid;}
.timeline-item{display:grid; grid-template-columns:100px 28px 1fr; column-gap:20px;}
.timeline-marker{display:flex; flex-direction:column; align-items:center;}
.timeline-dot{width:13px; height:13px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #f1e4d2; margin-top:3px; flex-shrink:0;}
.timeline-line{flex:1; width:2px; background:var(--border); margin:5px 0;}
.timeline-item:last-child .timeline-line{display:none;}
.timeline-year{font-family:var(--font-head); font-weight:700; color:var(--brand); font-size:16px;}
.timeline-body{padding-bottom:30px;}
.timeline-item:last-child .timeline-body{padding-bottom:0;}
.timeline-body p{margin:0;}

.faq details{border-bottom:1px solid var(--border); padding:16px 0;}
.faq details:first-child{border-top:1px solid var(--border);}
.faq summary{cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--text);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:19px; color:var(--accent); font-family:var(--font-body);}
.faq details[open] summary::after{content:'\2212';}
.faq details p{margin:10px 0 0;}

.fund-breakdown{display:grid; gap:16px; max-width:560px;}
.fund-row{display:flex; align-items:center; gap:14px;}
.fund-label{width:180px; font-size:13.5px; color:var(--text); font-weight:600;}
.fund-bar-wrap{flex:1; background:var(--bg); border-radius:20px; overflow:hidden; height:10px;}
.fund-bar{height:100%; background:var(--accent); border-radius:20px;}
.fund-pct{width:38px; text-align:right; font-size:13px; color:var(--muted);}

.map-ph{height:220px;}

/* tarjetas de animal: clicables, y una tarjeta huérfana al final de una fila se centra */
.card[data-especie]{cursor:pointer;}
.center-solo{grid-column:1/-1; justify-self:center; width:100%; max-width:320px;}

/* ---------- popup de selección de animal ---------- */
.animal-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
.animal-modal.open{display:flex;}
.animal-modal-backdrop{position:absolute; inset:0; background:rgba(55,73,47,.55);}
.animal-modal-panel{
  position:relative; background:var(--card-bg); border-radius:var(--radius); padding:28px;
  max-width:380px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.28); text-align:left;
}
.animal-modal-photo{height:150px; margin-bottom:14px;}
.animal-modal-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--bg); color:var(--muted); font-size:18px; cursor:pointer; line-height:1;
}
.animal-modal-close:hover{background:var(--border); color:var(--text);}
#modal-tags{margin-bottom:6px;}
#modal-tags .tag{margin-right:6px;}
.animal-modal-panel .cta-row{margin-top:18px;}

@media (max-width:800px){
  .hero, .detail-grid{grid-template-columns:1fr;}

  .nav-toggle{display:flex;}
  nav.main-nav{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; margin-top:14px;
    background:var(--card-bg); border:1px solid var(--border); border-top:none;
    border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); padding:6px 0 14px;
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav .nav-link{padding:13px 22px;}
  nav.main-nav .nav-link.active::after{display:none;}
  nav.main-nav .nav-link.active{background:var(--bg);}
  nav.main-nav .nav-cta{margin:10px 22px 0; justify-content:center;}

  .timeline-frame{padding:26px 18px 4px;}
  .timeline-item{grid-template-columns:1fr; column-gap:0; row-gap:6px;}
  .timeline-marker{flex-direction:row; justify-content:flex-start; order:1;}
  .timeline-dot{margin-top:0;}
  .timeline-line{width:auto; height:2px; flex:none; display:none;}
  .timeline-year{order:0;}
  .timeline-body{order:2; padding-bottom:22px; padding-left:4px;}
}

/* las grillas de tarjetas se mantienen en una sola línea en escritorio/laptop;
   solo pasan a 2 columnas en anchos realmente angostos (celular) */
@media (max-width:640px){
  .cards, .grid-4, .stats, .steps, .gallery-grid, .team-grid{grid-template-columns:repeat(2,1fr);}
}