/* =========================================================
   SOUL SIBERIAN KENNEL · estilo «Tinta»
   Cuaderno de artista: papel, tinta sumi-e y un sello rojo.
   ========================================================= */
:root{
  --papel:#f3eee3; --papel-2:#ebe4d4; --tinta:#16130f; --tinta-2:#4b443b; --gris:#8b8377;
  --bermellon:#34475c; --bermellon-2:#9fb3c9;   /* antes rojo bermellón #c8371f / #e0563c; ahora el azul del sello «Ver camadas» (25/10/2026) */ --verde:#9fd6a8;
  --serif:"Shippori Mincho", "Times New Roman", serif;
  --sans:"Zen Kaku Gothic New", system-ui, sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
  --rail:84px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; color:var(--tinta); font:400 17px/1.75 var(--sans); background:var(--papel)}
/* Textura de papel */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .39 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--bermellon); outline-offset:4px}
.oculto-visual{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- Cortina de entrada: una gota de tinta ---------- */
.gota{position:fixed; inset:0; z-index:200; background:var(--tinta); display:grid; place-items:center;
  clip-path:circle(150% at 50% 50%); animation:gota 1.4s var(--ease) .4s forwards; pointer-events:none}
.gota span{color:var(--papel); font:600 13px var(--sans); letter-spacing:.5em; opacity:0; animation:fadeIn .5s .05s forwards}
@keyframes gota{to{clip-path:circle(0% at 50% 50%); visibility:hidden}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- Raíl vertical ---------- */
.rail{position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:28px 0; border-right:1px solid rgba(22,19,15,.12)}
.rail__sello{width:44px; mix-blend-mode:multiply}
.rail__texto{writing-mode:vertical-rl; transform:rotate(180deg); font:500 11px var(--sans); letter-spacing:.42em; text-transform:uppercase; color:var(--tinta-2)}
.rail__progreso{position:relative; width:1px; height:140px; background:rgba(22,19,15,.15)}
.rail__progreso i{position:absolute; left:-1px; top:0; width:3px; height:0; background:var(--tinta); border-radius:2px}

/* ---------- Controles superiores ---------- */
.controles{position:fixed; top:22px; right:28px; z-index:60; display:flex; align-items:center; gap:22px}
.idioma{background:none; border:0; cursor:pointer; font:700 12px var(--sans); letter-spacing:.2em; padding:6px 2px; border-bottom:1px solid currentColor}
.menu-btn{background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:14px; font:600 12px var(--sans); letter-spacing:.3em; text-transform:uppercase; padding:6px 0}
.menu-btn b{display:block; width:34px; height:2px; background:currentColor; position:relative; transition:transform .5s var(--ease)}
.menu-btn b::after{content:""; position:absolute; left:8px; right:0; top:7px; height:2px; background:currentColor; transition:transform .5s var(--ease), left .5s var(--ease)}
.menu-abierto .controles{color:var(--papel)}
.menu-abierto .menu-btn b{transform:translateY(3px) rotate(45deg)}
.menu-abierto .menu-btn b::after{left:0; top:0; transform:rotate(-90deg)}

.menu{position:fixed; inset:0; z-index:55; background:var(--tinta); color:var(--papel); display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:0 8vw;
  clip-path:circle(0% at calc(100% - 70px) 34px); visibility:hidden; transition:clip-path .9s var(--ease), visibility 0s .9s}
.menu-abierto .menu{clip-path:circle(160% at calc(100% - 70px) 34px); visibility:visible; transition:clip-path .9s var(--ease), visibility 0s}
.menu ol{list-style:none; margin:0; padding:0; counter-reset:m}
.menu li{overflow:hidden}
.menu a{counter-increment:m; display:flex; align-items:baseline; gap:22px; text-decoration:none; font:600 clamp(1.8rem,4.4vw,3.8rem)/1.25 var(--serif); transform:translateY(110%); transition:transform .8s var(--ease), color .3s}
.menu a::before{content:counter(m, upper-roman); font:500 12px var(--sans); letter-spacing:.3em; color:var(--bermellon-2); width:40px; flex:none}
.menu a:hover, .menu a:focus-visible{color:var(--bermellon-2)}
.menu-abierto .menu a{transform:none}
.menu li:nth-child(2) a{transition-delay:.04s}.menu li:nth-child(3) a{transition-delay:.08s}.menu li:nth-child(4) a{transition-delay:.12s}
.menu li:nth-child(5) a{transition-delay:.16s}.menu li:nth-child(6) a{transition-delay:.2s}.menu li:nth-child(7) a{transition-delay:.24s}
.menu li:nth-child(8) a{transition-delay:.28s}.menu li:nth-child(9) a{transition-delay:.32s}
/* Logo dorado: su fondo ya tiene el mismo color tinta que el menú */
.menu__husky{width:min(820px,100%); height:auto; max-height:82vh; object-fit:contain; justify-self:end}
@media(min-width:901px){.menu{grid-template-columns:auto 1fr; column-gap:4vw; padding-right:4vw}}

/* ---------- Estructura ---------- */
main{margin-left:var(--rail); overflow-x:clip}
.seccion{position:relative; padding:clamp(5rem,11vw,9rem) clamp(1.25rem,6vw,6rem)}
.num{font:500 12px var(--sans); letter-spacing:.4em; text-transform:uppercase; color:var(--bermellon); display:flex; align-items:center; gap:14px}
.num::after{content:""; width:60px; height:1px; background:currentColor}
.titulo{font:600 clamp(2.4rem,6vw,5.4rem)/1.05 var(--serif); letter-spacing:-.02em; margin-top:1.4rem}
.titulo em{font-style:normal; color:var(--bermellon)}
.entradilla{font:400 clamp(1.05rem,1.5vw,1.25rem)/1.75 var(--serif); color:var(--tinta-2); max-width:58ch; margin-top:1.6rem}
.ejemplo{display:inline-block; font:700 10px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bermellon); border:1px solid currentColor; padding:.15rem .5rem; vertical-align:middle}
.vacio{padding:3rem 0; color:var(--gris); font:400 1.15rem var(--serif); border-top:1px solid rgba(22,19,15,.15)}
.oscuro .vacio{color:#b9b0a2; border-color:rgba(243,238,227,.15)}

/* Revelados */
.pincel{clip-path:inset(0 100% 0 0); transition:clip-path 1.4s var(--ease)}
.visible > .pincel, .visible .pincel{clip-path:inset(0 0 0 0)}
.sube{opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1.2s var(--ease)}
.sube.visible{opacity:1; transform:none}
.d1{transition-delay:.15s}.d2{transition-delay:.3s}.d3{transition-delay:.45s}

/* ---------- Sello rojo ---------- */
.sello{--t:96px; width:var(--t); height:var(--t); display:grid; place-items:center; flex:none; border:0; cursor:pointer;
  background:var(--bermellon); color:#fff6ec; border-radius:6px; transform:rotate(-6deg);
  font:800 14px/1.15 var(--serif); text-align:center; letter-spacing:.06em; text-decoration:none;
  box-shadow:inset 0 0 0 3px var(--bermellon), inset 0 0 0 5px #fff6ec; transition:transform .5s var(--ease); filter:url(#rugoso)}
.sello:hover, .sello:focus-visible{transform:rotate(0) scale(1.06)}
.enlace{font:600 12px var(--sans); letter-spacing:.3em; text-transform:uppercase; text-decoration:none; padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .6s var(--ease)}
.enlace:hover, .enlace:focus-visible{background-size:100% 1px}

/* ---------- Portada ---------- */
.portada{min-height:100vh; display:grid; grid-template-columns:1fr 1.1fr; align-items:center; padding-top:4rem; padding-bottom:4rem; overflow:hidden}
.portada__texto{position:relative; z-index:2}
.portada__marca img{height:auto; mix-blend-mode:multiply}
.portada__texto .num{margin-bottom:2.2rem}
.portada__marca .m1{width:min(260px,40vw)}
.portada__marca .m2{width:min(380px,58vw); margin:-.8rem 0 0 2.4rem}
.portada__marca .m3{width:min(300px,46vw); margin:-.6rem 0 0 7rem}
.portada__lema{font:400 clamp(1.15rem,1.8vw,1.45rem)/1.7 var(--serif); max-width:30ch; margin-top:2.5rem; color:var(--tinta-2)}
.portada__acciones{display:flex; gap:28px; align-items:center; margin-top:3rem; flex-wrap:wrap}
.portada__arte{position:relative; height:min(92vh,900px); perspective:1100px}
/* Husky y su reflejo, como sobre un espejo de agua; tinta.js inclina el conjunto con el cursor */
.espejo{position:absolute; inset:0; padding-top:2%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; perspective:1100px; transform-style:preserve-3d; transition:transform 1.2s var(--ease)}
.portada__husky{position:relative; height:80%; flex:none; width:auto; max-width:none; mix-blend-mode:multiply; opacity:0; filter:blur(14px); transform:scale(1.04); animation:revela 2.2s var(--ease) 1.1s forwards}
@keyframes revela{to{opacity:1; filter:blur(0); transform:none}}
.espejo__linea{width:min(420px,70%); height:1px; margin:-.4% 0 0; background:linear-gradient(90deg,transparent,rgba(22,19,15,.35) 30%,rgba(22,19,15,.35) 70%,transparent); transform:scaleX(0); animation:linea 1.6s var(--ease) 2.2s forwards}
@keyframes linea{to{transform:scaleX(1)}}
.portada__reflejo{height:80%; width:auto; max-width:none; flex:none; mix-blend-mode:multiply; transform-origin:top; transform:perspective(900px) rotateX(-28deg) translateY(100%) scaleY(-1); filter:blur(1.2px); opacity:0; -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 35%,transparent 78%); mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 35%,transparent 78%); animation:refleja 2.4s var(--ease) 2s forwards}
@keyframes refleja{to{opacity:.42}}
@media (prefers-reduced-motion:reduce){.portada__husky,.portada__reflejo,.espejo__linea{animation-duration:.01s; animation-delay:0s}}
.salpicadura{position:absolute; border-radius:50%; background:var(--tinta)}
.scroll-hint{position:absolute; left:clamp(1.25rem,6vw,6rem); bottom:2rem; font:500 11px var(--sans); letter-spacing:.4em; text-transform:uppercase; color:var(--gris); display:flex; gap:12px; align-items:center}
.scroll-hint i{width:1px; height:40px; background:var(--gris); animation:gotea 2s ease-in-out infinite; transform-origin:top}
@keyframes gotea{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1); opacity:0}}

