/* ═══════════════════════════════════════════════════════════════════════════
   Cat Flap · mobile accessories · Planetocio, Collado Villalba
   ───────────────────────────────────────────────────────────────────────────
   POR QUÉ ESTA WEB PARECE UN ARTÍCULO Y NO UNA TIENDA DE MÓVILES:
   su mejor material no son fotos, es TEXTO. Han contestado 97 de sus 165
   reseñas de Google, y ahí dentro hay explicaciones de 250 palabras sobre por
   qué el hidrogel se marca en vez de romperse y por qué ningún protector hace
   la pantalla irrompible. Eso está mejor escrito que cualquier ficha de
   producto, y hoy vive enterrado bajo un comentario de una estrella.
   Así que la web es eso: su explicación, rescatada y puesta delante. Y una web
   que es una explicación se compone como se compone un texto que se quiere
   leer, no como un escaparate.

   DE AHÍ EL SERIF: Instrument Serif en titulares y Piazzolla en el cuerpo.
   Es lo contrario de lo esperable en una tienda de fundas —lo esperable sería
   una sans tecnológica y un azul de electrónica— y por eso funciona: no se
   parece a ninguna tienda de móviles ni a ninguna de las 20 hermanas.

   EL COLOR sale de su rótulo real: madera clara y el marrón casi negro de su
   logotipo (el gato dentro de la gatera). Fondo papel cálido, madera para los
   acentos y un verde de WhatsApp SOLO en los botones que abren WhatsApp,
   porque ahí sí significa algo.

   EL OBJETO FIRMA es el comparador de protectores: se elige material y sale su
   explicación, copiada literal de lo que ellos escribieron a sus clientes.
   Llevaba además un móvil dibujado al que se le daba un golpe y se agrietaba;
   Rober lo quitó el 3-sep — «queda muy cutre», y tenía razón: las grietas eran
   líneas de degradado que no parecían grietas y el golpe se salía del marco.
   Lo que vale de esta pieza es el texto, no el dibujo.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Instrument Serif';src:url(fonts/instrumentserif.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Piazzolla;src:url(fonts/piazzolla.woff2)format('woff2');font-weight:300 700;font-display:swap}

:root{
  --papel:#faf7f2;      /* el papel cálido del texto */
  --papel-2:#fffdfa;
  --papel-3:#e8e0d4;    /* filetes */
  --madera:#c69a6d;     /* la madera clara de su rótulo y su mostrador */
  --madera-osc:#8a6844;
  --tinta:#241d16;      /* el marrón casi negro de su logotipo */
  --tinta-2:#6b5f52;
  --wa:#1f9d55;         /* verde: SOLO en lo que abre WhatsApp */
  --r:10px;
  --max:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 clamp(17px,1.08vw,18.5px)/1.72 Piazzolla,Georgia,serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--madera-osc);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);color:var(--papel);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.barra{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:.65rem clamp(1rem,3vw,2.4rem);background:rgba(250,247,242,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--papel-3);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.barra.oculta{transform:translateY(-104%)}
.marca{margin-right:auto;display:block}
.marca img{width:clamp(116px,12vw,164px);height:auto;mix-blend-mode:multiply}
.barra-nav{display:flex;gap:1.4rem;font-size:.94rem;color:var(--tinta-2)}
.barra-nav a{padding:.4rem 0;border-bottom:1px solid transparent}
.barra-nav a:hover{color:var(--tinta);border-bottom-color:var(--madera)}
.barra-cta{background:var(--wa);color:#fff;padding:.6rem 1.15rem;border-radius:999px;
  font-size:.93rem;white-space:nowrap;will-change:transform}
@media (max-width:900px){.barra-nav{display:none}}

/* ── portada ──────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(1.5rem,4vw,4rem);min-height:100svh;
  padding:clamp(6rem,11vh,8.5rem) clamp(1.1rem,4vw,3.4rem) clamp(3rem,7vh,5rem)}
.hero-foto img{width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:var(--r);
  box-shadow:0 40px 70px -34px rgba(36,29,22,.42)}
.hero-sup{font-size:max(12.5px,.8rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--madera-osc);margin-bottom:1rem}
.hero-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.8rem,7vw,6rem);line-height:1.08;letter-spacing:-.01em}
.hero-h1 em{font-style:italic;color:var(--madera-osc)}
.hero-p{max-width:46ch;margin-top:1.3rem;color:var(--tinta-2)}
.hero-p b{color:var(--tinta);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.hero-nota{margin-top:1.3rem;font-size:.9rem;color:var(--tinta-2)}
.hero-nota b{color:var(--tinta);font-weight:600}
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:6.5rem}
  .hero-foto{order:-1}
}

/* ── piezas comunes ──────────────────────────────────────────────────── */
.etiqueta{font-size:max(12.5px,.76rem);letter-spacing:.24em;text-transform:uppercase;
  color:var(--madera-osc);margin-bottom:.85rem}
.h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,5vw,4.2rem);line-height:1.08;letter-spacing:-.01em}
.parr{max-width:58ch;margin-top:1.1rem;color:var(--tinta-2)}
.parr b{color:var(--tinta);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.6rem;
  border-radius:999px;font-size:.98rem;transition:transform .2s,box-shadow .2s;will-change:transform}
