/* Fuentes alojadas en el sitio (subconjunto latino de Google Fonts, 30 de octubre de 2026): sin conexión a fonts.googleapis.com ni salto de tipografía */
@font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:300 400; font-display:swap; src:url(/fuentes/playfair-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Playfair Display"; font-style:italic; font-weight:400; font-display:swap; src:url(/fuentes/playfair-italic-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:300 500; font-display:swap; src:url(/fuentes/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
:root{ --accent-fill:#0B6F9E }   /* azul del relleno de hover: el del logo no da contraste con texto blanco */
/* ============================================================
   ALTA EFICIENCIA — registro "Luxury / Editorial"
   Paleta tomada del logotipo: gris del nombre (#A0A0A0), azul de la
   flecha fría (#00A0E0) y rojo de la flecha caliente (#F02020).
   Papel frío, tinta gris-carbón, azul como acento principal y rojo
   solo en detalles (oferta, tachado de precio, punto de WhatsApp).
   Sin radios. Movimiento lento y cinematográfico. Un solo mundo
   visual (papel claro): todo color se pinta explícitamente.
   ============================================================ */
:root{
  --bg:#F5F7F9;            /* papel frío */
  --fg:#1F2328;            /* gris carbón con matiz azul */
  --muted-bg:#E3E7EC;      /* gris pálido */
  --muted-fg:#6B7077;      /* gris medio (texto secundario) */
  --brand-grey:#9EA2A6;    /* gris del logotipo (decorativo) */
  --accent:#0A9EDC;        /* azul del logotipo (titulares, foco) */
  --accent-deep:#0B7FB3;   /* azul profundo para texto pequeño */
  --accent-soft:#3DB8F0;   /* azul claro para fondos oscuros */
  --hot:#E8262A;           /* rojo del logotipo (detalles) */
  --accent-fg:#FFFFFF;
  --dark:#171B20;          /* secciones oscuras */
  --line:rgba(31,35,40,.14);
  --line-strong:#1F2328;
  --line-dark:rgba(245,247,249,.16);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --wide:1600px;
  --gut:2rem;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --t-ui:500ms;
  --t-color:700ms;
  --t-img:1800ms;
}
@media (min-width:1024px){ :root{ --gut:4rem } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.625;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
p{ margin:0 }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; line-height:1; text-wrap:balance }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--accent-deep) }   /* 4,2:1 sobre el papel; el azul puro del logo queda para líneas y detalles */
.dark h1 em,.dark h2 em,.dark h3 em{ color:var(--accent-soft) }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:4px }
.dark :focus-visible{ outline-color:var(--accent-soft) }

/* ---------- capas fijas: grano de papel y retícula visible ---------- */
.paper{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.gridlines{ position:fixed; inset:0; z-index:0; pointer-events:none; display:none }
.gridlines__inner{ position:relative; height:100%; max-width:var(--wide); margin:0 auto; padding:0 var(--gut) }
.gridlines__track{ position:relative; height:100% }
.gridlines__track span{ position:absolute; top:0; bottom:0; width:1px; background:rgba(31,35,40,.16) }
.gridlines__track span:nth-child(1){ left:0 }
.gridlines__track span:nth-child(2){ left:33.333% }
.gridlines__track span:nth-child(3){ left:66.666% }
.gridlines__track span:nth-child(4){ left:100% }
@media (min-width:1024px){ .gridlines{ display:block } }

/* ---------- utilidades de composición ---------- */
.page{ position:relative; z-index:1 }
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gut) }
/* En móvil todo ocupa las 12 columnas; el gap se activa solo cuando hay columnas reales,
   si no 11 gaps de 2rem desbordan un viewport de 375px. */
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:0; row-gap:3rem }
@media (min-width:1024px){ .grid{ column-gap:2rem } }
.section{ padding-block:5rem }
@media (min-width:768px){ .section{ padding-block:8rem } }
.bt{ border-top:1px solid var(--line-strong) }
.bt-soft{ border-top:1px solid var(--line) }

.overline{
  display:flex; align-items:center; gap:1rem;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500;
  color:var(--muted-fg);
}
/* La línea decorativa repite las dos flechas del logotipo: azul (frío) y rojo (calor). */
.overline::before{ content:""; width:2rem; height:1px; background:linear-gradient(90deg,var(--accent) 0 60%,var(--hot) 60% 100%); flex:none }
@media (min-width:768px){ .overline::before{ width:3rem } }
.dark .overline{ color:rgba(227,231,236,.7) }

.micro{ font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; color:var(--muted-fg) }
.lede{ font-size:1.0625rem; line-height:1.7; color:var(--muted-fg); max-width:34rem }
.dark .lede{ color:rgba(227,231,236,.72) }
.tnum{ font-variant-numeric:tabular-nums }

.h-hero{ font-size:clamp(3rem,6.9vw,6.75rem); line-height:.92; letter-spacing:-.02em }
.h-section{ font-size:clamp(2.5rem,5.4vw,4.5rem); line-height:.95; letter-spacing:-.015em }
.h-sub{ font-size:clamp(1.6rem,2.4vw,2.25rem); line-height:1.1 }

/* ---------- vínculos y botones ---------- */
.link{
  position:relative; display:inline-block;
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500;
  padding-bottom:.35rem; transition:color var(--t-ui) var(--ease);
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(1); transform-origin:left;
  transition:transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.link:hover{ color:var(--accent-fill) }   /* 5,5:1 sobre el fondo; el azul del logo da 4,2:1 en texto pequeño */
.link:hover::after{ background:var(--accent-deep) }
.dark .link:hover{ color:var(--accent-soft) }
.dark .link:hover::after{ background:var(--accent-soft) }
.link--quiet::after{ transform:scaleX(0) }
.link--quiet:hover::after{ transform:scaleX(1) }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:3rem; padding-inline:2.5rem; overflow:hidden;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  transition:box-shadow var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
  white-space:nowrap;
}
.btn--lg{ height:3.5rem; padding-inline:3rem }
.btn--primary{ background:var(--fg); color:var(--accent-fg); box-shadow:0 4px 16px rgba(0,0,0,.15) }
/* Capa azul que entra desde la izquierda al pasar el cursor */
.btn--primary .btn__fill{
  position:absolute; inset:0; background:var(--accent-fill);
  transform:translateX(-100%); transition:transform var(--t-ui) var(--ease);
}
.btn--primary .btn__label{ position:relative; z-index:1 }
.btn--primary:hover{ box-shadow:0 8px 24px rgba(0,0,0,.25) }
.btn--primary:hover .btn__fill{ transform:translateX(0) }
.btn--secondary{ background:transparent; color:var(--fg); border:1px solid var(--fg) }
.btn--secondary:hover{ background:var(--fg); color:var(--accent-fg) }
.dark .btn--secondary{ color:var(--bg); border-color:var(--bg) }
.dark .btn--secondary:hover{ background:var(--bg); color:var(--fg) }

/* ---------- imágenes: escala de grises y revelado lento ---------- */
.figure{ position:relative }
.figure__frame{
  position:relative; overflow:hidden; background:var(--muted-bg);
  box-shadow:0 8px 32px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:box-shadow var(--t-color) var(--ease);
}
.figure__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1); transform:scale(1);
  transition:filter var(--t-img) var(--ease), transform var(--t-img) var(--ease);
}
.figure:hover .figure__frame img,.group:hover .figure__frame img{ filter:grayscale(0); transform:scale(1.04) }
.figure:hover .figure__frame,.group:hover .figure__frame{ box-shadow:0 16px 48px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06) }
/* Producto sobre papel: el fondo blanco de la foto desaparece con multiply */
.figure__frame--paper{ background:#EBEFF2; box-shadow:inset 0 0 0 1px var(--muted-fg) }   /* un punto más gris que el fondo: los equipos blancos dejan de desaparecer */
.figure__frame--paper img{ object-fit:contain; mix-blend-mode:multiply; padding:8% }
.figure__frame--plate{ background:var(--muted-bg) }
.figure:hover .figure__frame--paper,.group:hover .figure__frame--paper{ box-shadow:0 8px 24px rgba(0,0,0,.06), inset 0 0 0 1px var(--muted-fg) }
.aspect-34{ aspect-ratio:3/4 }
.aspect-45{ aspect-ratio:4/5 }
.aspect-43{ aspect-ratio:4/3 }
.aspect-11{ aspect-ratio:1/1 }

.vlabel{
  position:absolute; top:0; bottom:0; left:-2.25rem; display:none; align-items:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:var(--muted-fg);
}
@media (min-width:1024px){ .vlabel{ display:flex } }
.vlabel--right{ left:auto; right:-2.25rem; transform:none }
.dark .vlabel{ color:rgba(227,231,236,.6) }
.caption{ display:flex; align-items:center; gap:1rem; margin-top:1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-fg) }
.caption::before{ content:""; width:2rem; height:1px; background:var(--muted-fg); flex:none }

/* ---------- revelado al hacer scroll ---------- */
/* Las entradas animadas solo se ocultan si el JavaScript corre; sin él, la página se ve completa */
.js .reveal{ opacity:0; transform:translateY(36px); transition:opacity 700ms cubic-bezier(.33,1,.68,1), transform 900ms cubic-bezier(.22,1,.36,1) }   /* arranque rapido y frenada larga; 160 ms entre hermanos */
.reveal.is-in{ opacity:1; transform:none }
.reveal[data-delay="1"]{ transition-delay:160ms }
.reveal[data-delay="2"]{ transition-delay:320ms }
.reveal[data-delay="3"]{ transition-delay:480ms }
.reveal[data-delay="4"]{ transition-delay:640ms }

/* ============================================================ CABECERA */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(245,247,249,.96);
  border-bottom:1px solid var(--line);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; height:5rem; gap:2rem }
.brand{ display:flex; align-items:baseline; gap:.75rem; font-family:var(--serif); font-size:1.35rem; letter-spacing:-.01em; white-space:nowrap }
.brand__logo{ height:1.9rem; width:auto; display:block }
@media (min-width:1024px){ .brand__logo{ height:2.1rem } }
.nav{ display:none; gap:1.75rem }
@media (min-width:1024px){ .nav{ display:flex } }
@media (max-width:1279px){ .nav__late{ display:none } }
@media (max-width:1399px){ .nav__later{ display:none } }   /* con siete entradas el menú solo cabe desde 1280 px: la última espera a ese ancho */
.nav a{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; white-space:nowrap; transition:color var(--t-ui) var(--ease) }
.nav a:hover{ color:var(--accent-fill) }
@media (min-width:1024px) and (max-width:1199px){ .nav{ gap:1.25rem } .nav a{ letter-spacing:.16em } .brand{ flex:none } .brand__logo{ height:1.65rem } }   /* portátiles estrechos: menú y logotipo caben sin que el logo se aplaste */
.header__tools{ display:flex; align-items:center; gap:2rem }
.cart{ display:none; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; color:var(--muted-fg) }
@media (min-width:640px){ .cart{ display:inline } }
.header__cta{ display:none }
@media (min-width:640px){ .header__cta{ display:inline-flex } }
.menu-btn{ font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; display:inline-flex; align-items:center; gap:.75rem }
.menu-btn::after{ content:""; width:1.5rem; height:1px; background:var(--fg) }
@media (min-width:1024px){ .menu-btn{ display:none } }

.mobile-nav{ position:fixed; inset:0; z-index:60; background:var(--dark); color:var(--bg); display:flex; flex-direction:column; padding:2rem var(--gut) }
.mobile-nav[hidden]{ display:none !important }
.mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; height:3rem }
.mobile-nav__list{ list-style:none; margin:auto 0; padding:0; display:flex; flex-direction:column; gap:1.5rem }
.mobile-nav__list a{ font-family:var(--serif); font-size:2.5rem; line-height:1 }
.mobile-nav__list a:hover{ color:var(--accent-soft) }
.mobile-nav__foot{ font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(227,231,236,.6) }

/* ============================================================ HERO */
.hero{ padding-block:4rem 5rem }
@media (min-width:1024px){ .hero{ min-height:calc(100vh - 5rem); padding-block:4rem 6rem; display:flex; align-items:flex-end } }
.hero .grid{ width:100%; align-items:end }
.hero__copy{ grid-column:1 / -1; display:flex; flex-direction:column; gap:2rem }
.hero__art{ grid-column:1 / -1 }
@media (min-width:1024px){
  .hero__copy{ grid-column:1 / span 7 }
  .hero__art{ grid-column:9 / span 4 }
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem }
.hero__meta{ display:flex; gap:3rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line) }
.hero__meta div{ display:flex; flex-direction:column; gap:.35rem }
.hero__meta strong{ font-family:var(--serif); font-weight:400; font-size:1.25rem }

/* ============================================================ MANIFIESTO */
.manifesto{ grid-column:1 / -1 }
.manifesto__aside{ grid-column:1 / -1 }
@media (min-width:1024px){
  .manifesto{ grid-column:2 / span 6 }
  .manifesto__aside{ grid-column:9 / span 3; padding-top:.5rem }
}
.dropcap::first-letter{
  float:left; font-family:var(--serif); font-size:4.75rem; line-height:.8;
  margin:.15rem .75rem 0 0; color:var(--accent);
}
.speclist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.speclist li{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; border-top:1px solid var(--line) }
.speclist li:last-child{ border-bottom:1px solid var(--line) }
.speclist .k{ font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-fg); font-weight:500 }
.speclist .v{ font-family:var(--serif); font-size:1.1rem; text-align:right }