/* ---------- Filosofía ---------- */
.filosofia{display:grid; grid-template-columns:1fr 1.3fr; gap:6vw; align-items:start; margin-top:3rem}
.filosofia__cita{font:400 clamp(1.6rem,3.2vw,2.6rem)/1.45 var(--serif); position:sticky; top:20vh}
.filosofia__cita::first-letter{font-size:3.4em; float:left; line-height:.8; margin:.08em .12em 0 0; color:var(--bermellon); font-weight:800}
.valor{display:grid; grid-template-columns:70px 1fr; gap:20px; padding:2.2rem 0; border-top:1px solid rgba(22,19,15,.15)}
.valor b{font:800 2.4rem/1 var(--serif); color:var(--bermellon)}
.valor h3{font:600 1.35rem var(--serif); margin-bottom:.4rem}
.valor p{color:var(--tinta-2)}

.trazo{display:block; width:100%; height:60px; overflow:visible}
.trazo path{fill:none; stroke:var(--tinta); stroke-width:6; stroke-linecap:round; stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 2s var(--ease)}
.trazo.visible path{stroke-dashoffset:0}

/* ---------- Perros ---------- */
.cab-seccion{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap}
.filtros{display:flex; gap:2.2rem; flex-wrap:wrap}
.filtros button{background:none; border:0; cursor:pointer; font:600 1.3rem var(--serif); color:var(--gris); padding:0 0 8px; position:relative}
.filtros button::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--bermellon); border-radius:4px; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); filter:url(#rugoso)}
.filtros button[aria-selected="true"]{color:var(--tinta)}
.filtros button[aria-selected="true"]::after{transform:none}
.filtros button[hidden]{display:none}
.perros__lista{display:grid; grid-template-columns:repeat(3,1fr); gap:3.5vw; margin-top:4rem}
.perro.entra{animation:entra .9s var(--ease) both}
@keyframes entra{from{opacity:0; transform:translateY(30px)}}
.estampa{position:relative; aspect-ratio:4/5}
.estampa svg{width:100%; height:100%; display:block}
.estampa .ejemplo{position:absolute; top:28px; right:28px; background:var(--papel)}
.perro__nombre{font:600 1.9rem/1.2 var(--serif); margin-top:1.3rem; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap}
.perro__nombre span{color:var(--bermellon); font-size:1.2rem}
.perro__datos{font-size:.92rem; color:var(--tinta-2); margin-top:.3rem}
.perro__desc{font:400 1rem/1.7 var(--serif); color:var(--tinta-2); margin-top:.6rem}
.etiquetas{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
.etiquetas span{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--tinta); padding:.2rem .6rem; border-radius:999px}

/* ---------- Camadas (fondo tinta) ---------- */
.oscuro{background:var(--tinta); color:var(--papel)}
.oscuro .num{color:var(--bermellon-2)}
.oscuro .titulo em{color:var(--bermellon-2)}
.oscuro .entradilla{color:#b9b0a2}
.camada{display:grid; grid-template-columns:1.1fr 1fr; gap:6vw; margin-top:5rem; align-items:center}
.camada + .camada{margin-top:7rem}
.camada:nth-child(even) .camada__foto{order:2}
.camada__foto{position:relative}
.camada__foto img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter 1.2s var(--ease)}
.camada__foto:hover img{filter:none}
.camada__foto .dibujo{object-fit:contain; padding:12%; filter:invert(1); opacity:.5; background:#1f1b16}
.camada__foto .sello{position:absolute; right:-24px; bottom:-24px; transform:rotate(8deg)}
.camada__info h3{font:600 clamp(2rem,4vw,3.4rem)/1.1 var(--serif)}
.camada__meta{color:#b9b0a2; margin-top:1rem; display:flex; flex-direction:column}
.camada__nota{font:400 1.1rem/1.7 var(--serif); margin-top:1.2rem}
.cachorros{margin-top:2rem}
.cachorro{display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; padding:1.1rem 0; border-top:1px solid rgba(243,238,227,.15)}
.cachorro b{font:600 1.35rem var(--serif)}
.cachorro small{display:block; color:#b9b0a2}
.estado{font:700 11px var(--sans); letter-spacing:.25em; text-transform:uppercase; padding:.55rem .9rem; border:2px solid currentColor; transform:rotate(-4deg); filter:url(#rugoso); white-space:nowrap}
.estado--disponible{color:var(--verde)}
.estado--reservado, .estado--reservada{color:var(--bermellon-2)}
.subtitulo{font:600 clamp(1.8rem,3.4vw,2.8rem)/1.1 var(--serif); margin-top:8rem}
.futura{margin-top:3rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:3vw; text-align:center; padding:3rem 0; border-top:1px solid rgba(243,238,227,.15)}
.futura__padre{font:600 clamp(1.5rem,3vw,2.5rem) var(--serif)}
.futura__padre small{display:block; font:500 11px var(--sans); letter-spacing:.35em; text-transform:uppercase; color:#b9b0a2; margin-bottom:.6rem}
.futura__x{font:400 clamp(4rem,10vw,8rem)/1 var(--serif); color:var(--bermellon-2)}
.futura__pie{grid-column:1/-1; display:grid; gap:1.2rem; justify-items:center}
.futura__fecha{color:#b9b0a2; font:400 1.15rem var(--serif)}
.futura .enlace{color:var(--papel)}

/* ---------- Nacidos en casa ---------- */
.nacidos{display:flex; gap:2.5rem; overflow-x:auto; padding:3.5rem .5rem 2rem; margin-top:1rem; scroll-snap-type:x mandatory; scrollbar-width:thin}
.nacido{flex:0 0 clamp(200px,22vw,280px); scroll-snap-align:start; transform:rotate(var(--r,0deg)); transition:transform .6s var(--ease)}
.nacido:nth-child(odd){--r:-2deg}.nacido:nth-child(even){--r:2deg; margin-top:2rem}
.nacido:hover{transform:rotate(0) translateY(-6px)}
.nacido__foto{background:#fffdf7; padding:12px 12px 14px; box-shadow:0 12px 30px rgba(22,19,15,.12)}
.nacido__foto img{width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(.2)}
.nacido__foto .dibujo{object-fit:contain; padding:14%; mix-blend-mode:multiply; opacity:.6}
.nacido b{display:block; font:600 1.3rem var(--serif); margin-top:1rem}
.nacido small{color:var(--gris)}

/* ---------- Salud ---------- */
.salud{display:grid; grid-template-columns:repeat(4,1fr); gap:2.5vw; margin-top:4.5rem}
.prueba{position:relative; padding-top:6.5rem}
.prueba svg{position:absolute; top:0; left:0; width:80px; height:80px}
.prueba circle{fill:none; stroke:var(--tinta); stroke-width:5; stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1.6s var(--ease); filter:url(#rugoso)}
.salud.visible .prueba circle{stroke-dashoffset:30}
.prueba svg text{font:800 26px var(--serif); fill:var(--bermellon)}
.prueba h3{font:600 1.3rem var(--serif); margin-bottom:.6rem}
.prueba p{color:var(--tinta-2); font-size:.95rem}
.salud__nota{margin-top:4rem; font:400 1.2rem var(--serif); display:flex; gap:1.2rem; align-items:center}
.salud__nota::before{content:"印"; display:grid; place-items:center; width:44px; height:44px; background:var(--bermellon); color:#fff6ec; font-size:1.2rem; border-radius:4px; transform:rotate(-6deg); flex:none}

/* ---------- Vida (actividades) ---------- */
.vida{margin-top:4rem}
.actividad{display:grid; grid-template-columns:auto 1fr 1fr; gap:4vw; align-items:center; padding:3rem 0; border-top:1px solid rgba(22,19,15,.15)}
.actividad__num{font:800 clamp(3rem,7vw,6rem)/1 var(--serif); color:transparent; -webkit-text-stroke:1.5px var(--bermellon); min-width:1.6em}
.actividad h3{font:600 clamp(1.6rem,3vw,2.4rem)/1.15 var(--serif)}
.actividad p{color:var(--tinta-2); margin-top:.6rem}
.actividad__foto{aspect-ratio:16/10; overflow:hidden}
.actividad__foto img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter 1s var(--ease), transform 1.4s var(--ease)}
.actividad:hover .actividad__foto img{filter:none; transform:scale(1.04)}
.actividad__foto .dibujo{object-fit:contain; mix-blend-mode:multiply; opacity:.35; padding:6%}
.actividad:nth-child(even) .actividad__foto{order:-1}
.actividad:nth-child(even){grid-template-columns:1fr auto 1fr}

/* ---------- Galería ---------- */
.galeria{display:grid; grid-template-columns:repeat(12,1fr); gap:2vw; margin-top:4rem; align-items:start}
.lamina{position:relative; overflow:hidden; cursor:zoom-in; border:0; padding:0; background:none; display:block; width:100%}
.lamina img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) sepia(.15)}
.lamina .color{position:absolute; inset:0; clip-path:circle(0 at var(--x,50%) var(--y,50%)); transition:clip-path .9s var(--ease)}
.lamina .color img{filter:none}
.lamina:hover .color, .lamina:focus-visible .color{clip-path:circle(75% at var(--x,50%) var(--y,50%))}
.galeria figure{margin:0}
.galeria figcaption{font:500 11px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gris); margin-top:.8rem}

.visor{position:fixed; inset:0; z-index:150; background:rgba(22,19,15,.94); display:grid; place-items:center; padding:4rem 1.25rem 2rem}
.visor[hidden]{display:none}
.visor img{max-height:80vh; width:auto; max-width:100%; box-shadow:0 0 0 12px var(--papel)}
.visor p{color:#b9b0a2; text-align:center; margin-top:1.4rem; font:400 1.05rem var(--serif)}
.visor__cerrar{position:absolute; top:18px; right:24px; background:none; border:0; color:var(--papel); font:400 2.6rem/1 var(--serif); cursor:pointer}

/* ---------- Familias (opiniones) ---------- */
.voz{display:grid; grid-template-columns:auto 1fr; gap:6vw; align-items:center}
.voz__vertical{writing-mode:vertical-rl; font:600 clamp(2rem,4vw,3.4rem)/1.4 var(--serif); color:var(--bermellon); height:60vh}
.citas{position:relative; min-height:16rem}
.cita{margin:0; transition:opacity 1s var(--ease), transform 1s var(--ease)}
.cita[hidden]{display:block; position:absolute; inset:0; opacity:0; transform:translateY(20px); pointer-events:none}
.cita blockquote{margin:0; font:400 clamp(1.5rem,3vw,2.5rem)/1.5 var(--serif)}
.cita figcaption{margin-top:2rem; font:500 12px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gris)}
.puntos{display:flex; gap:.6rem; margin-top:2.5rem}
.puntos button{width:34px; height:4px; border:0; padding:0; background:rgba(22,19,15,.2); cursor:pointer}
.puntos button[aria-current="true"]{background:var(--bermellon)}

/* ---------- Cómo adquirir ---------- */
.pasos{list-style:none; margin:4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:3vw; counter-reset:p}
.pasos li{counter-increment:p; position:relative; padding-top:5.5rem}
.pasos li::before{content:counter(p); position:absolute; top:0; left:0; font:800 4.4rem/1 var(--serif); color:var(--tinta); opacity:.12}
.pasos li::after{content:""; position:absolute; top:2.4rem; left:3.2rem; right:-1.5vw; height:2px; background:var(--tinta); filter:url(#rugoso); opacity:.4}
.pasos li:last-child::after{display:none}
.pasos h3{font:600 1.35rem var(--serif); margin-bottom:.5rem}
.pasos p{color:var(--tinta-2); font-size:.95rem}
.preguntas{margin-top:6rem; max-width:860px}
.preguntas details{border-top:1px solid rgba(22,19,15,.15)}
.preguntas details:last-child{border-bottom:1px solid rgba(22,19,15,.15)}
.preguntas summary{list-style:none; cursor:pointer; padding:1.4rem 3rem 1.4rem 0; position:relative; font:600 1.2rem var(--serif)}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); font:400 1.8rem var(--serif); color:var(--bermellon); transition:transform .4s var(--ease)}
.preguntas details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.preguntas details p{color:var(--tinta-2); padding:0 3rem 1.6rem 0}

/* ---------- Contacto ---------- */
.carta{display:grid; grid-template-columns:1fr 1.2fr; gap:6vw; align-items:start}
.carta > *{min-width:0}
.carta select{width:100%; min-width:0}
.datos{list-style:none; padding:0; margin:2.5rem 0 0; display:grid; gap:.9rem}
.datos li{display:flex; gap:1rem; align-items:baseline}
.datos small{font:500 11px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gris); width:90px; flex:none}
.datos a{text-decoration:none; font:400 1.15rem var(--serif); border-bottom:1px solid rgba(22,19,15,.25)}
.datos a:hover{border-color:var(--bermellon)}
.carta form{display:grid; gap:2rem; padding-top:.5rem}
.carta label{display:grid; font:500 11px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gris)}
.carta input,.carta textarea,.carta select{font:400 1.2rem var(--serif); background:none; border:0; border-bottom:1px solid var(--tinta); padding:.6rem 0; color:var(--tinta); outline:none; resize:none; border-radius:0}
.carta input:focus,.carta textarea:focus,.carta select:focus{border-color:var(--bermellon)}
.carta .invalido{border-color:var(--bermellon)}
.casilla{display:flex!important; gap:.8rem; align-items:flex-start; text-transform:none!important; letter-spacing:0!important; font:400 .95rem var(--sans)!important; color:var(--tinta-2)!important}
.casilla input{accent-color:var(--bermellon); margin-top:.35rem}
.carta__pie{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap}
.carta .sello{--t:120px; font-size:16px}
.estado-form{font:400 1rem var(--serif); min-height:1.5em}
.estado-form.ok{color:#3c7a4a}
.estado-form.error{color:var(--bermellon)}

/* WhatsApp: un pequeño sello redondo */
.wa{position:fixed; right:22px; bottom:22px; z-index:58; width:60px; height:60px; border-radius:50%; background:var(--bermellon); color:#fff6ec; display:grid; place-items:center; box-shadow:0 8px 24px rgba(22,19,15,.25); transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08) rotate(-6deg)}
.wa.apartado{transform:scale(0); pointer-events:none}
.wa svg{width:28px; height:28px}

footer{margin-left:var(--rail); padding:3rem clamp(1.25rem,6vw,6rem); display:flex; justify-content:space-between; gap:1.5rem 3rem; flex-wrap:wrap; align-items:center; font-size:.85rem; color:var(--tinta-2); border-top:1px solid rgba(22,19,15,.15)}
footer nav{display:flex; gap:1.6rem}
footer a{text-decoration:none}
footer a:hover{color:var(--bermellon)}

/* ---------- Páginas legales ---------- */
.legal{max-width:820px; margin:0 auto; padding:clamp(4rem,8vw,7rem) clamp(1.25rem,6vw,3rem)}
.legal h1{font:600 clamp(2.4rem,5vw,3.6rem)/1.1 var(--serif); margin:1.5rem 0 2rem}
.legal h2{font:600 1.5rem var(--serif); margin:2.6rem 0 .8rem}
.legal p, .legal li{color:var(--tinta-2); margin-bottom:.8rem}
.legal .volver{font:600 12px var(--sans); letter-spacing:.3em; text-transform:uppercase; text-decoration:none; color:var(--bermellon)}

/* ---------- Móvil y tableta ---------- */
@media (max-width:1100px){
  .perros__lista{grid-template-columns:repeat(2,1fr)}
  .salud, .pasos{grid-template-columns:repeat(2,1fr); row-gap:3rem}
  .pasos li::after{display:none}
}
@media (max-width:900px){
  :root{--rail:0px}
  .rail{display:none}
  .controles{right:18px; top:16px; background:rgba(243,238,227,.85); backdrop-filter:blur(8px); padding:6px 12px; border-radius:999px}
  .menu-abierto .controles{background:transparent}
  .menu{grid-template-columns:1fr; padding:0 1.5rem}
  .menu__husky{display:none}
  .portada{grid-template-columns:1fr; padding-top:5rem}
  .portada__arte{height:56vh; order:-1; margin:0 -1.25rem}
  .portada__marca .m3{margin-left:4.5rem}
  .filosofia, .camada, .carta, .voz{grid-template-columns:1fr}
  .camada:nth-child(even) .camada__foto{order:0}
  .camada__foto .sello{right:10px; bottom:-20px}
  .filosofia__cita{position:static}
  .perros__lista{grid-template-columns:1fr; gap:4rem}
  .perro:nth-child(n){margin-top:0}
  .galeria{grid-template-columns:1fr; gap:3rem}
  .voz__vertical{writing-mode:horizontal-tb; height:auto}
  .futura{grid-template-columns:1fr}
  .actividad, .actividad:nth-child(even){grid-template-columns:1fr; gap:1.2rem}
  .actividad:nth-child(even) .actividad__foto{order:0}
  .scroll-hint{display:none}
  .carta .sello{--t:104px; margin-right:14px}
  .datos li{flex-wrap:wrap; gap:.2rem 1rem}
  .datos a{overflow-wrap:anywhere}
}
@media (max-width:560px){
  .salud, .pasos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important; animation-delay:0s!important; transition-duration:.01s!important; transition-delay:0s!important}
}
/* Fotografía editorial: el color acompaña a la tinta. */
[hidden]{display:none!important}
.portada{position:relative;padding-bottom:5rem}
.portada__foto{grid-column:1/-1;margin:3rem 0 0;position:relative;overflow:hidden}
.portada__foto img{width:100%;height:clamp(260px,48vw,640px);object-fit:cover;object-position:50% 44%;filter:saturate(.85) contrast(1.03)}
.portada__foto figcaption{position:absolute;bottom:1.5rem;left:1.5rem;color:white;font-size:11px;letter-spacing:.25em;text-shadow:0 1px 8px #000}
.perros__lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:4vw}
.retrato{overflow:hidden;background:var(--papel-2);aspect-ratio:4/5}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8);transition:transform 1s var(--ease),filter 1s}
.retrato:hover img{transform:scale(1.035);filter:saturate(1)}
.perro__nombre{overflow-wrap:anywhere}
.relato{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;margin-bottom:6rem}
.relato:last-child{margin-bottom:0}
.relato:nth-child(even) img{order:-1}
.relato h2{font:400 clamp(2rem,4vw,4rem)/1.15 var(--serif);margin:1rem 0 2rem}
.relato img{width:100%;height:clamp(300px,40vw,580px);object-fit:cover}
/* Pase de fotos: fundido lento con un leve acercamiento, y puntos de tinta para elegir */
.pase{position:relative;height:clamp(300px,40vw,580px);overflow:hidden;background:var(--papel-2)}
.relato:nth-child(even) .pase{order:-1}
.pase img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 6s linear}
.pase img.activa{opacity:1;transform:scale(1)}
.pase__puntos{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:4px}
.pase__puntos button{width:26px;height:26px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.pase__puntos button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(243,238,227,.7);box-shadow:0 0 4px rgba(22,19,15,.4);transition:transform .4s,background .4s}
.pase__puntos button[aria-current]::before{background:var(--bermellon);transform:scale(1.35)}
.pase__puntos button:focus-visible{outline:1px solid var(--papel)}
@media(prefers-reduced-motion:reduce){.pase img{transition:none}}
/* Pase con la foto entera, sin recortar (camadas): el perro se ve completo sobre un fondo neutro */
.pase--entera{height:clamp(360px,42vw,560px);background:rgba(243,238,227,.05)}
.camadas-resumen .pase--entera img{height:100%;object-fit:contain}
@media(max-width:600px){.pase__puntos{gap:0;flex-wrap:wrap;padding:0 8px}.pase__puntos button{width:22px}}
.lamina img{filter:saturate(.72) contrast(1.03)}
.lamina .color img{filter:saturate(1)}
.actividad__foto img{object-fit:cover}
@media(max-width:700px){.relato,.perros__lista{grid-template-columns:1fr}.relato:nth-child(even) img,.relato:nth-child(even) .pase{order:0}.portada__foto{margin-top:1rem}.relato{gap:2rem}.perro__nombre{font-size:1.6rem}.menu ol{gap:.4rem}.menu a{font-size:clamp(1rem,4vh,2rem)}}
@media(prefers-reduced-motion:reduce){.retrato img{transition:none}}
.menu{overflow-y:auto;padding-top:5rem;padding-bottom:3rem}
.menu a{font-size:clamp(1.3rem,4vh,3rem)}
.saltar{position:fixed;left:1rem;top:1rem;z-index:250;padding:.75rem 1rem;background:var(--papel);transform:translateY(-200%)}
.saltar:focus{transform:none}
.portada{gap:clamp(2rem,4vw,5rem);min-height:min(900px,100svh)}
.portada__foto{grid-column:2;margin:0;align-self:center;transform:rotate(2deg);border:10px solid var(--papel-2);box-shadow:0 16px 50px #16130f14}
.portada__foto img{height:clamp(400px,64vh,720px);object-position:56% center}
.portada__foto figcaption{background:#16130f99;padding:.5rem .75rem;left:0;bottom:1rem;font-size:10px;letter-spacing:.2em}
.perro:only-child{max-width:620px}
.perros__lista:has(.perro:only-child){grid-template-columns:minmax(0,620px)}
/* Con tres o más perros, tres columnas en pantallas anchas (todas las fichas a la misma altura) */
@media(min-width:900px){.perros__lista:has(> .perro:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw}}
.camadas-resumen{margin-top:2.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.camadas-resumen img{width:100%;height:330px;object-fit:cover}
.contacto-directo{margin-top:2rem;max-width:42ch}
.archivo{font-size:.85rem;opacity:.8;margin:1rem 0 1.5rem}
.contacto-directo a{display:inline-block;padding:.8rem 1.3rem;border:1px solid var(--bermellon);text-decoration:none;margin-top:1rem;transition:background .3s,color .3s}
.contacto-directo a:hover{background:var(--bermellon);color:var(--papel)}
.carta:has(form[hidden]){grid-template-columns:1fr}
@media(max-width:900px){.portada{min-height:auto;gap:2.5rem}.portada__foto{grid-column:1;margin:0;transform:rotate(1deg)}.portada__foto img{height:clamp(300px,65vw,530px)}.portada__texto{padding-top:1rem}.scroll-hint{display:none}}
@media(max-width:600px){.camadas-resumen{grid-template-columns:1fr;gap:1.5rem}.portada__foto{border-width:6px}.portada__foto img{height:350px}.portada__marca .m3{max-width:calc(100% - 4.5rem)}}
@media(prefers-reduced-motion:reduce){.sube{opacity:1;transform:none}.pincel{clip-path:none!important}.gota{display:none}}

/* Galería: cada foto con su proporción original, sin recortar (pedido de los dueños, 25/10/2026) */
.galeria .lamina > img{height:auto}
.galeria .lamina .color img{height:100%; object-fit:contain}

/* Resúmenes de los documentos («Para saber más») */
.lecturas{margin-top:5rem}
.lecturas__titulo{font:500 12px var(--sans); letter-spacing:.4em; text-transform:uppercase; color:var(--bermellon); margin:0 0 1.2rem}
.lectura{padding:0 3rem 1.8rem 0}
.lectura__intro{font:400 1.1rem/1.6 var(--serif); color:var(--tinta-2); margin:0 0 1rem; padding:0!important}
.lectura ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.lectura li{position:relative; padding-left:1.6rem; color:var(--tinta-2); line-height:1.6}
.lectura li::before{content:""; position:absolute; left:0; top:.8em; width:.8rem; height:1px; background:var(--bermellon)}
.oscuro .preguntas details{border-color:rgba(243,238,227,.15)}
.oscuro .lectura__intro,.oscuro .lectura li{color:#cfc6b8}
.oscuro .lecturas__titulo{color:var(--bermellon-2)}
@media(max-width:600px){.lectura{padding-right:0}}

/* Menú: letra manuscrita fina (Italianno), a juego con la firma «Soul Siberian Kennel», pero legible */
.menu a{font:400 clamp(2.4rem,5vw,4.4rem)/1.05 "Italianno",var(--serif); text-transform:none; letter-spacing:.01em}
@media(max-width:700px){.menu a{font-size:clamp(2rem,5.6vh,2.8rem)}}

/* Sello «Ver camadas» de la portada en azul pastel oscuro (los demás sellos siguen en bermellón) */
.portada__acciones .sello{--sello:#34475c; background:var(--sello); box-shadow:inset 0 0 0 3px var(--sello), inset 0 0 0 5px #fff6ec}

/* Fondo general: degradado mate de blanco roto a verde agua (antes azul tiza: medio #e6ecec, abajo #cddbe2) (pedido de los dueños, 25/10/2026).
   La textura de papel de body::before le da el acabado mate. */
:root{--fondo-arriba:#e9e2d2; --fondo-medio:#e9e2d2; --fondo-abajo:#e9e2d2}   /* blanco roto «libro antiguo» (se probaron azul tiza, verde agua y camel) */
body{background:linear-gradient(180deg, var(--fondo-arriba) 0%, var(--fondo-medio) 45%, var(--fondo-abajo) 100%)}
.seccion--velo{background:var(--gris-claro)}
.retrato, .pase:not(.pase--entera){background:rgba(233,224,204,.45)}
/* Menos brillo en general (25/10/2026): blancos de libro antiguo y fotos algo más apagadas */
:root{--papel:#ece4d3; --papel-2:#e2d8c3}
.retrato img, .pase img, .vida img, .camada__foto img{filter:brightness(.94) saturate(.9) contrast(1.02)}
.lamina img{filter:brightness(.94) saturate(.72) contrast(1.03)}
.lamina .color img{filter:brightness(.96)}


/* Galería por perros (25/10/2026): apartados Machos y Hembras, y un carrusel horizontal por perro.
   Las fotos van enteras, todas a la misma altura dentro de la tira. */
#lista-galeria.galeria{display:block}
.galeria::after{content:none}
.galeria__grupo{margin-top:4.5rem}
.galeria__grupo + .galeria__grupo{border-top:1px solid rgba(22,19,15,.15); padding-top:3.5rem}
.tira{margin-top:2.2rem}
.tira__cab{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.2rem}
.tira__cab h4{margin:0; font:400 clamp(1.8rem,3vw,2.6rem)/1 var(--serif)}
.tira__cab h4 span{font-size:.6em; color:var(--bermellon)}
.tira__cab small{font:500 11px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gris)}
.tira__flechas{margin-left:auto; display:flex; gap:.5rem}
.tira__flecha{width:44px; height:44px; border:1px solid rgba(22,19,15,.35); border-radius:50%; background:none; font:400 18px var(--serif); color:var(--tinta); cursor:pointer; transition:background .3s, color .3s}
.tira__flecha:hover, .tira__flecha:focus-visible{background:var(--tinta); color:var(--papel)}
.tira__pista{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:1rem; overscroll-behavior-x:contain}
.galeria .tira__foto{flex:none; margin:0; min-width:auto; scroll-snap-align:start; width:calc(var(--r) * var(--alto-tira))}
.tira__foto .lamina{height:var(--alto-tira)}
.tira__foto .lamina > img, .tira__foto .lamina .color img{width:100%; height:100%; object-fit:contain}
.tira__foto figcaption{margin-top:.7rem}
#lista-galeria{--alto-tira:clamp(220px,26vw,340px)}
@media(max-width:600px){#lista-galeria{--alto-tira:230px}.tira__flechas{display:none}.tira__cab{flex-wrap:wrap}}

/* Esquinas redondeadas (opción 2 de prueba-bordes, 25/10/2026). Antes se probaron el «retrato de tinta» (opción 4, máscara SVG)
   y el marco fino (opción 6: border-radius 6px + outline 1px tinta con outline-offset 10px). */
.retrato{border-radius:22px}

/* Paleta final (25/10/2026): blanco roto, gris claro y negro, alternando por secciones.
   Blanco: portada, filosofía, perros, su vida, proceso. Gris claro: historia, salud, galería, contacto. Negro: camadas, menú y pie. */
:root{--gris-claro:transparent}   /* las secciones alternas usan ya el mismo blanco roto que el resto (antes gris #ecebe8; se probó mármol) */
footer{background:var(--tinta); color:#cfc7b8; border-top:0}
footer a{color:var(--papel)}
footer a:hover{color:var(--bermellon-2)}

/* «Una pasión que se vive en familia» sobre fondo negro, de borde a borde (25/10/2026). Se activa con "oscuro": true en datos.editorial */
.relato--oscuro{--px:clamp(1.25rem,6vw,6rem); --py:clamp(5rem,11vw,9rem); background:var(--tinta); color:var(--papel);
  margin:calc(var(--py) * -1) calc(var(--px) * -1) 6rem; padding:var(--py) var(--px)}
.relato--oscuro h2{color:var(--papel)}
.relato--oscuro p:not(.num){color:#cfc6b8}

/* Galería sobre fondo negro (25/10/2026) */
.oscuro .galeria__grupo + .galeria__grupo{border-top-color:rgba(243,238,227,.15)}
.oscuro .tira__cab h4{color:var(--papel)}
.oscuro .tira__cab h4 span{color:var(--bermellon-2)}
.oscuro .tira__cab small, .oscuro .galeria figcaption{color:#a59d90}
.oscuro .tira__flecha{border-color:rgba(243,238,227,.35); color:var(--papel)}
.oscuro .tira__flecha:hover, .oscuro .tira__flecha:focus-visible{background:var(--papel); color:var(--tinta)}
.oscuro .tira__pista{scrollbar-color:rgba(243,238,227,.3) transparent}

/* Husky de la portada algo más hacia el centro de la página (25/10/2026); en móvil sigue centrado */
@media(min-width:901px){.espejo{--mover:clamp(0px, (100vw - 1100px) * .3, 110px); left:calc(var(--mover) * -1); right:var(--mover)}}

/* Manchas de tinta de la portada: van dentro de .espejo y se colocan respecto al centro del dibujo
   (--x en centésimas de la altura del bloque), así quedan siempre fuera del husky aunque cambie de tamaño o se mueva */
.espejo{container-type:size}
.espejo .salpicadura{left:calc(50% + var(--x) * 1cqh)}

/* Rúbrica de la portada (25/10/2026): une la firma con el dibujo. Se dibuja como una pincelada al cargar */
.enlace-portada{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:1}
.enlace__trazo{fill:var(--tinta); opacity:.62}
.enlace__guia{fill:none; stroke:#fff; stroke-width:14; stroke-linecap:round;
  stroke-dasharray:var(--largo,3000); stroke-dashoffset:var(--largo,3000); animation:enlace 2.6s cubic-bezier(.6,.05,.25,1) 2.5s forwards}
.enlace__hilo{fill:none; stroke:var(--tinta); stroke-opacity:.28; stroke-width:.6; stroke-linecap:round;
  stroke-dasharray:var(--largo-hilo,1000); stroke-dashoffset:var(--largo-hilo,1000); animation:enlace 1.8s var(--ease) 3.6s forwards}
.gota-tinta{fill:var(--tinta); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2);
  animation:gota-cae .5s var(--ease) calc(4.1s + var(--d) * .14s) forwards}
.enlace__punto{fill:var(--tinta); opacity:0; animation:aparece .6s ease 4.9s forwards}
@keyframes enlace{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:.7}}
@keyframes gota-cae{to{opacity:.55; transform:none}}
@media(max-width:900px){.enlace-portada{display:none}}
@media(prefers-reduced-motion:reduce){.enlace__guia,.enlace__hilo,.gota-tinta,.enlace__punto{animation-duration:.01s; animation-delay:0s}}

/* Redes con icono (26/10/2026): en Contacto y en el pie */
.con-icono{display:inline-flex; align-items:center; gap:.55rem}
.con-icono svg, .redes svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.con-icono svg circle[r=".6"], .redes svg circle[r=".6"]{fill:currentColor}
.redes{display:flex; gap:1.1rem}
.redes a{color:var(--papel); display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(243,238,227,.3); border-radius:50%; transition:background .3s, color .3s}
.redes a:hover, .redes a:focus-visible{background:var(--papel); color:var(--tinta)}

/* Camadas anteriores (26/10/2026): carrusel de la camada y una ficha con carrusel por cachorro; fotos enteras */
#camadas-anteriores{margin-top:5rem}
.anterior{margin-top:2.5rem}
.anterior__cab h4{margin:0; font:400 clamp(2rem,4vw,3.2rem)/1.1 var(--serif); color:var(--papel)}
.anterior__cab h4 span{font:500 13px var(--sans); letter-spacing:.35em; color:var(--bermellon-2); vertical-align:middle; margin-left:.6rem}
.anterior__padres{margin:.8rem 0 0; font:500 12px var(--sans); letter-spacing:.25em; text-transform:uppercase; color:#cfc6b8}
.anterior__padres span{color:var(--papel)}
.anterior__texto{color:#b9b0a2; max-width:60ch; margin:1rem 0 0}
.anterior__camada{margin-top:2rem}
.anterior__camada .pase--entera{height:clamp(320px,46vw,620px)}
.anterior__cachorros{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem 1.4rem; margin-top:2.5rem}
.anterior__cachorro{margin:0}
.anterior__cachorro .pase--entera{height:clamp(240px,24vw,340px)}
.anterior__cachorro figcaption{margin-top:.9rem; font:500 11px/1.6 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#cfc6b8}
.anterior .pase--entera img{object-fit:contain; height:100%}
@media(max-width:1000px){.anterior__cachorros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.anterior__cachorros{grid-template-columns:1fr}.anterior__cachorro .pase--entera{height:300px}}

/* En fondo negro, el punto activo del carrusel en azul claro para que se vea */
.oscuro .pase__puntos button[aria-current]::before{background:var(--bermellon-2)}

/* Nombre del perro escrito dentro de su foto, con la letra manuscrita del menú (26/10/2026) */
.retrato{position:relative; container-type:inline-size}   /* el nombre se escala con el ancho de la foto (cqw) */
.retrato__firma{position:absolute; left:9%; top:5%; transform:rotate(-14deg); transform-origin:left center; z-index:2; pointer-events:none; white-space:nowrap;
  font:400 clamp(2.8rem,17cqw,7rem)/1 "Italianno",var(--serif); color:#f6f1e6; letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(22,19,15,.55), 0 0 18px rgba(22,19,15,.45)}

/* Fuente citada al pie de cada resumen contrastado (26/10/2026) */
.lectura__fuente{margin:1.1rem 0 0; font:500 11px/1.6 var(--sans); letter-spacing:.12em; color:var(--gris); padding:0!important}
.oscuro .lectura__fuente{color:#a59d90}