/* MY DOG! — sistema visual del sitio
   Tokens de color: [confirmar] contra las artes de Gabriel.
   Turquesa y amarillo salen del logo vectorial (fuentes/MY_DOG_logo.pdf, CMYK leído 2026-09-22).
   El naranja y el marrón se muestrearon del frente de etiqueta aprobado el 23/09. */

:root{
  --naranja:#E87722;        /* PANTONE 158 C — naranja de marca (25/09, §63.3) */
  --acento:#5A2A0C;         /* marrón: volantas, enlaces, detalles */
  --naranja-osc:#5A2A0C;    /* marrón de la cinta AL AIRE LIBRE y del sello */
  --marron:#5A2A0C;
  --tinta:#1C2320;
  --tinta-suave:#4A5550;
  --papel:#FBFAF7;
  --papel-2:#F2EFE9;
  --verde-env:#3E7D53;      /* I'm green */
  --linea:#E3DED4;
  --radio:14px;
  --radio-lg:24px;
  --ancho:1120px;
  --sombra:0 2px 4px rgba(28,35,32,.04),0 12px 32px rgba(28,35,32,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.logo{font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);margin:0 0 .5em}
h2{font-size:clamp(1.55rem,3.2vw,2.35rem);margin:0 0 .6em}
h3{font-size:1.2rem;margin:0 0 .4em}
p{margin:0 0 1.1em}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.centro{text-align:center}
.limite{max-width:62ch}
.limite.centro{margin-left:auto;margin-right:auto}

/* ---------- Nav ---------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra .contenedor{display:flex;align-items:center;gap:22px;min-height:96px}
.logo{font-size:1.45rem;color:var(--tinta);letter-spacing:-.03em;white-space:nowrap}
.logo-img{display:block;height:72px;width:auto}
@media (max-width:820px){.logo-img{height:56px}}
.logo span{color:inherit}   /* el logo va todo negro, como en los productos */
.nav{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--tinta-suave);font-weight:600;font-size:.94rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinta);text-decoration:none}
.nav a.destacado{background:var(--tinta);color:var(--papel);padding:9px 16px;border-radius:999px}
.nav a.destacado:hover{background:var(--acento)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:10px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}