/* ============================================================ CATEGORÍAS */
.cats{ display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:640px){ .cats{ grid-template-columns:repeat(2,1fr); column-gap:2rem } }
@media (min-width:1024px){ .cats{ grid-template-columns:repeat(4,1fr); column-gap:2rem } }
.cat{
  display:flex; flex-direction:column; gap:1.25rem;
  padding:2rem 0 2.5rem; border-top:1px solid var(--fg);
  transition:background-color var(--t-color) var(--ease);
}
/* el desplazamiento va por transform en los hijos (GPU), no por padding: animar padding recalcula el texto en cada fotograma */
.cat > *{ transition:transform var(--t-color) var(--ease) }
.cat:hover{ background:rgba(227,231,236,.4) }
.cat:hover > *{ transform:translateX(1rem) }
.cat h3{ font-size:1.75rem }
.cat p{ color:var(--muted-fg); font-size:.95rem; line-height:1.65; flex:1 }

/* ============================================================ PRODUCTOS */
.section-head{ display:flex; flex-direction:column; gap:2rem; margin-bottom:4rem }
@media (min-width:768px){ .section-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:3rem } }
.section-head__text{ display:flex; flex-direction:column; gap:1.5rem }

.products{ display:grid; grid-template-columns:1fr; gap:2.5rem 2rem }
@media (min-width:640px){ .products{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .products{ grid-template-columns:repeat(4,1fr); grid-auto-rows:auto } }
.product{ display:flex; flex-direction:column; gap:1.25rem; padding-top:1.5rem; border-top:1px solid var(--fg); transition:background-color var(--t-color) var(--ease) }
.product--featured{ border-top:4px solid var(--accent) }
@media (min-width:640px){ .product--featured{ grid-column:span 2; grid-row:span 2 } }
.product__img{ box-shadow:0 2px 8px rgba(0,0,0,.02), inset 0 0 0 1px var(--muted-fg); transition:box-shadow var(--t-color) var(--ease) }
.product:hover .product__img{ box-shadow:0 8px 24px rgba(0,0,0,.08), inset 0 0 0 1px var(--muted-fg) }
.product__meta{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline }
.product__title{ font-size:1.3rem; line-height:1.2 }
.product--featured .product__title{ font-size:clamp(1.6rem,2.4vw,2.25rem) }
.product__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-top:auto; padding-top:.5rem }
.price{ font-family:var(--serif); font-size:1.35rem; font-variant-numeric:tabular-nums }
.product--featured .price{ font-size:2rem }
.price s{ font-family:var(--sans); font-size:.8rem; color:var(--muted-fg); margin-right:.6rem; text-decoration-color:var(--hot) }
.tag{ display:inline-block; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; color:var(--hot); border:1px solid var(--hot); padding:.35rem .6rem }
.tag--muted{ color:var(--muted-fg); border-color:var(--line) }
.product--cta{ border-top:1px solid var(--fg); display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:1.5rem 0 0; min-height:16rem }
.product--cta p{ font-family:var(--serif); font-size:1.5rem; line-height:1.2 }

/* ============================================================ SECCIÓN OSCURA */
.dark{ background:var(--dark); color:var(--bg) }
.dark .bt{ border-top-color:var(--line-dark) }
.dark .micro,.dark .caption{ color:rgba(227,231,236,.6) }
.dark .caption::before{ background:rgba(227,231,236,.4) }
.about__art{ grid-column:1 / -1 }
.about__copy{ grid-column:1 / -1; display:flex; flex-direction:column; gap:2rem }
@media (min-width:1024px){
  .about__art{ grid-column:1 / span 6 }
  .about__copy{ grid-column:8 / span 5; align-self:center }
}
.dark .figure__frame{ background:#242930; box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06) }
.dark .figure:hover .figure__frame{ box-shadow:0 16px 48px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06) }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1rem; padding-top:2rem; border-top:1px solid var(--line-dark) }
.stats div{ display:flex; flex-direction:column; gap:.5rem }
.stats strong{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4vw,3.5rem); line-height:1; font-variant-numeric:tabular-nums; color:var(--accent-soft) }
.brands{ margin-top:5rem; padding-top:2.5rem; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:1.5rem }
@media (min-width:768px){ .brands{ flex-direction:row; align-items:center; justify-content:space-between; gap:4rem } }
.brands img{ max-width:14.2rem; width:41.8%; opacity:.55; transition:opacity var(--t-color) var(--ease) }
.brands img:hover{ opacity:.9 }

/* ============================================================ TESTIMONIOS */
.quotes{ display:grid; grid-template-columns:1fr; gap:3rem }
@media (min-width:1024px){ .quotes{ grid-template-columns:repeat(3,1fr); gap:2rem } }
.quote{
  border-left:1px solid var(--fg); padding-left:1.5rem; display:flex; flex-direction:column; gap:2rem;
  transition:border-color var(--t-color) var(--ease);
}
@media (min-width:768px){ .quote{ padding-left:2rem } }
.quote > *{ transition:transform var(--t-color) var(--ease) }
.quote:hover{ border-color:var(--accent) }
.quote:hover > *{ transform:translateX(.75rem) }
.quote blockquote{ margin:0; font-family:var(--serif); font-size:1.25rem; line-height:1.45; font-weight:300; flex:1 }
.quote blockquote p::before{ content:"“" } .quote blockquote p::after{ content:"”" }
.quote footer{ display:flex; align-items:center; gap:1.25rem }
.quote__logo{ width:6.5rem; height:3rem; display:flex; align-items:center; filter:grayscale(1); opacity:.8; transition:filter var(--t-img) var(--ease), opacity var(--t-img) var(--ease) }
.quote__logo img{ max-height:100%; width:auto; max-width:100%; object-fit:contain; mix-blend-mode:multiply }
.quote:hover .quote__logo{ filter:grayscale(0); opacity:1 }
.quote__who{ display:flex; flex-direction:column; gap:.3rem }
.quote__who strong{ font-weight:500; font-size:.85rem; transition:color var(--t-ui) var(--ease) }
.quote:hover .quote__who strong{ color:var(--accent-deep) }

/* ============================================================ SUCURSALES */
.branches{ display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:1024px){ .branches{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem } }   /* minmax(0,…): a 1024 px la columna cede y el correo largo se parte, en vez de desbordar la pagina */
.branch{ padding:2rem 0 3rem; border-top:1px solid var(--fg); display:flex; flex-direction:column; gap:1.75rem; transition:background-color var(--t-color) var(--ease) }
.branch:hover{ background:rgba(227,231,236,.4) }
.branch h3{ font-size:clamp(1.75rem,2.6vw,2.4rem) }
.branch dl{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem 1.5rem; font-size:.9rem }
.branch dt{ font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-fg); font-weight:500; padding-top:.25rem }
.branch dd{ margin:0; min-width:0; overflow-wrap:anywhere }
.branch dd a{ transition:color var(--t-ui) var(--ease) }
.branch dd a:hover{ color:var(--accent-deep) }

/* ============================================================ CTA + PIE */
.cta{ padding-block:6rem }
@media (min-width:768px){ .cta{ padding-block:9rem } }
.cta__inner{ grid-column:1 / -1; display:flex; flex-direction:column; gap:2.5rem }
@media (min-width:1024px){ .cta__inner{ grid-column:2 / span 8 } }
.form{ display:flex; flex-direction:column; gap:1.5rem; max-width:40rem }
@media (min-width:640px){ .form{ flex-direction:row; align-items:flex-end } }
.field{ flex:1; display:flex; flex-direction:column; gap:.5rem }
.field label{ font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(227,231,236,.6); font-weight:500 }
.input{
  height:3rem; width:100%; background:transparent; border:0; border-bottom:1px solid var(--bg);
  color:var(--bg); font-family:var(--sans); font-size:.9rem; padding:.5rem 0;
  transition:border-color var(--t-ui) var(--ease);
}
.input::placeholder{ font-family:var(--serif); font-style:italic; color:rgba(227,231,236,.55); font-size:1rem }
.input:focus{ border-bottom-color:var(--accent-soft) }
.form .btn--primary{ background:var(--bg); color:var(--fg); box-shadow:0 4px 16px rgba(0,0,0,.35) }
.form .btn--primary:hover{ color:var(--accent-fg) }
.form-note{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(227,231,236,.6) }

.footer{ padding-block:4rem 6.5rem; border-top:1px solid var(--line-dark) }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:3rem }
@media (min-width:768px){ .footer__grid{ grid-template-columns:2fr 1fr 1fr 1fr } }
.footer h4{ font-family:var(--sans); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:rgba(227,231,236,.6); margin-bottom:1.25rem }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem }
.footer li a{ font-size:.85rem; transition:color var(--t-ui) var(--ease) }
.footer li a:hover{ color:var(--accent-soft) }
.footer__brand{ display:flex; flex-direction:column; gap:1.5rem }
.footer__logo{ width:13rem }
.footer__bottom{ margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:.75rem; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(227,231,236,.5) }
@media (min-width:768px){ .footer__bottom{ flex-direction:row; justify-content:space-between } }

/* ---------- vistas: portada y una "página" por categoría (#/aires, #/tuberias, ...) ---------- */
.view[hidden]{ display:none !important }
[id]{ scroll-margin-top:5rem }   /* las anclas no quedan bajo la cabecera fija */
.view-page{ padding-block:3rem 5rem }
@media (min-width:768px){ .view-page{ padding-block:4rem 8rem } }
.crumbs{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; color:var(--muted-fg); margin-bottom:2.5rem }
.crumbs a{ transition:color var(--t-ui) var(--ease) }
.crumbs a:hover{ color:var(--accent-fill) }
.crumbs span[aria-hidden]{ color:var(--brand-grey) }
.h-page{ font-size:clamp(2.75rem,6.5vw,6rem) }
.othercats{ margin-top:6rem; padding-top:2rem; border-top:1px solid var(--line-strong); display:flex; flex-direction:column; gap:1.5rem }
@media (min-width:768px){ .othercats{ flex-direction:row; align-items:center; justify-content:space-between; gap:3rem } }
.othercats__row{ display:flex; flex-wrap:wrap; gap:2rem }
.othercats__row a{ font-family:var(--serif); font-size:1.35rem; transition:color var(--t-ui) var(--ease) }
.othercats__row a:hover{ color:var(--accent-deep) }

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:45;
  display:inline-flex; align-items:center; gap:.9rem; height:3rem; padding-inline:1.25rem 1.5rem;
  background:var(--fg); color:var(--bg); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,.15); transition:box-shadow var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.wa::before{ content:""; width:.45rem; height:.45rem; background:var(--hot) }
.wa:hover{ color:var(--accent-soft); box-shadow:0 8px 24px rgba(0,0,0,.25) }

/* ---------- pulido premium: accesibilidad, portada, preguntas frecuentes ---------- */
/* Enlace para saltar al contenido con teclado: invisible hasta que recibe el foco */
.skip{ position:absolute; left:var(--gut); top:-4rem; z-index:70; padding:.75rem 1.25rem; background:var(--fg); color:var(--bg); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; transition:top var(--t-ui) var(--ease) }
.skip:focus{ top:1rem }
/* Portada: la foto entra con un acercamiento muy lento, cinematográfico */
.hero__art .figure__frame img{ animation:kenburns 22s var(--ease) both }
@keyframes kenburns{ from{ transform:scale(1.06) } to{ transform:scale(1) } }
/* Preguntas frecuentes: acordeón nativo con la línea, el cuadrado que gira y el texto que se funde */
.faq__head{ grid-column:1 / -1 }
.faq{ grid-column:1 / -1 }
@media (min-width:1024px){ .faq__head{ grid-column:1 / span 4 } .faq{ grid-column:6 / span 7 } }
.faq__item{ border-top:1px solid var(--fg) }
.faq__item:last-child{ border-bottom:1px solid var(--fg) }
.faq__item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem 0; font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.3; cursor:pointer; transition:color var(--t-ui) var(--ease) }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary:hover,.faq__item[open] summary{ color:var(--accent-fill) }
.faq__icon{ flex:none; width:.7rem; height:.7rem; border:1px solid var(--fg); transition:transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease) }
.faq__item[open] .faq__icon{ transform:rotate(90deg); border-color:var(--accent) }
.faq__body{ padding:0 0 1.75rem; max-width:34rem; color:var(--muted-fg); line-height:1.7; animation:fadeIn 700ms var(--ease) both }
/* En la ficha: otros equipos del mismo grupo */
.related{ margin-top:6rem; display:flex; flex-direction:column; gap:2.5rem }

