/*
Theme Name: Barber
Theme URI: 
Description: A child theme for Hello Elementor
Author: .oo
Author URI: 
Template: hello-elementor
Version: 1.2.3
Text Domain: barbados
*/

/* ============================================================
   vitivinicultura.net — Plantilla de artículo
   Fichero completo. Reemplaza wp-content/themes/barber/style.css
   Paleta tomada de los colores globales de Elementor del propio tema.
   ============================================================ */

:root{
  --vb-granate:#941D57;
  --vb-granate-claro:#AB2164;
  --vb-rosa-hover:#F9F1F5;
  --vb-vino:#1E0512;
  --vb-tinto:#13030B;
  --vb-dorado:#D1A544;
  --vb-rosa:#F9F1F5;
  --vb-crema:#FBF1E1;
  --vb-hoja:#94C11A;
  --vb-hoja-suave:#E4F0C5;
  --vb-hoja-fondo:#F7FCEB;
  --vb-gris:#797E82;
  --vb-linea:#E7DDE3;
  --vb-tinta:#1C1418;
  --vb-medida:42rem;
}

/* ------------------------------------------------------------
   1. FALLO A CORREGIR: desbordamiento horizontal en móvil
   Detectado en dev: el texto sale del borde derecho.
   ------------------------------------------------------------ */
html,body{overflow-x:hidden;}
/* `hidden` en html/body crea contexto de scroll y anula position:sticky en
   TODOS los descendientes (por eso el indice lateral no se pegaba).
   `clip` recorta igual pero sin crear ese contexto. Si el navegador no lo
   soporta, se queda en `hidden`: sin sticky, pero sin barra horizontal. */
@supports (overflow-x: clip){
  html,body{overflow-x:clip;}
}
.elementor-widget-theme-post-content img,
.elementor-widget-theme-post-content iframe,
.elementor-widget-theme-post-content table,
.elementor-widget-theme-post-content pre{max-width:100%;height:auto;}
.elementor-widget-theme-post-content table{display:block;overflow-x:auto;}

/* ------------------------------------------------------------
   2. Medida de línea y respiración lateral
   De ~120 caracteres por línea a ~75.
   ------------------------------------------------------------ */
body.single-post .elementor.elementor .e-con > .elementor-widget-theme-post-content,
body.single-post .e-con.e-con > .e-con-inner > .elementor-widget-theme-post-content,
body.single-post .elementor-widget-theme-post-content{
  max-width:var(--vb-medida);
  margin-left:0;         /* alineado con el hero, no centrado en su columna */
  margin-right:auto;     /* el sobrante se va todo al lado derecho          */
  padding-left:0;        /* el aire lateral lo pone el contenedor           */
  padding-right:1.25rem;
  font-size:1.125rem;
  line-height:1.75;
  color:var(--vb-tinta);
}
@media(max-width:1020px){
  body.single-post .elementor.elementor .e-con > .elementor-widget-theme-post-content,
  body.single-post .e-con.e-con > .e-con-inner > .elementor-widget-theme-post-content,
  body.single-post .elementor-widget-theme-post-content{
    max-width:100%;
    padding-left:1rem;
    padding-right:1rem;
  }
}

/* ------------------------------------------------------------
   3. Jerarquía de encabezados
   En dev, H2 y H3 tenían casi el mismo peso visual.
   ------------------------------------------------------------ */
body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h2.wp-block-heading{
  font-size:1.68rem;
  line-height:1.22;
  color:var(--vb-vino);
  margin:2.8rem 0 .8rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--vb-linea);
}
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h3.wp-block-heading{
  font-size:1.17rem;
  line-height:1.3;
  color:var(--vb-granate);
  font-weight:400;
  margin:1.8rem 0 .4rem;
  border:0;
}
body.single-post .elementor-widget-theme-post-content h4,
body.single-post .elementor-widget-theme-post-content h4.wp-block-heading{
  font-size:1.05rem;
  color:var(--vb-gris);
  font-weight:400;
  margin:1.4rem 0 .3rem;
}
body.single-post .elementor-widget-theme-post-content p{margin:0 0 1.15rem;}
body.single-post .elementor-widget-theme-post-content a{
  color:var(--vb-granate);
  text-underline-offset:3px;
}

/* ------------------------------------------------------------
   4. Entradilla (primer párrafo con clase .vb-entradilla)
   ------------------------------------------------------------ */
.vb-entradilla{
  font-size:1.24rem;
  line-height:1.6;
  color:#4A3B42;
  margin:0 0 1.5rem;
}

/* ------------------------------------------------------------
   5. Firma bajo el titular
   ------------------------------------------------------------ */
