/* =============================================================
   Viña Centro — hoja de estilos única del sitio.
   Los valores vienen del prototipo (replicar/*.html); cuando algo
   se aparta de él, va comentado con el motivo.
   ============================================================= */

/* ============ FUENTE ============ */
/* Satoshi (Fontshare, ITF Free Font License) — variable, cubre 300-900.
   Servida local: en el prototipo venía por CDN. */
@font-face{
  font-family:'Satoshi';
  src:url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight:300 900;
  font-display:swap;
  font-style:normal;
}

/* ============ TOKENS ============ */
:root{
  --ink:#161412;
  --ink-2:#111111;        /* footer, levemente distinto al de Sobre Nosotros */
  --ink-soft:#4a4640;
  --stone-50:#faf9f7;
  --stone-100:#f6f6f6;
  --stone-200:#e4e0d9;
  --stone-300:#cdc7bb;
  --accent:#FFDE33;
  --accent-bright:#FFDE33;
  --accent-ink:#161412;
  --line:#d8d3c8;
  --bluex:#0033A1;        /* azul de Blue Express, solo para sus métodos */
  --line-control:#e0e0e0; /* borde de los controles de filtro: algo más marcado
                             que el de las cajas, para que el desplegable se lea
                             como algo con lo que se interactúa */
  --header-bg:#191919;    /* el header no usa ninguna de las variables de arriba */
  --side-pad:clamp(20px, 3vw, 48px);
  --radius:10px;          /* cajas: cards, tiles, fotos */
  --radius-sm:6px;        /* botones, tags, chips */
  --header-h:107px;       /* lo recalcula el JS; 107px es el valor del prototipo */
}

/* ============ RESET ============ */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

body{
  font-family:'Satoshi',system-ui,sans-serif;
  color:var(--ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; }

/* Anillo de foco solo con teclado: la clase .kbd la pone el JS al tabular
   y la quita al tocar/click, para que el foco devuelto al cerrar un panel
   no dibuje un marco en móvil (A5). */
:focus-visible{ outline:none; }
.kbd :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:1000;
  width:auto; height:auto; clip:auto; margin:0;
  padding:12px 18px; background:var(--accent); color:var(--ink);
  border-radius:var(--radius-sm); font-weight:700;
}

.is-hidden{ display:none !important; }

/* ============ UTILIDADES DE LAYOUT ============ */
/* Margen lateral único para todo el sitio, salvo el hero (foto a sangre). */
.wrap{ width:100%; padding:0 var(--side-pad); }
section > .wrap, main .wrap{ max-width:1400px; margin:0 auto; }

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
}

/* Títulos en alta con peso moderado: el contraste lo da el tamaño. */
h1, h2.title, .qs-title{
  font-family:'Satoshi',system-ui,sans-serif;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.01em;
}
/* Sin acotar a h2: el mismo contraste de pesos se usa en títulos h1 (catálogo
   de arriendo). Si se deja `h2.title strong`, el <strong> de un h1 cae en el
   bold del navegador (900) y la parte ligera se queda en 600. */
.title strong{ font-weight:800; }
.title .title-light{ font-weight:400; }
.qs-title--lower{ text-transform:none; }

/* ============ BOTONES ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 24px;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  border-radius:var(--radius-sm);
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-primary{ background:var(--ink); color:var(--stone-50); }
.btn-primary:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.btn-secondary{ background:transparent; color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--stone-50); }

/* ============ HEADER ============ */
.site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); }

.header-utility{ background:var(--ink-2); color:var(--stone-300); }
.header-utility .wrap{
  padding:8px var(--side-pad);
  font-size:11.5px;
  letter-spacing:.03em;
  text-align:center;
}

.header-main{ border-bottom:1px solid rgba(255,255,255,.08); }
.header-main-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px var(--side-pad);
}

.header-logo{
  font-family:'Satoshi',system-ui,sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}
.header-logo img{ height:30px; width:auto; display:block; filter:brightness(0) invert(1); }

.header-nav{ display:flex; align-items:center; gap:10px; flex:1; justify-content:center; }
.header-nav > a{
  font-size:14px;
  font-weight:500;
  color:var(--stone-300);
  text-decoration:none;
  padding:6px 11px;
  border-radius:7px;
  transition:color .15s ease, background-color .15s ease;
}
.header-nav > a:hover{ background:var(--accent); color:var(--ink); }
.header-nav > a.is-active{ background:var(--accent); color:var(--ink); font-weight:700; }

.nav-dropdown{ position:relative; display:flex; align-items:center; }
.nav-dropdown > a{
  font-size:14px;
  font-weight:500;
  color:var(--stone-300);
  text-decoration:none;
  cursor:pointer;
  padding:6px 11px;
  border-radius:7px;
  transition:color .15s ease, background-color .15s ease;
}
.nav-dropdown:hover > a,
.nav-dropdown:focus-within > a{ background:var(--accent); color:var(--ink); }
.nav-dropdown-panel{
  position:absolute;
  top:100%;
  left:50%;
  margin-top:10px;
  background:var(--header-bg);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:8px;
  min-width:214px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
  z-index:5;
}
/* Puente invisible para no perder el hover entre el link y el panel. */
.nav-dropdown-panel::before{
  content:'';
  position:absolute;
  top:-12px;
  left:0;
  right:0;
  height:12px;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.nav-dropdown-panel a{
  display:block;
  padding:9px 12px;
  font-size:13.5px;
  color:var(--stone-50);
  text-decoration:none;
  border-radius:7px;
  transition:background-color .12s ease, color .12s ease;
}
.nav-dropdown-panel a:hover{ background:var(--accent); color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.header-icon-btn{
  position:relative;
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--stone-50);
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.header-icon-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.header-icon-btn svg{ width:18px; height:18px; }

.cart-count{
  position:absolute;
  top:3px;
  right:3px;
  min-width:15px;
  height:15px;
  padding:0 2px;
  border-radius:4px;
  background:var(--accent);
  color:var(--ink);
  font-size:9.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-burger{
  display:none;
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--stone-50);
}
.header-burger svg{ width:18px; height:18px; }

.header-mobile-panel{
  display:none;
  flex-direction:column;
  background:var(--header-bg);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px var(--side-pad) 16px;
}
.header-mobile-panel a{
  padding:13px 0;
  font-size:15px;
  color:var(--stone-50);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-mobile-panel a:last-child{ border-bottom:none; }
.header-mobile-panel.open{ display:flex; }

/* Buscador desplegable: no está en el prototipo (allí el botón es decorativo),
   se resuelve con la misma paleta del header para no introducir un lenguaje nuevo. */
.header-search{ background:var(--header-bg); border-top:1px solid rgba(255,255,255,.08); }
.header-search .wrap{ padding-top:14px; padding-bottom:16px; }
.header-search-form{ display:flex; gap:10px; align-items:center; max-width:640px; margin:0 auto; }
.header-search-form input[type="search"]{
  flex:1;
  height:44px;
  padding:0 14px;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  color:var(--stone-50);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
}
.header-search-form input[type="search"]::placeholder{ color:var(--stone-300); }
.header-search-form input[type="search"]:focus{ border-color:var(--accent); outline:none; }
.header-search-form .btn{ background:var(--accent); color:var(--ink); border-color:var(--accent); }

@media (max-width: 900px){
  .header-nav{ display:none; }
  .header-burger{ display:flex; }
}

/* ============ BOTÓN FLOTANTE WHATSAPP ============ */
.whatsapp-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.1);
  z-index:900;
  text-decoration:none;
}
.whatsapp-fab svg{ width:28px; height:28px; display:block; }

/* ============ HERO ============ */
/* Header + hero cubren el 70% del alto inicial de pantalla. */
.intro-viewport{
  display:flex;
  flex-direction:column;
  height:calc(70vh - var(--header-h));
  min-height:calc(70vh - var(--header-h));
}

.hero{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.photo-grade{ filter:sepia(.25) saturate(.85) contrast(1.05) brightness(.97); }
.hero-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(91,62,23,.16), rgba(20,16,10,.06));
  mix-blend-mode:multiply;
  z-index:1;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.40) 34%, rgba(10,8,6,.04) 64%);
  z-index:1;
}
/* El texto del hero se alinea con el contenido de 1400px en cualquier ancho. */
.hero-content{
  position:relative;
  z-index:2;
  padding:0 var(--side-pad);
  padding-left:calc(max(0px, (100% - 1400px) * 0.4) + var(--side-pad));
  max-width:calc(max(0px, (100% - 1400px) * 0.4) + var(--side-pad) + 532px);
}
.hero-content .eyebrow{ color:var(--stone-300); }
.hero-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border-radius:var(--radius-sm);
  background:rgba(255,222,51,.16);
  border:1px solid rgba(255,222,51,.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  margin-bottom:22px;
}
.hero-badge .label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--stone-50);
}
.hero h1{
  color:var(--stone-50);
  font-size:clamp(20px, 5.4vw, 52px);
  line-height:1.12;
  max-width:none;
  text-transform:none;
}
.hero h1 .hero-line{ display:block; white-space:nowrap; }
.hero-sub{
  margin-top:20px;
  font-size:clamp(15px, 2.2vw, 20px);
  line-height:1.55;
  color:var(--stone-300);
  max-width:100%;
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-ctas{
  display:flex;
  gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}
.hero .btn-primary,
.hero .btn-secondary{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.hero .btn-primary:hover,
.hero .btn-secondary:hover{ background:var(--accent-bright); color:var(--ink); border-color:var(--accent-bright); }

/* En 2K+ la tipografía del hero crece con el ancho de pantalla. */
@media (min-width: 1920px){
  .hero-content{ max-width:calc(max(0px, (100% - 1400px) * 0.4) + var(--side-pad) + min(38vw, 900px)); }
  .hero h1{ font-size:min(3.4vw, 96px); }
  .hero-sub{ font-size:min(1.15vw, 30px); margin-top:26px; }
  .hero-badge{ padding:10px 20px; }
  .hero-badge .label{ font-size:min(.7vw, 18px); }
  .hero-ctas{ margin-top:40px; }
  .hero-ctas .btn{ font-size:min(.85vw, 20px); padding:18px 30px; }
}

/* ── Slider del hero (móvil) y video (escritorio) ── */
.hero-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .7s ease, visibility .7s ease;
  z-index:0;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-nav{
  position:absolute;
  right:clamp(20px, 3vw, 48px);
  bottom:26px;
  display:flex;
  gap:8px;
  z-index:3;
}
.hero-nav-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(10,8,6,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--stone-50);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hero-nav-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.hero-nav-btn svg{ width:15px; height:15px; display:block; }
.hero-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.18);
  z-index:3;
}
.hero-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--accent);
}
.hero-progress span.is-running{ width:100%; transition:width 6.5s linear; }

.hero-video{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; }
.hero-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (min-width: 881px){
  /* Con video cargado, en escritorio el slider no se muestra. */
  .has-hero-video .hero-slide,
  .has-hero-video .hero-nav,
  .has-hero-video .hero-progress{ display:none !important; }
}
@media (max-width: 880px){
  .hero-video{ display:none; }
  .hero-content{ max-width:100%; padding-left:var(--side-pad); }
  .hero h1{ font-size:clamp(23px, 7.2vw, 34px); }
  .hero h1 .hero-line{ white-space:normal; }
  .hero-sub{ white-space:normal; overflow:visible; text-overflow:clip; }
}

/* ============ CÁPSULAS BAJO EL HERO ============ */
.hero-perks{ background:var(--ink); }
.perks-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  padding:18px 0;
}
.perk{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px clamp(20px, 3vw, 32px);
  border-right:1px solid rgba(255,255,255,.15);
  cursor:default;
}
.perk:last-child{ border-right:none; }
.perk-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--accent);
}
.perk-icon svg{ width:22px; height:22px; display:block; }
.perk-label{ font-size:14.5px; font-weight:600; color:var(--stone-50); white-space:nowrap; }
.perk-tooltip{
  position:absolute;
  bottom:100%;
  left:50%;
  width:240px;
  background:var(--stone-50);
  color:var(--ink);
  font-size:12.5px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  white-space:normal;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  margin-bottom:12px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:5;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.perk-tooltip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--stone-50);
}
.perk:hover .perk-tooltip,
.perk:focus .perk-tooltip,
.perk:focus-visible .perk-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}

@media (max-width: 880px){
  .perks-row{ flex-direction:column; padding:14px var(--side-pad); }
  .perk{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.15);
    justify-content:flex-start;
    padding:14px 0;
  }
  .perk:last-child{ border-bottom:none; }
  .perk-tooltip{ left:0; transform:translate(0, 6px); width:100%; max-width:320px; }
  .perk-tooltip::after{ left:24px; }
  .perk:hover .perk-tooltip,
  .perk:focus .perk-tooltip,
  .perk:focus-visible .perk-tooltip{ transform:translate(0, 0); }
}

