/* Llana — concepto VIP v2 (lenguaje visual de dontboardme.com) · DSolutions 2026 */
:root {
  --crema: #F4F3EA;
  --blanco: #FBFAF4;
  --rosa: #F4CED3;
  --rosa2: #EFB9C2;
  --rosa3: #F8DDE1;
  --rojo: #E33529;
  --rojo2: #C92A1F;
  --cafe: #693413;
  --celeste: #AFD8FB;
  --marino: #2B6786;
  --marino2: #124E6D;
  --lila: #E6DFE7;
  --amarillo: #F4E52C;
  --gut: clamp(16px, 2.3vw, 32px);
  --disp: "Bayon", "Bebas Neue", "Arial Narrow", sans-serif;
  --sans: "Outfit", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: linear-gradient(var(--crema) 50%, var(--rojo2) 50%); }
body { margin: 0; background: var(--crema); color: var(--rojo); font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografía ---------- */
.d { font-family: var(--disp); font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.h0 { font-size: clamp(84px, 10.4vw, 190px); }
.h1 { font-size: clamp(64px, 8.6vw, 150px); }
.h2 { font-size: clamp(48px, 6vw, 104px); }
.h3 { font-size: clamp(34px, 3.6vw, 60px); }
.lbl { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.lw { display: block; overflow: hidden; padding: .16em 0 .04em; margin: -.16em 0 -.04em; }
.lw > span { display: block; }
/* la O como ojo (letrado v4) */
.oeye { position: relative; display: inline-block; color: transparent !important; }
.oeye b { position: absolute; left: .02em; top: .03em; width: .5em; height: .8em; border-radius: 50%; background: var(--blanco); border: .075em solid var(--rojo); overflow: hidden; }
.oeye i { position: absolute; left: 26%; top: 30%; width: 48%; height: 40%; border-radius: 50%; background: #1d1d1b; }
.oeye i::after { content: ""; position: absolute; left: 18%; top: 14%; width: 30%; height: 30%; border-radius: 50%; background: #fff; }
.oeye u { position: absolute; inset: 0; background: var(--rojo); transform: scaleY(0); transform-origin: 50% 0; }

/* ---------- botones píldora con puntitos ---------- */
.pill {
  --bg: var(--rojo); --fg: var(--blanco);
  display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.5em; border-radius: 999px; background: var(--bg); color: var(--fg);
  font-family: var(--disp); font-size: 20px; line-height: 1; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; will-change: transform;
  transition: transform .2s;
}
.pill::before, .pill::after { content: ""; width: 0; height: 0; border-radius: 50%; background: currentColor; transition: width .3s cubic-bezier(.3,1.6,.5,1), height .3s cubic-bezier(.3,1.6,.5,1); }
.pill::after { width: 6px; height: 6px; }
.pill:hover::before, .pill:focus-visible::before { width: 6px; height: 6px; }
.pill:active { transform: scale(.96); }
.pill.mar { --bg: var(--marino); }
.pill.wa { --bg: #25D366; --fg: #0B3B1F; }
.pill:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--marino); outline-offset: 3px; }
.lnk { font-family: var(--disp); font-size: 22px; text-decoration: none; text-transform: uppercase; }
.lnk::after { content: " •"; }

/* ---------- pelotas (SVG) ---------- */
.balls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.azul .balls { bottom: auto; height: min(100vh, 900px); }
.ball { position: absolute; pointer-events: none; }
.ball svg { width: 100%; height: 100%; display: block; }

/* ---------- entrada: lanza la pelota ---------- */
#pre { position: fixed; inset: 0; z-index: 100; background: var(--rosa); display: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.js #pre { display: block; }
.rm #pre, .seen #pre { display: none !important; }
#pre .pre-t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); text-align: center; font-size: clamp(64px, 8vw, 118px); color: var(--rojo); white-space: nowrap; }
#pre .pre-t .lw { line-height: .9; }
#pre .foot { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.2; padding: 0 20px; }
#pre .pct { position: absolute; left: var(--gut); top: 22px; font-family: var(--disp); font-size: 26px; }
#pre .skip { position: absolute; right: var(--gut); top: 18px; background: none; border: 0; cursor: pointer; font-family: var(--disp); font-size: 24px; color: var(--rojo); padding: 6px; }
#ball { position: absolute; width: 76px; height: 76px; left: 0; top: 0; visibility: hidden; cursor: grab; touch-action: none; z-index: 2; }
#ball:active { cursor: grabbing; }
#ball svg { width: 100%; height: 100%; display: block; }

/* ---------- menú ---------- */
.nav { position: absolute; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gut); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--rojo); }
.logo b { font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: .8; letter-spacing: .01em; }
.nav ul { display: flex; gap: clamp(20px, 3.4vw, 52px); list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.nav ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tab { position: fixed; z-index: 45; top: 0; right: var(--gut); background: var(--rojo); color: var(--blanco); text-decoration: none; font-size: 14px; font-weight: 500;
  text-transform: uppercase; padding: 26px 22px 20px; border-radius: 0 0 14px 14px; transition: padding .25s; }
.tab:hover { padding-top: 34px; }
.tab.inv { background: var(--blanco); color: var(--rojo); }
.tab { transition: padding .25s, background-color .3s, color .3s; }
.concept { position: fixed; z-index: 44; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(29,29,27,.82); color: var(--blanco); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.concept a { color: var(--amarillo); }
@media (max-width: 900px) {
  .nav ul { display: none; }
  .tab { padding: 16px 16px 12px; }
  .logo b { font-size: 24px; }
  .concept { font-size: 9.5px; bottom: 8px; }
}

/* ---------- portada ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; background: var(--crema); overflow: visible; z-index: 2; }
.hero .dog { position: absolute; left: 50%; top: 5vh; width: min(66vh, 50vw); transform: translateX(-50%); z-index: 2; }
.hero .dog img { width: 100%; height: auto; }
.hola { position: absolute; z-index: 4; right: -4%; top: 6%; background: var(--blanco); color: var(--rojo); font-family: var(--disp); font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1; padding: .55em .8em; border-radius: 18px 18px 18px 4px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); transform: rotate(4deg); white-space: nowrap; }
.hola::after { content: ""; position: absolute; left: 10px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--blanco); border-left-width: 4px; }
@media (max-width: 900px) { .hola { right: 2%; top: 2%; font-size: 18px; } }
.hero .htl { position: absolute; left: var(--gut); top: 14vh; z-index: 1; }
.hero .hbr { position: absolute; right: var(--gut); bottom: 12vh; z-index: 3; text-align: right; }
.hero .t { font-size: clamp(90px, 10.2vw, 190px); }
.hero .tag { position: absolute; right: calc(var(--gut) + 20vw); bottom: calc(12vh + 2.05 * clamp(90px, 10.2vw, 190px)); z-index: 3; text-align: right; font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 1.15; max-width: 18em; }
.socials { position: absolute; left: var(--gut); bottom: 20vh; display: flex; gap: 22px; z-index: 3; }
.socials a { width: 42px; height: 42px; border-radius: 50%; background: var(--rojo); display: grid; place-items: center; transition: transform .2s; }
.socials a:hover { transform: scale(1.12) rotate(-6deg); }
.socials svg { width: 20px; height: 20px; fill: var(--blanco); }
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; padding-top: 86px; }
  .hero .htl, .hero .hbr { position: relative; left: auto; right: auto; top: auto; bottom: auto; text-align: center; }
  .hero .t { font-size: clamp(56px, 16vw, 96px); }
  .hero .tag { position: relative; right: auto; bottom: auto; text-align: center; margin: 0 auto 10px; font-size: 12px; }
  .hero .dog { position: relative; left: auto; top: auto; transform: none; width: min(92vw, 440px); margin: 6px auto -40px; }
  .socials { position: relative; left: auto; bottom: auto; justify-content: center; margin: 18px 0 0; }
}

/* ---------- intro: nube de pelotas + correa ---------- */
.intro { position: relative; background: var(--crema); padding: 12vh var(--gut) 18vh; overflow: hidden; z-index: 1; }
.intro .cloud { position: absolute; inset: 0; }
.intro .bg-rosa { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: var(--rosa); }
.intro .txt { position: relative; z-index: 3; max-width: 820px; margin: 0 auto; text-align: center; font-size: clamp(30px, 3vw, 46px); line-height: .98; }
.intro .more { position: relative; z-index: 3; text-align: right; max-width: 820px; margin: 60px auto 0; }
.leash { position: absolute; z-index: 2; left: 3%; top: -2%; width: 16%; height: 78%; overflow: visible; }
@media (max-width: 900px) { .intro { padding: 70px var(--gut) 90px; } .leash { left: 2%; width: 36%; height: 55%; } }

/* ---------- galería: peques que nos visitan (fotos reales) ---------- */
.galeria { position: relative; background: var(--crema); overflow: hidden; }
.gal-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 5vh; padding: 90px 0 60px; }
.gal-head { padding: 0 var(--gut); max-width: 1400px; }
.gal-head .lbl { color: var(--rojo2); margin: 0; }
.gal-head h2 { font-size: clamp(60px, 8.4vw, 150px); margin: 8px 0 12px; }
.gal-sub { margin: 0; font-weight: 500; color: #3b2a22; }
.gal-sub a { color: var(--rojo); font-weight: 700; }
.gal-track { display: flex; gap: clamp(18px, 2vw, 32px); padding: 14px var(--gut) 24px; width: max-content; will-change: transform; }
.gcard { flex: none; margin: 0; width: clamp(230px, 22vw, 330px); background: var(--blanco); padding: 12px 12px 14px; border-radius: 12px; box-shadow: 0 22px 40px -24px rgba(105,52,19,.5); }
.gcard:nth-child(odd) { transform: rotate(-1.8deg); } .gcard:nth-child(even) { transform: rotate(1.8deg); }
.gcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.gcard figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; }
.gcard b { font-family: var(--disp); font-weight: 400; font-size: clamp(24px, 2vw, 32px); line-height: .9; color: var(--rojo); text-transform: uppercase; }
.gcard span { font-size: 11px; font-weight: 600; color: #8a7a70; white-space: nowrap; }
.gal-hint { display: none; }
@media (max-width: 900px) {
  .gal-pin { min-height: 0; padding: 80px 0 60px; gap: 24px; }
  .gal-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gal-track::-webkit-scrollbar { display: none; }
  .gcard { width: 74vw; scroll-snap-align: center; }
  .gal-hint { display: block; margin: 0; padding: 0 var(--gut); text-align: right; font-family: var(--disp); font-size: 22px; color: var(--rojo); }
}
.rm .gal-track, .nojs .gal-track { width: auto; overflow-x: auto; }

/* ---------- servicios ---------- */
.serv { position: relative; background: var(--rosa); padding: 12vh var(--gut) 14vh; overflow: hidden; }
.serv h2 { text-align: center; margin: 0; position: relative; }
.serv h2 .yb { position: absolute; width: .32em; height: .32em; left: 41%; top: -.05em; }
.serv .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 70px); max-width: 1320px; margin: 9vh auto 0; }
.svc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.svc .circ { position: relative; width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%; background: var(--rosa3); display: grid; place-items: center; overflow: hidden; }
.svc .circ img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.svc .n { position: absolute; right: 4%; top: 2%; font-family: var(--disp); font-size: clamp(60px, 6vw, 96px); line-height: 1; }
.svc h3 { margin: 26px 0 8px; }
.svc .price { font-family: var(--disp); font-size: clamp(26px, 2.2vw, 36px); color: var(--cafe); }
.svc ul { list-style: none; padding: 0; margin: 14px 0 22px; font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.5; color: var(--rojo2); max-width: 30em; }
.svc li::before { content: "✓ "; }
@media (max-width: 900px) { .serv .grid { grid-template-columns: 1fr; gap: 70px; } }

/* ---------- cómo funciona: fichas ordenadas ---------- */
.como { position: relative; background: var(--rosa); overflow: hidden; }
.como-pin { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3.2vh, 34px); padding: 80px var(--gut) 40px; }
.como-head { text-align: center; }
.como-head .lbl { color: var(--rojo2); margin: 0 0 8px; }
.como h2 { font-size: clamp(56px, 6.4vw, 112px); margin: 0; }
.steps-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.steps-bar i { font-style: normal; width: 42px; height: 42px; border-radius: 50%; background: var(--rosa3); color: var(--rojo); display: grid; place-items: center;
  font-family: var(--disp); font-size: 19px; line-height: 1; transition: background-color .3s, color .3s, transform .3s; }
.steps-bar i.on { background: var(--rojo); color: var(--blanco); transform: scale(1.08); }
.steps-bar span { width: clamp(24px, 4vw, 56px); height: 3px; border-radius: 3px; background: var(--rosa3); transition: background-color .3s; }
.steps-bar span.on { background: var(--rojo); }
.deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px); width: 100%; max-width: 1320px; }
.ficha { position: relative; z-index: 3; display: flex; flex-direction: column; background: var(--blanco); border-radius: 12px; overflow: hidden; text-align: left; box-shadow: 0 24px 44px -26px rgba(105,52,19,.55); }
.ficha .top { padding: 16px 18px 14px; }
.ficha .num { display: block; font-family: var(--disp); color: var(--rojo); font-size: clamp(38px, 3vw, 50px); line-height: .9; }
.ficha h3 { font-family: var(--disp); font-weight: 400; color: var(--cafe); text-transform: uppercase; font-size: clamp(24px, 1.9vw, 32px); line-height: .92; margin: 6px 0 8px; }
.ficha p { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #4a3a30; margin: 0; }
.ficha img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-top: auto; }
.como .pill { position: relative; z-index: 1; }
.como .hint { display: none; }
@media (max-width: 900px) {
  .como-pin { min-height: 0; justify-content: flex-start; padding: 72px 0 48px; gap: 16px; }
  .como-head { padding: 0 var(--gut); }
  .como h2 { font-size: clamp(46px, 13vw, 72px); }
  .steps-bar i { width: 34px; height: 34px; font-size: 16px; }
  /* celular: carrusel nativo que se desliza con el dedo (sin fijar la sección) */
  .deck { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 8px var(--gut) 22px; scroll-padding: 0 var(--gut); max-width: none; }
  .deck::-webkit-scrollbar { display: none; }
  .ficha { flex: none; width: 78vw; max-width: 330px; scroll-snap-align: center; }
  .ficha img { aspect-ratio: 16 / 10; }
  .como .hint { display: block; margin: -4px 0 0; font-family: var(--disp); font-size: 20px; color: var(--rojo); }
}
/* sin movimiento o sin JS: fichas visibles en fila o en lista */
.rm .deck .ficha, .nojs .deck .ficha { position: relative; }


