/* Keepy · vídeos "qué cabe en cada trastero" (página 2056) — familia kcv-*
   Escrito por el snippet "Keepy · Vídeos de la calculadora". No editar a mano: se sobrescribe.
   v1 · 3 de agosto de 2026 */

/* 0 · La SECCIÓN de Divi 5 es un contenedor flex con gap:60px entre filas.
   Medido: poner margin-bottom a las filas se SUMA a esos 60 px (60+12=72).
   El separador de verdad es el gap de la sección. */
.kcv{row-gap:18px!important;gap:18px!important}

/* 1 · Rejilla. Sin esto Divi sirve las filas al 80 % (1.037 px en vez de 1.180,
   281 en vez de 351 en móvil) con un gap de ~57 px. El ancho de columna sale de
   calc() sobre --horizontal-gap-parent: hay que fijar las tres variables. */
.kcv .et_pb_row{
  --row-gutter-horizontal:18px;
  --horizontal-gap:18px;
  --horizontal-gap-parent:18px;
  column-gap:18px!important;
  row-gap:18px!important;
  max-width:1180px!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:0!important;
}

/* 2 · Cabecera del bloque */
.kcv .kcv-eyebrow p{margin:0 0 10px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#616B00}
.kcv .kcv-title h2{font-size:clamp(1.7rem,4.6vw,2.4rem);font-weight:800;line-height:1.15;margin:0 0 10px}
.kcv .kcv-sub p{font-size:1.05rem;color:#5B6470;margin:0 0 26px;max-width:640px}

/* 3 · Tarjeta. La decoración vive en la columna; aquí solo el recorte y el reparto. */
.kcv .kcv-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  transition:box-shadow .18s ease,transform .18s ease;
}
.kcv .kcv-card > .et_pb_module{width:100%;margin:0}
.kcv .kcv-card:hover{box-shadow:0 12px 28px rgba(44,52,59,.13);transform:translateY(-2px)}

/* 4 · Miniatura con distintivo de reproducción */
.kcv .kcv-thumb{position:relative;margin:0!important;line-height:0}
.kcv .kcv-thumb .et_pb_image_wrap{display:block;width:100%}
.kcv .kcv-thumb img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
  background:#e9eaec;
}
.kcv .kcv-thumb::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:56px;height:56px;
  margin:-28px 0 0 -28px;
  border-radius:50%;
  background:rgba(44,52,59,.72) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50%/22px 22px;
  transition:background-color .18s ease;
  pointer-events:none;
}
.kcv .kcv-card:hover .kcv-thumb::after{background-color:#C2D500}

/* 5 · Texto de la tarjeta */
.kcv .kcv-size{padding:14px 16px 0}
.kcv .kcv-size h3{font-size:1.15rem;font-weight:800;margin:0;line-height:1.2}
.kcv .kcv-body{padding:2px 16px 0}
.kcv .kcv-body p{margin:0;font-size:.85rem;color:#6B7280;line-height:1.45}
.kcv .kcv-body p + p{margin-top:8px}

/* 6 · El enlace cubre toda la tarjeta (patrón de tarjeta enlazada).
   Sigue siendo un <a> real: sin JS descarga el vídeo, con JS abre el visor. */
.kcv a.kcv-go{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  font-weight:700;
  color:#616B00;
  text-decoration:underline;
  text-underline-offset:3px;
}
.kcv a.kcv-go::after{content:"";position:absolute;inset:0;z-index:1}
.kcv a.kcv-go:focus-visible{outline:3px solid #616B00;outline-offset:2px;border-radius:4px}

/* 7 · El enlace que planta el JS bajo la recomendación de la calculadora */
.kcv-inline[hidden]{display:none!important}
.kcv-inline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  padding:6px 0;
  min-height:32px;
  background:none;
  border:0;
  font:inherit;
  font-size:.85rem;
  font-weight:700;
  color:#616B00;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.kcv-inline svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.kcv-inline:focus-visible{outline:3px solid #616B00;outline-offset:2px;border-radius:4px}

/* 8 · Visor */
#kcvDlg{border:0;padding:0;background:transparent;max-width:min(94vw,1000px);width:100%;overflow:visible}
#kcvDlg::backdrop{background:rgba(20,24,28,.82)}
#kcvDlg .kcv-box{background:#000;border-radius:16px;overflow:hidden;position:relative}
#kcvDlg video{display:block;width:100%;height:auto;aspect-ratio:3/2;background:#000}
#kcvDlg .kcv-cap{background:#2C343B;color:#fff;padding:12px 54px 12px 16px;font-size:.95rem;font-weight:600;margin:0}
#kcvDlg .kcv-close{
  position:absolute;top:8px;right:8px;
  width:44px;height:44px;
  border-radius:50%;border:0;
  background:rgba(20,24,28,.72);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#kcvDlg .kcv-close:focus-visible{outline:3px solid #C2D500;outline-offset:2px}

/* 9 · Móvil: dos por fila. Los overrides de flex SOLO en escritorio, nunca aquí. */
@media(max-width:980px){
  .kcv{row-gap:12px!important;gap:12px!important}
  .kcv .et_pb_row{--horizontal-gap:12px;--horizontal-gap-parent:12px;column-gap:12px!important;row-gap:12px!important;flex-wrap:wrap!important}
  /* Divi no apila estas columnas por su cuenta: a 390 px salian a 79 px de ancho */
  .kcv .et_pb_row > .et_pb_column{flex:0 0 calc(50% - 6px)!important;width:calc(50% - 6px)!important;max-width:none!important}
  .kcv .kcv-size{padding:10px 12px 0}
  .kcv .kcv-body{padding:2px 12px 0}
  .kcv .kcv-size h3{font-size:1rem}
  .kcv .kcv-thumb::after{width:44px;height:44px;margin:-22px 0 0 -22px;background-size:18px 18px}
}
@media(min-width:981px){
  .kcv .et_pb_row > .et_pb_column{flex:1 1 0!important;width:auto!important;max-width:none!important}
}
@media(prefers-reduced-motion:reduce){
  .kcv .kcv-card{transition:none}
  .kcv .kcv-card:hover{transform:none}
}

/* 10 · ⚠️ El overlay del enlace tiene que cubrir la TARJETA, no el texto.
   Divi pone position:relative en .et_pb_text_inner, y ESE se convertia en el
   bloque contenedor del ::after: solo los ~75 px del texto eran pulsables y la
   miniatura con el boton de play no hacia nada (lo reporto el cliente el 26-ago). */
.kcv .kcv-card .kcv-body,
.kcv .kcv-card .kcv-body .et_pb_text_inner{position:static}
.kcv .kcv-card{cursor:pointer}