.btn-ac{background:var(--wa);color:#fff;box-shadow:0 12px 28px -14px rgba(31,157,85,.8)}
.btn-ac:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(31,157,85,.95)}
.btn-linea{border:1.5px solid var(--papel-3);color:var(--tinta)}
.btn-linea:hover{border-color:var(--madera);color:var(--madera-osc)}
.btn-ancho{width:100%}
.sube{opacity:0;transform:translateY(22px);
  transition:opacity .78s cubic-bezier(.2,.7,.3,1),transform .78s cubic-bezier(.2,.7,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sube{opacity:1;transform:none;transition:none}}

/* ── LA PIEZA: el comparador de protectores ─────────────────────────── */
.prot{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);background:var(--papel-2);
  border-block:1px solid var(--papel-3)}
.prot-cab{max-width:44ch;margin-inline:auto;text-align:center}
.prot .parr{margin-inline:auto}
.comp{max-width:var(--max);margin:clamp(2rem,4vh,3rem) auto 0}
.comp-sel{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.6rem}
.pest{border:1.5px solid var(--papel-3);border-radius:999px;padding:.65rem 1.3rem;font-size:.98rem;
  transition:.2s;min-height:44px;background:var(--papel)}
.pest:hover{border-color:var(--madera)}
.pest.on{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.comp-caja{background:var(--papel); border:1px solid var(--papel-3); border-radius:var(--r);
  padding:clamp(1.4rem,3.4vw,2.6rem); max-width:74ch; margin-inline:auto}

.comp-h{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.05;margin-bottom:.7rem}
.comp-q{color:var(--tinta-2)}
.comp-l{display:grid;gap:.45rem;margin-top:1.1rem}
.comp-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:baseline;
  font-size:.98rem}
.comp-l li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--madera);
  transform:translateY(-2px)}
.comp-cita{margin-top:1.3rem;padding-left:1.1rem;border-left:3px solid var(--madera);
  font-style:italic;color:var(--tinta-2);font-size:.96rem}

/* la garantía */
.garantia{max-width:var(--max);margin:clamp(2rem,4vh,3rem) auto 0}
.gar-t{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3vw,2.2rem);
  margin-bottom:1.1rem}
.gar-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem)}
@media (max-width:760px){.gar-dos{grid-template-columns:minmax(0,1fr)}}
.gar-i{border:1px solid var(--papel-3);border-radius:var(--r);padding:clamp(1.1rem,2.5vw,1.6rem);
  background:var(--papel)}
.gar-si{border-left:4px solid var(--wa)}
.gar-no{border-left:4px solid var(--madera-osc)}
.gar-h{font-family:'Instrument Serif',Georgia,serif;font-size:1.45rem;margin-bottom:.5rem}
.gar-p{color:var(--tinta-2);font-size:.97rem}
.gar-p b{color:var(--tinta);font-weight:600}
.gar-n{margin-top:1.2rem;max-width:76ch;color:var(--tinta-2);font-size:.95rem}
.gar-n b{color:var(--tinta);font-weight:600}

/* ── qué hay ─────────────────────────────────────────────────────────── */
.tienda{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.tienda-cab{max-width:44ch}
/* nueve piezas: 3+3+3, nunca un renglón a medias */
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.3rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:980px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rejilla{grid-template-columns:minmax(0,1fr)}}
.cosa{background:var(--papel-2);border:1px solid var(--papel-3);border-radius:var(--r);
  padding:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.cosa-h{font-family:'Instrument Serif',Georgia,serif;font-size:1.35rem;line-height:1.1}
.cosa-p{font-size:.94rem;color:var(--tinta-2);flex:1}
.cosa-p b{color:var(--tinta);font-weight:600}
.cosa-pr{font-family:'Instrument Serif',Georgia,serif;font-size:1.6rem;color:var(--madera-osc)}
.cosa-e{font-size:max(12.5px,.8rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-2);opacity:.8}
.tienda-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.3rem);
  margin-top:clamp(1.6rem,3vh,2.2rem)}
@media (max-width:760px){.tienda-fotos{grid-template-columns:minmax(0,1fr)}}
.tienda-fotos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}

