/* Turbo Internacional — adaptador Regatta para las plantillas de blog de Odoo.
 *
 * NO define colores ni tipos propios: consume las variables de regatta.css, que se
 * carga ANTES que este fichero. Asi, cualquier cambio de paleta o de escala en
 * regatta.css llega solo al blog y no hay dos fuentes de verdad que se desincronicen.
 *
 * Solo se carga en rutas /blog (vista "TI-CUSTOM: Regatta en el blog"), por eso
 * puede usar selectores globales como header#top sin afectar al resto del sitio.
 */

/* ---- fuera la cabecera y el pie de Odoo: los inyecta site.js igual que en la web ---- */
header#top,
footer#bottom { display: none !important; }

#wrapwrap { background: #fff; }

/* ---- portada del post ------------------------------------------------------ */
.o_wblog_post_page_cover {
  min-height: 46vh;
  background-color: var(--navy);
}
.o_wblog_post_page_cover .o_wblog_post_name,
.o_wblog_post_title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  font-size: var(--fs-display);
  /* red de seguridad: "TURBOCOMPRESORES" a 800 no cabe entera en anchos raros y sin esto
     no puede partirse -> scroll horizontal. Con el escalon movil de abajo casi nunca actua. */
  overflow-wrap: break-word;
}
@media (min-width: 900px) {
  .o_wblog_post_page_cover .o_wblog_post_name,
  .o_wblog_post_title { font-size: var(--fs-hero); }
}

/* seam: el subrayado chartreuse de la marca. Uno por composicion, nunca apilado. */
.o_wblog_post_page_cover .o_wblog_post_name::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: 24px;
  background: var(--chartreuse);
}

/* ---- metadatos (autor, fecha): mono, que es dato ---------------------------- */
#o_wblog_post_info,
#o_wblog_post_info a,
.o_wblog_post_page_cover time,
.o_wblog_normal_font_size {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-light);
}
#o_wblog_post_info a:hover { color: var(--chartreuse); }
.o_wblog_author_avatar { display: none; }   /* el autor es la empresa, no una persona */

/* ---- cuerpo del articulo --------------------------------------------------- */
#o_wblog_post_main {
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  color: var(--body);
}
#o_wblog_post_content,
.o_wblog_post_content_field {
  max-width: 72ch;          /* medida de lectura: sin esto el texto cruza toda la pantalla */
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-lg);
  line-height: 1.72;
}
.o_wblog_post_content_field p { margin: 0 0 1.15em; }

/* h4 incluido a proposito: los posts migrados de WordPress mezclan h2 (210), h3 (191)
   y h4 (50) sin jerarquia real. Sin el h4 esos 50 encabezados se quedaban sin marca. */
.o_wblog_post_content_field h2,
.o_wblog_post_content_field h3,
.o_wblog_post_content_field h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
  margin: 2.2em 0 0.7em;
}
.o_wblog_post_content_field h2 { font-size: var(--fs-h2); overflow-wrap: break-word; }
.o_wblog_post_content_field h3,
.o_wblog_post_content_field h4 { font-size: var(--fs-h3); overflow-wrap: break-word; }

.o_wblog_post_content_field a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--chartreuse);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.o_wblog_post_content_field a:hover { color: var(--navy-hover); }

.o_wblog_post_content_field strong { color: var(--navy); font-weight: 700; }

.o_wblog_post_content_field ul,
.o_wblog_post_content_field ol { margin: 0 0 1.15em 1.2em; }
.o_wblog_post_content_field li { margin-bottom: 0.45em; }

.o_wblog_post_content_field img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
}

.o_wblog_post_content_field blockquote {
  border-left: 3px solid var(--chartreuse);
  padding-left: 20px;
  margin: 2em 0;
  color: var(--navy);
  font-size: var(--fs-h3);
  line-height: 1.4;
}

