/* ==========================================================================
   Roqueta Origen — ajustes de marca sobre la plantilla wizym
   (no tocar los CSS originales; todo lo propio va aquí)
   ========================================================================== */

/* ---- Paleta ---- */
:root{
  --ro-dark:#2a2622;      /* cabecera / pie oscuro, como la web actual */
  --ro-gold:#c8a24a;      /* acento dorado vino */
  --ro-cream:#f2ede4;     /* texto claro sobre oscuro */
}

/* ---- Cabecera oscura ---- */
header.style1 #site-header{
  background-color:var(--ro-dark) !important;
  /* Keep the fixed navigation above decorative bottles while scrolling. */
  z-index:1000;
}
header.style1{ box-shadow:none !important; }

/* ---- Logo en texto (como roquetaorigen.com) ---- */
.logo-roqueta{
  display:inline-block;
  color:#ffffff !important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:400;
  letter-spacing:3px;
  text-transform:uppercase;
  text-decoration:none;
}
.logo-roqueta:hover{ color:var(--ro-gold) !important; }

/* ---- Menú claro sobre cabecera oscura ---- */
#mainnav .menu > li > a{
  color:var(--ro-cream) !important;
  font-weight:500;
  letter-spacing:1px;
}
#mainnav .menu > li > a:hover,
#mainnav .menu > li.active > a{ color:var(--ro-gold) !important; }

/* Separación entre items del menú */
#mainnav .menu > li{ padding:0 18px; }

/* Botones del hero: MISMO estilo para los 2 slides (borde crema, hover dorado) */
.flat-slider .button-project,
.flat-slider .button-project.btn-gray{
  border:1px solid rgba(255,255,255,.85) !important;
  background:transparent !important;
  color:#ffffff !important;
}
.flat-slider .button-project:hover,
.flat-slider .button-project.btn-gray:hover{
  border-color:var(--ro-gold) !important;
  background:var(--ro-gold) !important;
  color:#ffffff !important;
}
/* la plantilla usa un pseudo ::before ROJO (rgb(192,35,35)) como relleno "cortina" del hover: a dorado */
.flat-slider .button-project:before,
.flat-slider .button-project.btn-gray:before{
  background:var(--ro-gold) !important;
}

/* Icono hamburguesa del menú móvil en crema (la plantilla lo pinta rojo) */
.mobile-button:before,
.mobile-button:after,
.mobile-button span{ background-color:var(--ro-cream) !important; }

/* Cabecera móvil: logo compacto + idiomas en línea junto a la hamburguesa */
@media (max-width: 991px){
  header.style1 #site-header .container-fluid{
    position:relative;
    display:flex; align-items:center;
  }
  .logo-roqueta{ font-size:16px; letter-spacing:1.5px; white-space:nowrap; flex-shrink:0; }
  header.style1 .mobile-button{ right:15px; background:transparent !important; }
  header.style1 .lang-switch{
    float:none; clear:none; position:static; transform:none;
    margin-left:auto; padding:0 46px 0 10px; text-align:right;
  }
  header.style1 .lang-switch ul{ white-space:nowrap; }
  header.style1 .lang-switch li a{ padding:2px 6px; font-size:12px; }
  /* desplegable hamburguesa a los colores de marca */
  #mainnav-mobi{ background-color:var(--ro-dark); }
  #mainnav-mobi ul li{ border-top:1px solid rgba(242,237,228,.12); }
  #mainnav-mobi ul > li > a{ color:var(--ro-cream); letter-spacing:1.5px; font-size:13px; }
  #mainnav-mobi ul > li > a:hover{ color:var(--ro-gold); }
}

/* (btn-gray unificado con el estilo base arriba: los 2 botones del hero iguales) */

/* Sección historia: aire entre foto y texto + misma altura de columnas */
@media (min-width: 992px){
  .flat-about .col-lg-5{ padding-left:55px; }
  .flat-about .row{ align-items:stretch; }
  .flat-about .image-single{ height:100%; }
  .flat-about .image-single img{ height:100%; width:100%; object-fit:cover; }
  .flat-about .flat-divider.margin-top50px{ margin-top:0; }
}