.vb-firma{
  display:flex;gap:.95rem;align-items:center;
  /* Misma medida y centrado que el cuerpo del artículo:
     la firma vive en su propio widget, fuera del contenido. */
  max-width:var(--vb-medida);
  margin:0 auto 2rem;
  padding:.9rem 1.25rem;
  border-top:1px solid var(--vb-linea);
  border-bottom:1px solid var(--vb-linea);
}
@media(max-width:1020px){
  .vb-firma{max-width:100%;}
}
.vb-firma img{width:54px;height:54px;border-radius:50%;flex:none;}
/* Elementor trae `.elementor img{border-radius:0}` con la misma especificidad
   que la regla de arriba y se carga después, así que la anulaba y la foto
   salía cuadrada. Con `.elementor` delante gana la nuestra.
   object-fit:cover evita que un avatar no cuadrado salga ovalado. */
.elementor .vb-firma img,
.vb-firma img.avatar{
  border-radius:50%;
  object-fit:cover;
  aspect-ratio:1/1;
}
.vb-firma .txt{font-size:.94rem;line-height:1.5;}
.vb-firma .txt b{font-size:1.06rem;color:var(--vb-granate);}
.vb-firma .txt span{display:block;color:var(--vb-gris);}
/* El sello es la excepción: sin esto hereda el display:block de la regla de
   arriba y el borde ocre se estira a todo el ancho de la firma. */
.vb-firma .txt span.vb-sello{display:inline-block;width:auto;}
.vb-sello{
  display:inline-block;font-size:.76rem;color:var(--vb-granate);
  border:1px solid var(--vb-dorado);border-radius:2px;
  padding:.05rem .42rem;margin-left:.35rem;white-space:nowrap;
}

/* ------------------------------------------------------------
   6. Bloque "Lo esencial"
   ------------------------------------------------------------ */
.vb-esencial{
  background:var(--vb-rosa);
  border-left:3px solid var(--vb-dorado);
  padding:1.35rem 1.55rem;margin:0 0 2.2rem;
}
.vb-esencial h2{
  font-size:1.15rem !important;margin:0 0 .7rem !important;
  color:var(--vb-vino);border:0 !important;padding:0 !important;
}
.vb-esencial ul{margin:0;padding-left:1.15rem;}
.vb-esencial li{margin-bottom:.5rem;font-size:1.02rem;line-height:1.6;}
.vb-esencial li:last-child{margin-bottom:0;}

/* ------------------------------------------------------------
   7. Bloque "Lo que vemos en el vivero"
   ------------------------------------------------------------ */
.vb-vivero{
  background:var(--vb-vino);color:#F2E4EC;
  padding:1.6rem 1.7rem;margin:2.6rem 0;border-radius:3px;
}
.vb-vivero h2{
  font-size:1.2rem !important;margin:0 0 .6rem !important;
  color:var(--vb-dorado);border:0 !important;padding:0 !important;
}
.vb-vivero p{margin:0;font-size:1.03rem;line-height:1.7;}

/* ------------------------------------------------------------
   8. Caja de autor al final
   Sustituye el verde de Simple Author Box, que venía del
   accent #61CE70 de Hello Elementor sin personalizar.
   ------------------------------------------------------------ */
.vb-autor,
.saboxplugin-wrap{
  background:var(--vb-crema) !important;
  border:0 !important;
  border-top:3px solid var(--vb-granate) !important;
  padding:1.6rem !important;
  margin:3rem 0 0 !important;
}
.saboxplugin-wrap .saboxplugin-authorname a{color:var(--vb-granate) !important;}
.saboxplugin-wrap .saboxplugin-desc{color:var(--vb-tinta) !important;}
.saboxplugin-wrap .saboxplugin-web{
  word-break:break-all;   /* el enlace salía cortado en dev */
  color:var(--vb-granate) !important;
}

/* ------------------------------------------------------------
   9. Índice lateral fijo
   ------------------------------------------------------------ */
.vb-indice{position:sticky;top:1.5rem;font-size:.97rem;}
.vb-indice h2{
  font-size:1rem !important;color:var(--vb-gris);
  margin:0 0 .6rem !important;font-weight:400;
  border:0 !important;padding:0 !important;
}
.vb-indice ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--vb-linea);}
.vb-indice a{
  display:block;padding:.36rem 0 .36rem .95rem;
  color:var(--vb-gris);text-decoration:none;
  border-left:2px solid transparent;margin-left:-1px;line-height:1.4;
}
.vb-indice a:hover{color:var(--vb-tinta);}
.vb-indice a.act{color:var(--vb-granate);border-left-color:var(--vb-granate);}
@media(max-width:1020px){.vb-indice{display:none;}}

