/* =========================================================
   TRIUNŌ · Base: fuentes, tokens de marca y piezas comunes
   Dirección de arte: "Tres luces" (Noche Ámbar)
   ========================================================= */

@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-italica.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  /* Colores de marca (manual Triuno) */
  --carbon:#121214;   /* 60 % · fondo de todo */
  --grafito:#2B2B2F;  /* superficies y divisores sobre carbón */
  --piedra:#8A857B;   /* textos de apoyo sobre carbón (5,1:1) */
  --humo:#D8D2C6;     /* descripciones olfativas sobre carbón y grafito */
  --marfil:#F2ECE0;   /* 30 % · texto principal y secciones claras */
  --bronce:#B98A4B;   /* 10 % · acento, solo sobre oscuro (6,1:1) */
  --bronce-oscuro:#7A5A2E; /* acento sobre marfil (5,4:1) */
  --piedra-texto:#5C574E;  /* texto secundario sobre marfil (6,1:1) */

  /* Roles */
  --fondo:var(--carbon);
  --superficie:#18181B;      /* un paso sobre carbón, para tarjetas (derivado, Por validar) */
  --tinta:var(--marfil);
  --tinta-suave:var(--humo);
  --tinta-tenue:var(--piedra);
  --acento:var(--bronce);
  --linea:var(--grafito);
  --borde-control:var(--piedra);
  --cta:var(--bronce);        /* relleno del botón principal; letra carbón encima (6,1:1) */
  --cta-hover:#CDA068;        /* bronce aclarado: oscurecerlo bajaría el contraste con la letra */
  --sobre-cta:var(--carbon);
  --foco:var(--bronce);

  /* Letras */
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --t-display:clamp(2.6rem,1.6rem + 4.6vw,5.4rem);
  --t-h1:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --t-h2:clamp(1.6rem,1.25rem + 1.4vw,2.4rem);
  --t-h3:1.25rem;
  --t-desc:clamp(1.3rem,1.15rem + .6vw,1.6rem);
  --t-cuerpo:1rem;
  --t-chico:.875rem;
  --t-kicker:.75rem;

  /* Forma y espacio (base 4 px, marca angular) */
  --r0:0;--r1:2px;--r2:4px;
  --esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-6:24px;--esp-8:32px;--esp-12:48px;--esp-20:80px;--esp-30:120px;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --sombra-producto:0 24px 48px -16px rgba(0,0,0,.6);

  /* Movimiento: calmo, preciso, deliberado */
  --ease:cubic-bezier(.33,1,.68,1);     /* = power2.out */
  --ease-io:cubic-bezier(.76,0,.24,1);  /* = power3.inOut */
  --dur:1.2s;
  --dist:24px;
  --t-hover:.45s;

  /* Grano de película (como en las piezas de campaña) */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .85 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:var(--t-cuerpo);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--grano);opacity:.06;z-index:90;mix-blend-mode:overlay}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.envoltura{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* Voces */
.kicker{font-size:var(--t-kicker);line-height:1.35;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}
.desc{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-desc);line-height:1.3;color:var(--tinta-suave)}
.serif-acento{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--acento)}
.dato{font-variant-numeric:tabular-nums;font-weight:600}

/* Marcador de dato faltante */
.falta{background:#F5D300;color:#121214;padding:0 .3em;font-family:var(--sans);font-style:normal;font-weight:700;font-size:.85em;letter-spacing:0;border-radius:2px}

/* Botón principal: corte a 45° en la esquina superior derecha, como la barra central del isotipo */
.btn{--corte:12px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%);
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform .2s var(--ease)}
.btn--principal{background:var(--cta);color:var(--sobre-cta)}
.btn--principal:hover{background:var(--cta-hover)}
.btn:active{transform:scale(.97)}
.btn .btn__flecha{width:18px;height:1px;background:currentColor;position:relative;transition:width var(--t-hover) var(--ease)}
.btn .btn__flecha::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .btn__flecha{width:28px}
.btn--linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--borde-control);clip-path:none;border-radius:var(--r1)}
.btn--linea:hover{box-shadow:inset 0 0 0 1px var(--acento);color:var(--acento)}

/* Enlace con línea de 24 px antes, como en el manual */
.enlace{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acento);text-decoration:none}
.enlace::before{content:"";width:24px;height:1px;background:currentColor;transition:width var(--t-hover) var(--ease)}
.enlace:hover::before{width:40px}

/* Ventanas del isotipo: geometría exacta del archivo oficial (148 x 198).
   Barra exterior 24 de ancho y 137 de alto; central 24 x 198; corte a 45°.
   Son marfil, como el logo, y el perfume se ve a través con la opacidad baja. */
.barras{position:relative;aspect-ratio:148/198;height:100%}
.barra{position:absolute;bottom:0;width:16.2162%;overflow:hidden;margin:0}
.barra.b1{left:0;height:69.192%;clip-path:polygon(0 17.518%,100% 0,100% 100%,0 100%)}
.barra.b2{left:41.892%;height:100%;clip-path:polygon(0 12.121%,100% 0,100% 100%,0 100%)}
.barra.b3{left:83.784%;height:69.192%;clip-path:polygon(0 0,100% 17.518%,100% 100%,0 100%)}
.barra__in{position:absolute;inset:0;background:var(--marfil)}
.barra__foto{position:absolute;left:50%;bottom:0;width:var(--zoom,240%);transform:translateX(var(--x,-50%))}
.barra__foto img{width:100%;max-width:none;opacity:var(--velo,.62);-webkit-mask-image:linear-gradient(to top,#000 55%,transparent 98%);mask-image:linear-gradient(to top,#000 55%,transparent 98%)}

/* Tarjeta de perfume */
.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r2);overflow:hidden}
.tarjeta__foto{position:relative;aspect-ratio:4/5;background:radial-gradient(70% 60% at 40% 45%,#2a2420 0%,var(--carbon) 100%);overflow:hidden}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tarjeta:hover .tarjeta__foto img{transform:scale(1.04)}
.tarjeta__cuerpo{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.tarjeta .kicker{color:var(--tinta-suave)}
.tarjeta h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.01em}
.tarjeta .desc{font-size:1.2rem}
.tarjeta__pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--linea)}
.precio{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tinta)}
.precio small{font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--tinta-suave);margin-right:6px}

/* Sello del Chequeo */
.sello{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border:1px solid var(--acento);border-radius:var(--r1)}
.sello img{width:22px}
.sello b{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.sello span{font-size:.875rem;line-height:1.4;color:var(--tinta-suave)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}