/* ---- Acento de plantilla (rojo) → dorado Roqueta ---- */
.flat-textbox .textbox-title a,
.title-section .our-product-title a{ color:var(--ro-gold) !important; }
/* Hover de titulos-enlace: rojo del template (192,35,35) -> dorado */
.title-section .our-product-main a:hover,
.title-section .our-product-title a:hover,
.flat-textbox .textbox-main a:hover,
.flat-textbox .textbox-title a:hover{ color:var(--ro-gold) !important; }
.information-content a,
.section-interior a{ color:var(--ro-gold); }
.information-content a:hover,
.section-interior a:hover{ color:var(--ro-dark); }
.themesflat-button.outline.ol-accent{
  color:var(--ro-dark) !important;
  border:1px solid var(--ro-gold) !important;
}
.themesflat-button.outline.ol-accent:hover{ color:#ffffff !important; }
.hvr-shutter-out-horizontal:before{ background:var(--ro-gold) !important; }
.title-section .our-product-image img{ filter:grayscale(100%); opacity:.55; }

/* ---- Selector de idioma (sustituye al buscador de la plantilla) ---- */
.lang-switch{ float:right; padding:28px 0; }
.lang-switch ul{ margin:0; padding:0; list-style:none; }
.lang-switch li{ display:inline-block; }
.lang-switch li + li{ border-left:1px solid rgba(242,237,228,.25); }
.lang-switch li a{
  display:inline-block; padding:2px 10px;
  color:var(--ro-cream); font-size:13px; font-weight:500; letter-spacing:1px;
}
.lang-switch li a:hover,
.lang-switch li.lang-active a{ color:var(--ro-gold); }

/* ---- Tarjetas de bodegas (home, sección Our Brands) ---- */
.marques-grid{
  display:flex; flex-wrap:wrap; gap:20px;
  margin-top:40px;
}
/* El .clearfix de Bootstrap mete un ::after que aqui cuenta como item flex: en movil
   caia en la fila de la ultima tarjeta y el gap le robaba 20px de ancho (Naveran). */
.marques-grid:before,
.marques-grid:after{ content:none !important; }
.marca-card{
  flex:1 1 220px; min-height:230px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background-color:var(--ro-dark);
  background-size:cover; background-position:center;
  position:relative; overflow:visible;
  padding:30px 28px; text-align:center; text-decoration:none;
  border:1px solid transparent;
  transition:border-color .3s ease, transform .3s ease;
}
.marca-card:before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:rgba(26,22,18,.74);
  transition:background .3s ease;
}
.marca-card:hover:before{ background:rgba(26,22,18,.55); }
.marca-card > span{ position:relative; z-index:1; }
.marca-card:hover{ border-color:var(--ro-gold); transform:translateY(-4px); }
.marca-do{
  color:var(--ro-gold); font-size:12px; font-weight:600;
  letter-spacing:2px; margin-bottom:14px;
}
.marca-nom{
  color:#ffffff; font-family:Georgia,"Times New Roman",serif;
  font-size:30px; line-height:1.15; margin-bottom:12px;
}
.marca-lloc{ color:#9a9186; font-size:13px; }
.marques-otres{
  text-align:center; margin-top:28px; color:#6b6459;
  font-size:15px; line-height:1.7; max-width:760px; margin-left:auto; margin-right:auto;
}
.marques-otres a{ color:var(--ro-gold); text-decoration:none; }
.marques-otres a:hover{ text-decoration:underline; }
.our-product-new .elm-btn{ margin-top:34px; }

/* ---- Nuestros vinos (botellas flotando, estilo shop style2) ---- */
.flat-vins{ padding:80px 0 60px; background:#ffffff; }
.vins-grid{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:45px;
}
.vi-card{
  flex:1 1 150px; max-width:200px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; padding:16px 12px 20px;
  background:transparent; border:none;
  transition:transform .35s ease;
}
.vi-card:hover{ transform:translateY(-8px); }
.vi-img{ height:300px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:22px; }
.vi-img img{
  max-height:300px; max-width:100%; width:auto; object-fit:contain;
  mix-blend-mode:multiply;
}
.vi-nom{
  color:var(--ro-dark); font-family:Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.25; margin-bottom:8px;
}
.vi-do{ color:var(--ro-gold); font-size:11px; font-weight:600; letter-spacing:1.5px; }

/* ---- CTA tienda ---- */
.flat-shop-cta{ padding:40px 0 80px; }
.flat-shop-cta .elm-btn{ text-align:center; margin-top:30px; }
.flat-shop-cta .elm-btn a{
  display:inline-block; padding:14px 42px;
  border:1px solid var(--ro-gold); color:var(--ro-dark) !important;
  font-size:13px; font-weight:600; letter-spacing:2px;
}
.flat-shop-cta .elm-btn a:hover{ background:var(--ro-gold); color:#ffffff !important; }

/* ---- Footer Roqueta ---- */
footer.style3.footer-roqueta{
  background:var(--ro-dark) !important;
  background-image:none !important;
  height:auto !important;
  max-height:none !important;
  padding:70px 0 30px;
}
.footer-roqueta .container{ text-align:left; }
.footer-roqueta .footer-bottom-roqueta,
.footer-roqueta .footer-feder-logo{ text-align:center; }
.footer-roqueta .footer-col{ margin-bottom:30px; }
.footer-roqueta p, .footer-roqueta li{ color:#b5aca0; font-size:14px; line-height:1.7; }
.footer-roqueta a{ color:var(--ro-cream); }
.footer-roqueta a:hover{ color:var(--ro-gold); }
.footer-roqueta .footer-about{ margin-top:18px; }
.footer-heading{
  color:#ffffff; font-size:15px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; margin:6px 0 18px;
}
.footer-links{ margin:0; padding:0; list-style:none; }
.footer-links li{ margin-bottom:8px; }
.footer-feder{
  border-top:1px solid rgba(242,237,228,.15);
  margin-top:20px; padding-top:26px; align-items:center;
}
.footer-feder p{ font-size:11px; color:#8d8478; }
.footer-feder-logo{ text-align:center; }
.footer-feder-logo img{ max-width:240px; background:#fff; padding:8px; }
.footer-bottom-roqueta{
  border-top:1px solid rgba(242,237,228,.15);
  margin-top:26px; padding-top:22px; text-align:center;
}
.footer-bottom-roqueta p{ margin-bottom:8px; font-size:12px; }
.wim-logo{ max-width:130px; margin-top:8px; }

/* ---- Banda de cifras (home) ---- */
.flat-stats{
  background-size:cover; background-position:center; background-attachment:fixed;
  position:relative; padding:90px 0;
}
.flat-stats:before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:rgba(26,22,18,.78);
}
.flat-stats .container{ position:relative; }
.stats-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:38px 30px; text-align:center;
}
/* 5 celdas del mismo ancho; la etiqueta lleva menos espaciado para que las largas quepan en 2 lineas */
.stat{ flex:0 1 210px; min-width:0; }
.stats-grid .stat-label{ letter-spacing:1.4px; line-height:1.55; }
@media (max-width:767px){
  .stats-grid{ gap:32px 24px; }
  .stat{ flex:0 1 calc(50% - 12px); }
}
.stat-num{
  display:block; font-family:Georgia,"Times New Roman",serif;
  font-size:52px; color:var(--ro-gold); line-height:1; margin-bottom:12px;
}
.stat-label{
  display:block; color:var(--ro-cream);
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
}

/* ---- Bodegas: modulo de 3 tarjetas (our-brands) ---- */
.bodegues-head{ text-align:center; margin-bottom:46px; }
.bodegues-eyebrow{
  color:var(--ro-gold); font-size:12px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:12px;
}
.bodegues-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px; line-height:1.2; color:var(--ro-dark);
}
.bodegues-grid{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.bodega-card{
  flex:1 1 300px; max-width:362px;
  background:#faf8f4; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.bodega-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(26,22,18,.10); }
.bodega-card-img{
  position:relative; height:360px; overflow:hidden;
  background-size:cover; background-position:center;
}
.bodega-card-img:after{ content:none; }
.bodega-card-img:before{
  content:""; position:absolute; inset:0; z-index:0;
  background:inherit; filter:grayscale(1) contrast(1.03);
}
.bodega-card-body{
  position:relative; padding:38px 30px 34px; text-align:center;
  display:flex; flex-direction:column; align-items:center; flex:1;
}
.bodega-card-body .marca-do{ margin-bottom:10px; }
.bodega-nom{
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px; color:var(--ro-dark); margin:0 0 14px;
}
.bodega-card-body p{ margin-bottom:22px; line-height:1.7; color:#6b6459; }
.bodega-arrow{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:1px solid #cbb78a; border-radius:50%;
  color:var(--ro-dark); transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.bodega-arrow:hover{ background:var(--ro-gold); border-color:var(--ro-gold); color:#ffffff; }

/* ---- Timeline (who-we-are) ---- */
/* la plantilla usa homepage114.png (placeholder EN BLANCO) de fondo; linea de tiempo vertical dorada centrada */
.flat-our-history{ padding-bottom:140px; background-image:none !important; background:#ffffff; }
.flat-our-history .container{ position:relative; }
.flat-our-history .container:before{
  content:""; position:absolute; left:50%; top:150px; bottom:20px;
  width:3px; transform:translateX(-50%); z-index:1; border-radius:2px;
  background:linear-gradient(to bottom, rgba(200,162,74,0) 0%, var(--ro-gold) 7%, var(--ro-gold) 93%, rgba(200,162,74,0) 100%);
  opacity:.85;
}
/* remates: rombo arriba y punto abajo */
.flat-our-history .container:after{
  content:""; position:absolute; left:50%; top:168px;
  width:11px; height:11px; transform:translateX(-50%) rotate(45deg);
  background:#fff; border:2px solid var(--ro-gold); z-index:2;
}
.flat-our-history .row{ position:relative; z-index:2; }
/* equilibrar columnas: la plantilla deja la col. derecha pegada al centro (15px) y la izq. a 77px;
   empujamos la derecha ~62px para que las etiquetas queden simetricas respecto a la botella centrada */
@media (min-width: 992px){
  .flat-our-history .info-history-right{ margin-left:62px; }
}
@media (max-width: 991px){
  /* En columna unica la linea central cortaba el texto por la mitad:
     se lleva al margen izquierdo y cada hito marca su punto. */
  .flat-our-history .container:before,
  .flat-our-history .container:after{ content:none !important; }

  /* Interleave the two desktop timeline columns in chronological order. */
  .flat-our-history .row > .col-lg-6,
  .flat-our-history .history-wrap,
  .flat-our-history .history-wrap-inter{ display:contents; }
  .flat-our-history .flat-divider{ display:none; }

  .flat-our-history .info-history,
  .flat-our-history .info-history-right{
    flex:0 0 100%; max-width:calc(100% - 37px);
    position:relative; text-align:left;
    margin:0 15px 0 22px !important;
    padding:0 15px 34px 32px !important;
    border-left:2px solid rgba(200,162,74,.5);
  }
  .flat-our-history .info-history-top{ order:1; }
  .flat-our-history .info-history-right-top{ order:2; }
  .flat-our-history .info-history-bottom{ order:3; }
  .flat-our-history .info-history-right-bottom{
    order:4; border-left-color:transparent; padding-bottom:0 !important;
  }

  /* el conector horizontal de la plantilla pasa a ser el punto del hito */
  .flat-our-history .container .info-history-top:after,
  .flat-our-history .container .info-history-bottom:after,
  .flat-our-history .container .info-history-right-top:after,
  .flat-our-history .container .info-history-right-bottom:after{
    content:"" !important; display:block !important; z-index:3;
    left:-9px !important; right:auto !important; top:6px !important;
    width:14px !important; height:14px !important;
    border-radius:50%;
    background:#ffffff !important;
    border:2px solid var(--ro-gold) !important;
  }
  /* los puntitos junto al titulo aqui sobran */
  .flat-our-history h2.title-history-top:after,
  .flat-our-history h2.title-history-bottom a:after,
  .flat-our-history h2.title-history-right:after,
  .flat-our-history h2.title-history:after{ content:none !important; }
}
.flat-our-history .info-history-top:after,
.flat-our-history .info-history-bottom:after,
.flat-our-history .info-history-right-top:after,
.flat-our-history .info-history-right-bottom:after,
.flat-our-history h2.title-history-top:after,
.flat-our-history h2.title-history-bottom a:after,
.flat-our-history h2.title-history-right:after,
.flat-our-history h2.title-history:after{
  background-color:var(--ro-gold) !important;
  border-color:var(--ro-gold) !important;
}
.flat-our-history .meta-history{ color:var(--ro-gold) !important; }
.flat-our-history .title-history-top a,
.flat-our-history .title-history-bottom a,
.flat-our-history .title-history-right a,
.flat-our-history .title-history a{ color:var(--ro-dark) !important; }
.flat-our-history .title-history-top a:hover,
.flat-our-history .title-history-bottom a:hover,
.flat-our-history .title-history-right a:hover,
.flat-our-history .title-history a:hover{ color:var(--ro-gold) !important; }

/* ---- Páginas interiores ---- */
.page-banner{
  background-size:cover; background-position:center; position:relative;
  padding:120px 0 65px;
}
.page-banner:before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:rgba(26,22,18,.45);
}
.page-banner .container{ position:relative; }
.page-banner-title{
  color:#ffffff; font-family:Georgia,"Times New Roman",serif;
  font-size:42px; letter-spacing:3px; text-transform:uppercase; margin:0;
}
.section-interior{ padding:70px 0; }
.section-interior p{ margin-bottom:14px; line-height:1.8; }
.section-interior h2{
  font-family:Georgia,"Times New Roman",serif; font-size:26px;
  color:var(--ro-dark); margin:34px 0 18px;
}
.text-eslogan{
  font-family:Georgia,"Times New Roman",serif; font-size:26px;
  color:var(--ro-dark); margin-bottom:26px; line-height:1.4;
}
.section-interior .img-content{ max-width:100%; height:auto; margin-top:26px; }

/* ---- Página Our Brands ---- */
/* El mapa es un modulo propio: se separa de las 3 tarjetas con un aire amplio
   (equivalente al padding de seccion, 70px) para que el ritmo vertical sea simetrico. */
.marques-mapa{ text-align:center; margin:78px 0 0; }
.mapa-title{
  font-family:Georgia,"Times New Roman",serif; font-size:32px;
  color:var(--ro-dark); margin-bottom:10px;
}
.mapa-sub{
  font-size:13px; letter-spacing:2px; color:#8d8478;
  text-transform:uppercase; margin-bottom:34px;
}
.marques-mapa img{ max-width:640px; width:100%; height:auto; }
.altres-marques{ background:#faf8f4; padding-bottom:120px; }
.altres-marques-title{
  text-align:center; font-family:Georgia,"Times New Roman",serif;
  font-size:30px; color:var(--ro-dark); margin-bottom:8px;
}
.altres-marques-sub{
  text-align:center; font-size:13px; letter-spacing:2px; color:#8d8478;
  text-transform:uppercase; margin-bottom:44px;
}
.altres-grid{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center; align-items:stretch;
  max-width:1040px; margin:0 auto;
}
.altra-marca{
  flex:1 1 180px; max-width:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none;
  background:#ffffff; border:1px solid #e7e0d5; border-radius:2px;
  padding:30px 18px 24px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.altra-marca:hover{ border-color:var(--ro-gold); transform:translateY(-4px); box-shadow:0 12px 26px rgba(26,22,18,.08); }
.altra-marca img{ max-width:130px; max-height:56px; width:auto; height:auto; object-fit:contain; margin-bottom:16px; }
.altra-marca span{
  display:block; font-size:10px; letter-spacing:1.5px; color:#8d8478; text-transform:uppercase;
}
.altra-marca:hover span{ color:var(--ro-gold); }

/* ---- Página Contact ---- */
.contact-map iframe{ width:100%; height:100%; min-height:420px; border:0; }
.contacte-info{
  background:#faf8f4; padding:32px 30px; border-top:3px solid var(--ro-gold);
  align-self:flex-start;
}
.contacte-info p{ line-height:1.9; margin-bottom:16px; }
.contacte-info p:last-child{ margin-bottom:0; }
.contacte-form > p{ color:#6b6459; margin-bottom:8px; }
@media (max-width:991px){ .contacte-info{ margin-bottom:26px; } }
#form-contacte{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px; }
#form-contacte > *{ grid-column:1 / -1; }
/* Nombre, Apellido, Email, Telefono, Ciudad, Pais -> media columna cada uno */
#form-contacte > .form-group:nth-child(n+2):nth-child(-n+7){ grid-column:auto; }
#form-contacte .form-group{ margin-bottom:0; }
#form-contacte .form-control{
  width:100%; padding:13px 16px; border:1px solid #d8d2c7; background:#fff;
  color:var(--ro-dark); font-size:15px; border-radius:2px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#form-contacte .form-control::placeholder{ color:#9a9186; }
#form-contacte .form-control:focus{
  outline:none; border-color:var(--ro-gold);
  box-shadow:0 0 0 3px rgba(200,162,74,.16);
}
#form-contacte textarea.form-control{ min-height:150px; resize:vertical; }
#form-contacte label{ font-weight:400; font-size:13px; color:#6b6459; }
#form-contacte .submit_btn{
  background:var(--ro-dark); color:var(--ro-cream); border:none;
  padding:14px 46px; letter-spacing:2px; cursor:pointer; border-radius:2px;
  transition:background .3s ease, color .3s ease;
}
#form-contacte .submit_btn:hover{ background:var(--ro-gold); color:#fff; }
@media (max-width:600px){ #form-contacte{ grid-template-columns:1fr; } }

/* Evitar el flash blanco al cargar: fondo con la primera imagen del slider mientras Revolution inicializa */
.flat-slider .rev_slider_wrapper{
  background:#2a2622 url('../image/roqueta-hero.jpg') center center / cover no-repeat;
  min-height:800px;
}
@media (max-width:1183px){ .flat-slider .rev_slider_wrapper{ min-height:580px; } }
@media (max-width:975px){ .flat-slider .rev_slider_wrapper{ min-height:500px; } }
@media (max-width:750px){ .flat-slider .rev_slider_wrapper{ min-height:480px; } }

/* ---- Timeline: conectores hasta la linea central + circulo en cada hito ---- */
@media (min-width: 992px){
  /* conectores uniformes que tocan la linea (el bloque izq. acaba a 77px del centro; el dcho. empieza a 77px) */
  .flat-our-history .info-history-top:after,
  .flat-our-history .info-history-bottom:after{
    right:-70px !important; left:auto !important; width:130px !important;
    height:2px !important; top:12px !important;
  }
  .flat-our-history .info-history-right-top:after,
  .flat-our-history .info-history-right-bottom:after{
    left:-70px !important; right:auto !important; width:130px !important;
    height:2px !important; top:12px !important;
  }
  /* los puntitos junto al titulo ya no hacen falta */
  .flat-our-history h2.title-history-top:after,
  .flat-our-history h2.title-history-bottom a:after,
  .flat-our-history h2.title-history-right:after,
  .flat-our-history h2.title-history:after{ content:none !important; }
}

/* ---- Capa de carga: que no dependa de JavaScript ----
   Antes la quitaba main.js, que va al final de una cadena de 21 scripts: si algo
   se retrasaba (un tercero, una conexion lenta) el visitante se comia la pantalla
   en blanco. Ahora se va sola a los 350 ms con una animacion CSS; el JS solo la
   retira del DOM cuando puede. */
#loading-overlay{
  animation: ro-preloader-out .45s ease .35s forwards;
}
@keyframes ro-preloader-out{
  to{ opacity:0; visibility:hidden; }
}

/* ---- Mensajes del formulario de contacto (los pinta contact.php) ---- */
.form-msg{
  padding:14px 18px; margin-bottom:22px; border-radius:2px;
  font-size:15px; line-height:1.6; text-align:left;
}
.form-msg p{ margin:0; }
.form-msg p + p{ margin-top:6px; }
.form-msg-ok{
  background:#f2f7f0; border-left:3px solid #6f8f5e; color:#3f5334;
}
.form-msg-error{
  background:#faf3ef; border-left:3px solid #b4693f; color:#7d4527;
}
#form-contacte .contacte-error:empty{ display:none; }