/* Folletos técnicos: una fila por documento, con el nombre en serif y la ficha en una línea */
.docs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:1024px){ .docs{ grid-template-columns:1fr 1fr; column-gap:4rem } }
.doc{ border-top:1px solid var(--line) }
.doc__link{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name pdf" "meta pdf"; column-gap:1.5rem; row-gap:.3rem; align-items:center; padding:1.1rem 0; min-height:2.75rem; transition:color var(--t-ui) var(--ease) }
.doc__name{ grid-area:name; font-family:var(--serif); font-size:1.15rem; line-height:1.25 }
.doc__link .micro{ grid-area:meta }
.doc__pdf{ grid-area:pdf; font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; border:1px solid var(--fg); padding:.45rem .7rem; transition:background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease) }
.doc__link:hover .doc__name{ color:var(--accent-deep) }
.doc__link:hover .doc__pdf{ background:var(--fg); color:var(--bg) }
/* ---------- catálogo por sección: filtros que eligen qué se ve, y tarjetas por familia con selector de variantes ---------- */
[hidden]{ display:none !important }   /* el atributo hidden gana a cualquier display de autor */
.filters{ display:flex; flex-wrap:wrap; gap:0 2rem; margin-bottom:3rem; border-bottom:1px solid var(--line); scroll-margin-top:6rem }
.filter{
  position:relative; display:inline-flex; align-items:baseline; gap:.5rem; min-height:2.75rem; padding-block:.9rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--muted-fg);
  transition:color var(--t-ui) var(--ease);
}
.filter::after{
  content:""; position:absolute; left:0; right:0; bottom:.45rem; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-ui) var(--ease);
}
.filter:hover,.filter[aria-pressed="true"]{ color:var(--fg) }
.filter[aria-pressed="true"]::after{ transform:scaleX(1) }
.filter__n{ font-size:.66rem; letter-spacing:.08em; color:var(--muted-fg); font-variant-numeric:tabular-nums }
.more{ display:flex; flex-direction:column; gap:5rem }
.more__group{ display:flex; flex-direction:column; gap:2.5rem; animation:fadeIn 900ms var(--ease) both }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.more__ghead{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 2rem }
.more__foot{ display:flex; justify-content:flex-end; padding-top:1.5rem; border-top:1px solid var(--line) }
/* Con o sin etiqueta (Oferta, Agotado) la primera línea mide lo mismo, así las fotos de una fila quedan alineadas */
.product__meta{ align-items:center; min-height:1.75rem }
@media (min-width:640px){ .view-page .product__meta{ align-items:flex-start; min-height:3.25rem } .more .product__meta{ min-height:4rem } }
/* La foto va como fondo: la misma imagen se incrusta una sola vez aunque la usen varias tarjetas o variantes */
.product__pic{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:8%;
  background:center/contain no-repeat content-box; mix-blend-mode:multiply; filter:grayscale(1);
  transition:filter var(--t-img) var(--ease), transform var(--t-img) var(--ease);
}
.group:hover .product__pic{ filter:grayscale(0); transform:scale(1.04) }
.product__pic--none::before{ content:"Foto no disponible"; font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-fg) }
/* Selector de variantes: la misma tarjeta cambia foto, especificación y cotización */
.variants{ display:flex; flex-wrap:wrap; gap:.5rem }
.variant,.chip span{
  min-height:2rem; padding:.3rem .7rem; border:1px solid var(--line); background:transparent;
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500; color:var(--muted-fg); white-space:nowrap;
  transition:color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.variant:hover,.chip:hover span{ color:var(--fg); border-color:var(--fg) }
.variant[aria-pressed="true"],.chip input:checked+span{ color:var(--fg); border-color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent) }
/* Descripción corta en todas las tarjetas; más pequeña en el catálogo y en celular */
.product__desc{ font-size:.95rem; line-height:1.6 }
.more .product__desc{ font-size:.85rem }
/* En escritorio (con cursor) la descripción se funde sobre la foto al pasar el cursor o al enfocar la tarjeta;
   la tarjeta no cambia de tamaño. En tablet y celular se queda visible debajo del título. */
.product__hover{ display:none }
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .product:not(.product--featured) .product__desc{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .product__hover{
    display:flex; align-items:flex-end; position:absolute; inset:0; margin:0; padding:1.5rem 1.25rem 1.25rem;
    font-size:.85rem; line-height:1.6; color:var(--fg);
    background:linear-gradient(to top, rgba(245,247,249,.97) 0%, rgba(245,247,249,.93) 60%, rgba(245,247,249,.4) 100%);
    opacity:0; transform:translateY(8px); transition:opacity var(--t-color) var(--ease), transform var(--t-color) var(--ease);
  }
  .product:hover .product__hover,.product:focus-within .product__hover{ opacity:1; transform:none }
}
.product__link{ display:block; color:inherit; transition:color var(--t-ui) var(--ease) }
.product__title .product__link:hover{ color:var(--accent-deep) }
/* Ficha de producto (#/p/<id>): foto grande a color, datos, selector y cotización */
.view-detail{ padding-block:3rem 5rem }
@media (min-width:768px){ .view-detail{ padding-block:4rem 8rem } }
.detail{ display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; padding-top:0; border-top:0 }
@media (min-width:1024px){ .detail{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:4rem; align-items:start } }
.detail .figure__frame{ box-shadow:0 8px 32px rgba(0,0,0,.12), inset 0 0 0 1px var(--muted-fg) }
.detail .product__title{ font-size:clamp(2rem,3.4vw,3.25rem); line-height:1.02 }   /* .product__title (1,3 rem, tarjetas) ganaba a .h-section en la ficha */
.detail .product__pic{ filter:grayscale(0); transform:none; padding:6% }
.detail .product__pic > img{ display:block; width:100%; height:100%; object-fit:contain; padding:0; mix-blend-mode:normal }   /* foto estática de /p/<id>/ */
.detail__info{ display:flex; flex-direction:column; gap:2rem }
.detail__title{ margin-top:1rem }
.detail__desc{ max-width:34rem }
.detail__variants,.detail__video{ display:flex; flex-direction:column; gap:.75rem }
.detail .variants{ gap:.6rem }
.detail .variant{ min-height:2.75rem; padding-inline:1rem; font-size:.68rem }
.detail .speclist .v{ text-align:right }
.detail .speclist [data-spec]{ display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem .75rem }
.detail .speclist [data-spec] .micro{ font:inherit; letter-spacing:0; text-transform:none; color:inherit }
.detail__actions{ display:flex; flex-wrap:wrap; gap:1rem }
.model{ font-family:var(--serif); font-size:1.35rem }
.product--featured .model{ font-size:2rem }
.more .model{ font-size:1.1rem }
.product__foot .link{ margin-left:auto; color:var(--fg) }
.mobile-nav__list button{ font-family:var(--serif); font-size:2.5rem; line-height:1; color:inherit }
.mobile-nav__list button:hover{ color:var(--accent-soft) }
/* Diálogo de cotización: Panamá o Venezuela */
.cotizar{ width:min(100% - 2rem, 44rem); max-height:calc(100vh - 2rem); margin:auto; padding:0; border:1px solid var(--fg); background:var(--bg); color:var(--fg); box-shadow:0 24px 64px rgba(0,0,0,.25) }
.cotizar::backdrop{ background:rgba(23,27,32,.6) }
.quote__inner{ padding:2.5rem var(--gut) }
.quote__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; margin-bottom:2rem }
.quote__title{ font-size:clamp(1.75rem,3vw,2.5rem); margin-bottom:.75rem }
.quote__product{ font-size:.95rem; color:var(--muted-fg) }
.quote__close{ flex:none; min-height:2.75rem; min-width:2.75rem; font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; transition:color var(--t-ui) var(--ease) }
.quote__close:hover{ color:var(--accent-deep) }
.quote__offices{ display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:640px){ .quote__offices{ grid-template-columns:1fr 1fr; column-gap:2rem } }
.office{ display:flex; flex-direction:column; gap:1rem; padding:1.75rem 0 }
.office+.office{ border-top:1px solid var(--line) }
@media (min-width:640px){ .office+.office{ border-top:0 } }
.office h3{ font-size:1.6rem }
.office .micro{ color:var(--muted-fg) }
.office__contact{ font-size:.9rem; color:var(--muted-fg); overflow-wrap:anywhere }
.office__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem }
.office__actions .btn{ flex:1 1 9rem; padding-inline:1.5rem }
@media (max-width:767px){ .variant{ min-height:2.75rem; padding-inline:.9rem } }
/* En teléfono el catálogo desplegado va a dos columnas para no alargar la página */
@media (max-width:639px){
  .filters{ flex-wrap:nowrap; gap:0 1.5rem; margin:0 calc(var(--gut) * -1) 2.5rem; padding-inline:var(--gut); overflow-x:auto; scrollbar-width:none }
  .filters::-webkit-scrollbar{ display:none }
  .filter{ flex:none; white-space:nowrap }
  /* el overline "Aires acondicionados · 37 equipos" es un flex que no cabe en 320-375 px: en telefono fluye como texto */
  .view-page .overline{ display:block; line-height:1.9 }
  .view-page .overline::before{ display:inline-block; vertical-align:middle; margin-right:.75rem }
  .more .products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem }
  .more .product{ gap:.9rem; padding-top:1rem }
  .more .product__meta{ flex-direction:column; align-items:flex-start; gap:.3rem }
  .more .product__title{ font-size:1.05rem }
  .more .product__foot{ flex-direction:column; align-items:flex-start; gap:.6rem }
  .more .product__foot .link{ margin-left:0 }
  .more .variants{ gap:.4rem }
  .more .variant{ padding-inline:.6rem; font-size:.62rem }
}
@media (prefers-reduced-motion:reduce){ .product__pic{ filter:grayscale(0); transform:none } }

/* ---------- pulido: filtros fijos al hacer scroll, campos del cuadro de cotizar, tarjetas que se elevan ---------- */
/* ---------- pulido: filtros fijos al hacer scroll, campos claros del cuadro de cotizar y la calculadora, tarjetas que se elevan ---------- */
:root{ --header-h:5rem }
.header-hidden{ --header-h:0px }
.filters{ position:sticky; top:var(--header-h); z-index:30; background:rgba(245,247,249,.97); transition:top var(--t-ui) var(--ease) }
.quote__fields{ display:grid; grid-template-columns:1fr; gap:1rem 2rem; margin-bottom:2rem }
@media (min-width:640px){ .quote__fields{ grid-template-columns:1fr 1fr } }
.cotizar .field label,.calc .field label,.factura .field label{ color:var(--muted-fg) }
.cotizar .input,.calc .input,.factura .input{ color:var(--fg); border-bottom-color:var(--line-strong) }
.cotizar .input::placeholder,.calc .input::placeholder,.factura .input::placeholder{ color:var(--muted-fg) }
.cotizar .input:focus,.calc .input:focus,.factura .input:focus{ border-bottom-color:var(--accent) }
.product{ transition:background-color var(--t-color) var(--ease), transform var(--t-color) var(--ease) }
@media (prefers-reduced-motion:no-preference){ .product:hover{ transform:translateY(-3px) } }
.lede,.product__desc,.faq__body p,.detail__desc{ text-wrap:pretty }
@media print{ .wa,.header__cta,.filters,.skip,.menu-btn,.paper,.gridlines{ display:none !important } .view[hidden]{ display:block !important } }
/* Selección de texto en el azul de la marca; pista de scroll en la portada (solo escritorio) */
::selection{ background:var(--accent); color:#fff }
.hero__cue{ display:none }
@media (min-width:1024px){
  .hero__cue{ display:flex; align-items:center; gap:1rem; margin-top:3rem; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-fg) }
  .hero__cue::before{ content:""; width:1px; height:3.5rem; background:linear-gradient(to bottom, var(--fg), transparent); transform-origin:top; animation:cue 2.8s var(--ease) infinite }
  @keyframes cue{ 0%{ transform:scaleY(0) } 45%,55%{ transform:scaleY(1) } 100%{ transform:translateY(100%) scaleY(0) } }
}
/* ---------- calculadora de capacidad ---------- */
.calc__intro,.calc{ grid-column:1 / -1 }
.calc{ display:flex; flex-direction:column; gap:2rem }
@media (min-width:1024px){ .calc__intro{ grid-column:1 / span 5 } .calc{ grid-column:7 / span 6 } }
.calc .input{ font-size:1.5rem; font-family:var(--serif); height:3.5rem }
.calc .input::placeholder{ font-size:1.1rem }
.calc__opts{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.calc__opts legend,.factura__step legend{ float:left; width:100%; margin-bottom:.75rem; padding:0 }
/* Los chips son los mismos botones de variante de las tarjetas, con más altura para el dedo */
.chip{ position:relative }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:-1px }
.chip span{ display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem 1rem; font-size:.66rem; cursor:pointer }
.chip input:focus-visible+span{ outline:1px solid var(--accent-deep); outline-offset:3px }
.calc__result{ padding-top:2rem; border-top:1px solid var(--fg); display:flex; flex-direction:column; gap:.75rem; animation:fadeIn 700ms var(--ease) both }
.calc__btu{ font-family:var(--serif); font-size:clamp(2.75rem,5vw,4.5rem); line-height:1 }
.calc__unit{ font-size:.5em; color:var(--muted-fg) }
.calc__note{ max-width:30rem }
.calc__links{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:.5rem }
.calc__more{ margin-top:1.5rem }
/* ---------- vida: transición entre páginas, cabecera que se esconde al bajar, lupa en la ficha ---------- */
.view:not([hidden]){ animation:fadeIn 700ms var(--ease) both }
.header{ transition:transform var(--t-ui) var(--ease) }
.header-hidden .header{ transform:translateY(-100%) }
@media (hover:hover) and (pointer:fine){
  .detail .figure__frame{ cursor:zoom-in }
  .detail .product__pic{ transition:transform 700ms var(--ease), filter var(--t-img) var(--ease); transform-origin:var(--zx,50%) var(--zy,50%) }
  .detail .figure__frame:hover .product__pic{ transform:scale(1.15) }   /* lupa suave: 1,7 se sentía agresiva */
}
/* ---------- video del producto en la ficha (debajo de la foto; a todo el ancho en celular) ---------- */
.detail__video{ margin-top:1.5rem }
.detail__video video{ display:block; width:100%; min-height:12rem; max-height:32rem; background:#000; border:1px solid var(--line) }
/* ---------- franja de marcas: el logotipo de Elitech, más pequeño que la pareja Daikin/McQuay ---------- */
.brands__logos{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; flex:1 1 auto }
.brands__logos img:first-child{ width:14.2rem; max-width:56% }
.brands .brands__extra{ width:7rem; max-width:28% }
/* ---------- calculadora de factura de luz (#/factura): formulario a la izquierda, resultado fijo a la derecha ---------- */
/* (los colores del formulario claro, el legend flotante, la cifra grande y las etiquetas .micro se comparten con la calculadora de capacidad en catalog.css) */
.factura__grid{ row-gap:4rem }
.factura__form,.factura__result{ grid-column:1 / -1 }
@media (min-width:1024px){
  .factura__form{ grid-column:1 / span 6 }
  .factura__result{ grid-column:8 / span 5; position:sticky; top:5.5rem; align-self:start }
}
.factura__form{ display:flex; flex-direction:column; gap:3rem }
.factura__step{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem; min-width:0 }
.factura__step legend{ margin-bottom:1.25rem }
.factura__opts{ display:flex; flex-direction:column; gap:.75rem; padding-top:.5rem }
.factura__row{ display:grid; grid-template-columns:1fr; gap:1.5rem 2rem }
@media (min-width:560px){ .factura__row{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) } }
.factura .input{ font-family:var(--serif); font-size:1.25rem; height:3rem }
.factura select.input{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:1.75rem; border-radius:0;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231F2328' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right .25rem center;
}
.factura .input[type="number"]{ -moz-appearance:textfield }
.factura .input::-webkit-outer-spin-button,.factura .input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.factura__hint{ font-size:.8rem; line-height:1.6; color:var(--muted-fg); max-width:30rem }
.factura__units{ display:flex; flex-direction:column; gap:1.5rem }
.factura__unit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 2.75rem; gap:1rem 1.25rem; align-items:start; padding-bottom:1.5rem; border-bottom:1px solid var(--line) }
.factura__unit .factura__model{ grid-column:1 / -1 }
/* la fila de cuatro columnas solo donde cabe el nombre del equipo: formulario a todo el ancho (640 a 1023 px) o escritorio ancho (desde 1300 px);
   entre 1024 y 1299 px el formulario ocupa media rejilla y el selector volvería a recortarse */