/* ------------------------------------------------------------
   10. Barra de progreso de lectura
   ------------------------------------------------------------ */
.vb-lectura{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--vb-linea);
}
.vb-lectura .meta{
  max-width:74rem;margin:0 auto;padding:.45rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;font-size:.85rem;color:var(--vb-gris);
}
.vb-lectura .tit{
  color:var(--vb-tinta);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.vb-lectura .rest b{font-weight:400;color:var(--vb-granate);}
@media(max-width:560px){
  .vb-lectura .tit{display:none;}
  .vb-lectura .meta{justify-content:flex-end;}
}
.vb-pista{height:3px;background:var(--vb-rosa);}
.vb-avance{height:3px;width:0;background:var(--vb-granate);transition:width .08s linear;}

/* ------------------------------------------------------------
   11. Preguntas frecuentes en acordeón
   ------------------------------------------------------------ */
.vb-faq details{border-bottom:1px solid var(--vb-linea);padding:.9rem 0;}
.vb-faq summary{
  cursor:pointer;font-size:1.1rem;color:var(--vb-vino);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;
}
.vb-faq summary::-webkit-details-marker{display:none;}
.vb-faq summary::after{content:"+";color:var(--vb-dorado);font-size:1.3rem;line-height:1;}
.vb-faq details[open] summary::after{content:"–";}
.vb-faq details p{margin:.6rem 0 0;font-size:1.02rem;}

/* ------------------------------------------------------------
   12. Accesibilidad
   ------------------------------------------------------------ */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--vb-dorado);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .vb-avance{transition:none;}
}


/* ------------------------------------------------------------
   13. PIE PROPIO  (.vb-pie)
   Estilo tomado del pie de shop.viverosbarber.com:
   títulos en mayúsculas blancas, enlaces claros, fondo oscuro.
   ------------------------------------------------------------ */