/* ============ CATEGORÍAS ============ */
section.categorias{
  background:var(--stone-100);
  padding:clamp(48px, 6vw, 64px) 0;
  margin:0 0 40px;
}
.module-box{
  border-radius:var(--radius);
  background:var(--stone-100);
  padding:clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
/* El prototipo repite esta misma regla para `.categorias` y para `.equipos`
   (la landing de arriendo). Se declara una sola vez, sin acotarla a una
   sección, para que la reciba cualquier cabecera de módulo. */
.head-wrap{
  padding-bottom:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.head-wrap .title{ margin:0; }

.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.cat-tile{
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border:1px solid #ececec;
  text-decoration:none;
  color:inherit;
}
.cat-img{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:var(--stone-200);
}
.cat-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.cat-tile:hover .cat-img img{ transform:scale(1.08); }

.cat-label{
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cat-name{ font-size:14.5px; font-weight:700; }
.cat-arrow{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--ink-soft);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cat-tile:hover .cat-arrow{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }

@media (max-width: 1000px){
  .cat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  /* Dos columnas también en móvil: una sola dejaba las categorías gigantes y
     obligaba a un scroll larguísimo para ver las 8. */
  .cat-grid{ gap:12px; }
  /* Con dos por fila los nombres largos parten en 2-3 líneas: la etiqueta se
     estira para que las dos calugas de la fila terminen a la misma altura. */
  .cat-tile{ display:flex; flex-direction:column; }
  .cat-label{ padding:10px 12px; gap:8px; flex:1; }
  .cat-name{ font-size:13px; }
}

/* ============ PRODUCTOS ============ */
section.productos{ padding:40px 0 88px; }

.head-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
  flex-wrap:wrap;
  gap:24px;
}

.tabs{ display:flex; gap:28px; border-bottom:1px solid var(--line); padding-bottom:0; }
.tab{
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:0 0 14px;
  margin-bottom:-1px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.tab:hover{ color:var(--ink); }
.tab.active{ font-weight:700; color:var(--ink); border-bottom-color:var(--accent); }

.head-row-right{ display:flex; align-items:center; gap:12px; }

.carousel{ position:relative; }
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--stone-50);
  color:var(--ink);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .15s ease, color .15s ease;
  z-index:3;
}
.car-btn:hover{ background:var(--ink); color:var(--stone-50); }
.car-btn-prev{ left:-20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, visibility .15s ease, background-color .15s ease, color .15s ease; }
.car-btn-prev.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }
.car-btn-next{ right:-20px; }

.grid{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.grid::-webkit-scrollbar{ display:none; height:0; }

/* ── Card de producto (única para todo el sitio) ── */
.card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 4 * 20px) / 5);
  border:1px solid #ececec;
  border-radius:var(--radius);
  background:#f7f7f7;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .15s ease;
}
.card:hover{ border-color:var(--accent); }
.card-img{
  position:relative;
  aspect-ratio:1/1;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none;
}
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.tag-discount{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  background:var(--accent);
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
  padding:5px 11px;
  border-radius:var(--radius-sm);
}
.card-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.card-cat{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  font-weight:400;
}
.card-title{
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  margin-top:6px;
  flex:1;
  color:inherit;
  text-decoration:none;
}
.card-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.price-now{ font-size:16px; font-weight:800; }
.price-was{ font-size:13px; font-weight:400; color:var(--ink-soft); text-decoration:line-through; }
/* Arriendo: «/ día» junto al precio, mismo tamaño que el tachado pero sin línea. */
.price-per{ font-size:13px; font-weight:400; color:var(--ink-soft); }

/* WooCommerce mete <span class="amount"> dentro del precio: hereda y no estorba. */
.card-price .amount,
.card-price bdi{ font:inherit; color:inherit; }

.card-add-btn{
  display:block;
  width:100%;
  text-align:center;
  margin-top:16px;
  padding:12px 0;
  font-size:13px;
  font-weight:700;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:var(--stone-50);
  border:1px solid var(--ink);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.card-add-btn:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
.card-add-btn--agotado{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--line);
  cursor:default;
}
.card-add-btn--agotado:hover{ background:transparent; color:var(--ink-soft); border-color:var(--line); }

@media (max-width: 1000px){
  .card{ flex:0 0 calc((100% - 20px) / 2); }
}
@media (max-width: 560px){
  .card{ flex:0 0 82%; }
}

/* ============ RESEÑAS ============ */
section.resenas{ padding:0 0 56px; }
.reviews-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:32px;
}
.reviews-head .title{ margin:0; }
.reviews-rating{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.google-logo{ display:flex; flex:0 0 auto; }
.google-logo svg{ width:20px; height:20px; display:block; }
.reviews-stars{ display:flex; gap:2px; color:var(--accent); }
.reviews-stars svg{ width:16px; height:16px; }
.reviews-rating-score{ font-size:20px; font-weight:800; }
.reviews-count{ font-size:13px; color:var(--ink-soft); }

.review-grid{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.review-grid::-webkit-scrollbar{ display:none; height:0; }
.review-card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 3 * 20px) / 4);
  background:var(--stone-50);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.review-top{ display:flex; align-items:center; gap:12px; }
.review-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--stone-200);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  flex:0 0 auto;
}
.review-name{ font-size:13.5px; font-weight:700; }
.review-date{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.review-stars{ display:flex; gap:2px; color:var(--accent); }
.review-stars svg{ width:13px; height:13px; }
.review-text{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); flex:1; }

@media (max-width: 1000px){
  .review-card{ flex:0 0 calc((100% - 20px) / 2); }
}
@media (max-width: 560px){
  .review-card{ flex:0 0 82%; }
}

/* ============ BLOQUE «NOSOTROS» (monta sobre el footer) ============ */
.quienes{
  display:flex;
  align-items:stretch;
  margin-bottom:64px;
  min-height:180px;
  background:var(--header-bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 16px 36px rgba(17,17,17,.14);
}
.quienes-content{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px, 4vw, 56px);
  flex-wrap:wrap;
  text-align:left;
  color:var(--stone-50);
  padding:26px clamp(28px, 4vw, 56px);
}
.qs-title{
  text-align:left;
  font-size:clamp(19px, 2vw, 27px);
  line-height:1.25;
  margin-bottom:0;
}
.qs-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }
.quienes .eyebrow{ color:var(--stone-300); margin-bottom:8px; }
.quienes .btn-primary{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.quienes .btn-primary:hover{ background:var(--stone-50); color:var(--ink); border-color:var(--stone-50); }
.quienes .btn-secondary{ background:transparent; color:var(--stone-50); border-color:rgba(255,255,255,.4); }
.quienes .btn-secondary:hover{ background:var(--stone-50); color:var(--ink); border-color:var(--stone-50); }

@media (max-width: 880px){
  .quienes{ flex-direction:column; min-height:auto; }
  .quienes-content{ flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:20px; padding:28px clamp(24px, 5vw, 40px); }
  .qs-title{ font-size:23px; }
}

/* ============ FOOTER ============ */
footer.site-footer{
  /* Franja clara arriba: el bloque «Nosotros» queda centrado sobre la línea. */
  background:linear-gradient(180deg, #ffffff 0, #ffffff 90px, var(--ink-2) 90px, var(--ink-2) 100%);
  color:var(--stone-300);
  padding:0;
}
footer.site-footer .wrap{ max-width:1400px; margin:0 auto; }
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto auto auto auto;
  gap:clamp(36px, 4vw, 64px);
  padding-bottom:52px;
}
/* El margen derecho de la columna del menú la empuja hacia el logo. */
.footer-grid > .footer-col:nth-child(2){ margin-right:clamp(32px, 6vw, 110px); }
.footer-brand{ font-size:24px; font-weight:800; color:var(--stone-50); letter-spacing:-0.01em; }
.footer-brand-desc{ font-size:15.5px; color:var(--stone-300); margin-top:16px; line-height:1.65; max-width:300px; }
.footer-col-title{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone-300);
  margin-bottom:18px;
}
.footer-col a{
  display:block;
  color:var(--stone-50);
  text-decoration:none;
  font-size:13.5px;
  padding:7px 0;
  transition:color .15s ease;
}
.footer-col a:hover{ color:var(--accent); }
.footer-logo-img{ height:34px; width:auto; display:block; filter:brightness(0) invert(1); }
.footer-contact-item{ padding:7px 0; }
.footer-contact-k{ font-size:13.5px; font-weight:600; color:var(--stone-50); margin-bottom:2px; }
.footer-contact-v{ font-size:13.5px; color:var(--stone-300); font-weight:400; line-height:1.5; }
.footer-contact-v a{ display:inline; padding:0; font-size:13.5px; color:var(--stone-300); text-decoration:none; transition:color .15s ease; }
.footer-contact-v a:hover{ color:var(--accent); }
.footer-connect a{ display:flex; align-items:center; gap:10px; }
.footer-connect a svg{ width:18px; height:18px; flex:0 0 auto; }
.footer-map{ width:240px; max-width:100%; height:150px; border:0; border-radius:var(--radius-sm); display:block; }
.footer-map-col iframe{ border-radius:var(--radius-sm); margin-top:10px; display:block; }
.footer-bottom-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-plain{ font-size:14.5px; color:var(--stone-50); padding:7px 0; }
.footer-plain.muted{ color:var(--stone-300); }

.footer-pay-row{ padding:20px 0 24px; }
.footer-pay-logos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-pay-logos img{ height:40px; width:auto; display:block; }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  font-size:12.5px;
  color:var(--stone-300);
  flex-wrap:wrap;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom a{ color:var(--stone-300); text-decoration:underline; font-weight:700; }

@media (max-width: 880px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ============ CATÁLOGO ============ */
.page-head{ padding:40px 0 0; }
.page-head .breadcrumb{ margin-bottom:18px; }

/* Título del catálogo de venta, con el número de resultados al lado. */
.page-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:30px;
}
.page-title{ font-size:30px; }
.page-title-count{
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
}
@media (max-width: 680px){
  .page-title{ font-size:24px; }
  .page-title-row{ margin-bottom:22px; }
}

section.catalogo{ padding:0 0 88px; }
.catalogo-head{ margin-bottom:28px; }
.catalogo-head .title{ font-size:clamp(24px, 3vw, 38px); }

.filters-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.filters-group{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:200px;
}
.filter-field label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.filter-field select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:1px solid var(--line-control);
  border-radius:var(--radius-sm);
  background-color:#f7f7f7;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
  color:var(--ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  padding:11px 36px 11px 14px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.filter-field select:hover{ border-color:var(--ink-soft); }
/* Foco discreto propio: muchos navegadores aplican :focus-visible al <select>
   con solo tocarlo, y heredaría el anillo global (A5). */
.filter-field select:focus,
.filter-field select:focus-visible{ outline:none; border-color:var(--ink); }
.filter-field--submit{ justify-content:flex-end; min-width:0; }

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
}

.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:40px;
}
.page-btn{
  min-width:38px;
  height:38px;
  padding:0 6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--stone-50);
  color:var(--ink-soft);
  font-size:13.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.page-btn:hover{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }
.page-btn.active{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }
.pagination .page-btn.dots{ border-color:transparent; background:transparent; cursor:default; }

@media (max-width: 1280px){
  .catalog-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width: 1000px){
  .catalog-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 700px){
  .catalog-grid{ grid-template-columns:repeat(2, 1fr); }
  .filter-field{ min-width:0; flex:1 1 160px; }
  .filters-group{ flex:1 1 100%; }
}
@media (max-width: 560px){
  /* Dos columnas también aquí: con una sola, ver el catálogo era un scroll
     interminable y cada card ocupaba casi la pantalla entera. */
  .catalog-grid{ gap:12px; }
}