@media (min-width:640px) and (max-width:1023px), (min-width:1300px){
  .factura__unit{ grid-template-columns:minmax(0,1fr) 5.5rem 6.5rem 2.75rem }
  .factura__unit .factura__model{ grid-column:auto }
}
.factura__del{
  width:2.75rem; height:2.75rem; margin-top:1.4rem; justify-self:end; border:1px solid var(--line); background:transparent; color:var(--muted-fg);
  font-size:1.25rem; line-height:1; cursor:pointer; transition:color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.factura__del:hover{ color:var(--fg); border-color:var(--fg) }
.factura__del:disabled{ opacity:.35; cursor:default; color:var(--muted-fg); border-color:var(--line) }
.factura__add{ align-self:flex-start }
/* resultado: la cifra grande (.calc__btu) sobre una línea; las barras son hilos que crecen con transform */
.factura__result{ display:flex; flex-direction:column; gap:1.5rem; padding-top:2rem; border-top:1px solid var(--fg) }
.factura__total{ letter-spacing:-.01em }
.factura__cur{ font-size:.45em; vertical-align:.5em; margin-right:.1em }
.factura__kpis{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 1.5rem; padding-block:1.5rem; border-block:1px solid var(--line) }
.factura__kpis div{ display:flex; flex-direction:column; gap:.35rem; min-width:0 }
.factura__kpis dd{ margin:0; font-family:var(--serif); font-size:1.35rem; line-height:1.1 }
.factura__ahorro{ display:flex; flex-direction:column; gap:.5rem; padding:1.25rem 1.5rem; border-left:3px solid var(--accent); background:rgba(10,158,220,.06) }
.factura__pct{ font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.25rem); line-height:1; color:var(--accent-deep) }
.factura__bars{ display:flex; flex-direction:column; gap:.75rem }
.factura__bar{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) auto; gap:1rem; align-items:center; font-size:.8rem; color:var(--muted-fg) }
.factura__bar span:last-child{ color:var(--fg); white-space:nowrap }
.factura__bar i{ display:block; height:1px; background:var(--line); position:relative }
.factura__bar b{ position:absolute; left:0; top:-2px; height:5px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t-color) var(--ease) }
.factura__bar b.is-grey{ background:var(--brand-grey) }
.factura__cta{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; padding-top:.5rem }
/* cómo calculamos: el acordeón de las preguntas frecuentes, con dos tablas y las fuentes */
.factura__how{ max-width:60rem }
.factura__body{ max-width:none; display:flex; flex-direction:column; gap:1.75rem }
.factura__body p{ max-width:40rem }
.factura__tables{ display:flex; flex-direction:column; gap:2rem }
.factura__table{ width:100%; border-collapse:collapse; font-size:.85rem; line-height:1.4 }
.factura__table caption{ text-align:left; padding-bottom:.75rem }
.factura__table th,.factura__table td{ padding:.65rem .75rem .65rem 0; border-bottom:1px solid var(--line); text-align:right; vertical-align:top }
.factura__table th:first-child,.factura__table td:first-child{ text-align:left }
.factura__table tbody th{ font-weight:500 }
.factura__table td:last-child{ padding-right:0 }
.factura__sources{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.8rem; color:var(--muted-fg) }
.factura__a{ color:var(--accent-fill); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; transition:color var(--t-ui) var(--ease) }
.factura__a:hover{ color:var(--fg) }
@media (max-width:559px){
  .factura select.input{ font-size:1.1rem }
  .factura__unit{ align-items:end }   /* si "Horas al día" se parte en dos líneas, los campos siguen alineados por abajo */
  .factura__table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .factura__table caption{ display:block }
  .factura__table th,.factura__table td{ white-space:nowrap }
  .factura__table tbody th{ white-space:normal; min-width:9rem }
  .factura__bar{ grid-template-columns:6rem minmax(0,1fr) auto; gap:.75rem }
}
/* ---------- movimiento ligado al scroll: tarjetas que suben, hero con el producto flotando, guiones de avance y servicios apilados ----------
   Solo transform y opacity, sin JavaScript; respeta "reducir movimiento"; donde el navegador no soporta animaciones
   ligadas al scroll (animation-timeline) queda el revelado de siempre. Los tiempos del revelado viven en el CSS base (.reveal). */

/* 1. Tarjetas que suben mientras bajas: cada una avanza según su posición en la pantalla;
      las pares y las cuartas recorren más y arrancan un poco después, como columnas a distinta velocidad */
@keyframes rise{ from{ opacity:0; transform:translateY(var(--rise,3rem)) } to{ opacity:1; transform:none } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .products .product,.js .cats .cat,.js .quotes .quote,.js .branches .branch{ --rise:4rem; animation:rise cubic-bezier(.5,1,.89,1) backwards; animation-timeline:view(); animation-range:entry 0% cover 32% }   /* backwards: al terminar, la tarjeta recupera su transform normal (el hover de .product) */
    .js .products .product:nth-child(even),.js .cats .cat:nth-child(even),.js .quotes .quote:nth-child(even),.js .branches .branch:nth-child(even){ --rise:6.5rem; animation-range:entry 6% cover 38% }
    .js .products .product:nth-child(3n),.js .cats .cat:nth-child(3n),.js .quotes .quote:nth-child(3n),.js .branches .branch:nth-child(3n){ --rise:5rem; animation-range:entry 3% cover 35% }
    .js .products .product:nth-child(4n),.js .cats .cat:nth-child(4n){ --rise:7.5rem; animation-range:entry 9% cover 42% }
    .js .products .product--featured{ --rise:3rem; animation-range:entry 0% cover 14% }
  }
}

/* 2. Hero: el producto flota sobre un cielo y un suelo con horizonte; al bajar sube más rápido que la página y la palabra de fondo se queda atrás */
.hero--stage{ position:relative; overflow:hidden; isolation:isolate; padding-top:0 }
.hero--stage .grid{ align-items:center }
.hero--stage .hero__copy{ position:relative; z-index:2; padding-top:3rem }
.hero__stage{ order:-1; grid-column:1 / -1; position:relative; height:58vh; min-height:22rem; margin-inline:calc(-1 * var(--gut)); overflow:hidden }
@media (min-width:1024px){
  .hero--stage{ min-height:100vh; padding-block:0; align-items:center }
  .hero--stage .hero__copy{ grid-column:1 / span 7; padding-block:6rem 5rem }
  .hero__stage{ order:0; position:absolute; inset:0 0 0 48%; height:auto; min-height:100vh; margin:0 }
  .stage__sky{ inset:0 0 auto 0; height:64vh }
  .stage__floor{ inset:64vh 0 0 0 }
  .stage__product{ top:64vh; bottom:auto }
}
/* el producto es un PNG con transparencia (recortar-blanco.ps1 sobre la foto del catálogo); el horizonte va al 64 % de la altura */
.stage__sky{ position:absolute; inset:0 0 36% 0; background:linear-gradient(180deg,#F5F7F9 0%,#E8EEF3 50%,#DCE4EB 100%) }
.stage__floor{ position:absolute; inset:64% 0 0 0; background:linear-gradient(180deg,#CFD7DE 0%,#DEE4E9 45%,#F5F7F9 100%) }
.stage__floor::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:rgba(31,35,40,.16) }
.stage__word{
  position:absolute; left:0; bottom:-.12em; z-index:1; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--serif); font-style:italic; font-size:clamp(8rem,24vw,21rem); line-height:.82; letter-spacing:-.02em;
  color:rgba(31,35,40,.07); white-space:nowrap; pointer-events:none; user-select:none;
}
.stage__product{ position:absolute; left:50%; bottom:36%; width:min(70%,20rem,50vh); height:0; transform:translateX(-50%); z-index:2 }   /* alto 0: el cuerpo cuelga hacia arriba desde el horizonte */
@media (min-width:1024px){ .stage__product{ width:min(54%,25rem,50vh) } }
.stage__body{ position:absolute; left:0; right:0; bottom:0 }
.stage__img{ display:block; width:100%; height:auto }
.stage__product picture{ display:contents }   /* el <picture> (WebP con PNG de respaldo) no cambia la caja de la imagen */
.stage__reflection{
  position:absolute; top:100%; left:0; width:100%; height:auto; transform:scaleY(-1);
  opacity:.45; filter:blur(2px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.75),transparent 62%); mask-image:linear-gradient(to top,rgba(0,0,0,.75),transparent 62%);
}
.stage__caption{ position:absolute; right:var(--gut); bottom:1.25rem; z-index:3; margin:0 }
.js .stage__body{ animation:stage-in 1400ms cubic-bezier(.22,1,.36,1) 100ms both }
@keyframes stage-in{ from{ opacity:0; transform:translateY(20px) scale(1.03) } to{ opacity:1; transform:none } }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .stage__product{ animation:stage-product linear both; animation-timeline:scroll(root); animation-range:0 80vh }
    .stage__word{ animation:stage-word linear both; animation-timeline:scroll(root); animation-range:0 80vh }
  }
}
@keyframes stage-product{ from{ transform:translate(-50%,0) } to{ transform:translate(-50%,-24vh) } }
@keyframes stage-word{ from{ transform:rotate(180deg) translateY(0) } to{ transform:rotate(180deg) translateY(-14vh) } }

/* 3. Guiones de avance a la derecha (solo escritorio): se van llenando con el recorrido de la página */
.scrollmark{ position:fixed; right:1.25rem; top:50%; transform:translateY(-50%); z-index:6; display:none; flex-direction:column; gap:.5rem }
@media (min-width:1024px){ .scrollmark{ display:flex } }
.scrollmark i{ display:block; width:1px; height:1.5rem; background:rgba(31,35,40,.16); position:relative }
.scrollmark i::after{ content:""; position:absolute; inset:0; background:var(--fg); transform:scaleY(0); transform-origin:top }
@keyframes dash{ to{ transform:scaleY(1) } }
@supports (animation-timeline: scroll()){
  .scrollmark i::after{ animation:dash linear both; animation-timeline:scroll(root) }
  .scrollmark i:nth-child(1)::after{ animation-range:0% 14.3% }
  .scrollmark i:nth-child(2)::after{ animation-range:14.3% 28.6% }
  .scrollmark i:nth-child(3)::after{ animation-range:28.6% 42.9% }
  .scrollmark i:nth-child(4)::after{ animation-range:42.9% 57.2% }
  .scrollmark i:nth-child(5)::after{ animation-range:57.2% 71.5% }
  .scrollmark i:nth-child(6)::after{ animation-range:71.5% 85.8% }
  .scrollmark i:nth-child(7)::after{ animation-range:85.8% 100% }
}

/* 4. Servicios apilados (como el StickyCard de Skiper 16): cada tarjeta se queda pegada arriba
      y, cuando llega la siguiente, la anterior se encoge detrás dejando ver una franja. Sin JavaScript:
      el progreso es el del bloque entero (de arriba-arriba a abajo-abajo), repartido en cuartos por tarjeta. */