/* ---------- Botones ---------- */
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.97rem;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn:hover{text-decoration:none}
.btn-primario{background:var(--tinta);color:var(--papel)}
.btn-primario:hover{background:var(--acento)}
.btn-linea{border-color:var(--tinta);color:var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:var(--papel)}
.btn-naranja{background:var(--naranja);color:#fff}
.btn-naranja:hover{background:var(--naranja-osc)}

/* ---------- Secciones ---------- */
section{padding:72px 0}
section.ajustada{padding:48px 0}
.fondo-2{background:var(--papel-2)}
.fondo-tinta{background:var(--tinta);color:var(--papel-2)}
.fondo-tinta h2,.fondo-tinta h3{color:#fff}
.fondo-tinta a{color:var(--naranja)}
.encabezado-seccion{margin-bottom:38px}
.volanta{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--acento);margin:0 0 10px}
.volanta.naranja{color:var(--naranja)}

/* ---------- Grillas ---------- */
.grilla{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* ---------- Tarjetas ---------- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-lg);overflow:hidden;display:flex;flex-direction:column}
.tarjeta .cuerpo{padding:22px}
.tarjeta h3{margin-bottom:6px}
.tarjeta p{font-size:.95rem;color:var(--tinta-suave);margin-bottom:0}
a.tarjeta{color:inherit}
a.tarjeta:hover{text-decoration:none;box-shadow:var(--sombra);transform:translateY(-3px)}
a.tarjeta{transition:box-shadow .18s ease,transform .18s ease}
.etiqueta{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:5px 11px;border-radius:999px;background:var(--papel-2);color:var(--tinta-suave)}
.etiqueta.aire{background:var(--naranja);color:#fff}
.etiqueta.verde{background:var(--naranja-osc);color:#fff}   /* marrón de marca (antes verde) */
.etiqueta.pronto{background:var(--tinta);color:var(--papel)}

/* ---------- Marcadores de imagen (brief visual) ---------- */
.marcador{
  background:repeating-linear-gradient(45deg,var(--papel-2),var(--papel-2) 12px,#EAE5DC 12px,#EAE5DC 24px);
  border:2px dashed #C9C1B4;border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;min-height:220px;color:#6E675C;font-size:.82rem;line-height:1.5;
}
.marcador b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8C8477;margin-bottom:6px}
.marcador.alto{min-height:420px}
.marcador.frasco{min-height:300px;background-color:#fff}
.etiqueta-marco{background:#F3EFE8;display:flex;align-items:center;justify-content:center;height:300px;padding:18px;margin:0}
.etiqueta-img{max-height:100%;max-width:100%;width:auto;height:auto;display:block;box-shadow:0 2px 10px rgba(0,0,0,.12);border-radius:3px}
.etiqueta-marco.grande{height:auto;min-height:420px;flex-direction:column;gap:14px;padding:32px;border-radius:var(--radio-lg)}
.etiqueta-marco.grande .etiqueta-img{max-height:620px}
.etiqueta-marco figcaption{font-size:.82rem;color:#6E675C;text-align:center}
.sello-marco{display:flex;align-items:center;justify-content:center;min-height:320px;background:#E87722;border-radius:var(--radio-lg);padding:30px}
.sello-marco img{width:min(260px,70%);height:auto}
.sello-marco.blanco{background:#fff;border:1px solid var(--linea)}
.tarjeta-foto{width:100%;height:300px;object-fit:cover;object-position:40% 50%;display:block}

/* ---------- Hero ---------- */
.hero{padding:0;border-bottom:1px solid var(--linea)}
.hero .marcador{min-height:520px;border:0;border-radius:0}
.hero-foto{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
.hero-texto{padding:64px 44px 64px max(20px,calc((100vw - var(--ancho))/2));max-width:none}
.hero-texto p.bajada{font-size:1.17rem;color:var(--tinta-suave);max-width:54ch}

/* ---------- Ficha de producto ---------- */
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.datos{border-top:1px solid var(--linea);margin-top:26px;padding-top:22px}
.datos dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;font-size:.95rem}
.datos dt{font-weight:700}
.datos dd{margin:0;color:var(--tinta-suave)}
.migas{font-size:.86rem;color:var(--tinta-suave);padding:18px 0 0}

/* ---------- Formularios ---------- */
.form{display:grid;gap:14px;max-width:460px}
.form.ancho{max-width:100%;grid-template-columns:repeat(2,1fr)}
.form label{font-size:.86rem;font-weight:700;display:block;margin-bottom:5px}
.form .campo.full{grid-column:1/-1}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;
  font:inherit;background:#fff;color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--naranja);outline-offset:1px;border-color:transparent}
.nota{font-size:.82rem;color:var(--tinta-suave)}

/* ---------- Promesas del pie ---------- */
.promesas{border-top:1px solid var(--linea);background:var(--papel-2)}
.promesas .grilla{gap:22px}
.promesa b{display:block;margin-bottom:4px}
.promesa p{font-size:.9rem;color:var(--tinta-suave);margin:0}

/* ---------- Pie ---------- */
footer{background:var(--tinta);color:#B9C2BD;padding:56px 0 28px;font-size:.92rem}
footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;margin:0 0 14px}
footer a{color:#D7DEDA;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
.pie-legal{border-top:1px solid #2E3733;margin-top:36px;padding-top:20px;font-size:.82rem;color:#8B948F;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split,.ficha{grid-template-columns:1fr;gap:30px}
  .hero .marcador{min-height:340px}
  .hero-foto{min-height:340px;max-height:420px}
  .hero-texto{padding:48px 20px}
}
@media(max-width:620px){
  body{font-size:16px}
  section{padding:52px 0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form.ancho{grid-template-columns:1fr}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0 18px}
  .nav.abierta{display:flex}
  .menu-btn{display:block}
  .barra .contenedor{flex-wrap:wrap;padding-top:14px;padding-bottom:0;min-height:0}
  .barra .contenedor > .logo{padding-bottom:14px}
}

/* Sección Icaridina (AL AIRE LIBRE) — §56 */
.ica{align-items:center}.ica-sello{display:flex;justify-content:center}.ica-sello img{width:min(300px,80%);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.ica-momentos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.ica-momentos div{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px}
.ica-momentos b{display:block;color:var(--naranja);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}.ica-momentos span{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.25rem;color:#fff}

/* ---------- Tarjetas de producto sin foto de envase (§80) ---------- */
.g-5{grid-template-columns:repeat(5,1fr)}
.tp-grilla{column-gap:22px;row-gap:78px;padding-top:56px}
.tp{position:relative;display:flex;flex-direction:column;border-radius:22px;color:#fff;background:var(--c);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.tp:hover{text-decoration:none;transform:translateY(-2px)}
a.tp:focus-visible{outline:3px solid var(--naranja);outline-offset:4px}
.tp-escena{position:relative;height:250px;border-radius:22px 22px 0 0;background:var(--fondo);display:flex;align-items:flex-end;justify-content:center}
.tp-escena::before{content:"";position:absolute;inset:auto 12% 14px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}
.tp-perro{position:relative;z-index:1;max-width:96%;height:300px;width:auto;object-fit:contain;object-position:bottom;margin-top:-50px;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.14));transition:transform .45s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.tp-perro.tp-ancho{height:auto;width:100%;max-height:250px}
.tp:hover .tp-perro,.tp:focus-visible .tp-perro{transform:translateY(-10px) scale(1.04)}
@keyframes tp-saludo{0%{transform:rotate(0)}45%{transform:rotate(-1.6deg) translateX(-2px)}100%{transform:rotate(-1deg) translateX(-1px)}}
@keyframes tp-vaiven{0%{transform:translateX(0) rotate(0)}35%{transform:translateX(-3px) rotate(-1deg)}70%{transform:translateX(2px) rotate(.6deg)}100%{transform:translateX(0) rotate(0)}}
.tp:hover .tp-lado,.tp:focus-visible .tp-lado{transform:none;animation:tp-saludo 1.1s ease-out forwards}
.tp:hover .tp-vaiven,.tp:focus-visible .tp-vaiven{transform:none;animation:tp-vaiven 1.4s ease-in-out forwards}
.tp-franja{padding:20px 22px 22px;display:grid;gap:6px;border-radius:0 0 22px 22px}
.tp-tipo{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.tp-franja h3{font-size:1.45rem;line-height:1.05;margin:0;color:#fff}
.tp-franja p{margin:2px 0 0;font-size:.97rem;color:#fff;opacity:.92}
.tp-iso{position:absolute;z-index:2;right:14px;bottom:12px;width:30px;height:auto}
.tp-sello{position:absolute;z-index:2;top:14px;left:14px;width:70px;height:70px;transform:rotate(-8deg)}
.tp-sello-der{left:auto;right:14px;transform:rotate(8deg)}
.tp-perro.tp-ancho{max-width:88%}
.tp-aroma{flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 22px;gap:14px;overflow:hidden}
.tp-aroma-nombre{font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.tp-iconos{height:46px;width:auto;opacity:.9}
/* 07/10: isotipo del mismo tamaño en todas las tarjetas (30 px); en fichas grandes, 44 px */
/* Ficha: la escena en grande y la etiqueta a un clic */
.tp-ficha-col{display:grid;gap:18px;padding-top:70px}
.tp-escena.tp-grande{height:auto;min-height:420px;border-radius:28px}
.tp-grande .tp-perro{height:480px;margin-top:-80px}
.tp-grande .tp-perro.tp-ancho{height:auto;max-height:none;width:100%;margin-top:-40px}
.tp-grande.tp-aroma{min-height:420px;padding:40px 36px;margin-top:0}
.tp-grande .tp-aroma-nombre{font-size:clamp(3rem,7vw,5rem)}
.tp-grande .tp-iconos{height:70px}
.tp-grande .tp-iso{width:44px;right:20px;bottom:18px}
.tp-grande .tp-sello{width:110px;height:110px;top:20px;left:20px}
.tp-grande .tp-sello-der{left:auto;right:20px}
.tp-ver-etiqueta summary{cursor:pointer;font-weight:700;font-size:.92rem;display:inline-block;border-bottom:2px solid var(--naranja);padding-bottom:3px}
.tp-ver-etiqueta[open] summary{margin-bottom:14px}
@media(max-width:1060px){.g-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.tp-grilla.g-4,.tp-grilla.g-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tp-grilla.g-2,.tp-grilla.g-4,.tp-grilla.g-5{grid-template-columns:1fr}.tp-grande .tp-perro{height:380px;margin-top:-60px}.tp-escena.tp-grande{min-height:340px}}
@media (prefers-reduced-motion:reduce){.tp,.tp-perro{transition:none}.tp:hover .tp-perro,a.tp:hover{transform:none;animation:none!important}}

/* Ajuste 05/10: todos los perros al mismo tamaño (se recortan a los costados, no arriba) y sello del lado de la cabeza */
.tp{min-width:0}
.tp-grilla.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tp-grilla.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tp-grilla.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-grilla.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-escena{clip-path:inset(-140px 0 0 0)}
.tp-escena.tp-der{justify-content:flex-end}
.tp-perro{max-width:none}
.tp-perro.tp-ancho{max-width:none;width:auto;height:190px;max-height:none}
.tp-grilla.g-2 .tp-perro.tp-ancho{height:250px}
.tp-sello{top:-34px;left:8px;width:78px;height:78px}
.tp-sello-der{left:auto;right:8px}
.tp-grande .tp-sello{top:-44px}
.tp-escena.tp-grande{clip-path:inset(-160px 0 0 0 round 0 0 28px 28px)}
@media(max-width:900px){.tp-grilla.g-4,.tp-grilla.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tp-grilla.g-2,.tp-grilla.g-3,.tp-grilla.g-4,.tp-grilla.g-5{grid-template-columns:minmax(0,1fr)}}

/* Etiqueta frente y dorso en la ficha (§80) */
.tp-ir-etiqueta{justify-self:start;font-weight:700;font-size:.92rem;color:var(--tinta);border-bottom:2px solid var(--naranja);padding-bottom:3px}
.tp-ir-etiqueta:hover{text-decoration:none;color:var(--naranja-osc)}
.tp-etiquetas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start;max-width:980px}
.tp-et{margin:0;display:grid;gap:10px}
.tp-et img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.12);background:#fff}
.tp-et a{display:block}
.tp-et a:hover img{box-shadow:0 10px 30px rgba(0,0,0,.18)}
.tp-et figcaption{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
@media(max-width:620px){.tp-etiquetas{grid-template-columns:minmax(0,1fr)}}
/* Portada: tarjeta de la colección de eliminadores, los 4 aromas */
.tp-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:stretch;justify-content:stretch;overflow:hidden;clip-path:none}
.tp-mosaico::before{display:none}
.tp-mosaico span{display:flex;align-items:flex-end;padding:14px 16px;font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;font-size:1.25rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.tp-mosaico span:first-child{border-top-left-radius:22px}.tp-mosaico span:nth-child(2){border-top-right-radius:22px}

/* Portada: ¿Qué le pasa a tu perro? → directo al producto (§80) */
.tp-prob{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio-lg);padding:16px 16px 16px 22px;color:inherit;transition:box-shadow .18s ease,transform .18s ease}
a.tp-prob:hover{text-decoration:none;box-shadow:var(--sombra);transform:translateY(-3px)}
.tp-prob-txt{display:grid;gap:6px;min-width:0}
.tp-prob h3{margin:0;font-size:1.2rem}
.tp-prob-prod{font-size:.9rem;font-weight:700;color:var(--c)}
.tp-mini{flex:none;width:84px;height:84px;border-radius:16px;background:var(--fondo);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.tp-mini img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 15%);transition:transform .35s ease}
a.tp-prob:hover .tp-mini img{transform:scale(1.08)}
.tp-mini-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:stretch;justify-items:stretch}
.tp-mini-mosaico i{display:block}

/* Ajuste: frente y dorso del mismo tamaño (es la misma etiqueta); mini mosaico con los nombres */
.tp-etiquetas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.tp-et figcaption{text-transform:none;letter-spacing:.02em;font-size:.88rem}
.tp-mini-mosaico{width:118px}
.tp-mini-mosaico i{font-style:normal;font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;font-size:.56rem;line-height:1.05;text-transform:uppercase;display:flex;align-items:flex-end;padding:5px 6px}
/* Ajuste: sello más arriba para que no tape la nariz del cachorro */
.tp-sello{top:-60px}
.tp-sello-izq{left:-6px}
.tp-sello-der{right:-6px}
.tp-grande .tp-sello{top:-78px}
.tp-grilla{padding-top:68px}
/* Ajuste (Eduardo): el sello va donde MIRA el cachorro (arriba, en la línea de la mirada), no pegado a la punta del hocico */
.tp-sello{top:-112px}
.tp-sello-izq{left:16px}
.tp-sello-der{right:4px}
.tp-grilla:has(.tp-sello){padding-top:122px}
.tp-grande .tp-sello{top:-150px}
.tp-grande .tp-sello-izq{left:24px}
.tp-grande .tp-sello-der{right:8px}
.tp-ficha-col:has(.tp-sello){padding-top:160px}
.tp-grande .tp-sello{top:-122px}
.tp-ficha-col:has(.tp-sello){padding-top:135px}

/* ---------- Fotos de la serie (chica + golden) y botón flotante (§80) ---------- */
.tp-foto{display:block;width:100%;height:100%;min-height:340px;max-height:460px;object-fit:cover;border-radius:var(--radio-lg)}
.tp-cab-foto{align-items:center;margin-bottom:8px}
.tp-cab-foto .encabezado-seccion{margin-bottom:0}
.tp-banda{position:relative;padding:0;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.tp-banda-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tp-banda::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.tp-banda-txt{padding-block:56px}
.tp-banda .volanta{color:#FFD9B8}
.tp-banda h2{color:#fff;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.02;max-width:14ch;margin:0}
.tp-flota{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--naranja);color:#fff;font-weight:700;font-size:.95rem;padding:13px 20px 13px 16px;border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .2s ease,background .2s ease}
.tp-flota:hover{text-decoration:none;background:var(--naranja-osc);transform:translateY(-2px)}
.tp-flota:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
footer{padding-bottom:90px}
@media(max-width:900px){.tp-foto{min-height:260px;max-height:340px}.tp-banda{min-height:420px}}
@media(max-width:620px){.tp-flota{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:.88rem;padding:11px 16px 11px 13px}}
.tp-banda h2{font-size:clamp(1.6rem,3.2vw,2.6rem);max-width:24ch;line-height:1.1}
.tp-banda-foto{object-position:50% 22%}
.tp-banda::after{background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
.tp-grilla.g-3:has(.tp-sello){padding-top:84px}
.tp-grilla.g-3 .tp-sello{top:-62px;width:70px;height:70px}
.tp-banda::after{display:none}
.tp-banda{min-height:0;aspect-ratio:21/8;max-height:620px}
@media(max-width:900px){.tp-banda{aspect-ratio:4/3}}
/* Catálogo: arranca con las 3 colecciones; cabeceras compactas (menos es más, 05/10) */
.tp-cat-cab{padding-bottom:0}
.tp-cat-titulo{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 -40px}
.tp-cat-cab .tp-grilla{padding-top:116px}
.tp-col-cab{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:0}
.tp-col-cab h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.tp-col-cab p{margin:0;color:var(--tinta-suave);max-width:60ch}
section:has(.tp-col-cab){padding-top:44px}
.tp-cat-titulo{margin-bottom:0}
.tp-cat-cab .tp-grilla{padding-top:70px}
/* Franja de foto: ancho completo, sin recorte (la caja ya no depende de aspect-ratio) */
.tp-banda{aspect-ratio:auto;width:100%;height:clamp(360px,36vw,640px);max-height:none;display:block}
.tp-banda-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media(max-width:900px){.tp-banda{aspect-ratio:auto;height:clamp(300px,60vw,460px)}}
/* Páginas por colección */
.tp-col-pag{padding-top:10px}
.tp-col-cab h1{margin:0;font-size:clamp(1.8rem,3.2vw,2.4rem)}
/* Etiqueta plegada por defecto; botón flotante aparece al bajar */
.tp-etiqueta-sec{padding-top:0}
.tp-et-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tp-et-details summary::-webkit-details-marker{display:none}
.tp-et-sum{font-weight:700;border-bottom:2px solid var(--naranja);padding-bottom:3px}
.tp-et-sum::after{content:" +";color:var(--naranja)}
.tp-et-details[open] .tp-et-sum::after{content:" −"}
.tp-flota{opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.tp-flota.visible{opacity:1;transform:none;pointer-events:auto}
.tp-flota.visible:hover{transform:translateY(-2px)}
@media(max-width:620px){.tp-flota{bottom:calc(14px + env(safe-area-inset-bottom,0px))}}

/* Logo con el que interactúa el perro (06/10): lame, arriba, pata.
   "lame": queda apenas arriba de la nariz; cuando el perro sube (hover) la toca. El perro pasa por delante (z-index).
   --nx = desplazamiento horizontal de la nariz respecto del centro, en "alturas de perro". */
.tp-logo{position:absolute;z-index:2;width:58px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.tp-logo-lame{left:calc(50% + var(--nx,0) * 300px);transform:translateX(-50%);top:-113px}
.tp-logo-arriba{left:46%;transform:translateX(-50%);top:-118px}
.tp-logo-pata{left:37%;top:-62px}
.tp-escena.tp-grande{clip-path:inset(-200px 0 0 0)}
.tp-ficha-col{padding-top:70px}
.tp-grande .tp-logo{width:84px}
.tp-grande .tp-logo-lame{left:calc(50% + var(--nx,0) * 480px);top:-140px}
.tp-grande .tp-logo-arriba{top:-140px}
.tp-grande .tp-logo-pata{top:-80px}
@media(max-width:620px){.tp-grande .tp-logo{width:70px}.tp-grande .tp-logo-lame{left:calc(50% + var(--nx,0) * 380px);top:-108px}}
.tp-col-pag .tp-grilla{margin-top:56px}

/* 07/10: el hocico pasa por DETRÁS del logo (z-index 2). Golden "más atrás" (más chico) y logo donde mira:
   --mx/--my = punto de la mirada respecto del centro/arriba del perro, en alturas de perro (--h). */
.tp-escena{--h:250px;--mt:-20px}
.tp-perro.tp-atras{height:var(--h);margin-top:var(--mt)}
.tp-escena.tp-grande{--h:400px;--mt:-50px}
.tp-logo-mira{left:calc(50% + var(--mx,0) * var(--h));top:calc(var(--mt) + var(--my,0) * var(--h));transform:translate(-50%,-50%)}
@media(max-width:620px){.tp-escena.tp-grande{--h:320px;--mt:-40px}}

/* 07/10: Happy Moments — el logo donde toca el collie con la pata (perro alineado a la derecha, 300 px de alto). */
.tp-logo-patahm{right:-49px;top:-66px}
/* 07/10: en grillas de 4 (inicio, catálogo) el sello de icaridina va como en la de 3: cerca de donde mira el cachorro. */
.tp-grilla.g-4:has(.tp-sello){padding-top:84px}
.tp-grilla.g-4 .tp-sello{top:-62px;width:70px;height:70px}

/* 07/10: las tarjetas sin perro (Entre baño y baño, eliminadores) no se mueven: lo que se mueve son los perros. */
.tp:has(.tp-mosaico):hover,.tp:has(.tp-mosaico):focus-visible,.tp:has(.tp-aroma):hover,.tp:has(.tp-aroma):focus-visible{transform:none!important}
.tp:has(.tp-mosaico) *,.tp:has(.tp-aroma) *{animation:none!important}

/* 07/10: el collie toca el logo con la pata; se deja asomar el logo a la derecha del borde. */
.tp-escena:has(.tp-logo-patahm){clip-path:inset(-140px -80px 0 0)}
.tp:has(.tp-logo-patahm){position:relative;z-index:3}
/* 07/10: isotipo abajo, en la franja de la tarjeta (no compite con la imagen ni con los nombres). */
.tp-franja{position:relative}
.tp-iso-franja{position:absolute;right:18px;bottom:16px;width:30px;height:auto}
.tp-franja:has(.tp-iso-franja) p{padding-right:40px}

/* 07/10: más aire entre filas cuando hay un logo arriba del perro, para que no pise la tarjeta de arriba. */
.tp-grilla:has(.tp-logo){row-gap:150px}

/* 09/10: vale para TODA tarjeta de colección (grilla de 4 y "Otras colecciones" de 3), no solo la de 4.
   07/10 (Eduardo): en la tarjeta de colección (menos apaisada) el cachorro mantiene su tamaño y se corre: la cabeza entra
   entera y la cola queda afuera, a la derecha. Las tarjetas de producto no se tocan. */
.tp-grilla .tp-izq{justify-content:flex-start}
.tp-grilla .tp-izq .tp-perro{margin-left:16%}
/* 07/10: en grillas de 4 el mosaico de aromas con letra un poco menor, para que el isotipo no tape ENJOY. */
.tp-grilla.g-4 .tp-mosaico span{font-size:1.05rem;padding:12px 12px}
/* mismo tamaño y posición que el resto de los isotipos */
.tp-grilla .tp-izq .tp-iso{right:auto;left:14px}
/* 07/10: en grillas de 3 el logo del collie no se asoma tanto (chocaba con el sello de icaridina de la tarjeta de al lado);
   en celular tampoco, para que no se salga de la pantalla. */
.tp-grilla.g-3 .tp-logo-patahm{right:-14px;top:-80px}
@media(max-width:620px){.tp-logo-patahm,.tp-grilla.g-3 .tp-logo-patahm,.tp-grilla.g-4 .tp-logo-patahm{right:0;top:-84px}}
/* 07/10: los perros anchos no generan scroll horizontal en celular (se recortaban a la vista pero ensanchaban la página). */
.tp-grilla{overflow-x:clip}
/* 07/10: desborde 4px en ficha extreme-wash móvil */
.tp-ficha-col{min-width:0;overflow-x:clip}
/* 07/10: migas con margen lateral en móvil; collie de ficha sin cortar el hocico */
.migas{padding:18px 20px 0}
@media(max-width:620px){.tp-grande .tp-perro.tp-lado{height:auto;max-height:380px;max-width:100%}}
/* 07/10: perro + marca en una misma caja (tp-par). El logo va a un punto de la foto. */
.tp-par{position:relative;z-index:1;display:flex;flex:none;align-self:flex-end;margin-top:-50px;line-height:0}
.tp-par>.tp-perro{margin-top:0!important;margin-left:0!important}
.tp-grande .tp-par{margin-top:-80px}
.tp-grande .tp-par:has(.tp-ancho){margin-top:-40px;width:100%}
.tp-grilla .tp-izq .tp-par{margin-left:16%}
.tp-logo-p{left:calc(var(--lx) * 100%);top:calc(var(--ly) * 100%);transform:translate(var(--tx),var(--ty))}
@media(max-width:620px){.tp-grande .tp-par{margin-top:-60px}.tp-grande .tp-par:has(.tp-lado){max-width:100%}}
/* 07/10: lugar para el logo cuando el punto de interacción está en el borde de la foto (--gl/--gr en anchos de logo) */
.tp-escena{--lw:58px}
.tp-grande{--lw:84px}
@media(max-width:620px){.tp-grande{--lw:70px}}
.tp-logo-p{width:var(--lw)}
.tp-par{margin-left:calc(var(--gl,0) * var(--lw));margin-right:calc(var(--gr,0) * var(--lw))}
.tp-grande .tp-par:has(.tp-ancho),.tp-par:has(.tp-ajusta){width:calc(100% - (var(--gl,0) + var(--gr,0)) * var(--lw))}
.tp-grilla .tp-izq .tp-par{margin-left:max(16%, calc(var(--gl,0) * var(--lw)))}
.tp-perro.tp-ajusta{width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important}
/* 07/10: en celular, los perros apaisados entran enteros con su logo */
@media(max-width:620px){.tp-escena:not(.tp-izq) .tp-par:has(.tp-ancho){width:calc(100% - (var(--gl,0) + var(--gr,0)) * var(--lw))}.tp-escena:not(.tp-izq) .tp-par>.tp-ancho{width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important}}
/* 07/10: Al aire libre — el cachorro interactúa con el sello de Icaridina en vez del logo */
.tp-par:has(.tp-sello-p){--lw:72px}
.tp-grande .tp-par:has(.tp-sello-p){--lw:104px}
@media(max-width:620px){.tp-grande .tp-par:has(.tp-sello-p){--lw:86px}}
.tp-sello-p{height:auto;transform:translate(var(--tx),var(--ty)) rotate(var(--rot,0deg))}
/* 07/10: Entre baño y baño — el iso en la unión de los cuatro aromas (Eduardo) */
.tp-escena.tp-mosaico .tp-iso,.tp-grilla.g-4 .tp-mosaico .tp-iso{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:50px;height:50px;padding:10px;box-sizing:border-box;border-radius:50%;background:var(--fondo,#F2EFE9);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tp-mosaico span:nth-child(2),.tp-mosaico span:nth-child(4){padding-left:34px!important}
/* 08/10: en tarjetas angostas (grillas de 3-5) la foto ancha no se achica: se apoya del lado de la cabeza y el borde de la tarjeta corta el otro lado (cola del cachorro, lomo del limpiador) */
.tp-grilla:is(.g-3,.g-4,.g-5) .tp-escena:not(.tp-grande):has(.tp-sello-izq){justify-content:flex-start}
.tp-grilla:is(.g-3,.g-4,.g-5) .tp-escena:not(.tp-grande):has(.tp-sello-der){justify-content:flex-end}
/* 08/10: limpiador — en tarjetas anchas (colección, celular) la foto entera; en las angostas (3-5 columnas) el recorte limpiador-patas-tarjeta.webp */
.tp-solo-angosta{display:none}
.tp-grilla:is(.g-3,.g-4,.g-5) .tp-solo-ancha{display:none}
.tp-grilla:is(.g-3,.g-4,.g-5) .tp-solo-angosta{display:flex}
@media(max-width:620px){.tp-grilla:is(.g-3,.g-4,.g-5) .tp-solo-ancha{display:flex}.tp-grilla:is(.g-3,.g-4,.g-5) .tp-solo-angosta{display:none}}
.tp-par:has(img[src*="limpiador-patas-tarjeta"]){width:min(calc(100% - (var(--gl,0) + var(--gr,0)) * var(--lw)), 289px)}
.tp-par>img.tp-perro[src*="limpiador-patas-tarjeta"]{width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important}

/* 09/10 (Eduardo): en la tarjeta de colección de Al aire libre el sello de Icaridina baja un poco (más sobre la tarjeta, cerca de la mirada del cachorro). Las tarjetas de producto no se tocan. */
.tp-grilla .tp-izq .tp-sello{top:-36px}
/* 12/10 (Eduardo): en la FICHA de Al aire libre el cachorro mira el sello. Se corre solo el cachorro (17 % hacia el lado de la cola)
   para que la nariz quede debajo del sello; la cola la corta el borde. No toca tarjetas ni el sello. */
.tp-ficha-col .tp-escena:has(.tp-sello-der) .tp-perro.tp-ancho{translate:-17% 0}
.tp-ficha-col .tp-escena:has(.tp-sello-izq) .tp-perro.tp-ancho{translate:17% 0}