/* ── tu modelo ───────────────────────────────────────────────────────── */
.modelo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);
  background:var(--papel-2);border-block:1px solid var(--papel-3)}
@media (max-width:960px){.modelo{grid-template-columns:minmax(0,1fr)}}
.ficha{margin-top:1.7rem;background:var(--papel);border:1px solid var(--papel-3);
  border-radius:var(--r);padding:1.4rem;display:grid;gap:1rem;max-width:520px}
.ficha-t{font-size:max(12.5px,.78rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--madera-osc)}
.ficha-f{display:grid;gap:.4rem}
.ficha-f label{font-size:.85rem;color:var(--tinta-2)}
.ficha-f input,.ficha-f select{width:100%;min-width:0;background:var(--papel-2);
  border:1.5px solid var(--papel-3);border-radius:8px;padding:.7rem .9rem;font-size:.98rem;min-height:44px}
.ficha-f input:focus,.ficha-f select:focus{border-color:var(--madera);outline:none}
.ficha-n{font-size:.84rem;color:var(--tinta-2)}
.ficha-n a{color:var(--madera-osc);border-bottom:1px solid currentColor;
  display:inline-block;padding:.3rem .1rem;min-height:26px;line-height:1.5}
.modelo-foto img{border-radius:var(--r);aspect-ratio:16/9;object-fit:cover}
.modelo-q{margin-top:1.2rem;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.35}
.modelo-q span{display:block;font-family:Piazzolla,serif;font-style:normal;
  font-size:max(12.5px,.8rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--madera-osc);margin-top:.9rem}

/* ── dónde ───────────────────────────────────────────────────────────── */
.donde{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.donde-cab{max-width:46ch}
.donde-rej{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.7vw,1.3rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:1100px){.donde-rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.donde-rej{grid-template-columns:minmax(0,1fr)}}
.dato{background:var(--papel-2);border:1px solid var(--papel-3);border-radius:var(--r);
  padding:1.3rem;display:grid;gap:.6rem;align-content:start}
.dato-t{font-size:max(12.5px,.74rem);letter-spacing:.2em;text-transform:uppercase;color:var(--madera-osc)}
.dato-h{display:grid;grid-template-columns:auto auto;gap:.3rem .9rem;font-size:.94rem}
.dato-h dt{color:var(--tinta-2)}
.dato-h dd{text-align:right;font-variant-numeric:tabular-nums}
.dato-g{font-family:'Instrument Serif',Georgia,serif;font-size:1.75rem;color:var(--madera-osc);
  justify-self:start;min-height:36px;will-change:transform}
.dato-l{color:var(--tinta-2);font-size:.93rem;border-bottom:1px solid transparent;
  justify-self:start;padding:.25rem 0;min-height:30px}
.dato-l:hover{color:var(--madera-osc);border-bottom-color:var(--madera)}
.dato-d{font-size:.93rem;color:var(--tinta-2);line-height:1.6}
.dato-n{font-size:.86rem;color:var(--tinta-2);line-height:1.55}
.dato-n b{color:var(--tinta);font-weight:600}
.donde-foto{margin-top:clamp(1.6rem,3vh,2.2rem);border-radius:var(--r);overflow:hidden}
.donde-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── la gente ────────────────────────────────────────────────────────── */
.gente{padding:clamp(3rem,7vh,5rem) clamp(1.1rem,4vw,3.4rem);max-width:760px;margin-inline:auto;
  text-align:center;border-top:1px solid var(--papel-3)}
.gente-p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.3rem,3vw,2rem);
  line-height:1.32;margin-top:.5rem}
.gente-p b{font-style:italic;color:var(--madera-osc);font-weight:400}
.gente-n{margin-top:1.4rem;font-size:.94rem;color:var(--tinta-2)}

/* ── pie ─────────────────────────────────────────────────────────────── */
.pie{padding:clamp(2.5rem,6vh,4rem) clamp(1.1rem,4vw,3.4rem);background:var(--papel-2);
  border-top:1px solid var(--papel-3);display:grid;gap:1.3rem;max-width:var(--max);margin-inline:auto}
.pie-a{display:grid;gap:.9rem}
.pie-logo{width:150px;height:auto;mix-blend-mode:multiply}
.pie-d{font-size:.9rem;color:var(--tinta-2);line-height:1.75}
.pie-n{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.88rem;color:var(--tinta-2)}
.pie-n a{border-bottom:1px solid transparent;padding:.3rem 0;min-height:30px}
.pie-n a:hover{color:var(--madera-osc);border-bottom-color:var(--madera)}
.pie-c{font-size:max(12.5px,.8rem);color:var(--tinta-2);max-width:90ch;line-height:1.6;
  padding-top:1.1rem;border-top:1px solid var(--papel-3)}