/* ---- indice del blog: tarjetas en linea con las del resto del sitio --------- */
.o_wblog_post_short .o_wblog_normal_font_size,
.o_wblog_blog_top { font-family: 'Manrope', 'Segoe UI', Arial, sans-serif; }
.o_wblog_post_short h2,
.o_wblog_post_short .h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  font-size: var(--fs-h3);
  line-height: 1.15;
}
.o_wblog_post_short {
  border-top: 3px solid var(--chartreuse);
  background: #fff;
  transition: border-color .15s ease;
}
.o_wblog_post_short:hover { border-top-color: var(--navy); }

/* ---- siguiente post -------------------------------------------------------- */
#o_wblog_next_container { background: var(--bone); }

/* 29/07/2026 — El bloque "siguiente artículo" parecía muerto y casi lo estaba: el área
   pulsable (.o_wblog_next_button) quedaba como una franja de 28px POR ENCIMA de la portada,
   sin solaparse con el chevron ni con el titular, así que había que acertar en una banda
   invisible para que funcionara. En Odoo ese botón es un overlay de toda la portada; aquí
   había perdido el posicionamiento. Se le devuelve: ahora se pulsa el bloque entero. */
#o_wblog_next_container { position: relative; }
#o_wblog_next_container .o_wblog_next_button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
/* Y que se vea que es pulsable: el chevron avanza y la portada se oscurece un punto.
   Nada de aparecer/desaparecer — el control ya estaba, solo faltaba que lo pareciera. */
#o_wblog_next_container .o_wblog_next_button ~ .o_record_cover_container .fa-angle-right {
  transition: transform .15s ease-out;
}
#o_wblog_next_container .o_wblog_next_button:hover ~ .o_record_cover_container .fa-angle-right,
#o_wblog_next_container .o_wblog_next_button:focus-visible ~ .o_record_cover_container .fa-angle-right {
  transform: translateX(6px);
}
#o_wblog_next_container .o_wblog_next_button:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  #o_wblog_next_container .o_wblog_next_button ~ .o_record_cover_container .fa-angle-right { transition: none; }
}

/* El seam es UNO por composición (DESIGN.md > Shapes). El titular del "siguiente artículo"
   usa la misma clase que el del artículo, así que heredaba un segundo trazo — y encima
   desalineado, porque ese titular va centrado y la barra salía pegada a la izquierda. */
#o_wblog_next_container .o_wblog_post_name::after { content: none; }
#o_wblog_next_title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---- botones: texto navy sobre chartreuse (regla dura de marca) ------------- */
#o_wblog_post_main .btn-primary,
.o_wblog_post_page_cover .btn-primary {
  background: var(--chartreuse);
  border-color: var(--chartreuse);
  color: var(--navy);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
}
#o_wblog_post_main .btn-primary:hover { background: var(--chartreuse-hover); color: var(--navy); }

/* ---- el compartir social de Odoo no esta en la marca ------------------------ */
.o_wblog_social_links { border-top: 1px solid var(--hairline); padding-top: 16px; }

/* ---- movil ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .o_wblog_post_page_cover { min-height: 38vh; }
  #o_wblog_post_content, .o_wblog_post_content_field { font-size: var(--fs-base); }
  /* El MISMO escalon que regatta.css da a .page-hero h1 (40 -> 32px). Sin el, el titulo del
     post seguia a 40px en movil y "TURBOCOMPRESORES" (388px a 40px/800) desbordaba un
     viewport de 375: +28px de scroll horizontal y la .mbar fija cortada (auditoria
     30/07/2026, medido en /es/...averias-comunes...-62). A 32px la palabra mide ~310px. */
  .o_wblog_post_page_cover .o_wblog_post_name,
  .o_wblog_post_title { font-size: var(--fs-h2); }
  /* Y el escalon equivalente para las secciones del cuerpo (32 -> 24px): a 32px la misma
     palabra desbordaba el o_container_small (380 > 375, medido). En escritorio se quedan
     a 32 para conservar la jerarquia h2/h3 dentro del articulo. */
  .o_wblog_post_content_field h2 { font-size: var(--fs-h3); }
}