/* ============ TOASTS (feedback único del sitio) ============ */
.vca-toasts{
  position:fixed;
  right:20px;
  bottom:92px; /* sobre el botón de WhatsApp */
  z-index:950;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:min(360px, calc(100vw - 40px));
  pointer-events:none;
}
.vca-toast{
  background:var(--ink);
  color:var(--stone-50);
  font-size:13.5px;
  line-height:1.5;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.vca-toast.is-visible{ opacity:1; transform:translateY(0); }
.vca-toast--exito{ background:#1f6b34; }
.vca-toast--error{ background:#8f2d1b; }
.vca-toast--aviso{ background:var(--accent); color:var(--ink); font-weight:600; }

@media (max-width: 560px){
  .vca-toasts{ right:12px; left:12px; max-width:none; bottom:88px; }
}

/* ============ FICHA DE PRODUCTO ============ */
.pdp3-grid{
  display:grid;
  grid-template-columns:1fr 1fr 360px;
  gap:40px;
  align-items:start;
  padding:24px 0 72px;
}

/* ── Col 1: galería ── */
.pdp3-gallery{ display:flex; flex-direction:column; gap:10px; }
.pdp3-viewer{ position:relative; }

/* Flechas sobre la foto principal. Solo en móvil: en escritorio las
   miniaturas ya se ven todas de un vistazo. */
.pdp3-fl{
  position:absolute;
  top:50%;                        /* del visor, que es solo la foto */
  transform:translateY(-50%);
  width:38px; height:38px;
  display:none;
  align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  cursor:pointer;
  padding:0;
  z-index:2;                      /* la foto es un <button> y se comería el clic */
}
.pdp3-fl--prev{ left:10px; }
.pdp3-fl--next{ right:10px; }
.pdp3-fl:active{ background:#fff; }
.pdp3-img-main{
  position:relative;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid #ececec;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:zoom-in;
}
.pdp3-img-main img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.pdp3-img-main:hover img{ transform:scale(1.06); }
/* Es un <button> para poder abrirlo con teclado: hay que apagar su aspecto. */
.pdp3-img-main{ padding:0; font:inherit; width:100%; }

/* Pista de que la foto se amplía: la lupa aparece al pasar por encima. */
.pdp3-zoom-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.pdp3-img-main:hover .pdp3-zoom-hint,
.pdp3-img-main:focus-visible .pdp3-zoom-hint{ opacity:1; transform:none; }

/* ── Lightbox de la galería ── */
.pdp3-lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(17,17,17,.92);
  display:flex; align-items:center; justify-content:center;
}
/* ⚠️ display:flex pisa el atributo [hidden]: hay que apagarlo a mano o el
   overlay cerrado sigue capturando los clics (A12). */
.pdp3-lightbox[hidden]{ display:none; }
.pdp3-lb-img{
  max-width:min(88vw, 1000px); max-height:80vh;
  object-fit:contain; border-radius:var(--radius); background:#fff;
}
.pdp3-lb-close,
.pdp3-lb-btn{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pdp3-lb-close{ top:20px; right:24px; width:44px; height:44px; font-size:22px; }
.pdp3-lb-btn{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:26px; }
.pdp3-lb-close:hover,
.pdp3-lb-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.pdp3-lb-prev{ left:24px; }
.pdp3-lb-next{ right:24px; }
.pdp3-lb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.85);
}
@media (max-width: 680px){
  .pdp3-lb-img{ max-width:94vw; }
  .pdp3-lb-btn{ width:40px; height:40px; font-size:22px; }
  .pdp3-lb-prev{ left:10px; }
  .pdp3-lb-next{ right:10px; }
  .pdp3-lb-close{ top:14px; right:14px; }
}
.pdp3-thumbs{ display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; }
.pdp3-thumb{
  width:80px; height:80px; flex-shrink:0;
  background:#fff; border:1px solid #ececec; border-radius:var(--radius-sm);
  overflow:hidden; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s;
}
.pdp3-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp3-thumb.is-active, .pdp3-thumb:hover{ border-color:var(--accent); }

/* ── Col 2: información ── */
.pdp3-info{ padding-top:4px; }
.pdp3-brand-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A67C00; margin-bottom:8px; }
.pdp3-name{ font-size:clamp(18px,2vw,26px); font-weight:700; line-height:1.2; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.pdp3-sku{ font-size:12px; color:var(--ink-soft); margin-bottom:20px; }
.pdp3-divider{ height:1px; background:#ececec; margin-bottom:20px; }
.pdp3-short-desc{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin-bottom:24px; }
.pdp3-specs-label{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.pdp3-specs-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.pdp3-specs-table tr{ border-bottom:1px solid #ececec; }
.pdp3-specs-table tr:last-child{ border-bottom:none; }
.pdp3-specs-table td{ padding:10px 12px; }
.pdp3-specs-table td:first-child{ font-weight:600; color:var(--ink); width:44%; background:var(--stone-100); }
.pdp3-specs-table td:last-child{ color:var(--ink-soft); }
.pdp3-specs-table tr:first-child td:first-child{ border-top-left-radius:var(--radius-sm); }
.pdp3-specs-table tr:first-child td:last-child{ border-top-right-radius:var(--radius-sm); }
.pdp3-specs-table tr:last-child td:first-child{ border-bottom-left-radius:var(--radius-sm); }
.pdp3-specs-table tr:last-child td:last-child{ border-bottom-right-radius:var(--radius-sm); }

/* ── Col 3: caja de compra ── */
.pdp3-commerce-outer{ min-width:0; }
.pdp3-commerce{
  position:sticky; top:24px;
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:28px 24px;
}
.pdp3-price-normal-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.pdp3-price-label{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.pdp3-price-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.pdp3-price-main{ font-size:clamp(26px,2.6vw,34px); font-weight:800; color:var(--ink); }
.pdp3-price-old{ font-size:14px; color:var(--ink-soft); text-decoration:line-through; }
.pdp3-price-row .tag-discount{ position:static; }
.pdp3-price-iva{ font-size:11px; color:var(--ink-soft); margin-bottom:16px; }
.pdp3-price-per{ font-size:15px; font-weight:600; color:var(--ink-soft); }
/* Woo envuelve el importe en <span class="amount">: hereda y no estorba. */
.pdp3-price-main .amount, .pdp3-price-main bdi,
.pdp3-price-old .amount, .pdp3-price-old bdi{ font:inherit; color:inherit; }

.pdp3-stock-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#2a7038; margin-bottom:20px; }
.pdp3-stock-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2a7038; display:block; flex-shrink:0; }
.pdp3-stock-badge--agotado{ color:#9a3412; }
.pdp3-stock-badge--agotado::before{ background:#9a3412; }

.pdp3-qty-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pdp3-qty-label{ font-size:13px; font-weight:600; color:var(--ink); flex-shrink:0; }
.pdp3-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; height:40px; background:#fff; }
.pdp3-qty-btn{ background:none; border:none; width:36px; height:40px; font-size:17px; font-weight:500; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pdp3-qty-btn:hover{ background:var(--stone-200); }
/* El input reemplaza al <span> del prototipo: mismo aspecto, pero editable. */
.pdp3-qty-val{
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px; font-weight:600;
  width:44px; height:40px;
  text-align:center;
  border:none; background:transparent; color:var(--ink);
  -moz-appearance:textfield;
}
.pdp3-qty-val::-webkit-outer-spin-button,
.pdp3-qty-val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pdp3-qty-val:focus, .pdp3-qty-val:focus-visible{ outline:none; }

.pdp3-buy{
  display:block; width:100%; height:48px;
  background:var(--ink); color:var(--stone-50);
  border:1px solid var(--ink); border-radius:var(--radius-sm);
  font-family:'Satoshi',system-ui,sans-serif; font-size:14px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  margin-bottom:10px;
}
.pdp3-buy:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.pdp3-buy:disabled{ opacity:.4; cursor:not-allowed; }
.pdp3-buy:disabled:hover{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }
.pdp3-add{
  display:block; width:100%; height:48px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:'Satoshi',system-ui,sans-serif; font-size:14px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  margin-bottom:24px;
}
.pdp3-add:hover{ border-color:var(--ink); }

.pdp3-trust{ display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid #ececec; }
.pdp3-trust-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-soft); }
.pdp3-trust-item svg{ flex-shrink:0; stroke-width:2.2; }

/* ── Pestañas de la ficha ── */
.pdp3-tabs-section{ padding:0 0 64px; }
.pdp-tab-nav{ display:flex; border-bottom:2px solid #ececec; margin-bottom:28px; }
.pdp-tab-btn{
  background:none; border:none;
  border-bottom:2.5px solid transparent; margin-bottom:-2px;
  padding:12px 18px;
  font-family:'Satoshi',system-ui,sans-serif; font-size:14px; font-weight:600;
  color:var(--ink-soft); cursor:pointer;
  transition:color .15s, border-color .15s;
}
.pdp-tab-btn.is-active{ color:var(--ink); border-bottom-color:var(--ink); }
.pdp-tab-btn:hover:not(.is-active){ color:var(--ink); }
.pdp-tab-panel{ display:none; }
.pdp-tab-panel.is-active{ display:block; }
.pdp-desc-body p{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px; }
.pdp-desc-body p:last-child{ margin-bottom:0; }
.pdp-specs-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.pdp-specs-table tr{ border-bottom:1px solid #ececec; }
.pdp-specs-table tr:last-child{ border-bottom:none; }
.pdp-specs-table td{ padding:10px 12px; }
.pdp-specs-table td:first-child{ font-weight:600; color:var(--ink); width:44%; background:var(--stone-100); }
.pdp-specs-table td:last-child{ color:var(--ink-soft); }

/* ── Relacionados ── */
section.relacionados-b{ padding:0 0 72px; }
section.relacionados-b .head-row{ margin-bottom:32px; }
/* En el prototipo este h2 va sin la clase .title: sin caja alta ni tracking. */
.section-title{ font-size:24px; font-weight:700; line-height:1.3; }

/* ── Responsive de la ficha ── */
.pdp3-mobile-header{ display:none; }

@media(max-width:1100px){
  .pdp3-grid{ grid-template-columns:1fr 1fr; }
  .pdp3-commerce-outer{ grid-column:1 / -1; }
  .pdp3-commerce{ position:static; }
}
@media(max-width:680px){
  .pdp3-grid{ grid-template-columns:1fr; gap:18px; }   /* eran 40px: demasiado aire entre bloques */
  .pdp3-commerce-outer{ grid-column:auto; order:3; }
  .pdp3-gallery{ order:1; }
  .pdp3-mobile-header{ display:block; order:2; padding-top:0; }
  .pdp3-info{ order:4; }

  /* Las flechas solo aquí: son para pasar fotos con el pulgar. */
  .pdp3-fl{ display:flex; }

  /* En arriendo, primero el calendario y después el precio: la fecha es lo que
     define el total, así que pedirla después de mostrar el importe es
     enseñar un número que todavía no significa nada. En esa ficha la columna
     de información contiene solo el calendario (las specs van en pestañas). */
  .pdp3-grid--arriendo .pdp3-info{ order:3; }
  .pdp3-grid--arriendo .pdp3-commerce-outer{ order:4; }
  /* El título vive en pdp3-mobile-header; el de la columna de info se oculta. */
  .pdp3-info .pdp3-brand-label,
  .pdp3-info .pdp3-name,
  .pdp3-info .pdp3-sku,
  .pdp3-info .pdp3-divider{ display:none; }

  .pdp-tab-nav{ overflow-x:auto; scrollbar-width:none; }
  .pdp-tab-nav::-webkit-scrollbar{ display:none; }
  .pdp-tab-btn{ flex:0 0 auto; white-space:nowrap; padding:12px 14px; }
}

/* ============ PÁGINAS SIMPLES (contenido, búsqueda, 404) ============ */
section.pagina{ padding:56px 0 80px; }
.page-head-inner{ margin-bottom:32px; }
.page-head-inner .title{ font-size:clamp(24px, 3vw, 38px); }
.entry-content{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); max-width:75ch; }
.entry-content > * + *{ margin-top:18px; }
.entry-content h2,
.entry-content h3{ color:var(--ink); margin-top:32px; }
.entry-content a{ color:var(--ink); }

.post-list{ display:grid; gap:28px; max-width:75ch; }
.post-item-title{ font-size:20px; font-weight:700; line-height:1.3; }
.post-item-title a{ color:var(--ink); text-decoration:none; }
.post-item-title a:hover{ color:var(--ink-soft); }
.post-item-excerpt{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin-top:8px; }

.estado-vacio{ font-size:15px; color:var(--ink-soft); }
.pagina-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* Breadcrumb (lo usan las páginas interiores) */
.breadcrumb-bar{ padding:40px 0 8px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); list-style:none; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; transition:color .15s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .bc-sep{ opacity:.4; }
.breadcrumb .bc-current{ color:var(--ink); font-weight:500; }

/* ── Ficha en modalidad ARRIENDO ── */
.pdp3-rent-tag{
  display:inline-flex; align-items:center;
  background:var(--accent); color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--radius-sm);
  margin-bottom:14px;
}
.pdp3-rent-garantia{ font-size:16px; font-weight:700; margin:2px 0 8px; }
.pdp3-rent-garantia .amount, .pdp3-rent-garantia bdi{ font:inherit; color:inherit; }

/* ============ LANDING DE ARRIENDO ============ */
.rent-hero{ padding:clamp(48px, 6vw, 72px) 0 64px; }
.rent-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
}
.rent-hero h1{
  text-transform:none;
  font-weight:400;
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:1.08;
  letter-spacing:-.015em;
}
.rent-hero h1 strong{ font-weight:800; }
.rent-hero-sub{
  margin-top:20px;
  font-size:clamp(15px, 1.6vw, 17.5px);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:520px;
}
.rent-hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.rent-hero-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--stone-200);
}
.rent-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rent-hero-photo .photo-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(91,62,23,.2), rgba(20,16,10,.08));
  mix-blend-mode:multiply;
}
.rent-hero-chip{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:2;
  background:var(--accent);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:var(--radius-sm);
}
@media (max-width: 880px){
  .rent-hero-grid{ grid-template-columns:1fr; }
}

/* ── Datos rápidos ── */
.rent-facts{ padding:8px 0 0; }
.rent-facts-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.fact{ background:var(--stone-100); border-radius:14px; padding:26px 28px; }
.fact-label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.fact-value{ margin-top:8px; font-size:15.5px; font-weight:700; line-height:1.4; }
@media (max-width: 1000px){
  .rent-facts-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .rent-facts-grid{ grid-template-columns:1fr; }
}

/* ── Equipos disponibles ── */
section.equipos{ padding:72px 0 0; }

/* ── Cómo arrendar ── */
section.como-arrendar{ padding:clamp(72px, 9vw, 104px) 0 0; }
.como-head{
  text-align:center;
  max-width:560px;
  margin:0 auto clamp(36px, 4.5vw, 52px);
}
.como-head .eyebrow{ margin-bottom:12px; }
.steps-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid #ececec;
  border-bottom:1px solid #ececec;
}
.step{
  padding:clamp(32px, 3.5vw, 48px) clamp(24px, 3vw, 44px);
  border-left:1px solid #ececec;
}
.step:first-child{ border-left:none; }
.step-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:var(--accent);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
}
.step-title{ font-size:19px; font-weight:800; line-height:1.25; margin-bottom:10px; }
.step-text{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
@media (max-width: 880px){
  .steps-row{ grid-template-columns:1fr; }
  .step{ border-left:none; border-top:1px solid #ececec; padding:28px 0; }
  .step:first-child{ border-top:none; }
}

/* ── Condiciones del servicio ── */
section.condiciones{ padding:clamp(64px, 8vw, 96px) 0 88px; }
.cond-box{
  background:var(--stone-100);
  /* El prototipo pide --radius-lg, que nunca se define: caía en esquinas rectas
     entre cajas redondeadas. Se usa el radio del sistema. */
  border-radius:var(--radius);
  padding:clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.cond-intro p{
  margin-top:16px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:380px;
}
.cond-items{ display:flex; flex-direction:column; gap:22px; }
.cond-item{ display:flex; gap:16px; align-items:flex-start; }
.cond-check{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cond-check svg{ width:13px; height:13px; stroke-width:3; }
.cond-item p{ font-size:15px; line-height:1.6; color:var(--ink); padding-top:4px; }
@media (max-width: 880px){
  .cond-box{ grid-template-columns:1fr; gap:28px; }
}

/* ============ CATÁLOGO DE ARRIENDO: pills de categoría ============ */
.rent-cat-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:40px;
}
.rc-pill{
  padding:11px 14px;
  border-radius:999px;
  border:1px solid #ececec;
  background:#f7f7f7;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rc-pill:hover{ border-color:var(--ink); color:var(--ink); }
.rc-pill.is-active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
@media (max-width: 1100px){
  .rent-cat-nav{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .rent-cat-nav{ display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none; }
  .rent-cat-nav::-webkit-scrollbar{ display:none; }
  .rc-pill{ flex:0 0 auto; }
}

/* ============ CALENDARIO DE ARRIENDO ============ */
.rent-cal{ border:1px solid #ececec; border-radius:var(--radius); padding:16px; }
.rent-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
/* Solo la inicial: `capitalize` convertiría «agosto de 2026» en «Agosto De 2026». */
.rent-cal-month{ font-size:14.5px; font-weight:700; }
.rent-cal-month::first-letter{ text-transform:uppercase; }
.rent-cal-nav{
  width:30px; height:30px; border-radius:var(--radius-sm);
  border:1px solid #ececec; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.rent-cal-nav:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); }
.rent-cal-nav:disabled{ opacity:.35; cursor:default; }
.rent-cal-nav svg{ width:14px; height:14px; stroke-width:2.4; }
.rent-cal-week, .rent-cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.rent-cal-week span{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; padding:4px 0 8px;
}
.rent-cal-day{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:13px; font-weight:500; color:var(--ink);
  background:#f7f7f7; border:none; border-radius:8px; cursor:pointer;
  transition:background-color .12s ease, color .12s ease;
}
.rent-cal-day:hover:not(:disabled){ background:var(--accent); }
.rent-cal-day:disabled{ background:transparent; color:#c9c9c9; cursor:default; }
.rent-cal-day.is-vacio{ visibility:hidden; }
.rent-cal-day.in-rango{ background:#FFF3C0; }
.rent-cal-day.is-inicio, .rent-cal-day.is-fin{ background:var(--ink); color:#fff; font-weight:700; }
.rent-cal-hint{ margin-top:12px; font-size:12px; line-height:1.55; color:var(--ink-soft); }

/* ── Resumen y reserva ── */
.rent-resumen{ margin-bottom:16px; }
.rr-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:3px 0; color:var(--ink-soft); }
.rr-row strong{ color:var(--ink); font-weight:600; }
.rr-total{ padding-top:8px; font-size:14px; }
.rr-total span{ font-weight:700; color:var(--ink); }
.rr-total strong{ font-size:16px; font-weight:800; }
.rent-acepto{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  margin-bottom:12px; cursor:pointer;
}
.rent-acepto input{ margin-top:2px; width:15px; height:15px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; }
.rent-acepto a{ color:var(--ink); font-weight:600; }

/* Día sin cupo: se distingue del deshabilitado por fin de semana. */
.rent-cal-day.is-ocupado{
  background:#f7f7f7;
  color:#c9c9c9;
  position:relative;
}
.rent-cal-day.is-ocupado::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#c56a4e;
}

/* ============ SIDECART (carrito lateral) ============ */
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(10,8,6,.45);
  opacity:0;
  transition:opacity .25s ease;
  z-index:980;
}
.drawer-overlay.is-open{ opacity:1; }

.sidecart{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  background:#fff;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:990;
  box-shadow:-12px 0 34px rgba(15,23,42,.16);
}
.sidecart.is-open{ transform:translateX(0); }
.sidecart.is-cargando{ opacity:.6; pointer-events:none; }

.sidecart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px var(--side-pad);
  border-bottom:1px solid #ececec;
  flex:0 0 auto;
}
.sidecart-head h2{ font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.sidecart-close{
  width:34px; height:34px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.sidecart-close:hover{ background:var(--ink); color:var(--stone-50); }

.sidecart .widget_shopping_cart_content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.sidecart-body{ flex:1 1 auto; overflow-y:auto; padding:8px var(--side-pad); }

.sidecart-vacio{ padding:48px 0; text-align:center; display:flex; flex-direction:column; gap:20px; align-items:center; }

.sidecart-list{ list-style:none; margin:0; padding:0; }
.sidecart-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid #ececec;
}
.sidecart-item:last-child{ border-bottom:none; }
.sidecart-item.is-problema{ background:rgba(197,106,78,.05); }

/* Sin esto, un producto cuya miniatura no se generó carga la imagen completa
   y rompe el panel con scroll horizontal (A4). */
.sidecart-thumb{
  width:64px; height:64px;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:#f7f7f7;
}
.sidecart-thumb img{ width:100%; height:100%; max-width:100%; object-fit:cover; display:block; }

.sidecart-info{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.sidecart-nombre{ font-size:13.5px; font-weight:600; line-height:1.35; }
.sidecart-nombre a{ color:inherit; text-decoration:none; }
.sidecart-nombre a:hover{ color:var(--ink-soft); }
.sidecart-meta{ font-size:11.5px; color:var(--ink-soft); line-height:1.45; }
.sidecart-alerta{ font-size:11.5px; font-weight:700; color:#8f2d1b; }
.sidecart-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; flex-wrap:wrap; }
.sidecart-qty{ height:34px; }
.sidecart-qty .pdp3-qty-btn{ width:30px; height:34px; font-size:15px; }
.sidecart-qty .pdp3-qty-val{ width:36px; height:34px; font-size:13px; }
.sidecart-qty-fija{ font-size:12px; color:var(--ink-soft); }
.sidecart-precio{ font-size:14px; font-weight:800; white-space:nowrap; }
.sidecart-precio .amount, .sidecart-precio bdi{ font:inherit; color:inherit; }

.sidecart-quitar{
  background:none;
  border:none;
  color:var(--ink-soft);
  cursor:pointer;
  padding:4px;
  border-radius:var(--radius-sm);
  transition:color .15s ease, background-color .15s ease;
}
.sidecart-quitar:hover{ color:#8f2d1b; background:rgba(143,45,27,.08); }

.sidecart-foot{
  flex:0 0 auto;
  border-top:1px solid #ececec;
  padding:18px var(--side-pad) 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--stone-100);
}
.sidecart-subtotal{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sidecart-subtotal span{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.sidecart-subtotal strong{ font-size:20px; font-weight:800; }
.sidecart-subtotal .amount, .sidecart-subtotal bdi{ font:inherit; color:inherit; }
.sidecart-nota{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.sidecart-nota--alerta{ color:#8f2d1b; font-weight:600; }
.sidecart-pagar, .sidecart-ver{ justify-content:center; width:100%; }
.sidecart-pagar:disabled{ opacity:.45; cursor:not-allowed; }
.sidecart-pagar:disabled:hover{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .sidecart, .drawer-overlay{ transition:none; }
}

/* `display:flex` de .sidecart pisaría el atributo [hidden] y el panel seguiría
   activo (capturando clics) aunque estuviera cerrado. Hay que ser explícito. */
.sidecart[hidden], .drawer-overlay[hidden]{ display:none; }

/* WooCommerce inyecta «Ver carrito» bajo el botón tras agregar por AJAX: el
   sidecart ya se abre solo, así que ese enlace sobra y rompe la card. */
.added_to_cart{ display:none !important; }

/* El símbolo de moneda va con su propio tamaño en el CSS de Woo. */
.woocommerce-Price-currencySymbol{ font:inherit; }

/* ============ CARRITO ============ */
section.carrito{ padding:24px 0 88px; }
.carrito-titulo{ font-size:clamp(24px, 3vw, 38px); margin-bottom:32px; }

.carrito-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:40px;
  align-items:start;
}

.carrito-item{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid #ececec;
  align-items:start;
}
.carrito-item:first-child{ border-top:1px solid #ececec; }
.carrito-item.is-problema{ background:rgba(197,106,78,.05); }

.carrito-item-img{
  width:110px; height:110px;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid #ececec;
  background:#fff;
}
.carrito-item-img img{ width:100%; height:100%; max-width:100%; object-fit:cover; display:block; }

.carrito-item-info{ min-width:0; }
.carrito-item-nombre{ font-size:15.5px; font-weight:700; line-height:1.35; }
.carrito-item-nombre a{ color:inherit; text-decoration:none; }
.carrito-item-nombre a:hover{ color:var(--ink-soft); }
.carrito-item-sku{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.carrito-item-periodo{ margin-top:12px; }
.carrito-item-periodo .pdp3-rent-tag{ margin-bottom:8px; }
.carrito-item-fechas{ font-size:13px; line-height:1.6; color:var(--ink-soft); }
.carrito-item-fechas strong{ color:var(--ink); font-weight:600; }
.carrito-item-extra{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; }
.carrito-item-extra p{ margin:0; }
.carrito-item-alerta{ font-size:12.5px; font-weight:600; color:#8f2d1b; margin-top:10px; }

.carrito-item-acciones{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  text-align:right;
}
.carrito-item-precio{ font-size:16px; font-weight:800; white-space:nowrap; }
.carrito-item-precio .amount, .carrito-item-precio bdi{ font:inherit; color:inherit; }
.carrito-qty-fija{ font-size:12.5px; color:var(--ink-soft); }
.carrito-quitar{
  font-size:12px;
  color:var(--ink-soft);
  text-decoration:underline;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.carrito-quitar:hover{ color:#8f2d1b; }

.carrito-acciones{ display:flex; gap:12px; flex-wrap:wrap; padding-top:24px; }

/* ── Resumen ── */
.carrito-resumen-caja{
  position:sticky;
  top:24px;
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:28px 24px;
}
.carrito-resumen-titulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:18px; }
.carrito-resumen table{ width:100%; border-collapse:collapse; font-size:14px; }
.carrito-resumen th, .carrito-resumen td{ padding:9px 0; text-align:left; font-weight:400; color:var(--ink-soft); }
.carrito-resumen td{ text-align:right; color:var(--ink); font-weight:600; }
.carrito-resumen tr{ border-bottom:1px solid #e6e6e6; }
.carrito-resumen .order-total th, .carrito-resumen .order-total td{ padding-top:14px; font-size:16px; color:var(--ink); font-weight:800; border:none; }
.carrito-resumen .amount, .carrito-resumen bdi{ font:inherit; color:inherit; }
.carrito-pagar{ width:100%; justify-content:center; margin-top:20px; }
.carrito-pagar:disabled{ opacity:.45; cursor:not-allowed; }
.carrito-pagar:disabled:hover{ background:var(--ink); color:var(--stone-50); border-color:var(--ink); }
.carrito-nota{ font-size:11.5px; line-height:1.5; color:var(--ink-soft); margin-top:12px; }
.carrito-nota--alerta{ color:#8f2d1b; font-weight:600; }
/* Los enlaces de envío/cupón nativos, con el lenguaje del tema. */
.carrito-resumen .woocommerce-shipping-destination,
.carrito-resumen .shipping-calculator-button{ font-size:12px; color:var(--ink-soft); }

.carrito-vacio-caja{ padding:64px 0 88px; max-width:560px; }
.carrito-vacio-caja .title{ font-size:clamp(24px, 3vw, 38px); margin-bottom:16px; }

@media (max-width: 1000px){
  .carrito-grid{ grid-template-columns:1fr; }
  .carrito-resumen-caja{ position:static; }
}
@media (max-width: 640px){
  .carrito-item{ grid-template-columns:84px 1fr; gap:14px; }
  .carrito-item-img{ width:84px; height:84px; }
  .carrito-item-acciones{
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    text-align:left;
  }
}

/* ── Avisos de WooCommerce en carrito y checkout, con el lenguaje del tema ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none;
  margin:0 0 24px;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  border-left:3px solid var(--accent);
  background:var(--stone-100);
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink);
}
.woocommerce-error{ border-left-color:#8f2d1b; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color:var(--ink); font-weight:600; }
.woocommerce-notices-wrapper:empty{ display:none; }

/* Woo saca los avisos fuera del contenedor y les mete un icono con su
   tipografía propia, que cae encima del texto. */
.woocommerce-notices-wrapper{
  max-width:1400px;
  margin:0 auto;
  padding:24px var(--side-pad) 0;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ content:none !important; display:none !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error{ padding-left:18px; }
/* Woo pinta además un borde superior verde propio. */
.woocommerce-message, .woocommerce-info, .woocommerce-error{ border-top:none; }

/* El buscador del header se abre con [hidden]; la clase la usa el drawer. */
.header-search.is-open{ display:block; }

/* `inert` no oculta nada por sí solo, pero conviene que se note que el fondo
   no está operativo mientras hay un panel abierto. */
[inert]{ cursor:default; }

/* ============ CHECKOUT ============ */
section.checkout{ padding:24px 0 88px; }
.checkout-titulo{ font-size:clamp(24px, 3vw, 38px); margin-bottom:32px; }

.checkout-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:40px;
  align-items:start;
}

.co-bloque{ padding:0 0 36px; }
.co-bloque + .co-bloque{ border-top:1px solid #ececec; padding-top:36px; }
.co-titulo{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:22px;
}
.co-num{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

.co-aviso{
  background:var(--stone-100);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.co-aviso strong{ color:var(--ink); display:block; margin-bottom:2px; }
.co-nota{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:16px; }

/* ── Tarjetas de tipo de documento ── */
.co-docs{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:24px; }
.co-doc{
  position:relative;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 18px 16px;
  cursor:pointer;
  font-family:'Satoshi',system-ui,sans-serif;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.co-doc:hover{ border-color:var(--ink); }
.co-doc.is-active{
  border-color:var(--accent);
  background:rgba(255,222,51,.12);
  /* Segundo borde interior: engrosa el contorno sin mover el contenido, que
     es lo que pasaría subiendo el border-width. */
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* Fila superior: icono a la izquierda, check a la derecha. */
.co-doc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.co-doc-icono{ color:var(--ink-soft); transition:color .18s ease; }
.co-doc.is-active .co-doc-icono{ color:var(--ink); }

.co-doc-check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:transparent;              /* el tick existe pero no se ve */
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.co-doc.is-active .co-doc-check{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
  transform:scale(1.04);
}

.co-doc-titulo{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.co-doc-texto{ display:block; font-size:14px; line-height:1.5; color:var(--ink-soft); margin-top:5px; }

/* El foco visible se hereda del anillo global (A5): solo con teclado. */
@media (max-width: 560px){
  .co-docs{ grid-template-columns:1fr; }
}
/* El <select> real sigue enviándose; las tarjetas solo lo sincronizan. */
.vca-doc-select{ display:none; }

/* ── Campos ── */
.checkout .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.checkout .form-row label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.checkout .form-row .required{ color:#8f2d1b; text-decoration:none; border:none; }
.checkout .input-text,
.checkout select,
.checkout textarea{
  width:100%;
  min-height:46px;
  padding:12px 14px;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color .15s ease;
}
.checkout textarea{ min-height:96px; resize:vertical; }
.checkout .input-text:hover, .checkout select:hover{ border-color:var(--ink-soft); }
.checkout .input-text:focus, .checkout select:focus, .checkout textarea:focus{ outline:none; border-color:var(--ink); }
.kbd .checkout .input-text:focus-visible,
.kbd .checkout textarea:focus-visible{ box-shadow:0 0 0 3px rgba(255,222,51,.5); }
.checkout .form-row.is-invalid .input-text,
.checkout .form-row.is-invalid select{ border-color:#8f2d1b; }
.co-error{ font-size:12px; font-weight:600; color:#8f2d1b; }

/* Teléfono con prefijo fijo: el +56 no es parte del valor. */
.vca-tel{ position:relative; }
.vca-tel .input-text{ padding-left:56px; }
.vca-tel::after{
  content:'+56';
  position:absolute;
  left:14px;
  bottom:13px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  pointer-events:none;
}

/* ── Métodos de pago ── */
.checkout .wc_payment_methods{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; }
.checkout .wc_payment_method > label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
  cursor:pointer;
}
.checkout .wc_payment_method{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  background:#fff;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.checkout .wc_payment_method:hover{ border-color:var(--ink); }

/* El radio va arriba a la derecha, como el check de las tarjetas de documento:
   flex-start para que no se centre respecto a la descripción de abajo. */
.checkout .wc_payment_method{ display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap; }
.checkout .wc_payment_method > label{ order:1; flex:1 1 auto; }
.checkout .wc_payment_method > input[type="radio"]{ order:2; margin-top:2px; }
.checkout .wc_payment_method .payment_box{ order:3; flex:1 0 100%; }

/* ⚠️ El logo lo pinta la pasarela (`get_icon()`) sin clase ni contenedor: el
   de Webpay llega a 301×76 y desbordaba la fila. Se fija SOLO el alto — con
   max-width también, el logo se deforma (A13). Va junto al título, no
   empujado al borde: separado del nombre es un elemento suelto. */
.checkout .wc_payment_method > label img,
.checkout .wc_payment_method > label .vca-pago-icono{
  height:22px;
  width:auto;
  max-width:none;
  display:block;
  flex:0 0 auto;
}
.checkout .wc_payment_method > label .vca-pago-icono{ color:var(--ink-soft); transition:color .18s ease; }
.checkout .wc_payment_method:has(input:checked) > label .vca-pago-icono{ color:var(--ink); }
/* Sin caja: la descripción es parte de la tarjeta, no un bloque aparte.
   Un fondo dentro de otro fondo mete un segundo nivel visual que no aporta. */
.checkout .payment_box{
  margin-top:8px;
  padding:0;
  background:none;
  border-radius:0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.checkout .payment_box p:last-child{ margin-bottom:0; }
.checkout .woocommerce-terms-and-conditions-wrapper{ font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; }

#place_order{
  display:block;
  width:100%;
  min-height:52px;
  background:var(--ink);
  color:var(--stone-50);
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
#place_order:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }

/* ── Resumen ── */
.checkout-resumen-caja{
  position:sticky;
  top:24px;
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:26px 24px;
}
.checkout-resumen-titulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:16px; }
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th{ padding:10px 0; text-align:left; vertical-align:top; }
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td{ text-align:right; white-space:nowrap; }
.woocommerce-checkout-review-order-table tbody tr{ border-bottom:1px solid #e6e6e6; }
.woocommerce-checkout-review-order-table tfoot th{ font-weight:400; color:var(--ink-soft); }
.woocommerce-checkout-review-order-table tfoot td{ font-weight:600; }
.woocommerce-checkout-review-order-table tfoot tr{ border-bottom:1px solid #e6e6e6; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{ padding-top:14px; font-size:16px; font-weight:800; color:var(--ink); border:none; }
.woocommerce-checkout-review-order-table .amount,
.woocommerce-checkout-review-order-table bdi{ font:inherit; color:inherit; }
.co-item-nombre{ display:block; font-weight:600; line-height:1.35; }
.co-item-qty{ font-size:12px; color:var(--ink-soft); }
.co-item-periodo{ display:block; font-size:11.5px; line-height:1.5; color:var(--ink-soft); margin-top:4px; }
.checkout-volver{ display:inline-block; margin-top:16px; font-size:12.5px; color:var(--ink-soft); }

/* «Comprar» junto al total, en el resumen fijo. El JS le quita el [hidden] en
   el paso 4; aquí solo se decide en qué pantallas tiene sentido. */
/* ⚠️ `.btn` es inline-flex, así que `text-align:center` no centra nada: el
   texto es un ítem flex y se queda al principio. Se centra con justify. */
.checkout-comprar{ width:100%; margin-top:18px; justify-content:center; }
.checkout-comprar[hidden]{ display:none; }          /* display:block pisa [hidden] (A12) */

@media (max-width: 1000px){
  .checkout-grid{ grid-template-columns:1fr; }
  /* En móvil el resumen va primero: se ve qué se está pagando antes de
     rellenar nada. */
  .checkout-resumen{ order:-1; }
  .checkout-resumen-caja{ position:static; }

  /* Y por eso mismo el botón NO puede ir aquí en móvil: quedaría encima del
     formulario, antes de elegir el medio de pago. Se queda el de Woo, al
     final del paso 4. */
  .checkout-comprar{ display:none !important; }
}

/* En escritorio manda el del resumen, así que el de Woo estorba.
   ⚠️ Con el id: la regla base de arriba es `#place_order` (1,0,0) y le gana a
   cualquier combinación de clases (A14). */
@media (min-width: 1001px){
  .vca-wizard.js-pasos #place_order{ display:none; }
}
@media (max-width: 560px){
  .co-docs{ grid-template-columns:1fr; }
}

/* Va DESPUÉS de `.checkout .form-row{display:flex}` y con su misma
   especificidad: si se declara antes, la regla base lo pisa (A7). */
.checkout .vca-doc-select{ display:none; }

/* ── Envío dentro del bloque «Entrega» ── */
/* ── Entrega: tarjetas envío/retiro → región → couriers ── */
.co-entrega{ margin-bottom:20px; }
/* La región y la lista de despachos solo existen si se eligió envío. */
.co-campos.vca-solo-envio.is-hidden,
.vca-solo-envio.is-hidden{ display:none; }
.vca-envio li.is-hidden{ display:none; }
.vca-envio-aviso{ margin:0; }

/* Los servicios del courier se distinguen con su azul de marca; el retiro en
   tienda se queda con el amarillo del sitio. */
.vca-envio-logo{ flex:0 0 auto; display:block; width:20px; height:20px; object-fit:contain; }
/* El logo del courier también en el resumen: dice con quién se despacha. */
.vca-resumen-logo{ width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin-right:6px; }

/* Aviso mientras Woo recalcula: el resumen se bloquea y hay que decir por qué. */
.co-calculando{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:rgba(0,51,161,.06);
  color:var(--bluex);
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
}
.co-calculando[hidden]{ display:none; }   /* display:flex pisa [hidden] (A12) */

/* En el paso del documento todavía no se ha elegido cómo se recibe: mostrar
   un costo de envío ahí es adelantar una decisión que el cliente no tomó. */
.vca-wizard.js-pasos[data-paso="1"] .shipping-total{ display:none; }
.co-spinner{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border:2px solid rgba(0,51,161,.25);
  border-top-color:var(--bluex);
  border-radius:999px;
  animation:vca-girar .7s linear infinite;
}
@keyframes vca-girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .co-spinner{ animation-duration:2.4s; }
}
.vca-envio li:has(.vca-envio-logo):hover{ border-color:var(--bluex); }
.vca-envio li:has(.vca-envio-logo):has(input:checked){
  border-color:var(--bluex);
  background:rgba(0,51,161,.05);
  box-shadow:inset 0 0 0 1px var(--bluex);
}
.vca-envio li:has(.vca-envio-logo) input[type="radio"]:checked{
  border-color:var(--bluex);
  background:var(--bluex);
}
.vca-envio li:has(.vca-envio-logo) input[type="radio"]:checked::after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.vca-envio{ margin-bottom:22px; }
.vca-envio .woocommerce-shipping-totals,
.vca-envio th{ display:none; } /* la etiqueta la pone el título del bloque */
.vca-envio ul#shipping_method,
.vca-envio ul.woocommerce-shipping-methods{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* El flex va en el <li>, no en el <label>: Woo los pinta como HERMANOS
   (input + label), así que un label en bloque empujaba el radio a su propia
   línea, encima del texto. */
.vca-envio li{
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  background:#fff;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.vca-envio li:hover{ border-color:var(--ink); }
.vca-envio li label{
  order:1;                 /* el radio se va al final: check a la derecha */
  display:flex;
  align-items:center;
  gap:11px;
  flex:1 1 auto;
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  text-transform:none;
  letter-spacing:0;
}
.vca-envio li input[type="radio"]{ order:2; }

/* ⚠️ El plazo de entrega lo pinta el plugin del courier como un <p><small>
   suelto dentro del <li>, y sin `order` el navegador se lo lleva al PRINCIPIO:
   «Hasta 5 días hábiles» aparecía a la izquierda del logo, como si fuera otra
   columna. Va al final y ocupa toda la fila, así queda como lo que es: una
   línea secundaria bajo el nombre del servicio. */
.vca-envio li{ flex-wrap:wrap; }
.vca-envio li > p{
  order:3;
  flex:1 0 100%;
  margin:2px 0 0;
  padding-left:31px;            /* ancho del logo (20) + su gap (11) */
}
.vca-envio li > p small{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--ink-soft);
}
.vca-envio li > p small::before{
  content:'';
  width:13px; height:13px;
  flex:0 0 auto;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vca-envio-icono{ color:var(--ink-soft); flex:0 0 auto; transition:color .18s ease; }
.vca-envio li:has(input:checked) .vca-envio-icono{ color:var(--ink); }
/* Sin flex aquí: el precio de Woo viene en su propio <span> y como ítem flex
   se iba a una línea aparte, partiendo «Despacho a domicilio:» del importe.
   La nota baja sola con display:block. */
.vca-envio-texto{ flex:1 1 auto; }
.vca-envio-nota{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  color:var(--ink-soft);
}
.vca-envio .woocommerce-shipping-destination{ font-size:12px; color:var(--ink-soft); margin-top:10px; }

/* Woo pinta su propio encabezado sobre el formulario; el bloque ya tiene el suyo. */
.checkout h3#order_review_heading,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3{ display:none; }
.woocommerce-additional-fields > h3{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin:24px 0 12px;
}

/* El bloque de pago de Woo trae fondo y bordes propios. */
#payment, #payment.woocommerce-checkout-payment{
  background:transparent;
  border-radius:0;
  padding:0;
}
#payment ul.payment_methods{ border:none; padding:0; }
#payment div.form-row{ padding:0; }
#payment .payment_box::before{ display:none; }

/* ── Correcciones de orden y especificidad en el checkout ──
   Estas reglas van al final a propósito: `.checkout .input-text{padding:…}`
   y los estilos de Woo con `#payment` pisaban a las anteriores (A7). */
.checkout .vca-tel .input-text{ padding-left:56px; }
/* Va después de la regla de arriba y con más especificidad (#id), así que
   esta es la que manda: hay que apagar el fondo aquí también (A14). */
#payment .payment_box{
  background:none;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.6;
  border-radius:0;
  padding:0;
  margin-top:8px;
}
#payment .payment_box p{ margin:0; }
/* El nombre del paquete repite el título del bloque «Entrega». */
.vca-envio .woocommerce-shipping-contents > th,
.vca-envio > table th{ display:none; }

/* ============ NOSOTROS ============ */
.about-hero{ padding:clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px); }
.about-hero-inner{ max-width:760px; margin:0 auto; text-align:center; }
.about-hero h1{
  text-transform:none;
  font-weight:400;
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:1.08;
  letter-spacing:-.015em;
}
.about-hero h1 strong{ font-weight:800; }
.about-hero-intro{
  margin:24px auto 0;
  max-width:620px;
  font-size:clamp(15px, 1.6vw, 17px);
  line-height:1.7;
  color:var(--ink-soft);
}

.about-photo{ padding:0 0 clamp(56px, 7vw, 88px); }
.about-photo-frame{
  position:relative;
  /* El prototipo pide --radius-lg, que nunca define (misma variable fantasma
     que en la landing de arriendo): se usa el radio del sistema. */
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:21/9;
  background:var(--stone-200);
}
.about-photo-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-photo-frame .photo-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(91,62,23,.2), rgba(20,16,10,.08));
  mix-blend-mode:multiply;
}
@media (max-width: 700px){
  .about-photo-frame{ aspect-ratio:auto; }
  .about-photo-frame img{ position:static; width:100%; height:auto; }
}

/* ── Qué hacemos ── */
section.hacemos{ padding:0 0 clamp(64px, 8vw, 96px); }
.hacemos-head{ text-align:center; max-width:560px; margin:0 auto 44px; }
.hacemos-head .eyebrow{ margin-bottom:12px; }
.hacemos-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.soft-card{
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.soft-card-icon{
  width:48px; height:48px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.soft-card-icon svg{ width:21px; height:21px; stroke-width:1.8; }
.soft-card-title{ font-size:18px; font-weight:800; line-height:1.3; margin-bottom:10px; }
.soft-card-text{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); flex:1; }
.soft-card-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.soft-arrow{
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  color:var(--ink-soft);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.soft-card-link:hover .soft-arrow{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
@media (max-width: 880px){
  .hacemos-grid{ grid-template-columns:1fr; }
}

/* ── Visión / Misión ── */
section.vision-mision{ padding:0; }
.vm-box{
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--stone-50);
  padding:clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
}
.vm-grid{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
}
.vm-divider{ width:1px; height:100%; background:rgba(255,255,255,.15); }
.vm-col .eyebrow{ color:var(--accent); }
.vm-quote{
  font-size:clamp(20px, 2.4vw, 30px);
  line-height:1.35;
  font-weight:400;
  letter-spacing:-.01em;
}
.vm-quote strong{ font-weight:800; }
@media (max-width: 880px){
  .vm-grid{ grid-template-columns:1fr; }
  .vm-divider{ width:100%; height:1px; }
}

/* ── Formulario de cotización ── */
section.cotizar{ padding:clamp(64px, 8vw, 96px) 0 88px; }
.quote-box{
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--stone-50);
  padding:clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
}
.quote-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.quote-box .eyebrow{ color:var(--accent); }
.quote-title{
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.2;
  font-weight:400;
  letter-spacing:-.01em;
}
.quote-title strong{ font-weight:800; }
.quote-text{ margin-top:18px; font-size:15px; line-height:1.7; color:var(--stone-300); max-width:400px; }
.quote-info{ margin-top:36px; display:flex; flex-direction:column; gap:20px; }
.quote-info-row{ display:flex; flex-direction:column; gap:5px; font-size:13.5px; }
.quote-info-row .k{ color:var(--stone-300); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; font-weight:600; }
.quote-info-row .v{ color:var(--stone-50); font-weight:600; }

.quote-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quote-form .form-field{ display:flex; flex-direction:column; gap:7px; }
.quote-form .form-field.full{ grid-column:1 / -1; }
.quote-form label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stone-300);
}
.quote-form input,
.quote-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  color:var(--stone-50);
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  padding:13px 14px;
  transition:border-color .15s ease, background-color .15s ease;
}
.quote-form textarea{ min-height:120px; resize:vertical; }
.quote-form input::placeholder,
.quote-form textarea::placeholder{ color:rgba(250,249,247,.45); }
.quote-form input:focus,
.quote-form textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.08); }
.quote-form .form-field.is-invalid input,
.quote-form .form-field.is-invalid textarea{ border-color:#e5836b; }
.quote-form .co-error{ color:#f0a68f; }
.quote-form .btn-submit{
  grid-column:1 / -1;
  justify-content:center;
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}
.quote-form .btn-submit:hover{ background:var(--accent-bright); border-color:var(--accent-bright); }
.quote-form .btn-submit[disabled]{ opacity:.6; cursor:wait; }
.quote-form-note{ grid-column:1 / -1; font-size:12px; color:var(--stone-300); }

/* Prefijo +56 sobre fondo oscuro */
.vca-tel-oscuro{ position:relative; }
.vca-tel-oscuro input{ padding-left:52px; }
.vca-tel-oscuro::after{
  content:'+56';
  position:absolute;
  left:14px;
  bottom:14px;
  font-size:14px;
  font-weight:600;
  color:var(--stone-300);
  pointer-events:none;
}

/* Trampa para robots: fuera de la vista pero no display:none, que algunos
   bots detectan. */
.vca-trampa{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width: 880px){
  .quote-grid{ grid-template-columns:1fr; }
  .quote-form{ grid-template-columns:1fr; }
}

/* ── Catálogo: contador y estado de carga ── */
.catalogo-contador{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.catalogo-resultados{ position:relative; transition:opacity .15s ease; }
.catalogo-resultados.is-cargando{ opacity:.45; pointer-events:none; }
.catalogo-resultados.is-cargando::after{
  content:'';
  position:absolute;
  top:60px;
  left:50%;
  width:28px;
  height:28px;
  margin-left:-14px;
  border:2px solid var(--line);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:vca-giro .7s linear infinite;
}
@keyframes vca-giro{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .catalogo-resultados.is-cargando::after{ animation:none; }
}
.catalogo-vacio[hidden]{ display:none; }

/* ============ PÁGINA DE GRACIAS ============ */
section.gracias{ padding:clamp(48px, 6vw, 80px) 0 88px; }
.gracias-caja{ max-width:720px; margin-bottom:40px; }
.gracias-check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  margin-bottom:24px;
}
.gracias .title{ font-size:clamp(26px, 3.4vw, 42px); margin-bottom:14px; }
.gracias-intro{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.gracias-intro strong{ color:var(--ink); }

.gracias-datos{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin:32px 0 0;
  padding:0;
}
.gracias-datos li{
  background:var(--stone-100);
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.gracias-datos .k{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.gracias-datos .v{ font-size:15px; font-weight:700; }
.gracias-datos .v .amount, .gracias-datos .v bdi{ font:inherit; color:inherit; }

.gracias-bloque{
  border-top:1px solid #ececec;
  padding-top:32px;
  margin-top:40px;
  max-width:720px;
}
.gracias-subtitulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:18px; }

.gracias-arriendo{
  background:var(--stone-100);
  border-radius:var(--radius);
  border-top:none;
  padding:28px 26px;
}
.gracias-equipos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.gracias-equipos li{ display:flex; flex-direction:column; gap:4px; font-size:14px; }
.gracias-equipos span{ font-size:13px; color:var(--ink-soft); }
.gracias-nota{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin-top:18px; }

.gracias-lineas, .gracias-totales{ list-style:none; margin:0; padding:0; }
.gracias-lineas li, .gracias-totales li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  font-size:14px;
  border-bottom:1px solid #ececec;
}
.gracias-totales li:last-child{ border-bottom:none; font-size:16px; font-weight:800; padding-top:14px; }
.gl-qty{ color:var(--ink-soft); font-size:12.5px; }
.gracias-lineas .amount, .gracias-totales .amount,
.gracias-lineas bdi, .gracias-totales bdi{ font:inherit; color:inherit; }
/* Instrucciones del medio de pago (datos de la transferencia). */
.gracias .woocommerce-bacs-bank-details{
  max-width:720px;
  margin-top:40px;
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:26px;
}
.gracias .wc-bacs-bank-details-heading{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:14px; }
.gracias .wc-bacs-bank-details{ list-style:none; margin:0; padding:0; font-size:14px; line-height:1.8; }

@media (max-width: 880px){
  .gracias-datos{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .gracias-datos{ grid-template-columns:1fr; }
}

/* ============ MI CUENTA ============ */
section.cuenta{ padding:24px 0 88px; }
.cuenta-titulo{ font-size:clamp(24px, 3vw, 38px); margin-bottom:32px; }
.cuenta-grid{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }

.cuenta-nav{
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:22px 20px;
  position:sticky;
  top:24px;
}
.cuenta-usuario{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:14px; border-bottom:1px solid #e2e2e2; }
.cuenta-avatar{
  width:38px; height:38px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  font-size:15px;
  flex:0 0 auto;
}
.cuenta-nombre{ font-size:14px; font-weight:700; line-height:1.3; min-width:0; word-break:break-word; }
.cuenta-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cuenta-nav a{
  display:block;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.cuenta-nav a:hover{ background:#ececec; color:var(--ink); }
.cuenta-nav .is-active > a,
.cuenta-nav .woocommerce-MyAccount-navigation-link--dashboard.is-active > a{ background:var(--ink); color:var(--stone-50); }

.cuenta-saludo h2{ font-size:22px; font-weight:800; margin-bottom:8px; }
.cuenta-saludo p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:60ch; }
.cuenta-bloque{ margin-top:36px; }
.cuenta-subtitulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:16px; }

.cuenta-reservas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cuenta-reservas li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:var(--stone-100);
  border-radius:var(--radius);
  padding:16px 18px;
}
.cuenta-reservas strong{ display:block; font-size:14.5px; }
.cuenta-reservas span{ font-size:12.5px; color:var(--ink-soft); }

.cuenta-accesos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:36px; }
.cuenta-acceso{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease;
}
.cuenta-acceso:hover{ border-color:var(--accent); background:rgba(255,222,51,.08); }
.cuenta-acceso-titulo{ font-size:14.5px; font-weight:700; color:var(--ink); }
.cuenta-acceso-texto{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* Tablas y formularios que Woo pinta dentro del contenido de la cuenta */
.cuenta-contenido table.shop_table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cuenta-contenido table.shop_table th,
.cuenta-contenido table.shop_table td{ padding:12px 10px; text-align:left; border-bottom:1px solid #ececec; }
.cuenta-contenido table.shop_table th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.cuenta-contenido .woocommerce-Message,
.cuenta-contenido .woocommerce-info{ margin-bottom:20px; }
.cuenta-contenido .button,
.cuenta-contenido button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:700;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:var(--stone-50);
  border:1px solid var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.cuenta-contenido .button:hover,
.cuenta-contenido button[type="submit"]:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.cuenta-contenido .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.cuenta-contenido label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.cuenta-contenido .input-text,
.cuenta-contenido select{
  width:100%;
  min-height:46px;
  padding:12px 14px;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.cuenta-contenido .input-text:focus,
.cuenta-contenido select:focus{ outline:none; border-color:var(--ink); }

/* ── Acceso / registro ── */
.cuenta-login{ display:grid; gap:24px; }
.cuenta-login--doble{ grid-template-columns:1fr 1fr; }
.cuenta-login-caja{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
}
.cuenta-login-intro{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; }
.cuenta-login-acciones{ flex-direction:row !important; align-items:center; gap:16px; flex-wrap:wrap; }
.cuenta-recordar{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink-soft); }
.cuenta-recordar input{ width:16px; height:16px; accent-color:var(--accent); }
.cuenta-olvido{ font-size:13px; }
.cuenta-olvido a{ color:var(--ink-soft); }

@media (max-width: 1000px){
  .cuenta-grid{ grid-template-columns:1fr; }
  .cuenta-nav{ position:static; }
  .cuenta-accesos{ grid-template-columns:1fr; }
  .cuenta-login--doble{ grid-template-columns:1fr; }
}

/* Toast con acción (p. ej. «Deshacer» al quitar del carrito) */
.vca-toast{ pointer-events:auto; }
.vca-toast--con-accion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.vca-toast-accion{
  flex:0 0 auto;
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
  white-space:nowrap;
}
.vca-toast--aviso .vca-toast-accion{ color:var(--ink); }

/* El título de una categoría de arriendo es el h2 del prototipo: 24px con
   28px de aire hasta la grilla, no el titular grande del catálogo de venta. */
.catalogo-head--arriendo{ margin-bottom:28px; }
.catalogo-head--arriendo .title{ font-size:24px; }
/* Los 8px vienen del `padding:8px 0 56px` que el prototipo pone al contenedor
   de cada categoría; aquí ese contenedor no existe.
   Va como PADDING, no margin: un margin-top colapsaría con el margin-bottom
   de las píldoras y ganaría el mayor de los dos en vez de sumarse. */
.catalogo-head--arriendo{ padding-top:8px; }
/* Tope de unidades de un arriendo, junto al selector de cantidad. */
.carrito-tope{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; max-width:180px; }

/* ── Sidecart: tope, totales y estado de carga ── */
.sidecart-nota-tope{ font-size:11.5px; font-weight:600; color:var(--ink-soft); }

/* Botón del stepper sin recorrido: se ve inactivo, pero sigue pulsable para
   poder responder con el aviso de por qué no sube. */
.pdp3-qty-btn.is-tope{ opacity:.32; cursor:default; }
.pdp3-qty-btn.is-tope:hover{ background:none; }

.sidecart-lineas{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sidecart-linea{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-soft); }
.sidecart-linea span:last-child{ font-weight:600; color:var(--ink); white-space:nowrap; }
.sidecart-linea .amount, .sidecart-linea bdi{ font:inherit; color:inherit; }

/* El panel ya no se transparenta entero: se cubre con un velo y el indicador
   va centrado en el alto del panel (no del listado, que puede tener scroll
   propio y dejaría el spinner fuera de la vista). */
.sidecart.is-cargando{ opacity:1; pointer-events:none; }
.sidecart.is-cargando::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(1px);
}
.sidecart.is-cargando::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  width:30px;
  height:30px;
  /* Centrado con márgenes negativos, no con translate: `transform` lo usa la
     propia animación de giro y se pisarían. */
  margin:-15px 0 0 -15px;
  border:2px solid var(--line);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:vca-giro .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .sidecart.is-cargando::before{ animation:none; }
}
/* Garantía por línea de arriendo, en el carrito. */
.carrito-item-garantia{
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
}
.carrito-item-garantia .amount,
.carrito-item-garantia bdi{ font:inherit; color:inherit; }

/* ============ CHECKOUT: PASOS ============ */
/* Sin JS se ven los tres pasos seguidos; la clase la pone el propio JS. */
.vca-wizard.js-pasos .co-paso{ display:none; }
.vca-wizard.js-pasos[data-paso="1"] .co-paso[data-paso="1"],
.vca-wizard.js-pasos[data-paso="2"] .co-paso[data-paso="2"],
.vca-wizard.js-pasos[data-paso="3"] .co-paso[data-paso="3"],
.vca-wizard.js-pasos[data-paso="4"] .co-paso[data-paso="4"]{ display:block; }
.vca-wizard:not(.js-pasos) .co-acciones{ display:none; }
.vca-wizard:not(.js-pasos) .co-pasos{ display:none; }

.co-pasos{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0 0 32px;
  padding:0 0 20px;
  border-bottom:1px solid #ececec;
  flex-wrap:wrap;
}
.co-paso-ind{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 14px 6px 6px;
  border-radius:999px;
  cursor:default;
  color:var(--ink-soft);
  transition:background-color .15s ease, color .15s ease;
}
.co-paso-ind[tabindex="0"]{ cursor:pointer; }
.co-paso-ind[tabindex="0"]:hover{ background:var(--stone-100); }
.co-paso-num{
  width:26px; height:26px;
  border-radius:999px;
  background:var(--stone-200);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  transition:background-color .15s ease, color .15s ease;
}
.co-paso-nombre{ font-size:13px; font-weight:600; }
.co-paso-ind.is-activo{ color:var(--ink); }
.co-paso-ind.is-activo .co-paso-num{ background:var(--accent); color:var(--ink); }
.co-paso-ind.is-hecho{ color:var(--ink); }
.co-paso-ind.is-hecho .co-paso-num{ background:var(--ink); color:var(--stone-50); }

.co-subtitulo{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin:32px 0 16px;
}
.co-acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.co-acciones--volver{ margin-top:20px; }

/* Nombre y apellido en dos columnas; el resto ancho completo. */
.co-campos{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.co-campos .form-row{ grid-column:1 / -1; }
.co-campos #billing_first_name_field,
.co-campos #billing_last_name_field{ grid-column:auto; }
@media (max-width: 560px){
  .co-campos{ grid-template-columns:1fr; }
}

/* ============ CHECKOUT: CONTROLES CONSISTENTES ============ */
/* Mismo alto y mismo borde en todos los campos, con o sin desplegable. */
.checkout .input-text,
.checkout select,
.checkout textarea,
.cuenta-contenido .input-text,
.cuenta-contenido select{
  height:48px;
  min-height:48px;
  border-color:var(--line);
  appearance:none;
  -webkit-appearance:none;
}
.checkout textarea{ height:auto; min-height:96px; padding-top:14px; }
.checkout select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px;
}
.checkout .input-text:hover,
.checkout select:hover{ border-color:var(--ink-soft); }
.checkout .input-text:focus,
.checkout select:focus,
.checkout textarea:focus{ border-color:var(--ink); }

/* ── Radios propios: el accent-color del navegador daba un punto amarillo
      con anillo negro que no pega con nada del sitio. ── */
.checkout input[type="radio"],
.vca-envio input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  height:19px;
  margin:0;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  flex:0 0 auto;
  position:relative;
  cursor:pointer;
  transition:border-color .15s ease;
}
.checkout input[type="radio"]:hover,
.vca-envio input[type="radio"]:hover{ border-color:var(--ink-soft); }

/* Marcado = el mismo disco amarillo con tick del paso 1, para que elegir
   signifique lo mismo en todo el checkout. El tick va como imagen de fondo:
   un input no admite hijos, así que no se puede meter el SVG dentro. */
.checkout input[type="radio"]:checked,
.vca-envio input[type="radio"]:checked{
  border-color:var(--accent);
  background:var(--accent);
}
.checkout input[type="radio"]:checked::after,
.vca-envio input[type="radio"]:checked::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161412' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px 11px;
}
.kbd .checkout input[type="radio"]:focus-visible,
.kbd .vca-envio input[type="radio"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* La tarjeta entera se marca al elegirla, igual que las de documento. */
.vca-envio li:has(input:checked),
.checkout .wc_payment_method:has(input:checked){
  border-color:var(--accent);
  background:rgba(255,222,51,.12);
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* ============ CHECKOUT: RESUMEN CON FOTO ============ */
.co-item{ display:flex; gap:12px; align-items:flex-start; }
.co-item-foto{
  position:relative;
  flex:0 0 auto;
  width:52px;
  height:52px;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid #ececec;
}
.co-item-foto img{ width:100%; height:100%; max-width:100%; object-fit:cover; display:block; }
.co-item-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:var(--ink);
  color:var(--stone-50);
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.co-item-texto{ min-width:0; display:block; }

/* ============ CHECKOUT: HEADER Y FOOTER REDUCIDOS ============ */
.site-header--checkout{ position:static; background:var(--header-bg); }
.site-header--checkout .header-main{ border-bottom:none; }
.site-header--checkout .header-main-inner{ max-width:1400px; margin:0 auto; }
.co-header-carrito{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:var(--stone-50);
  text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease;
}
.co-header-carrito:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.co-header-carrito svg{ flex:0 0 auto; }
.co-header-total{ font-size:14.5px; font-weight:800; }
.co-header-total .amount, .co-header-total bdi{ font:inherit; color:inherit; }
.co-header-items{ font-size:12px; color:var(--stone-300); }
@media (max-width: 560px){
  .co-header-items{ display:none; }
}

.site-footer--checkout{ background:#fff; border-top:1px solid #ececec; margin-top:40px; }
.co-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:26px 0;
  max-width:1400px;
  margin:0 auto;
}
.co-footer .footer-pay-logos img{ height:32px; }
.co-footer-legal{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); }
.co-footer-legal a{ color:var(--ink-soft); text-decoration:underline; }
.co-footer-legal a:hover{ color:var(--ink); }
/* Los logos de pago llevan proporciones distintas: sin width:auto se deforman. */
.footer-pay-logos img,
.co-footer .footer-pay-logos img{ width:auto; max-width:120px; object-fit:contain; }
/* Razón social y giro son obligatorios cuando se elige factura, pero para Woo
   son opcionales (con boleta no se piden): se corrige la etiqueta, no la
   validación, que ya distingue por tipo de documento. */
.vca-solo-factura .optional{ display:none; }
.vca-solo-factura label::after{ content:' *'; color:#8f2d1b; }
/* Solo se fija el alto: fijar también un max-width con `height` deforma los
   logos anchos (Webpay mide 1971px de ancho en origen). */
.footer-pay-logos img,
.co-footer .footer-pay-logos img{
  height:32px;
  width:auto;
  max-width:none;
  object-fit:initial;
}
.footer-grid ~ .footer-pay-row .footer-pay-logos img{ height:40px; }

/* ── Checkout: respiro bajo el header y pie oscuro ── */
/* El checkout no tiene breadcrumb ni título, así que el contenido arrancaba
   pegado al header. */
.site-header--checkout + main section.checkout{ padding-top:clamp(32px, 4vw, 56px); }

/* El pie en blanco dejaba invisibles los logos de pago (fondo transparente) y
   la línea divisoria. Se usa el tono del footer del sitio. */
.site-footer--checkout{
  background:var(--ink-2);
  border-top:none;
  margin-top:clamp(48px, 6vw, 80px);
}
.co-footer-legal{ color:var(--stone-300); }
.co-footer-legal a{ color:var(--stone-300); }
.co-footer-legal a:hover{ color:var(--accent); }
/* Con `.site-footer--checkout` a secas no basta: `footer.site-footer` lleva
   etiqueta + clase y gana, dejando su degradado (blanco los primeros 90px)
   sobre el pie corto del checkout. De ahí que se viera todo blanco. */
footer.site-footer--checkout{
  background:var(--ink-2);
  background-image:none;
}

/* El prefijo +56 iba anclado al fondo de la fila (`bottom`), así que al
   aparecer un mensaje de error la fila crecía y el prefijo se descolgaba
   encima del aviso. El input, en cambio, SIEMPRE arranca a la misma altura
   (label + gap), así que se ancla ahí y se le da el alto del propio input. */
.checkout .vca-tel::after{
  top:22px;
  bottom:auto;
  height:48px;
  display:flex;
  align-items:center;
}
.vca-tel-oscuro::after{
  top:21px;
  bottom:auto;
  height:47px;
  display:flex;
  align-items:center;
}

/* ── Página de gracias: fotos y contenido centrado ── */
.gracias-caja,
.gracias-bloque,
.gracias .pagina-ctas,
.gracias .woocommerce-bacs-bank-details{
  margin-left:auto;
  margin-right:auto;
}
.gracias-caja{ text-align:center; }
.gracias-caja .gracias-check{ margin-left:auto; margin-right:auto; }
.gracias-caja .gracias-intro{ margin-left:auto; margin-right:auto; max-width:56ch; }
.gracias .pagina-ctas{ justify-content:center; max-width:720px; }

/* Las listas mantienen su texto alineado a la izquierda: centrar filas de
   precios las haría ilegibles. */
.gracias-bloque{ text-align:left; }

.gracias-foto{
  flex:0 0 auto;
  width:48px;
  height:48px;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid #ececec;
  background:#fff;
}
.gracias-foto img{ width:100%; height:100%; max-width:100%; object-fit:cover; display:block; }

.gracias-equipos li{ flex-direction:row; align-items:center; gap:14px; }
.gracias-equipo-texto{ display:flex; flex-direction:column; gap:4px; min-width:0; }

.gracias-lineas li{ align-items:center; gap:14px; }
.gracias-lineas .gl-nombre{ flex:1; min-width:0; }
.gracias-lineas .gl-precio{ white-space:nowrap; }
/* Instrucciones del medio de pago: iban sueltas, pegadas al bloque anterior. */
.gracias-pago{
  max-width:720px;
  margin:10px auto 0;
  text-align:center;
}
.gracias-pago p{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0; }
.gracias-pago .woocommerce-bacs-bank-details{ margin-top:24px; text-align:left; }
/* Los estilos del desplegable son del menú del header: fuera de ahí (footer,
   panel móvil) no deben aplicar aunque quede algún .nav-dropdown suelto. */
.footer-col .nav-dropdown > a,
.header-mobile-panel .nav-dropdown > a{ background:none; color:inherit; padding:0; border-radius:0; }
.footer-col .nav-dropdown:hover > a{ background:none; color:var(--accent); }

/* ============ MÓVIL: NINGÚN CAMPO HACE ZOOM ============ */
/* iOS (Safari y Chrome) hace zoom automático al enfocar un campo cuya letra
   mide menos de 16px: la página se agranda sola, se descuadra y el cliente
   tiene que volver a alejarla a mano. Pasaba en el buscador (14px), en los
   filtros del catálogo (13,5px) y en todo el checkout.
   El mínimo son 16px y no hay forma de esquivarlo: `user-scalable=no` no se
   usa porque impide ampliar a quien lo necesita para leer.
   Va con !important a propósito: es un suelo del sistema, y las reglas de cada
   componente (`.filter-field select`, `.checkout .input-text`…) tienen más
   especificidad que cualquier selector genérico. */
@media (max-width: 1000px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea{
    font-size:16px !important;
  }
}

/* ============ BOTONES DE «AGREGAR»: ESPERA VISIBLE ============ */
/* Entre pulsar «Agregar» y ver el carrito lateral hay una petición al
   servidor. Sin señal, el cliente se queda mirando un botón que no hace nada
   y vuelve a pulsar. El texto se oculta y en su sitio gira un aro, así el
   botón no cambia de tamaño ni la grilla da un salto. */
.card-add-btn,
.pdp3-add{ --vca-aro: var(--stone-50); }
.pdp3-add{ --vca-aro: var(--ink); }

.card-add-btn.is-cargando,
.pdp3-add.is-cargando{
  position:relative;
  color:transparent !important;   /* el texto se va, el ancho se queda */
  pointer-events:none;            /* y de paso, sin doble clic */
}

.card-add-btn.is-cargando::after,
.pdp3-add.is-cargando::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid var(--vca-aro);
  border-right-color:transparent;  /* el hueco es lo que se ve girar */
  border-radius:50%;
  animation:vca-girar .6s linear infinite;
}

@keyframes vca-girar{ to{ transform:rotate(360deg); } }

/* Sin animación: el aro se queda quieto, que igual dice «estoy en ello». */
@media (prefers-reduced-motion: reduce){
  .card-add-btn.is-cargando::after,
  .pdp3-add.is-cargando::after{ animation:none; }
}

/* ============ MI CUENTA: PEDIDOS, DIRECCIONES Y DATOS ============ */
/* Estas plantillas no existían en el tema, así que mandaba la de Woo — o
   directamente la del plugin de Getnet. Todo esto usa el mismo lenguaje del
   resto del sitio: fichas claras, etiqueta en mayúscula pequeña y el dato
   grande debajo. */

.cuenta-intro{ font-size:14px; color:var(--ink-soft); margin-bottom:22px; }
.cuenta-nota{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:10px 0 0; }
.cuenta-nota--suelta{ margin-top:22px; }
.cuenta-subtitulo--sep{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }

.cuenta-dato-label{
  display:block;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.cuenta-dato-valor{ font-size:14px; color:var(--ink); }
.cuenta-dato-total{ font-weight:700; }

/* ── Listado de pedidos ── */
.cuenta-pedidos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.cuenta-pedido{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  background:#fff;
}
.cuenta-pedido-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

/* El número de pedido salía como enlace azul del navegador. */
.cuenta-pedido-num{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  background:var(--ink);
  color:var(--stone-50);
  font-size:13px; font-weight:700;
  text-decoration:none;
  letter-spacing:.02em;
}
.cuenta-pedido-num:hover{ background:var(--accent); color:var(--ink); }
.cuenta-pedido-num--titulo{ font-size:16px; padding:7px 14px; }

.cuenta-estado{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--stone-100);
  color:var(--ink-soft);
  font-size:12px; font-weight:700;
}
/* Un estado es una noticia: «en espera» avisa, «completado» tranquiliza. */
.cuenta-estado--on-hold{ background:#fff7dd; border-color:#f0dfa0; color:#7a5c00; }
.cuenta-estado--processing{ background:#eaf4ff; border-color:#b9d8f7; color:#14508c; }
.cuenta-estado--completed{ background:#e9f7ee; border-color:#b5e2c6; color:#166534; }
.cuenta-estado--cancelled,
.cuenta-estado--failed,
.cuenta-estado--refunded{ background:#fdecec; border-color:#f3c2c2; color:#992121; }

.cuenta-etiqueta{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent);
  color:var(--ink);
  font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}

.cuenta-pedido-datos{ display:flex; gap:34px; flex-wrap:wrap; }
.cuenta-pedido-acciones{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

.cuenta-paginacion{ margin-top:26px; }

.cuenta-vacio p{ font-size:14px; color:var(--ink-soft); }
.cuenta-vacio .pagina-ctas{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ── Detalle del pedido ── */
.cuenta-pedido-cabecera{
  display:flex; gap:34px; flex-wrap:wrap;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--stone-50);
}
.cuenta-reserva-caja{ border:1px solid var(--accent); border-radius:var(--radius); padding:20px; background:#fffdf2; }

.pedido-items{ list-style:none; margin:0; padding:0; }
.pedido-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.pedido-item:last-child{ border-bottom:0; }
.pedido-item-foto{ flex:0 0 auto; width:54px; height:54px; border-radius:var(--radius-sm); overflow:hidden; background:#fff; border:1px solid #ececec; }
.pedido-item-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.pedido-item-texto{ flex:1 1 auto; min-width:0; }
.pedido-item-nombre{ display:block; font-size:14.5px; font-weight:700; }
.pedido-item-x{ font-weight:400; color:var(--ink-soft); }
.pedido-item-periodo{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-soft); }
.pedido-item-precio{ flex:0 0 auto; font-size:14px; font-weight:700; }
/* La meta de Woo trae su propio markup: se aplana para que no monte una tabla. */
.pedido-item-texto .wc-item-meta{ list-style:none; margin:4px 0 0; padding:0; font-size:12.5px; color:var(--ink-soft); }
.pedido-item-texto .wc-item-meta p{ margin:0; display:inline; }

.pedido-totales{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.pedido-total-fila{ display:flex; justify-content:space-between; gap:16px; padding:6px 0; font-size:14px; }
.pedido-total-fila dt{ color:var(--ink-soft); }
.pedido-total-fila dd{ margin:0; text-align:right; }
.pedido-total-fila--order_total{ font-size:16px; font-weight:700; padding-top:12px; margin-top:6px; border-top:1px solid var(--line); }
.pedido-total-fila--order_total dt{ color:var(--ink); }

.pedido-nota{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.pedido-nota p{ margin:0; font-size:14px; }

.pedido-direcciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr)); gap:24px; }
.pedido-direcciones address{ font-style:normal; font-size:14px; line-height:1.65; color:var(--ink); }
.pedido-direcciones p{ margin:0 0 2px; font-size:14px; }

/* ── Direcciones ── */
.cuenta-direcciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap:16px; }
.cuenta-direccion{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:#fff; }
.cuenta-direccion-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cuenta-direccion-top .cuenta-subtitulo{ margin-bottom:0; }
.cuenta-direccion address{ font-style:normal; font-size:14px; line-height:1.7; margin-top:14px; }

/* ── Formularios de la cuenta ── */
.cuenta-form{ max-width:640px; }
.cuenta-campos{ display:flex; flex-direction:column; gap:16px; }
.cuenta-campos--dos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cuenta-campos .form-row,
.woocommerce-address-fields__field-wrapper .form-row{ margin:0; display:flex; flex-direction:column; }
.woocommerce-address-fields__field-wrapper{ display:flex; flex-direction:column; gap:16px; }

.cuenta-form label{
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.cuenta-form .required{ color:var(--ink); text-decoration:none; }

/* Los campos, iguales que en el checkout. Sin esto heredaban el estilo del
   navegador y no se parecían a nada del sitio. */
.cuenta-form .input-text,
.cuenta-form input[type="text"],
.cuenta-form input[type="email"],
.cuenta-form input[type="tel"],
.cuenta-form input[type="password"],
.cuenta-form select,
.cuenta-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line-control);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:14.5px;
  line-height:1.4;
}
.cuenta-form select{
  appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}
.cuenta-form .input-text:focus,
.cuenta-form select:focus,
.cuenta-form textarea:focus{ outline:none; border-color:var(--ink); }

.cuenta-form-acciones{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }

@media (max-width: 680px){
  .cuenta-campos--dos{ grid-template-columns:1fr; }
  .cuenta-pedido-datos{ gap:20px; }
  .cuenta-pedido-cabecera{ gap:20px; }
}