/* Pequeños Grandes Amigos — identidad cálida (naranja/turquesa) */
:root{
  --orange:#ff7a3d; --orange-d:#e8642a; --teal:#1fb8b0; --teal-d:#129089;
  --ink:#3a2f2a; --muted:#8a7b72; --bg:#fff7f0; --card:#ffffff;
  --line:#ffe2cf; --teal-soft:#e6f7f5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;margin:0;color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px}
h1,h2,h3,.brand,.fbrand{font-family:'Baloo 2','Nunito',cursive;font-weight:700;line-height:1.2}

/* Header */
header{background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;position:sticky;top:0;z-index:6;box-shadow:0 2px 10px rgba(255,122,61,.06)}
header .brand img{display:block;height:40px}

/* Nav */
.mnav{background:#fff;border-bottom:1px solid var(--line);padding:10px 20px;display:flex;gap:20px;flex-wrap:wrap;font-size:.95rem;align-items:center;overflow-x:auto;position:sticky;top:65px;z-index:5}
.mnav a{color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap;padding:4px 2px;border-bottom:2px solid transparent;transition:.15s}
.mnav a:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* Layout */
.wrap{max-width:900px;margin:0 auto;padding:24px 22px 40px}
.bc{font-size:.85rem;color:var(--muted);margin:2px 0 14px}
.bc a{color:var(--teal-d);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc span{color:var(--muted)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--orange),#ffae6e);color:#fff;border-radius:28px;padding:34px 30px;margin:6px 0 22px;box-shadow:0 12px 30px rgba(255,122,61,.22)}
.hero h1{margin:.1em 0 .3em;font-size:2.1rem;color:#fff}
.hero p{margin:0;font-size:1.05rem;color:#fff;opacity:.97}
.hero-icon{font-size:2.4rem;display:block;line-height:1}
.home-hero{background:linear-gradient(135deg,var(--orange) 0%,#ff9a57 55%,var(--teal) 130%);text-align:center;padding:46px 28px}
.home-hero h1{font-size:2.5rem}
.hero-cta{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

h1{font-size:1.9rem}
h2{font-size:1.35rem;margin:1.1em 0 .5em;color:var(--orange-d)}
.rel-title{color:var(--teal-d);margin-top:1.6em}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 26px;margin:16px 0;box-shadow:0 6px 20px rgba(255,122,61,.07)}
.card p{margin:.4em 0}
.intro-block p{margin:.7em 0}

/* Hero image */
.heroimg{margin:0 0 8px}
.heroimg img{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:24px;display:block;box-shadow:0 8px 24px rgba(58,47,42,.15)}
figcaption{font-size:.74rem;color:var(--muted);margin:6px 2px}

/* Data table */
table.data{width:100%;border-collapse:collapse;font-size:.97rem}
table.data th,table.data td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{width:34%;color:var(--teal-d);font-weight:700;background:var(--teal-soft);border-radius:0}
table.data tr:last-child th,table.data tr:last-child td{border-bottom:none}

/* Grid + tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:8px 0}
.tile{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);transition:.18s;display:flex;flex-direction:column}
.tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(255,122,61,.18)}
.tile img{width:100%;height:135px;object-fit:cover;display:block}
.tile-b{padding:12px 14px}
.tile-b b{display:block;font-family:'Baloo 2';font-size:1.02rem;margin-top:3px}
.gtile{background:linear-gradient(135deg,#fff,var(--teal-soft));min-height:120px;justify-content:center}
.badge{display:inline-block;font-size:.72rem;font-weight:700;background:#fff0e6;color:var(--orange-d);padding:2px 9px;border-radius:20px}
.badge.alt{background:var(--teal-soft);color:var(--teal-d)}

/* Section row (home) */
.sectionrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:16px 0}
.sec-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;text-align:center;box-shadow:0 6px 18px rgba(255,122,61,.07);transition:.18s}
.sec-card:hover{transform:translateY(-3px)}
.sec-ico{font-size:2rem;display:block}
.sec-card h2{margin:.3em 0 .2em;color:var(--orange-d);font-size:1.2rem}
.sec-card p{font-size:.9rem;color:var(--muted);margin:.2em 0 .6em}
.sec-card a{color:var(--teal-d);font-weight:700;text-decoration:none}
.sec-card a:hover{text-decoration:underline}

/* Buttons */
a.btn,.btn{display:inline-block;background:#fff;color:var(--orange-d);text-decoration:none;padding:13px 24px;border-radius:30px;font-weight:800;font-family:'Baloo 2';box-shadow:0 4px 14px rgba(58,47,42,.12);transition:.15s}
a.btn:hover{transform:translateY(-2px)}
a.btn.alt{background:var(--teal);color:#fff}

/* Productos afiliados */
.prods-card{background:linear-gradient(135deg,#fff,#fff3ea)}
.aff-note{font-size:.8rem;color:var(--muted);margin-top:0}
.prods{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
a.prod{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;padding:11px 18px;border-radius:14px;font-weight:700;box-shadow:0 4px 12px rgba(255,122,61,.25);transition:.15s}
a.prod:hover{background:var(--orange-d);transform:translateY(-2px)}

/* FAQ */
.faq details{padding:12px 4px;border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{font-weight:700;cursor:pointer;font-family:'Baloo 2';color:var(--teal-d);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"🐾 ";}
.faq details[open] summary{color:var(--orange-d)}
.faq p{margin:.5em 0 .2em;color:var(--ink)}

/* Internal links list */
.ilinks{margin:.3em 0;padding-left:1.1em}
.ilinks li{margin:.35em 0}
.ilinks a{color:var(--teal-d);font-weight:600;text-decoration:none}
.ilinks a:hover{text-decoration:underline}

/* Legal */
.legal h2{font-size:1.1rem;color:var(--teal-d)}
.legal a{color:var(--teal-d)}

/* Comparativas */
.comp .grid{margin-top:14px}

/* Ads */
.ad{margin:22px 0;text-align:center;min-height:90px}

/* Footer */
footer{background:linear-gradient(135deg,var(--teal-d),var(--teal));color:#eafaf8;text-align:center;font-size:.92rem;padding:30px 20px}
footer a{color:#fff;text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
.fbrand{font-size:1.3rem;color:#fff;margin:0 0 4px}
.fsmall{font-size:.78rem;opacity:.85;margin-top:10px}

/* Responsive */
@media(max-width:600px){
  body{font-size:16px}
  .hero{padding:26px 20px;border-radius:22px}
  .hero h1{font-size:1.6rem}
  .home-hero h1{font-size:1.9rem}
  .wrap{padding:18px 16px 34px}
  .card{padding:18px 18px;border-radius:18px}
  table.data th{width:42%}
  .mnav{top:64px;gap:14px}
}