/*
 * BONE APPETITE — TEMA LLAMATIVO
 *
 * Este archivo se carga después de base.css y contiene únicamente la
 * personalidad visual: colores vivos, movimiento y sobres redondeados de servicios.
 */
/* Renovación visual: más cálida, memorable y editorial. */
:root{--ink:#153b32;--green:#16866a;--green-dark:#0f5b49;--lime:#dff36b;--coral:#ff8b70;--sun:#ffd86b;--cream:#fff8eb;--shadow:0 24px 70px rgba(15,91,73,.14)}
body{background:#fffdf8}
h1,h2,h3{font-family:"Arial Rounded MT Bold","Trebuchet MS",Inter,Segoe UI,sans-serif}
.container,.nav-shell{width:min(1220px,92%)}
.nav-shell{border:1px solid rgba(15,91,73,.14);box-shadow:0 14px 45px rgba(15,91,73,.1)}
.brand{color:var(--green-dark);letter-spacing:-.025em}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--coral);transition:.25s}
.nav-links a:hover:after{right:0}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(120deg,#fff8e9 0 52%,#e5f8ef 52%)}
.hero:before{content:"NUTRICIÓN • SALUD • AMOR •";position:absolute;left:-35px;bottom:8px;font-weight:900;font-size:clamp(3rem,8vw,7rem);letter-spacing:-.06em;color:rgba(15,91,73,.045);white-space:nowrap}
.hero-grid{grid-template-columns:1.05fr .95fr;gap:74px}
.hero h1{font-size:clamp(3.7rem,6.6vw,6.7rem);line-height:.92;letter-spacing:-.07em;max-width:760px}
.hero h1 span{position:relative;z-index:1}
.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--lime);border-radius:99px;z-index:-1;transform:rotate(-1deg)}
.hero p{font-size:1.22rem}
.eyebrow{background:var(--lime);color:var(--ink);border:1px solid rgba(21,59,50,.1);box-shadow:3px 3px 0 var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.btn-primary{background:var(--ink);box-shadow:6px 6px 0 var(--lime)}
.btn-primary:hover{background:var(--green-dark);transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--lime)}
.btn-secondary{border:2px solid var(--ink);background:transparent}
.hero-visual{min-height:600px}
.blob{inset:25px -18px 10px 25px;background:var(--lime);transform:rotate(5deg)}
.pet-card{inset:10px 25px 28px 0;border:4px solid var(--ink);border-radius:48% 48% 28% 28% / 35% 35% 18% 18%;box-shadow:14px 14px 0 var(--ink)}
.pet-card img{object-position:center 38%}
.floating{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.float-a{transform:rotate(-4deg)}.float-b{transform:rotate(4deg)}
.floating .icon{background:var(--sun)}
.hero-sticker{position:absolute;right:2px;bottom:22px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:16px;background:var(--coral);color:#fff;border:3px solid var(--ink);font-weight:900;line-height:1.05;transform:rotate(8deg);box-shadow:6px 6px 0 var(--ink)}
.section-head h2,.about-copy h2,.nutrition h2,.faq-wrap h2,.counter-copy h2{line-height:1;letter-spacing:-.055em}
.about{background:var(--cream)}
.about-photo img{border:3px solid var(--ink);box-shadow:12px 12px 0 var(--sun)}
.about-badge,.stat{border:2px solid var(--ink);box-shadow:5px 5px 0 #d8eee7}
.nutrition{background:var(--ink)}
.nutrition-card{border:3px solid var(--lime);box-shadow:14px 14px 0 var(--lime)}
.step{border:2px solid var(--ink);box-shadow:5px 5px 0 #d8eee7}.step:nth-child(even){transform:translateY(24px)}
.counter-card{background:var(--lime);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.counter-panel{border:2px solid var(--ink)}
.gallery-grid img{border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(21,59,50,.13)}
.cta-box{background:var(--coral);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.contact-info,.form-card{border:2px solid var(--ink);box-shadow:7px 7px 0 #d8eee7}
footer{background:var(--ink)}
@media(max-width:980px){.hero{background:linear-gradient(180deg,#fff8e9 0 55%,#e5f8ef 55%)}.hero-grid{grid-template-columns:1fr}}
@media(max-width:650px){.hero h1{font-size:clamp(2.65rem,12vw,3.55rem)}.hero-visual{min-height:365px}.hero-sticker{width:82px;height:82px;padding:11px;font-size:.7rem;right:2px;bottom:8px}.step:nth-child(even){transform:none}.hero:before{font-size:3.2rem;bottom:18px}}
@media(max-width:390px){.hero h1{font-size:clamp(2.35rem,12vw,2.85rem)}.hero-visual{min-height:330px}.hero-sticker{width:74px;height:74px;font-size:.64rem}}

/* Movimiento y microinteracciones */
.scroll-progress{position:fixed;left:0;top:0;z-index:210;width:100%;height:4px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--coral),var(--sun),var(--lime),var(--teal));pointer-events:none}
.hero-orbit{position:absolute;border-radius:50%;pointer-events:none;filter:blur(.2px)}
.orbit-a{width:32px;height:32px;right:4%;top:16%;background:var(--sun);animation:drift 5s ease-in-out infinite}
.orbit-b{width:18px;height:18px;left:0;top:32%;background:var(--coral);animation:drift 4s ease-in-out -1.5s infinite}
.orbit-c{width:24px;height:24px;right:12%;bottom:5%;background:var(--green);animation:drift 6s ease-in-out -3s infinite}
.pet-card img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.hero-visual:hover .pet-card img{transform:scale(1.045);filter:saturate(1.08)}
.hero-sticker{animation:stickerPulse 3.6s ease-in-out infinite}
.floating{animation:floatCard 4.5s ease-in-out infinite}
.float-b{animation-delay:-2.2s}
.trust-strip{overflow:hidden;background:var(--ink);color:#fff;border-block:2px solid var(--ink);padding:13px 0}
.trust-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.trust-track span{display:flex;align-items:center;gap:18px;padding-right:18px;font-weight:800;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.trust-track span:after{content:"✦";color:var(--lime);font-size:1rem}
.stat,.counter-panel,.contact-info,.form-card{transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.stat:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:8px 9px 0 var(--ink)}
.counter-panel:hover{transform:rotate(1deg) scale(1.015)}
.info-row{transition:transform .22s ease}.info-row:hover{transform:translateX(6px)}
.gallery-grid img:nth-child(2){transform:rotate(1deg)}.gallery-grid img:nth-child(3){transform:rotate(-1deg)}
.gallery-grid img:hover{transform:scale(1.025) rotate(0);z-index:2;box-shadow:10px 12px 0 var(--ink)}
.btn:active{transform:translateY(2px) scale(.98)}
.reveal.show .service-icon,.reveal.show .step-icon{animation:iconPop .6s cubic-bezier(.2,1.7,.4,1) both}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(8px,-18px,0) rotate(16deg)}}
@keyframes floatCard{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes stickerPulse{0%,100%{scale:1;rotate:0deg}50%{scale:1.055;rotate:3deg}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes iconPop{0%{transform:scale(.55) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.hero-orbit,.hero-sticker,.floating,.trust-track,.reveal.show .service-icon,.reveal.show .step-icon{animation:none}.pet-card img,.stat,.counter-panel,.info-row{transition:none}.scroll-progress{display:none}}

/* Sobres de servicios: redondeados, fotográficos y sin pliegues triangulares */
.services{position:relative;overflow:hidden}
.services:before{content:"SERVICIOS";position:absolute;right:-30px;top:80px;font-size:clamp(5rem,14vw,13rem);font-weight:900;line-height:.8;color:rgba(21,59,50,.035);letter-spacing:-.09em;pointer-events:none}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.service{
  --envelope-bg:#dff3ea;
  --envelope-accent:#cfe8dd;
  --envelope-shadow:#cfe5dc;
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  min-width:0;min-height:390px;padding:0 24px 27px;overflow:hidden;
  color:var(--ink);background:#fffdf8;border:2px solid var(--ink);border-radius:30px;
  box-shadow:7px 8px 0 var(--envelope-shadow);cursor:default;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease
}
.service:nth-child(4n+2){--envelope-bg:#fff0dc;--envelope-accent:#f6dcc5;--envelope-shadow:#f2ddc8}
.service:nth-child(4n+3){--envelope-bg:#fce9e5;--envelope-accent:#f4d4cf;--envelope-shadow:#efd8d3}
.service:nth-child(4n){--envelope-bg:#f5efc9;--envelope-accent:#e9e3ad;--envelope-shadow:#e6e0b8}
.service:before{
  content:"";position:absolute;z-index:1;left:-10%;right:-10%;top:146px;bottom:-3px;
  background:var(--envelope-bg);border:2px solid var(--ink);
  border-radius:50% 50% 30px 30px / 48px 48px 30px 30px;
  box-shadow:inset 0 10px 20px rgba(21,59,50,.045);
  transition:top .35s cubic-bezier(.2,.8,.2,1),background .28s ease
}
.service-preview{
  position:relative;inset:auto;z-index:0;flex:none;width:calc(100% + 16px);height:164px;
  margin:16px -8px 22px;overflow:hidden;border:2px solid var(--ink);border-radius:20px 20px 12px 12px;
  opacity:1;visibility:visible;background:linear-gradient(135deg,#fffdf8 0 68%,var(--envelope-accent) 68%);box-shadow:0 7px 0 rgba(21,59,50,.12);
  transform:translateY(10px);transition:transform .48s cubic-bezier(.2,.9,.2,1),box-shadow .32s ease
}
.service-preview:before{
  content:"BONE APPETITE";position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  color:var(--green-dark);font-size:.76rem;font-weight:900;letter-spacing:.18em;text-indent:.18em
}
.service-kicker,.service h3,.service p{position:relative;z-index:2}
.service-kicker{margin:2px 0 8px;color:var(--green-dark);font-size:.7rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.service h3{margin:0 0 11px;font-size:clamp(1.28rem,1.7vw,1.6rem);line-height:1.05;letter-spacing:-.035em}
.service p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.service:hover{transform:translateY(-7px);border-color:var(--ink);box-shadow:10px 12px 0 var(--ink)}
.service:hover:before{top:154px}
.service:hover .service-preview{transform:translateY(1px) rotate(-.7deg);box-shadow:0 10px 0 rgba(21,59,50,.15)}
.services-hint{display:flex;align-items:center;gap:9px;margin:22px 0 0;color:var(--muted);font-size:.84rem;font-weight:700}
.services-hint:before{content:"";width:34px;height:3px;border-radius:99px;background:var(--coral)}
@media(max-width:980px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.services-grid{grid-template-columns:1fr;gap:17px}.service{min-height:348px;padding:0 20px 23px;border-radius:25px}.service-preview{height:142px;margin:14px -6px 20px}.service:before{top:126px}.service:hover:before{top:132px}.service h3{font-size:1.32rem}.services-hint{display:none}}
@media(prefers-reduced-motion:reduce){.service,.service:before,.service-preview{transition:none}}