.vb-pie{background:var(--vb-tinto);color:#fff;font-family:Philosopher,Georgia,serif;}
.vb-pie *{box-sizing:border-box;}

/* Franja clara con la línea blanca pegada a su borde inferior, y el
   medallón cruzándola: arriba zona clara, abajo el pie oscuro. Es el
   mismo remate que usa viverosbarber.com.
   El color va escrito aquí y no en --vb-vino a propósito: esa variable
   se usa en más sitios del blog y no hay que moverla. */
.vb-pie-logo{background:#2A0F1C;height:78px;position:relative;}
.vb-pie-logo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:10px;background:#fff;
}
.vb-pie-logo span{
  position:absolute;left:50%;bottom:-35px;transform:translateX(-50%);z-index:2;
  background:#fff;border-radius:60px;padding:14px 38px;
  display:inline-flex;align-items:center;
}
.vb-pie-logo span b{color:var(--vb-granate);font-size:1.4rem;}
/* Se limita el ALTO, no el ancho: el logotipo es 4:1 y si se ata por el
   ancho la pastilla se estira a lo alto y sale un huevo. */
.vb-pie-logo img{display:block;width:auto;height:auto;max-height:52px;max-width:240px;}

.vb-pie-cols{
  max-width:74rem;margin:0 auto;padding:5.4rem 1.5rem 2rem;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.6rem;
}
@media(max-width:960px){.vb-pie-cols{grid-template-columns:1fr 1fr;gap:2.2rem;}}
@media(max-width:560px){
  .vb-pie-cols{grid-template-columns:1fr;gap:2rem;padding-top:4.8rem;}
  .vb-pie-logo span{padding:12px 30px;}
}

.vb-pie h3{
  font-family:Philosopher,serif;font-size:.95rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  margin:0 0 1.05rem;border:0;padding:0;
}
/* Todo en blanco: el dorado y los grises salen del pie. */
.vb-pie a{
  color:#fff;text-decoration:none;display:block;
  padding:.3rem 0;font-size:.97rem;line-height:1.45;transition:opacity .15s;
}
.vb-pie a:hover,.vb-pie a:focus-visible{color:#fff;opacity:.72;text-decoration:underline;}
/* Mismo ritmo que las columnas de enlaces: sin el hueco que dejaba el
   párrafo, para que viverosbarber.com caiga a la altura del segundo enlace
   de las vecinas. */
.vb-pie p{margin:0 0 .3rem;font-size:.97rem;line-height:1.45;color:#fff;max-width:26rem;}
.vb-pie p b{color:#fff;font-weight:700;}
.vb-pie-web{color:#fff !important;font-size:1rem;font-weight:700;}
.vb-pie-web:hover{color:#fff !important;}

.vb-pie-redes{display:flex;justify-content:center;gap:.9rem;padding:.6rem 1.25rem 1.8rem;}
.vb-pie-redes a{
  width:38px;height:38px;padding:0;flex:none;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.vb-pie-redes a:hover{border-color:#fff;background:rgba(255,255,255,.10);opacity:1;}
.vb-pie-redes svg{width:17px;height:17px;fill:currentColor;}

/* La barra legal se queda negra del todo, con la letra en blanco. */
.vb-pie-legal{background:#090105;border-top:1px solid rgba(255,255,255,.07);}
.vb-pie-legal-in{
  max-width:74rem;margin:0 auto;padding:1rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#fff;
}
.vb-pie-legal-in a{display:inline-block;padding:0;font-size:.85rem;color:#fff;}
.vb-pie-legal-in nav{display:flex;gap:1.3rem;flex-wrap:wrap;}
@media(max-width:640px){.vb-pie-legal-in{justify-content:center;text-align:center;}}

/* Respaldo: si el hook de Hello cambiara de nombre, esto lo oculta igual */
#site-footer.site-footer{display:none !important;}

/* ------------------------------------------------------------
   14. BARRA DE PROGRESO + CONTADOR FLOTANTE
   ------------------------------------------------------------ */
.vb-progreso{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:7px;background:rgba(148,29,87,.13);pointer-events:none;
}
.vb-progreso-barra{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--vb-granate),var(--vb-dorado));
  box-shadow:0 1px 4px rgba(148,29,87,.35);
  transition:width .08s linear;
}
body.admin-bar .vb-progreso{top:32px;}
@media(max-width:782px){body.admin-bar .vb-progreso{top:46px;}}

/* Pastilla flotante con los minutos restantes */
.vb-contador{
  position:fixed;left:1.4rem;bottom:1.4rem;z-index:9998;
  display:flex;align-items:center;gap:.5rem;
  background:var(--vb-vino);color:#F2E4EC;
  padding:.5rem .9rem .5rem .55rem;border-radius:999px;
  box-shadow:0 6px 20px rgba(30,5,18,.34);
  font-family:Philosopher,Georgia,serif;font-size:.92rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.vb-contador--on{opacity:1;transform:translateY(0);}
.vb-contador-aro{width:30px;height:30px;flex:none;transform:rotate(-90deg);}
.vb-aro-fondo{fill:none;stroke:rgba(255,255,255,.18);stroke-width:3;}
.vb-aro-linea{fill:none;stroke:var(--vb-dorado);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .12s linear;}
.vb-contador-txt b{color:var(--vb-dorado);font-weight:700;}

@media(max-width:600px){
  .vb-contador{left:.9rem;bottom:.9rem;font-size:.86rem;padding:.42rem .75rem .42rem .45rem;}
  .vb-contador-aro{width:26px;height:26px;}
}

@media(prefers-reduced-motion:reduce){
  .vb-progreso-barra,.vb-contador,.vb-aro-linea{transition:none;}
}

/* Dato de tiempo de lectura, dentro de la firma */
.vb-lectura-min{
  display:block;color:var(--vb-granate);
  font-size:.88rem;margin-top:.15rem;
}

/* ============================================================
   Cabecera — tamaño del menú principal (escritorio)
   v1.1.8
   El widget de menú 3f664c5d está enlazado a la tipografía global
   "Secundaria" (18px), así que el campo Tamaño de Elementor se
   descarta al guardar. Se fija aquí.
   Solo por encima de 1024px: el widget lleva la clase
   elementor-nav-menu--dropdown-tablet, o sea que de 1024 hacia
   abajo se convierte en hamburguesa y esta regla no debe tocarlo.
   El "body" delante sube la especificidad por encima de la regla
   de Elementor, que se carga después.
   ============================================================ */

@media (min-width:1025px){
  body .elementor-12189 .elementor-element.elementor-element-3f664c5d
  .elementor-nav-menu--main .elementor-item{
    font-size:16px;
  }
}

/* ============================================================
   Cabecera — color al pasar el ratón en los desplegables
   v1.2.0
   Elementor usa el granate corporativo #941D57 como fondo del
   elemento sobre el que esta el raton, con texto blanco.
   Se invierte: fondo rosa palido #F9F1F5 (color ya existente en
   la paleta global de Elementor) y texto granate.
   Contraste 7.4:1, muy holgado.
   Se aplica a los dos menus, el de escritorio (3f664c5d) y el
   desplegable de la hamburguesa de movil (2b36d02f).
   ============================================================ */

body .elementor-12189 .elementor-element.elementor-element-3f664c5d .elementor-nav-menu--dropdown a:hover,
body .elementor-12189 .elementor-element.elementor-element-3f664c5d .elementor-nav-menu--dropdown a:focus,
body .elementor-12189 .elementor-element.elementor-element-3f664c5d .elementor-nav-menu--dropdown a.elementor-item-active,
body .elementor-12189 .elementor-element.elementor-element-3f664c5d .elementor-nav-menu--dropdown a.highlighted,
body .elementor-12189 .elementor-element.elementor-element-2b36d02f .elementor-nav-menu--dropdown a:hover,
body .elementor-12189 .elementor-element.elementor-element-2b36d02f .elementor-nav-menu--dropdown a:focus,
body .elementor-12189 .elementor-element.elementor-element-2b36d02f .elementor-nav-menu--dropdown a.elementor-item-active,
body .elementor-12189 .elementor-element.elementor-element-2b36d02f .elementor-nav-menu--dropdown a.highlighted{
  background-color:var(--vb-rosa-hover);
  color:var(--vb-granate);
}

/* ============================================================
   Descripcion de la categoria en la cabecera de archivo
   v1.2.1
   El widget ebd33cd de la plantilla 12208 pinta la descripcion
   del termino tal cual, con su HTML. Como el contenedor centra,
   las listas salian centradas y con las vinetas sueltas.
   Aqui se acota el ancho de lectura, se alinea la lista a la
   izquierda dentro del bloque centrado y se da color de marca a
   los enlaces.
   ============================================================ */

body .elementor-element.elementor-element-ebd33cd{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
body .elementor-element.elementor-element-ebd33cd p{
  margin:0 0 .7em;
}
body .elementor-element.elementor-element-ebd33cd p:last-child{
  margin-bottom:0;
}
/* La lista se centra como bloque, pero por dentro va alineada. */
body .elementor-element.elementor-element-ebd33cd ul,
body .elementor-element.elementor-element-ebd33cd ol{
  display:inline-block;
  text-align:left;
  margin:.2em 0 .8em;
  padding-left:1.1em;
  columns:2;
  column-gap:2.2em;
}
body .elementor-element.elementor-element-ebd33cd li{
  margin:.12em 0;
  break-inside:avoid;
}
body .elementor-element.elementor-element-ebd33cd li::marker{
  color:var(--vb-granate,#941D57);
}
body .elementor-element.elementor-element-ebd33cd a{
  color:var(--vb-granate,#941D57);
  text-decoration:none;
  border-bottom:1px solid rgba(148,29,87,.35);
}
body .elementor-element.elementor-element-ebd33cd a:hover{
  border-bottom-color:#941D57;
}
@media(max-width:600px){
  body .elementor-element.elementor-element-ebd33cd ul,
  body .elementor-element.elementor-element-ebd33cd ol{
    columns:1;
  }
}

/* ============================================================
   Espaciado del bloque de categoria
   v1.2.2
   El contenedor 1e23998 de la plantilla 12208, que aloja los dos
   shortcodes, viene con 5em de padding arriba y 0 abajo. De ahi
   el hueco enorme bajo la cabecera rosa y que el ultimo boton
   quede pegado a la franja de confianza.
   Ademas, en cada categoria uno de los dos shortcodes devuelve
   cadena vacia, pero su widget sigue ocupando la separacion
   entre widgets. Se oculta cuando esta vacio.
   ============================================================ */

body .elementor-12208 .elementor-element.elementor-element-1e23998{
  --padding-top:1.2em;
  --padding-bottom:3.5em;
}

body .elementor-widget-shortcode:has( > .elementor-shortcode:empty ){
  display:none;
}
/* Reserva para navegadores sin :has(): al menos no deja el hueco. */
body .elementor-shortcode:empty{
  display:none;
}

@media(max-width:767px){
  body .elementor-12208 .elementor-element.elementor-element-1e23998{
    --padding-top:.8em;
    --padding-bottom:2.5em;
  }
}

/* ============================================================
   La cabecera, siempre por encima del contenido
   v1.2.3
   El submenu desplegable de Elementor usa z-index:2. Cualquier
   bloque de la pagina con ese mismo z-index y posterior en el
   HTML lo tapa: paso con el hero de la portada, que dejaba ver
   el titular a traves del desplegable.
   Con esto la cabecera y sus desplegables quedan siempre
   delante, sea cual sea el contenido de la pagina.
   ============================================================ */

body .elementor-location-header{
  position:relative;
  z-index:100;
}