/* ---------- el cuidado que tu perro merece ---------- */
.cuidado { position: relative; background: var(--rosa); min-height: 100vh; padding: 16vh var(--gut) 18vh; overflow: hidden; text-align: center; cursor: none; }
.cuidado .sub, .cuidado .arrow { position: relative; z-index: 2; }
.cuidado .sub { font-size: 13px; font-weight: 600; text-transform: uppercase; position: relative; z-index: 2; }
.cuidado .arrow { display: block; margin: 12px auto 5vh; width: 16px; }
.cuidado h2 { position: relative; z-index: 2; margin: 0; }
.cuidado .p { position: relative; z-index: 2; max-width: 34em; margin: 5vh auto 0; font-size: 15px; font-weight: 500; text-transform: uppercase; color: var(--rojo2); line-height: 1.4; }
.cursor-dog { position: fixed; left: 0; top: 0; width: 110px; height: 110px; z-index: 50; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.cursor-dog img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: var(--blanco); box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
@media (pointer: coarse) { .cuidado { cursor: auto; } .cursor-dog { display: none; } }

/* ---------- nosotros ---------- */
.nos { position: relative; background: var(--crema); padding: 14vh var(--gut); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 80px); align-items: center; max-width: 1400px; margin: 0 auto; }
.nos .ill { position: relative; }
.nos .ill img { width: 100%; aspect-ratio: 7 / 9; object-fit: cover; border-radius: 50% 50% 18px 18px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.nos .ill .stamp { position: absolute; right: -10px; top: 8%; width: 130px; height: 130px; border-radius: 50%; background: var(--rojo); color: var(--blanco); display: grid; place-items: center; text-align: center;
  font-family: var(--disp); font-size: 22px; line-height: .9; transform: rotate(10deg); }
.nos h2 { margin: 0 0 22px; }
.nos p { color: #3b2a22; font-size: 17px; max-width: 34em; }
.nos ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.nos li { display: flex; gap: 10px; align-items: baseline; font-weight: 500; color: #3b2a22; }
.nos li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--amarillo); box-shadow: inset 0 0 0 2px var(--rojo); transform: translateY(1px); }
@media (max-width: 900px) { .nos { grid-template-columns: 1fr; padding: 80px var(--gut); } .nos .ill .stamp { width: 96px; height: 96px; font-size: 17px; right: 0; } }

/* ---------- reseñas ---------- */
.resenas { position: relative; background: var(--rosa); overflow: hidden; padding: 12vh 0 0; }
.resenas .dome { position: relative; margin: 0 auto; width: 130vw; margin-left: -15vw; border-radius: 50% 50% 0 0 / 22vw 22vw 0 0; background: var(--crema); padding: 10vh 15vw 16vh; text-align: center; }
.resenas .lbl2 { font-family: var(--disp); font-size: 24px; }
.tl { position: relative; display: flex; justify-content: space-between; max-width: 1100px; margin: 26px auto 0; border-top: 1px solid var(--rojo); }
.tl button { position: relative; background: none; border: 0; padding: 14px 4px 0; cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--rojo); line-height: 1.2; }
.tl button::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); transform: translateX(-50%); }
.tl button[aria-selected="true"]::before { width: 15px; height: 15px; top: -8px; background: var(--crema); box-shadow: inset 0 0 0 3px var(--rojo), inset 0 0 0 6px var(--crema), inset 0 0 0 9px var(--rojo); }
.quote { position: relative; max-width: 1100px; margin: 7vh auto 0; min-height: 3.2em; font-size: clamp(34px, 3.8vw, 64px); }
.quote .q { display: block; }
.quote .who { display: block; margin-top: 22px; font-family: var(--sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.arr { position: absolute; top: 50%; background: none; border: 0; cursor: pointer; font-size: 28px; color: var(--rojo); padding: 10px; }
.arr.prev { left: -6vw; } .arr.next { right: -6vw; }
.stars { color: var(--rojo); font-size: 20px; letter-spacing: 4px; margin-top: 10px; }
@media (max-width: 900px) { .arr.prev { left: -8px; } .arr.next { right: -8px; } .resenas .dome { padding: 60px 17vw 80px; } }

/* ---------- preguntas + precios (celeste) ---------- */
.azul { position: relative; background: var(--celeste); color: var(--marino); overflow: hidden; padding: 14vh var(--gut) 0; }
.azul .top { text-align: center; }
.azul .book { font-family: var(--disp); font-size: 26px; }
.azul h2 { margin: 3vh 0 0; }
.azul .tel { font-family: var(--disp); font-size: clamp(34px, 3.6vw, 60px); margin: 10px 0 30px; }
.azul .tel a { text-underline-offset: 6px; }
.faq { max-width: 900px; margin: 10vh auto 0; }
.faq details { border-top: 2px solid var(--marino); }
.faq details:last-child { border-bottom: 2px solid var(--marino); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--disp); font-size: clamp(24px, 2.2vw, 34px); line-height: 1; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--marino); color: var(--celeste); display: grid; place-items: center; font-family: var(--sans); font-size: 22px; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 50px 22px 0; font-size: 16px; color: var(--marino2); }
.precios { text-align: center; margin-top: 16vh; }
.precios .bone { width: 64px; margin: 0 auto 14px; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1340px; margin: 6vh auto 0; text-align: center; }
.pcard { background: var(--crema); border-radius: 6px; padding: 26px 18px 30px; display: flex; flex-direction: column; align-items: center; position: relative; }
.pcard .t { font-family: var(--disp); font-size: 24px; line-height: 1; min-height: 2em; }
.pcard .from { font-size: 10px; font-weight: 600; text-transform: uppercase; margin-top: 18px; }
.pcard .big { font-family: var(--disp); font-size: clamp(50px, 4.6vw, 76px); line-height: 1; margin: 6px 0; }
.pcard .small { font-size: 11px; font-weight: 600; text-transform: uppercase; line-height: 1.3; max-width: 18em; }
.pcard .pill { margin-top: auto; width: 100%; justify-content: center; margin-top: 24px; }
.pcard .pop { position: absolute; top: -10px; right: 12px; background: var(--marino); color: var(--crema); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.pcard.dark { background: var(--marino); color: var(--crema); justify-content: center; text-decoration: none; }
.pcard.dark .circle { width: 110px; height: 110px; border-radius: 50%; background: rgba(175,216,251,.35); display: grid; place-items: center; font-size: 34px; margin-top: 24px; transition: transform .3s; }
.pcard.dark:hover .circle { transform: scale(1.1) rotate(-12deg); }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- la cola: «comparte el amor» ---------- */
.cola { position: relative; height: 100vh; height: 100svh; min-height: 560px; margin-top: 12vh; overflow: hidden; }
.cola .tail { position: absolute; left: 50%; bottom: -2px; width: min(66vh, 64vw); transform: translateX(-50%); z-index: 2; }
.cola .tail img { width: 100%; }
.cola-l, .cola-r { position: absolute; margin: 0; color: var(--marino); font-size: clamp(84px, 13vw, 230px); z-index: 1; }
.cola-l { left: var(--gut); top: 8%; }
.cola-r { right: var(--gut); bottom: 22%; z-index: 3; }
@media (max-width: 900px) {
  .cola { height: 88svh; }
  .cola-l, .cola-r { font-size: clamp(64px, 20vw, 110px); left: 0; right: 0; text-align: center; }
  .cola-l { top: 6%; } .cola-r { bottom: auto; top: calc(6% + 1em); }
  .cola .tail { width: min(92vw, 420px); }
}

/* ---------- instagram: dos cintas ordenadas ---------- */
.insta { position: relative; background: var(--crema); padding: 14vh 0 12vh; overflow: hidden; text-align: center; }
.insta .found { font-family: var(--disp); font-size: clamp(22px, 2vw, 30px); margin: 0; }
.insta .handle { display: inline-block; font-size: clamp(76px, 13vw, 240px); line-height: .85; text-decoration: none; margin: 10px 0 14px; transition: transform .3s; }
.insta .handle:hover { transform: rotate(-2deg) scale(1.02); }
.insta .igsub { font-size: 13px; font-weight: 600; text-transform: uppercase; margin: 0 0 7vh; padding: 0 var(--gut); }
.rows { display: grid; gap: 18px; margin-bottom: 8vh; }
.row { overflow: hidden; }
.row .track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.row img { width: clamp(150px, 17vw, 250px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
.row img:nth-child(odd) { transform: rotate(-2deg); } .row img:nth-child(even) { transform: rotate(2deg); }
.row .track { padding: 10px 0; }

/* ---------- cierre rojo ---------- */
.final { position: relative; background: var(--rojo); color: var(--blanco); text-align: center; padding: 16vh var(--gut) 0; overflow: hidden; min-height: 100vh; }
.final .kick { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 22px; position: relative; z-index: 2; }
.final h2 { position: relative; z-index: 2; margin: 0 auto; color: var(--blanco); font-size: clamp(52px, 7.6vw, 150px); }
@media (min-width: 901px) { .final h2 .lw > span { white-space: nowrap; } }
@media (max-width: 900px) {
  .final { padding-top: 12vh; }
  .final h2 { font-size: 10.6vw; }
  .final h2 .lw > span { white-space: nowrap; }
  .pie .word { margin-bottom: 0; padding-bottom: 14px; line-height: .86; }
  #finBalls .ball { width: 30px !important; height: 30px !important; }
  #finBalls .ball:nth-child(n+5) { display: none; }
}
.final .pill.big { position: relative; z-index: 3; margin-top: 6vh; --bg: var(--blanco); --fg: var(--rojo); font-size: clamp(24px, 2.2vw, 32px); padding: .85em 1.8em; }
.final .mini { position: relative; z-index: 2; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 18px 0 0; opacity: .9; }
.final .fsoc { position: relative; z-index: 2; display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.final .fsoc a { width: 52px; height: 52px; border-radius: 50%; background: var(--blanco); display: grid; place-items: center; transition: transform .2s; }
.final .fsoc a:hover { transform: scale(1.12) rotate(-8deg); }
.final .fsoc svg { width: 24px; height: 24px; fill: var(--rojo); }
.final .peek { position: relative; z-index: 1; width: min(40vh, 62vw); margin: 5vh auto 0; }
.final .peek img { display: block; width: 100%; height: auto; }

/* ---------- pie ---------- */
.pie { background: var(--rojo2); color: var(--blanco); padding: 70px var(--gut) 0; overflow: hidden; }
.pie .cols { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 30px; max-width: 1400px; margin: 0 auto; font-size: 14px; }
.pie .h { font-family: var(--disp); font-size: 26px; line-height: 1; margin: 0 0 14px; text-transform: uppercase; color: var(--amarillo); }
.pie p { margin: 0 0 10px; }
.pie .cols a { display: block; text-decoration: none; margin-bottom: 8px; }
.pie .cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie .soc { display: flex; gap: 10px; }
.pie .soc { flex-wrap: wrap; }
.pie .soc a { width: 48px; height: 48px; border-radius: 50%; background: var(--blanco); display: grid; place-items: center; margin: 0; transition: transform .2s; }
.pie .soc svg { width: 22px; height: 22px; fill: var(--rojo2); }
.pie .soc a:hover { transform: scale(1.1) rotate(-8deg); text-decoration: none; }
.pie .bar { display: flex; justify-content: space-between; gap: 12px; max-width: 1400px; margin: 50px auto 0; padding-top: 16px; border-top: 1px solid rgba(251,250,244,.4); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.pie .word { font-size: max(32vw, 150px); line-height: .74; text-align: center; margin: 3vh 0 -3.2vw; color: var(--blanco); letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 900px) { .pie .cols { grid-template-columns: 1fr 1fr; } .pie .cols > div:last-child { grid-column: 1 / -1; } .pie .bar { flex-direction: column; } }
.concept { transition: opacity .3s; }
.concept.off { opacity: 0; pointer-events: none; }

/* ===== v17 · feedback de Nico y Manu (29-09) ===== */
.logo img { display: block; height: 64px; width: auto; }
@media (max-width: 900px) { .logo img { height: 46px; } }
.deck { grid-template-columns: repeat(5, 1fr); }
.ficha h3 { font-size: clamp(22px, 1.6vw, 30px); }
.ficha p { font-size: 13px; }
.serv .grid { grid-template-columns: repeat(3, 1fr); max-width: 1400px; }
.svc .circ { width: min(100%, 440px); }
@media (max-width: 900px) { .serv .grid { grid-template-columns: 1fr; } }
.quote[data-len="m"] { font-size: clamp(26px, 2.8vw, 46px); }
.quote[data-len="l"] { font-size: clamp(20px, 2vw, 32px); line-height: 1.2; }
.gmore { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 12px 20px; border-radius: 999px; background: var(--blanco); color: var(--rojo); text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 10px 24px -14px rgba(105,52,19,.5); transition: transform .2s; }
.gmore:hover { transform: translateY(-2px) scale(1.03); }
.gmore svg { width: 20px; height: 20px; fill: var(--rojo); flex: none; }
.faq .a p { margin: 0 0 8px; } .faq .a p:last-child { margin-bottom: 0; }
.pie-logo { display: block; width: 150px; height: auto; margin: 0 0 16px; }
.pie { padding-bottom: 30px; }
@media (max-width: 600px) { .tl button { font-size: 9px; padding-left: 0; padding-right: 0; } }

/* ===== v18 · distintivo oficial de reseñas de Google ===== */
.gbadge { display: inline-flex; align-items: center; gap: 16px; margin-top: 38px; padding: 14px 16px 14px 18px; background: #fff; border-radius: 16px; text-decoration: none; color: #202124; font-family: var(--sans); text-align: left;
  box-shadow: 0 1px 2px rgba(60,64,67,.18), 0 6px 22px -6px rgba(60,64,67,.28); border: 1px solid #e8eaed; transition: transform .2s, box-shadow .2s; }
.gbadge:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(60,64,67,.2), 0 14px 30px -8px rgba(60,64,67,.35); }
.gbadge .glogo { width: 34px; height: 34px; flex: none; }
.gb-txt { display: flex; flex-direction: column; gap: 2px; }
.gb-top { display: flex; align-items: center; gap: 8px; }
.gb-top b { font-size: 22px; font-weight: 700; line-height: 1; color: #202124; }
.gb-stars { color: #FBBC05; font-size: 18px; letter-spacing: 1px; line-height: 1; }
.gb-sub { font-size: 12.5px; font-weight: 500; color: #5f6368; }
.gb-cta { margin-left: 8px; padding: 10px 16px; border-radius: 999px; background: #1a73e8; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.gb-cta i { font-style: normal; display: inline-block; transition: transform .2s; }
.gbadge:hover .gb-cta i { transform: translateX(3px); }
@media (max-width: 600px) { .gbadge { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px; } .gb-cta { margin-left: 0; } }