/* Las tarjetas son de vidrio esmerilado blanco con esquinas redondeadas (pedido de Esteban, solo en esta zona): translúcidas, con el brillo
   que deja la luz en la esquina superior izquierda, el canto blanco fino y lo de atrás difuminado. Sin color: solo blanco y transparencia. */
.stack{ view-timeline-name:--stack; view-timeline-axis:block; position:relative; display:flex; flex-direction:column; gap:4vh; padding-block:2vh 10vh }
.stack__card{
  position:sticky; top:calc(6rem + var(--i,0) * 1.25rem); height:62vh; min-height:24rem; max-height:40rem;
  transform-origin:top center; overflow:hidden; border-radius:1.75rem;
  background:linear-gradient(135deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.52) 55%, rgba(255,255,255,.62) 100%);
  -webkit-backdrop-filter:blur(40px) saturate(1.1); backdrop-filter:blur(40px) saturate(1.1);   /* difumina lo de atrás hasta dejarlo en una bruma, no en texto legible */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 20px 40px rgba(31,35,40,.08);
  transition:box-shadow 700ms cubic-bezier(.22,1,.36,1);
}
.stack__card::before{   /* el canto del vidrio: filete de 1 px blanco que se apaga hacia abajo, recortado con máscara para que solo quede el borde */
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.25) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
.stack__card::after{   /* el brillo: una veladura blanca diagonal, más viva cuando el cursor pasa por encima */
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:.75;
  background:linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 32%, rgba(255,255,255,0) 52%, rgba(255,255,255,.22) 100%);
  transition:opacity 700ms cubic-bezier(.22,1,.36,1);
}
.stack__card:hover::after,.stack__card:focus-within::after{ opacity:1 }
.stack__card:hover,.stack__card:focus-within{ box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.4), 0 32px 64px rgba(31,35,40,.12) }
.stack__inner{ position:relative; z-index:1; display:grid; grid-template-rows:auto auto; height:100%; transition:transform 700ms cubic-bezier(.22,1,.36,1) }
.stack__card:hover .stack__inner{ transform:translateY(-4px) }   /* la tarjeta se levanta apenas (el transform de la tarjeta lo usa la animación de la pila) */
@media (prefers-reduced-motion: reduce){ .stack__card:hover .stack__inner{ transform:none } }
/* la foto va sobre una placa blanca redondeada dentro del vidrio: las fotos del catálogo traen fondo blanco y sobre el vidrio se vería el rectángulo */
.stack__media{ height:28vh; min-height:0; display:flex; align-items:center; justify-content:center; margin:1rem 1rem 0; border-radius:1.1rem; background:#F5F5F7 }
@media (max-width:767px){ .stack__card{ height:auto; min-height:0; max-height:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) } }   /* en el teléfono la tarjeta mide lo que mide su contenido; desenfoque más ligero: cuatro vidrios superpuestos pesan en móviles modestos */
.stack__media img{ width:auto; height:100%; max-width:100%; object-fit:contain; padding:6%; mix-blend-mode:multiply }
.stack__text{ display:flex; flex-direction:column; gap:.75rem; padding:1.5rem 1.5rem 1.75rem }
.stack__text h3{ font-size:clamp(1.6rem,3vw,2.75rem) }
.stack__text p{ color:#6E6E73; line-height:1.7; max-width:30rem }
.stack__text .link{ align-self:flex-start; margin-top:.25rem }
@media (min-width:768px){
  .stack__inner{ grid-template-rows:none; grid-template-columns:minmax(0,5fr) minmax(0,6fr) }
  .stack__media{ height:auto; margin:1.25rem 0 1.25rem 1.25rem }
  .stack__text{ gap:1rem; padding:3rem; justify-content:center }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .stack__card{ animation:stack-shrink linear both; animation-timeline:--stack }
    .stack__card:nth-child(1){ animation-range:contain 0% contain 100% }
    .stack__card:nth-child(2){ animation-range:contain 25% contain 100% }
    .stack__card:nth-child(3){ animation-range:contain 50% contain 100% }
    .stack__card:nth-child(4){ animation-range:contain 75% contain 100% }
  }
}
@keyframes stack-shrink{ to{ transform:scale(var(--target,1)) } }
@media (max-width:767px) and (max-height:760px){ .stack__card{ position:relative; top:auto; animation:none } }   /* pantalla corta: la tarjeta no cabe bajo su tope pegajoso y taparía su enlace; fluye normal */
.stack__card:focus-within{ z-index:3 }   /* al navegar con teclado, la tarjeta con el foco sube por encima de las que la cubren */
/* ---------- exportación: franja en la portada (tras el hero) y vista #/exportacion ---------- */
/* franja compacta: una sola línea bajo el hero (Esteban la quiso pequeña mientras se planea el resto) */
.export-strip{ padding-block:1.25rem }
.export-strip__line{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin:0; font-size:.95rem; line-height:1.6; color:var(--muted-fg) }
.export-strip__line .micro{ color:var(--fg) }
.export-strip__line .link{ font-size:.62rem }
.export{ display:flex; flex-direction:column; gap:5rem }
.export__block{ display:grid; grid-template-columns:1fr; gap:2rem }
@media (min-width:1024px){ .export__block{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:4rem } }
.export__head{ display:flex; flex-direction:column; gap:1rem }
.export__head p:not(.overline){ color:var(--muted-fg); line-height:1.7; max-width:26rem }
.export__countries{ display:flex; flex-direction:column; gap:1.75rem }
.export__region{ display:flex; flex-direction:column; gap:.75rem }
.export__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem }
.export__chip{ display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem 1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; border:1px solid var(--line-strong) }
.export__note{ font-size:.85rem; color:var(--muted-fg); line-height:1.6; max-width:40rem; margin:0 }
.export__cats{ display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:640px){ .export__cats{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem } }
.export__cat{ padding:1.5rem 0 2rem; border-top:1px solid var(--fg); display:flex; flex-direction:column; gap:.6rem; color:inherit }
.export__cat h3{ font-size:1.4rem }
.export__cat p{ color:var(--muted-fg); font-size:.95rem; line-height:1.65; flex:1 }
.export__cat .link{ align-self:flex-start; margin-top:.5rem }
.export__cat:hover .link::after{ transform:scaleX(1) }
.export__steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:768px){ .export__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3rem } }
.export__step{ padding:1.5rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:1rem }
.export__step .micro{ padding-top:.4rem }
.export__step h3{ font-size:1.35rem }
.export__step p{ color:var(--muted-fg); line-height:1.65; margin-top:.5rem }
.export__why{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:768px){ .export__why{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem } }
.export__why div{ padding-top:1.25rem; border-top:1px solid var(--fg) }
.export__why strong{ display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.2; margin-bottom:.5rem }
.export__why p{ color:var(--muted-fg); line-height:1.65; font-size:.95rem }
.export__cta{ display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; align-items:center; padding-top:2.5rem; border-top:1px solid var(--fg) }
/* pie: línea con un enlace por país (la escribe hacer-paises.ps1) */
.footer__paises{ margin-top:3rem; font-size:.78rem; line-height:1.9; color:rgba(245,247,249,.62); max-width:48rem }
.footer__paises a{ color:rgba(245,247,249,.85); text-decoration:underline; text-underline-offset:.2em; text-decoration-color:rgba(245,247,249,.3); transition:color var(--t-ui) var(--ease) }
.footer__paises a:hover{ color:#fff }

.export__chip a{ color:inherit; text-decoration:none }   /* los países con página propia enlazan a ella */
.export__chip a:hover{ color:var(--accent-fill) }
.product__meta [data-spec]{ display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.4rem .75rem }
.th-1{ background-image:url(/fotos-web/th-1.jpg); background-image:image-set(url(/fotos-web/th-1.webp?v=eab78383) type("image/webp"), url(/fotos-web/th-1.jpg) type("image/jpeg")) }
.th-2{ background-image:url(/fotos-web/th-2.jpg); background-image:image-set(url(/fotos-web/th-2.webp?v=f7f1bb65) type("image/webp"), url(/fotos-web/th-2.jpg) type("image/jpeg")) }
.th-3{ background-image:url(/fotos-web/th-3.jpg); background-image:image-set(url(/fotos-web/th-3.webp?v=3dd44ca0) type("image/webp"), url(/fotos-web/th-3.jpg) type("image/jpeg")) }
.th-4{ background-image:url(/fotos-web/th-4.jpg); background-image:image-set(url(/fotos-web/th-4.webp?v=194c7514) type("image/webp"), url(/fotos-web/th-4.jpg) type("image/jpeg")) }
.th-5{ background-image:url(/fotos-web/th-5.jpg); background-image:image-set(url(/fotos-web/th-5.webp?v=1cf147eb) type("image/webp"), url(/fotos-web/th-5.jpg) type("image/jpeg")) }
.th-6{ background-image:url(/fotos-web/th-6.jpg); background-image:image-set(url(/fotos-web/th-6.webp?v=aff57699) type("image/webp"), url(/fotos-web/th-6.jpg) type("image/jpeg")) }
.th-7{ background-image:url(/fotos-web/th-7.jpg); background-image:image-set(url(/fotos-web/th-7.webp?v=ff593458) type("image/webp"), url(/fotos-web/th-7.jpg) type("image/jpeg")) }
.th-8{ background-image:url(/fotos-web/th-8.jpg); background-image:image-set(url(/fotos-web/th-8.webp?v=e685c7eb) type("image/webp"), url(/fotos-web/th-8.jpg) type("image/jpeg")) }
.th-9{ background-image:url(/fotos-web/th-9.jpg); background-image:image-set(url(/fotos-web/th-9.webp?v=6b908851) type("image/webp"), url(/fotos-web/th-9.jpg) type("image/jpeg")) }
.th-10{ background-image:url(/fotos-web/th-10.jpg); background-image:image-set(url(/fotos-web/th-10.webp?v=249a3c77) type("image/webp"), url(/fotos-web/th-10.jpg) type("image/jpeg")) }
.th-11{ background-image:url(/fotos-web/th-11.jpg); background-image:image-set(url(/fotos-web/th-11.webp?v=b0389b2a) type("image/webp"), url(/fotos-web/th-11.jpg) type("image/jpeg")) }
.th-12{ background-image:url(/fotos-web/th-12.jpg); background-image:image-set(url(/fotos-web/th-12.webp?v=2f407e25) type("image/webp"), url(/fotos-web/th-12.jpg) type("image/jpeg")) }
.th-13{ background-image:url(/fotos-web/th-13.jpg); background-image:image-set(url(/fotos-web/th-13.webp?v=b9052dbb) type("image/webp"), url(/fotos-web/th-13.jpg) type("image/jpeg")) }
.th-14{ background-image:url(/fotos-web/th-14.jpg); background-image:image-set(url(/fotos-web/th-14.webp?v=3c7811b5) type("image/webp"), url(/fotos-web/th-14.jpg) type("image/jpeg")) }
.th-15{ background-image:url(/fotos-web/th-15.jpg); background-image:image-set(url(/fotos-web/th-15.webp?v=daaedf10) type("image/webp"), url(/fotos-web/th-15.jpg) type("image/jpeg")) }
.th-16{ background-image:url(/fotos-web/th-16.jpg); background-image:image-set(url(/fotos-web/th-16.webp?v=1223bf89) type("image/webp"), url(/fotos-web/th-16.jpg) type("image/jpeg")) }
.th-17{ background-image:url(/fotos-web/th-17.jpg); background-image:image-set(url(/fotos-web/th-17.webp?v=31983379) type("image/webp"), url(/fotos-web/th-17.jpg) type("image/jpeg")) }
.th-18{ background-image:url(/fotos-web/th-18.jpg); background-image:image-set(url(/fotos-web/th-18.webp?v=7274f48f) type("image/webp"), url(/fotos-web/th-18.jpg) type("image/jpeg")) }
.th-19{ background-image:url(/fotos-web/th-19.jpg); background-image:image-set(url(/fotos-web/th-19.webp?v=e6ebc15b) type("image/webp"), url(/fotos-web/th-19.jpg) type("image/jpeg")) }
.th-20{ background-image:url(/fotos-web/th-20.jpg); background-image:image-set(url(/fotos-web/th-20.webp?v=34b18ccd) type("image/webp"), url(/fotos-web/th-20.jpg) type("image/jpeg")) }
.th-21{ background-image:url(/fotos-web/th-21.jpg); background-image:image-set(url(/fotos-web/th-21.webp?v=27b59a3a) type("image/webp"), url(/fotos-web/th-21.jpg) type("image/jpeg")) }
.th-22{ background-image:url(/fotos-web/th-22.jpg); background-image:image-set(url(/fotos-web/th-22.webp?v=d0e1faeb) type("image/webp"), url(/fotos-web/th-22.jpg) type("image/jpeg")) }
.th-23{ background-image:url(/fotos-web/th-23.jpg); background-image:image-set(url(/fotos-web/th-23.webp?v=b7ab5141) type("image/webp"), url(/fotos-web/th-23.jpg) type("image/jpeg")) }
.th-24{ background-image:url(/fotos-web/th-24.jpg); background-image:image-set(url(/fotos-web/th-24.webp?v=60ed3a32) type("image/webp"), url(/fotos-web/th-24.jpg) type("image/jpeg")) }
.th-25{ background-image:url(/fotos-web/th-25.jpg); background-image:image-set(url(/fotos-web/th-25.webp?v=b56fbc8e) type("image/webp"), url(/fotos-web/th-25.jpg) type("image/jpeg")) }
.th-26{ background-image:url(/fotos-web/th-26.jpg); background-image:image-set(url(/fotos-web/th-26.webp?v=2d1d05a5) type("image/webp"), url(/fotos-web/th-26.jpg) type("image/jpeg")) }
.th-27{ background-image:url(/fotos-web/th-27.jpg); background-image:image-set(url(/fotos-web/th-27.webp?v=bb6b5ddd) type("image/webp"), url(/fotos-web/th-27.jpg) type("image/jpeg")) }
.th-28{ background-image:url(/fotos-web/th-28.jpg); background-image:image-set(url(/fotos-web/th-28.webp?v=9f34e73b) type("image/webp"), url(/fotos-web/th-28.jpg) type("image/jpeg")) }
.th-29{ background-image:url(/fotos-web/th-29.jpg); background-image:image-set(url(/fotos-web/th-29.webp?v=56cb6e57) type("image/webp"), url(/fotos-web/th-29.jpg) type("image/jpeg")) }
.th-30{ background-image:url(/fotos-web/th-30.jpg); background-image:image-set(url(/fotos-web/th-30.webp?v=d617579f) type("image/webp"), url(/fotos-web/th-30.jpg) type("image/jpeg")) }
.th-31{ background-image:url(/fotos-web/th-31.jpg); background-image:image-set(url(/fotos-web/th-31.webp?v=40349e51) type("image/webp"), url(/fotos-web/th-31.jpg) type("image/jpeg")) }
.th-32{ background-image:url(/fotos-web/th-32.jpg); background-image:image-set(url(/fotos-web/th-32.webp?v=30e79251) type("image/webp"), url(/fotos-web/th-32.jpg) type("image/jpeg")) }
.th-33{ background-image:url(/fotos-web/th-33.jpg); background-image:image-set(url(/fotos-web/th-33.webp?v=3b4705f0) type("image/webp"), url(/fotos-web/th-33.jpg) type("image/jpeg")) }
.th-34{ background-image:url(/fotos-web/th-34.jpg); background-image:image-set(url(/fotos-web/th-34.webp?v=4cea654f) type("image/webp"), url(/fotos-web/th-34.jpg) type("image/jpeg")) }
.th-35{ background-image:url(/fotos-web/th-35.jpg); background-image:image-set(url(/fotos-web/th-35.webp?v=d9694075) type("image/webp"), url(/fotos-web/th-35.jpg) type("image/jpeg")) }
.th-36{ background-image:url(/fotos-web/th-36.jpg); background-image:image-set(url(/fotos-web/th-36.webp?v=abd1071e) type("image/webp"), url(/fotos-web/th-36.jpg) type("image/jpeg")) }
.th-37{ background-image:url(/fotos-web/th-37.jpg); background-image:image-set(url(/fotos-web/th-37.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-37.jpg) type("image/jpeg")) }
.th-38{ background-image:url(/fotos-web/th-38.jpg); background-image:image-set(url(/fotos-web/th-38.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-38.jpg) type("image/jpeg")) }
.th-39{ background-image:url(/fotos-web/th-39.jpg); background-image:image-set(url(/fotos-web/th-39.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-39.jpg) type("image/jpeg")) }
.th-40{ background-image:url(/fotos-web/th-40.jpg); background-image:image-set(url(/fotos-web/th-40.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-40.jpg) type("image/jpeg")) }
.th-41{ background-image:url(/fotos-web/th-41.jpg); background-image:image-set(url(/fotos-web/th-41.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-41.jpg) type("image/jpeg")) }
.th-42{ background-image:url(/fotos-web/th-42.jpg); background-image:image-set(url(/fotos-web/th-42.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-42.jpg) type("image/jpeg")) }
.th-43{ background-image:url(/fotos-web/th-43.jpg); background-image:image-set(url(/fotos-web/th-43.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-43.jpg) type("image/jpeg")) }
.th-44{ background-image:url(/fotos-web/th-44.jpg); background-image:image-set(url(/fotos-web/th-44.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-44.jpg) type("image/jpeg")) }
.th-45{ background-image:url(/fotos-web/th-45.jpg); background-image:image-set(url(/fotos-web/th-45.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-45.jpg) type("image/jpeg")) }
.th-46{ background-image:url(/fotos-web/th-46.jpg); background-image:image-set(url(/fotos-web/th-46.webp?v=8d279430) type("image/webp"), url(/fotos-web/th-46.jpg) type("image/jpeg")) }
.th-47{ background-image:url(/fotos-web/th-47.jpg); background-image:image-set(url(/fotos-web/th-47.webp?v=b71db346) type("image/webp"), url(/fotos-web/th-47.jpg) type("image/jpeg")) }
.th-48{ background-image:url(/fotos-web/th-48.jpg); background-image:image-set(url(/fotos-web/th-48.webp?v=58b0faa0) type("image/webp"), url(/fotos-web/th-48.jpg) type("image/jpeg")) }
.th-49{ background-image:url(/fotos-web/th-49.jpg); background-image:image-set(url(/fotos-web/th-49.webp?v=b154d617) type("image/webp"), url(/fotos-web/th-49.jpg) type("image/jpeg")) }
.th-50{ background-image:url(/fotos-web/th-50.jpg); background-image:image-set(url(/fotos-web/th-50.webp?v=aa5c0629) type("image/webp"), url(/fotos-web/th-50.jpg) type("image/jpeg")) }
.th-51{ background-image:url(/fotos-web/th-51.jpg); background-image:image-set(url(/fotos-web/th-51.webp?v=5bfb28f6) type("image/webp"), url(/fotos-web/th-51.jpg) type("image/jpeg")) }
.th-52{ background-image:url(/fotos-web/th-52.jpg); background-image:image-set(url(/fotos-web/th-52.webp?v=5a3d3c65) type("image/webp"), url(/fotos-web/th-52.jpg) type("image/jpeg")) }
.th-53{ background-image:url(/fotos-web/th-53.jpg); background-image:image-set(url(/fotos-web/th-53.webp?v=083ccf21) type("image/webp"), url(/fotos-web/th-53.jpg) type("image/jpeg")) }
.th-54{ background-image:url(/fotos-web/th-54.jpg); background-image:image-set(url(/fotos-web/th-54.webp?v=84f1571c) type("image/webp"), url(/fotos-web/th-54.jpg) type("image/jpeg")) }
.th-55{ background-image:url(/fotos-web/th-55.jpg); background-image:image-set(url(/fotos-web/th-55.webp?v=5607bc6c) type("image/webp"), url(/fotos-web/th-55.jpg) type("image/jpeg")) }
.th-56{ background-image:url(/fotos-web/th-56.jpg); background-image:image-set(url(/fotos-web/th-56.webp?v=e17f9d10) type("image/webp"), url(/fotos-web/th-56.jpg) type("image/jpeg")) }
.th-57{ background-image:url(/fotos-web/th-57.jpg); background-image:image-set(url(/fotos-web/th-57.webp?v=d5914f10) type("image/webp"), url(/fotos-web/th-57.jpg) type("image/jpeg")) }
.th-58{ background-image:url(/fotos-web/th-58.jpg); background-image:image-set(url(/fotos-web/th-58.webp?v=7060f065) type("image/webp"), url(/fotos-web/th-58.jpg) type("image/jpeg")) }
.th-59{ background-image:url(/fotos-web/th-59.jpg); background-image:image-set(url(/fotos-web/th-59.webp?v=3599709a) type("image/webp"), url(/fotos-web/th-59.jpg) type("image/jpeg")) }
.th-60{ background-image:url(/fotos-web/th-60.jpg); background-image:image-set(url(/fotos-web/th-60.webp?v=e4e05db2) type("image/webp"), url(/fotos-web/th-60.jpg) type("image/jpeg")) }
.th-61{ background-image:url(/fotos-web/th-61.jpg); background-image:image-set(url(/fotos-web/th-61.webp?v=31038990) type("image/webp"), url(/fotos-web/th-61.jpg) type("image/jpeg")) }
.th-62{ background-image:url(/fotos-web/th-62.jpg); background-image:image-set(url(/fotos-web/th-62.webp?v=8191d130) type("image/webp"), url(/fotos-web/th-62.jpg) type("image/jpeg")) }
.th-63{ background-image:url(/fotos-web/th-63.jpg); background-image:image-set(url(/fotos-web/th-63.webp?v=1a851f17) type("image/webp"), url(/fotos-web/th-63.jpg) type("image/jpeg")) }
.th-64{ background-image:url(/fotos-web/th-64.jpg); background-image:image-set(url(/fotos-web/th-64.webp?v=5614b959) type("image/webp"), url(/fotos-web/th-64.jpg) type("image/jpeg")) }
.th-65{ background-image:url(/fotos-web/th-65.jpg); background-image:image-set(url(/fotos-web/th-65.webp?v=94902d65) type("image/webp"), url(/fotos-web/th-65.jpg) type("image/jpeg")) }
.th-66{ background-image:url(/fotos-web/th-66.jpg?v=66e0a865); background-image:image-set(url(/fotos-web/th-66.webp?v=b8dd993a) type("image/webp"), url(/fotos-web/th-66.jpg?v=66e0a865) type("image/jpeg")) }
.th-67{ background-image:url(/fotos-web/th-67.jpg?v=b1781334); background-image:image-set(url(/fotos-web/th-67.webp?v=aed8c2f9) type("image/webp"), url(/fotos-web/th-67.jpg?v=b1781334) type("image/jpeg")) }
.th-68{ background-image:url(/fotos-web/th-68.jpg?v=c3713a2f); background-image:image-set(url(/fotos-web/th-68.webp?v=4122160c) type("image/webp"), url(/fotos-web/th-68.jpg?v=c3713a2f) type("image/jpeg")) }
.th-69{ background-image:url(/fotos-web/th-69.jpg?v=ef70f8a5); background-image:image-set(url(/fotos-web/th-69.webp?v=b5939a82) type("image/webp"), url(/fotos-web/th-69.jpg?v=ef70f8a5) type("image/jpeg")) }
.th-70{ background-image:url(/fotos-web/th-70.jpg?v=246e0755); background-image:image-set(url(/fotos-web/th-70.webp?v=a998b5e1) type("image/webp"), url(/fotos-web/th-70.jpg?v=246e0755) type("image/jpeg")) }
.th-71{ background-image:url(/fotos-web/th-71.jpg?v=05969ce0); background-image:image-set(url(/fotos-web/th-71.webp?v=f24f21ff) type("image/webp"), url(/fotos-web/th-71.jpg?v=05969ce0) type("image/jpeg")) }
.th-72{ background-image:url(/fotos-web/th-72.jpg?v=36bdcc15); background-image:image-set(url(/fotos-web/th-72.webp?v=0c1c3a76) type("image/webp"), url(/fotos-web/th-72.jpg?v=36bdcc15) type("image/jpeg")) }
.th-73{ background-image:url(/fotos-web/th-73.jpg?v=1e3a09f4); background-image:image-set(url(/fotos-web/th-73.webp?v=04a3bfe4) type("image/webp"), url(/fotos-web/th-73.jpg?v=1e3a09f4) type("image/jpeg")) }
.th-74{ background-image:url(/fotos-web/th-74.jpg?v=0d89d7a5); background-image:image-set(url(/fotos-web/th-74.webp?v=bc7cd3f9) type("image/webp"), url(/fotos-web/th-74.jpg?v=0d89d7a5) type("image/jpeg")) }
.th-75{ background-image:url(/fotos-web/th-75.jpg?v=733bde97); background-image:image-set(url(/fotos-web/th-75.webp?v=cd42a52c) type("image/webp"), url(/fotos-web/th-75.jpg?v=733bde97) type("image/jpeg")) }
.th-76{ background-image:url(/fotos-web/th-76.jpg?v=e40d5d95); background-image:image-set(url(/fotos-web/th-76.webp?v=354dda07) type("image/webp"), url(/fotos-web/th-76.jpg?v=e40d5d95) type("image/jpeg")) }
.th-77{ background-image:url(/fotos-web/th-77.jpg?v=c6a1861a); background-image:image-set(url(/fotos-web/th-77.webp?v=77e2b87a) type("image/webp"), url(/fotos-web/th-77.jpg?v=c6a1861a) type("image/jpeg")) }
.th-78{ background-image:url(/fotos-web/th-78.jpg?v=d89a0609); background-image:image-set(url(/fotos-web/th-78.webp?v=1602f1f2) type("image/webp"), url(/fotos-web/th-78.jpg?v=d89a0609) type("image/jpeg")) }
.th-79{ background-image:url(/fotos-web/th-79.jpg?v=4d140e95); background-image:image-set(url(/fotos-web/th-79.webp?v=68dfdb9e) type("image/webp"), url(/fotos-web/th-79.jpg?v=4d140e95) type("image/jpeg")) }
.th-80{ background-image:url(/fotos-web/th-80.jpg?v=145e561f); background-image:image-set(url(/fotos-web/th-80.webp?v=118a73ad) type("image/webp"), url(/fotos-web/th-80.jpg?v=145e561f) type("image/jpeg")) }
.th-81{ background-image:url(/fotos-web/th-81.jpg?v=e2379904); background-image:image-set(url(/fotos-web/th-81.webp?v=c8d7cb0b) type("image/webp"), url(/fotos-web/th-81.jpg?v=e2379904) type("image/jpeg")) }
.th-82{ background-image:url(/fotos-web/th-82.jpg?v=ee384224); background-image:image-set(url(/fotos-web/th-82.webp?v=91276647) type("image/webp"), url(/fotos-web/th-82.jpg?v=ee384224) type("image/jpeg")) }
.th-83{ background-image:url(/fotos-web/th-83.jpg?v=1cba68b4); background-image:image-set(url(/fotos-web/th-83.webp?v=c900bf15) type("image/webp"), url(/fotos-web/th-83.jpg?v=1cba68b4) type("image/jpeg")) }
.th-84{ background-image:url(/fotos-web/th-84.jpg?v=5c5e99a3); background-image:image-set(url(/fotos-web/th-84.webp?v=290e2e12) type("image/webp"), url(/fotos-web/th-84.jpg?v=5c5e99a3) type("image/jpeg")) }
.th-85{ background-image:url(/fotos-web/th-85.jpg?v=a6207771); background-image:image-set(url(/fotos-web/th-85.webp?v=a0225b14) type("image/webp"), url(/fotos-web/th-85.jpg?v=a6207771) type("image/jpeg")) }
.th-86{ background-image:url(/fotos-web/th-86.jpg?v=c34050ae); background-image:image-set(url(/fotos-web/th-86.webp?v=7982b485) type("image/webp"), url(/fotos-web/th-86.jpg?v=c34050ae) type("image/jpeg")) }
.th-87{ background-image:url(/fotos-web/th-87.jpg?v=bdfaf94c); background-image:image-set(url(/fotos-web/th-87.webp?v=1f371906) type("image/webp"), url(/fotos-web/th-87.jpg?v=bdfaf94c) type("image/jpeg")) }
.th-88{ background-image:url(/fotos-web/th-88.jpg?v=8e66969d); background-image:image-set(url(/fotos-web/th-88.webp?v=654b0822) type("image/webp"), url(/fotos-web/th-88.jpg?v=8e66969d) type("image/jpeg")) }
.th-89{ background-image:url(/fotos-web/th-89.jpg?v=b15355aa); background-image:image-set(url(/fotos-web/th-89.webp?v=659ad60a) type("image/webp"), url(/fotos-web/th-89.jpg?v=b15355aa) type("image/jpeg")) }
.th-90{ background-image:url(/fotos-web/th-90.jpg?v=bb098d4e); background-image:image-set(url(/fotos-web/th-90.webp?v=de273899) type("image/webp"), url(/fotos-web/th-90.jpg?v=bb098d4e) type("image/jpeg")) }
.th-91{ background-image:url(/fotos-web/th-91.jpg?v=2e7d69fe); background-image:image-set(url(/fotos-web/th-91.webp?v=10299ea9) type("image/webp"), url(/fotos-web/th-91.jpg?v=2e7d69fe) type("image/jpeg")) }
.th-92{ background-image:url(/fotos-web/th-92.jpg?v=865dd021); background-image:image-set(url(/fotos-web/th-92.webp?v=b9960218) type("image/webp"), url(/fotos-web/th-92.jpg?v=865dd021) type("image/jpeg")) }
.th-93{ background-image:url(/fotos-web/th-93.jpg?v=3da2e8d1); background-image:image-set(url(/fotos-web/th-93.webp?v=0a0b2e0d) type("image/webp"), url(/fotos-web/th-93.jpg?v=3da2e8d1) type("image/jpeg")) }
.th-94{ background-image:url(/fotos-web/th-94.jpg?v=56380313); background-image:image-set(url(/fotos-web/th-94.webp?v=39a166ee) type("image/webp"), url(/fotos-web/th-94.jpg?v=56380313) type("image/jpeg")) }
.th-95{ background-image:url(/fotos-web/th-95.jpg?v=2eae19c0); background-image:image-set(url(/fotos-web/th-95.webp?v=358f8e21) type("image/webp"), url(/fotos-web/th-95.jpg?v=2eae19c0) type("image/jpeg")) }
.th-96{ background-image:url(/fotos-web/th-96.jpg?v=6b8cc402); background-image:image-set(url(/fotos-web/th-96.webp?v=9db259ee) type("image/webp"), url(/fotos-web/th-96.jpg?v=6b8cc402) type("image/jpeg")) }
.th-97{ background-image:url(/fotos-web/th-97.jpg?v=2d1a2215); background-image:image-set(url(/fotos-web/th-97.webp?v=0df204d3) type("image/webp"), url(/fotos-web/th-97.jpg?v=2d1a2215) type("image/jpeg")) }
.th-98{ background-image:url(/fotos-web/th-98.jpg?v=e52ad254); background-image:image-set(url(/fotos-web/th-98.webp?v=2a0ee622) type("image/webp"), url(/fotos-web/th-98.jpg?v=e52ad254) type("image/jpeg")) }
.th-99{ background-image:url(/fotos-web/th-99.jpg?v=b3dcab10); background-image:image-set(url(/fotos-web/th-99.webp?v=39e335b1) type("image/webp"), url(/fotos-web/th-99.jpg?v=b3dcab10) type("image/jpeg")) }
.th-100{ background-image:url(/fotos-web/th-100.jpg?v=b2be64de); background-image:image-set(url(/fotos-web/th-100.webp?v=3d7ee0f7) type("image/webp"), url(/fotos-web/th-100.jpg?v=b2be64de) type("image/jpeg")) }
.th-101{ background-image:url(/fotos-web/th-101.jpg?v=823579ed); background-image:image-set(url(/fotos-web/th-101.webp?v=53950ceb) type("image/webp"), url(/fotos-web/th-101.jpg?v=823579ed) type("image/jpeg")) }
.th-102{ background-image:url(/fotos-web/th-102.jpg?v=0321bedf); background-image:image-set(url(/fotos-web/th-102.webp?v=135f232f) type("image/webp"), url(/fotos-web/th-102.jpg?v=0321bedf) type("image/jpeg")) }
.th-103{ background-image:url(/fotos-web/th-103.jpg?v=1a335ac7); background-image:image-set(url(/fotos-web/th-103.webp?v=2372f71a) type("image/webp"), url(/fotos-web/th-103.jpg?v=1a335ac7) type("image/jpeg")) }
.th-104{ background-image:url(/fotos-web/th-104.jpg?v=f38ae925); background-image:image-set(url(/fotos-web/th-104.webp?v=c96d7873) type("image/webp"), url(/fotos-web/th-104.jpg?v=f38ae925) type("image/jpeg")) }
.th-105{ background-image:url(/fotos-web/th-105.jpg?v=ffd5d845); background-image:image-set(url(/fotos-web/th-105.webp?v=f51d2fbf) type("image/webp"), url(/fotos-web/th-105.jpg?v=ffd5d845) type("image/jpeg")) }
.th-106{ background-image:url(/fotos-web/th-106.jpg?v=0b2986c2); background-image:image-set(url(/fotos-web/th-106.webp?v=1a6945a4) type("image/webp"), url(/fotos-web/th-106.jpg?v=0b2986c2) type("image/jpeg")) }
.th-107{ background-image:url(/fotos-web/th-107.jpg?v=d32e78ae); background-image:image-set(url(/fotos-web/th-107.webp?v=ab070a8b) type("image/webp"), url(/fotos-web/th-107.jpg?v=d32e78ae) type("image/jpeg")) }
.th-108{ background-image:url(/fotos-web/th-108.jpg?v=1fb4e010); background-image:image-set(url(/fotos-web/th-108.webp?v=f7739c44) type("image/webp"), url(/fotos-web/th-108.jpg?v=1fb4e010) type("image/jpeg")) }
.th-109{ background-image:url(/fotos-web/th-109.jpg?v=30cea5ef); background-image:image-set(url(/fotos-web/th-109.webp?v=84603531) type("image/webp"), url(/fotos-web/th-109.jpg?v=30cea5ef) type("image/jpeg")) }
.th-110{ background-image:url(/fotos-web/th-110.jpg?v=50fb4661); background-image:image-set(url(/fotos-web/th-110.webp?v=0a1ea6f3) type("image/webp"), url(/fotos-web/th-110.jpg?v=50fb4661) type("image/jpeg")) }
.th-111{ background-image:url(/fotos-web/th-111.jpg?v=61caf029); background-image:image-set(url(/fotos-web/th-111.webp?v=23dcb074) type("image/webp"), url(/fotos-web/th-111.jpg?v=61caf029) type("image/jpeg")) }
.th-112{ background-image:url(/fotos-web/th-112.jpg?v=d4edf699); background-image:image-set(url(/fotos-web/th-112.webp?v=66513bf8) type("image/webp"), url(/fotos-web/th-112.jpg?v=d4edf699) type("image/jpeg")) }
.th-113{ background-image:url(/fotos-web/th-113.jpg?v=0e8d98c5); background-image:image-set(url(/fotos-web/th-113.webp?v=ce93941f) type("image/webp"), url(/fotos-web/th-113.jpg?v=0e8d98c5) type("image/jpeg")) }
.th-114{ background-image:url(/fotos-web/th-114.jpg?v=fe7a2476); background-image:image-set(url(/fotos-web/th-114.webp?v=228f19c0) type("image/webp"), url(/fotos-web/th-114.jpg?v=fe7a2476) type("image/jpeg")) }
.th-115{ background-image:url(/fotos-web/th-115.jpg?v=b01b1e67); background-image:image-set(url(/fotos-web/th-115.webp?v=d7cb0e08) type("image/webp"), url(/fotos-web/th-115.jpg?v=b01b1e67) type("image/jpeg")) }
.th-116{ background-image:url(/fotos-web/th-116.jpg?v=de8a9f0c); background-image:image-set(url(/fotos-web/th-116.webp?v=9ff5a7fd) type("image/webp"), url(/fotos-web/th-116.jpg?v=de8a9f0c) type("image/jpeg")) }
.th-117{ background-image:url(/fotos-web/th-117.jpg?v=ab23833e); background-image:image-set(url(/fotos-web/th-117.webp?v=5762c4ff) type("image/webp"), url(/fotos-web/th-117.jpg?v=ab23833e) type("image/jpeg")) }
.th-118{ background-image:url(/fotos-web/th-118.jpg?v=2f8365af); background-image:image-set(url(/fotos-web/th-118.webp?v=eaefcbd9) type("image/webp"), url(/fotos-web/th-118.jpg?v=2f8365af) type("image/jpeg")) }
.th-119{ background-image:url(/fotos-web/th-119.jpg?v=c580e68e); background-image:image-set(url(/fotos-web/th-119.webp?v=68435435) type("image/webp"), url(/fotos-web/th-119.jpg?v=c580e68e) type("image/jpeg")) }
.th-120{ background-image:url(/fotos-web/th-120.jpg?v=13761ac0); background-image:image-set(url(/fotos-web/th-120.webp?v=3e5e6a95) type("image/webp"), url(/fotos-web/th-120.jpg?v=13761ac0) type("image/jpeg")) }
.th-121{ background-image:url(/fotos-web/th-121.jpg?v=188fe37a); background-image:image-set(url(/fotos-web/th-121.webp?v=1a8294b7) type("image/webp"), url(/fotos-web/th-121.jpg?v=188fe37a) type("image/jpeg")) }
.th-122{ background-image:url(/fotos-web/th-122.jpg?v=4ad76034); background-image:image-set(url(/fotos-web/th-122.webp?v=76520918) type("image/webp"), url(/fotos-web/th-122.jpg?v=4ad76034) type("image/jpeg")) }
.th-123{ background-image:url(/fotos-web/th-123.jpg?v=d939780c); background-image:image-set(url(/fotos-web/th-123.webp?v=beafddce) type("image/webp"), url(/fotos-web/th-123.jpg?v=d939780c) type("image/jpeg")) }
.th-124{ background-image:url(/fotos-web/th-124.jpg?v=49b110bc); background-image:image-set(url(/fotos-web/th-124.webp?v=1f282a46) type("image/webp"), url(/fotos-web/th-124.jpg?v=49b110bc) type("image/jpeg")) }
.th-125{ background-image:url(/fotos-web/th-125.jpg?v=39ef4ea6); background-image:image-set(url(/fotos-web/th-125.webp?v=3fc8be24) type("image/webp"), url(/fotos-web/th-125.jpg?v=39ef4ea6) type("image/jpeg")) }
.th-126{ background-image:url(/fotos-web/th-126.jpg?v=234cd247); background-image:image-set(url(/fotos-web/th-126.webp?v=b15cae89) type("image/webp"), url(/fotos-web/th-126.jpg?v=234cd247) type("image/jpeg")) }
.th-127{ background-image:url(/fotos-web/th-127.jpg?v=365572c9); background-image:image-set(url(/fotos-web/th-127.webp?v=a8f0d9a9) type("image/webp"), url(/fotos-web/th-127.jpg?v=365572c9) type("image/jpeg")) }
.th-128{ background-image:url(/fotos-web/th-128.jpg?v=c879452c); background-image:image-set(url(/fotos-web/th-128.webp?v=efecaa7f) type("image/webp"), url(/fotos-web/th-128.jpg?v=c879452c) type("image/jpeg")) }
.th-129{ background-image:url(/fotos-web/th-129.jpg?v=6376c5b2); background-image:image-set(url(/fotos-web/th-129.webp?v=cb0bd35e) type("image/webp"), url(/fotos-web/th-129.jpg?v=6376c5b2) type("image/jpeg")) }
.th-130{ background-image:url(/fotos-web/th-130.jpg?v=75d6885d); background-image:image-set(url(/fotos-web/th-130.webp?v=65c18329) type("image/webp"), url(/fotos-web/th-130.jpg?v=75d6885d) type("image/jpeg")) }
.th-131{ background-image:url(/fotos-web/th-131.jpg?v=7f35f5a2); background-image:image-set(url(/fotos-web/th-131.webp?v=836b65b6) type("image/webp"), url(/fotos-web/th-131.jpg?v=7f35f5a2) type("image/jpeg")) }
.th-132{ background-image:url(/fotos-web/th-132.jpg?v=0946a892); background-image:image-set(url(/fotos-web/th-132.webp?v=173b9ab0) type("image/webp"), url(/fotos-web/th-132.jpg?v=0946a892) type("image/jpeg")) }
.th-133{ background-image:url(/fotos-web/th-133.jpg?v=a24040b1); background-image:image-set(url(/fotos-web/th-133.webp?v=aafd7f80) type("image/webp"), url(/fotos-web/th-133.jpg?v=a24040b1) type("image/jpeg")) }
.th-134{ background-image:url(/fotos-web/th-134.jpg?v=892f8061); background-image:image-set(url(/fotos-web/th-134.webp?v=2bfb0b08) type("image/webp"), url(/fotos-web/th-134.jpg?v=892f8061) type("image/jpeg")) }
.th-135{ background-image:url(/fotos-web/th-135.jpg?v=d3ca31ac); background-image:image-set(url(/fotos-web/th-135.webp?v=4a37667f) type("image/webp"), url(/fotos-web/th-135.jpg?v=d3ca31ac) type("image/jpeg")) }
.th-136{ background-image:url(/fotos-web/th-136.jpg?v=121f08af); background-image:image-set(url(/fotos-web/th-136.webp?v=c6455660) type("image/webp"), url(/fotos-web/th-136.jpg?v=121f08af) type("image/jpeg")) }
.th-137{ background-image:url(/fotos-web/th-137.jpg?v=71910f5e); background-image:image-set(url(/fotos-web/th-137.webp?v=f47f0ca5) type("image/webp"), url(/fotos-web/th-137.jpg?v=71910f5e) type("image/jpeg")) }
.th-138{ background-image:url(/fotos-web/th-138.jpg?v=ffd3ddbc); background-image:image-set(url(/fotos-web/th-138.webp?v=0a984a0e) type("image/webp"), url(/fotos-web/th-138.jpg?v=ffd3ddbc) type("image/jpeg")) }
.th-139{ background-image:url(/fotos-web/th-139.jpg?v=382c78ed); background-image:image-set(url(/fotos-web/th-139.webp?v=bcaf2e1d) type("image/webp"), url(/fotos-web/th-139.jpg?v=382c78ed) type("image/jpeg")) }
.th-140{ background-image:url(/fotos-web/th-140.jpg?v=21ce6b5a); background-image:image-set(url(/fotos-web/th-140.webp?v=d422c56f) type("image/webp"), url(/fotos-web/th-140.jpg?v=21ce6b5a) type("image/jpeg")) }
.th-141{ background-image:url(/fotos-web/th-141.jpg?v=847c4811); background-image:image-set(url(/fotos-web/th-141.webp?v=a3fb9690) type("image/webp"), url(/fotos-web/th-141.jpg?v=847c4811) type("image/jpeg")) }
.th-142{ background-image:url(/fotos-web/th-142.jpg?v=e897ade1); background-image:image-set(url(/fotos-web/th-142.webp?v=fb2f40ec) type("image/webp"), url(/fotos-web/th-142.jpg?v=e897ade1) type("image/jpeg")) }
.th-143{ background-image:url(/fotos-web/th-143.jpg?v=5d9916b2); background-image:image-set(url(/fotos-web/th-143.webp?v=5e440014) type("image/webp"), url(/fotos-web/th-143.jpg?v=5d9916b2) type("image/jpeg")) }
.th-144{ background-image:url(/fotos-web/th-144.jpg?v=9b757ce5); background-image:image-set(url(/fotos-web/th-144.webp?v=97f35462) type("image/webp"), url(/fotos-web/th-144.jpg?v=9b757ce5) type("image/jpeg")) }
.th-145{ background-image:url(/fotos-web/th-145.jpg?v=c8b16b19); background-image:image-set(url(/fotos-web/th-145.webp?v=86eded79) type("image/webp"), url(/fotos-web/th-145.jpg?v=c8b16b19) type("image/jpeg")) }
.th-146{ background-image:url(/fotos-web/th-146.jpg?v=e76b5b8b); background-image:image-set(url(/fotos-web/th-146.webp?v=3e6d1828) type("image/webp"), url(/fotos-web/th-146.jpg?v=e76b5b8b) type("image/jpeg")) }
.th-147{ background-image:url(/fotos-web/th-147.jpg?v=bb73e955); background-image:image-set(url(/fotos-web/th-147.webp?v=133d564d) type("image/webp"), url(/fotos-web/th-147.jpg?v=bb73e955) type("image/jpeg")) }
.th-148{ background-image:url(/fotos-web/th-148.jpg?v=66e79ff7); background-image:image-set(url(/fotos-web/th-148.webp?v=3d1cf6a6) type("image/webp"), url(/fotos-web/th-148.jpg?v=66e79ff7) type("image/jpeg")) }
.th-149{ background-image:url(/fotos-web/th-149.jpg?v=f8b4527b); background-image:image-set(url(/fotos-web/th-149.webp?v=09e359cf) type("image/webp"), url(/fotos-web/th-149.jpg?v=f8b4527b) type("image/jpeg")) }
.th-150{ background-image:url(/fotos-web/th-150.jpg?v=e1fb9c3b); background-image:image-set(url(/fotos-web/th-150.webp?v=1d030722) type("image/webp"), url(/fotos-web/th-150.jpg?v=e1fb9c3b) type("image/jpeg")) }
.th-151{ background-image:url(/fotos-web/th-151.jpg?v=a5a17a1a); background-image:image-set(url(/fotos-web/th-151.webp?v=bedd8c85) type("image/webp"), url(/fotos-web/th-151.jpg?v=a5a17a1a) type("image/jpeg")) }
.th-152{ background-image:url(/fotos-web/th-152.jpg?v=cd1d526e); background-image:image-set(url(/fotos-web/th-152.webp?v=4b750b91) type("image/webp"), url(/fotos-web/th-152.jpg?v=cd1d526e) type("image/jpeg")) }
.th-153{ background-image:url(/fotos-web/th-153.jpg?v=46327da8); background-image:image-set(url(/fotos-web/th-153.webp?v=d234d6ba) type("image/webp"), url(/fotos-web/th-153.jpg?v=46327da8) type("image/jpeg")) }
.th-154{ background-image:url(/fotos-web/th-154.jpg?v=1af0a516); background-image:image-set(url(/fotos-web/th-154.webp?v=05dda605) type("image/webp"), url(/fotos-web/th-154.jpg?v=1af0a516) type("image/jpeg")) }
.th-155{ background-image:url(/fotos-web/th-155.jpg?v=a002d0fb); background-image:image-set(url(/fotos-web/th-155.webp?v=0c9ace2f) type("image/webp"), url(/fotos-web/th-155.jpg?v=a002d0fb) type("image/jpeg")) }
.th-156{ background-image:url(/fotos-web/th-156.jpg?v=a7b3b248); background-image:image-set(url(/fotos-web/th-156.webp?v=f5bb095e) type("image/webp"), url(/fotos-web/th-156.jpg?v=a7b3b248) type("image/jpeg")) }
.th-157{ background-image:url(/fotos-web/th-157.jpg?v=6cf392fe); background-image:image-set(url(/fotos-web/th-157.webp?v=1b7f6afe) type("image/webp"), url(/fotos-web/th-157.jpg?v=6cf392fe) type("image/jpeg")) }
.th-158{ background-image:url(/fotos-web/th-158.jpg?v=bdbc1dd1); background-image:image-set(url(/fotos-web/th-158.webp?v=27a69488) type("image/webp"), url(/fotos-web/th-158.jpg?v=bdbc1dd1) type("image/jpeg")) }
.th-159{ background-image:url(/fotos-web/th-159.jpg?v=f58c0c1c); background-image:image-set(url(/fotos-web/th-159.webp?v=1b17a379) type("image/webp"), url(/fotos-web/th-159.jpg?v=f58c0c1c) type("image/jpeg")) }
.th-160{ background-image:url(/fotos-web/th-160.jpg?v=8b91c071); background-image:image-set(url(/fotos-web/th-160.webp?v=853b2ccc) type("image/webp"), url(/fotos-web/th-160.jpg?v=8b91c071) type("image/jpeg")) }
.th-161{ background-image:url(/fotos-web/th-161.jpg?v=6bf43b09); background-image:image-set(url(/fotos-web/th-161.webp?v=85bfd139) type("image/webp"), url(/fotos-web/th-161.jpg?v=6bf43b09) type("image/jpeg")) }
.th-162{ background-image:url(/fotos-web/th-162.jpg?v=08e267bf); background-image:image-set(url(/fotos-web/th-162.webp?v=92efa9c6) type("image/webp"), url(/fotos-web/th-162.jpg?v=08e267bf) type("image/jpeg")) }
.th-163{ background-image:url(/fotos-web/th-163.jpg?v=aef7662a); background-image:image-set(url(/fotos-web/th-163.webp?v=f57a09d4) type("image/webp"), url(/fotos-web/th-163.jpg?v=aef7662a) type("image/jpeg")) }
.th-164{ background-image:url(/fotos-web/th-164.jpg?v=b77a24d2); background-image:image-set(url(/fotos-web/th-164.webp?v=4387f228) type("image/webp"), url(/fotos-web/th-164.jpg?v=b77a24d2) type("image/jpeg")) }
.th-165{ background-image:url(/fotos-web/th-165.jpg?v=838596a1); background-image:image-set(url(/fotos-web/th-165.webp?v=03fbd444) type("image/webp"), url(/fotos-web/th-165.jpg?v=838596a1) type("image/jpeg")) }
.th-166{ background-image:url(/fotos-web/th-166.jpg?v=ed61bb56); background-image:image-set(url(/fotos-web/th-166.webp?v=0ef4b169) type("image/webp"), url(/fotos-web/th-166.jpg?v=ed61bb56) type("image/jpeg")) }
.th-167{ background-image:url(/fotos-web/th-167.jpg?v=664f8f78); background-image:image-set(url(/fotos-web/th-167.webp?v=ecadcd2d) type("image/webp"), url(/fotos-web/th-167.jpg?v=664f8f78) type("image/jpeg")) }

/* ---------- celular: mismas piezas, áreas táctiles de 44px y etiquetas legibles ---------- */
/* El área de toque de los enlaces de texto crece sin mover nada de sitio */
.link::before{ content:""; position:absolute; inset:-.65rem -.35rem }
.brand{ min-height:2.75rem; align-items:center }
.menu-btn{ min-height:2.75rem; padding-inline:.25rem }
@media (max-width:767px){
  .crumbs{ margin-bottom:1.5rem; gap:0 .75rem }
  .crumbs a{ display:inline-flex; align-items:center; min-height:2.75rem; min-width:2.75rem }
  .branch dl{ row-gap:0; align-items:start }
  .branch dt{ padding-top:1.1rem }
  .branch dd:last-of-type{ padding-block:.85rem }
  .branch dd a{ display:inline-block; padding-block:.85rem; overflow-wrap:anywhere }
  .footer ul{ gap:0 }
  .footer li a{ display:inline-block; padding-block:.7rem; min-width:2.75rem }
  .othercats__row{ gap:.5rem 2rem }
  .othercats__row a{ padding-block:.3rem }
  .branch dt,.field label,.form-note,.footer h4,.footer__bottom,.tag{ font-size:.66rem }
  .product__meta{ flex-wrap:wrap; gap:.35rem 1rem }
  .stats{ gap:1.25rem }
  .product--cta .btn{ white-space:normal; text-align:center; height:auto; min-height:3rem; padding-block:.75rem; line-height:1.5 }
}
@media (max-width:639px){
  .products{ grid-template-columns:minmax(0,1fr) }
}
/* Teléfonos angostos (320–360px): los titulares bajan un punto para no cortar palabras */
@media (max-width:380px){
  .h-hero{ font-size:clamp(2.35rem,12.4vw,3rem) }
  .h-page{ font-size:clamp(2.1rem,11vw,2.75rem) }
  .h-section{ font-size:clamp(2.1rem,10.5vw,2.5rem) }
  .wa{ letter-spacing:.14em; padding-inline:.9rem 1rem; height:2.75rem; font-size:.58rem; gap:.6rem; right:1rem; bottom:1rem }   /* más compacta: no tapa los botones del hero ni del pie */
  .btn{ padding-inline:1.5rem }
  .btn--lg{ padding-inline:1.75rem }
}
/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important }
  .reveal{ opacity:1; transform:none }
  .figure__frame img{ filter:grayscale(0); transform:none }
}
/* ---------- portada en celular: títulos centrados y párrafos justificados (revisión de la familia, 2026-10-20) ---------- */
@media (max-width:767px){
  [data-view="home"] .overline,[data-view="home"] .h-hero,[data-view="home"] .h-section{ text-align:center }
  [data-view="home"] .overline{ justify-content:center }
  [data-view="home"] .lede,[data-view="home"] .dropcap{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; margin-inline:auto }
  .hero__actions{ justify-content:center }
  .hero__meta{ justify-content:center; text-align:center }
  .hero__meta div{ align-items:center }
}