/* =====================================================================
   Páginas de CONTENIDO DRUPAL (no JD Dealer Pages) — humaya.com.mx
   Layout .main-container > section.col-sm-9 + aside.col-sm-3 y la View
   "web_section_content". CSS efectivo extraído de
   /themes/JD2017/css/style.css + Bootstrap 3.3.7 + overrides.min.css
   (inspección 2026-09-18).

   Alcance: todo bajo .dr-page (no choca con css/style.css ni con el header).
   Usado por: pages/otros-productos.html y pages/node-1385/1386/1387.html (artículos)
   ===================================================================== */

/* Fuente: el original solo carga Roboto 400 → negritas sintéticas.
   Mismo alias que css/jd-components.css (mismos archivos v51 de Google). */
@font-face{
  font-family: 'Roboto JD';
  font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmaiArmlw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Roboto JD';
  font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --dr-text:  #333333;   /* rgb(51,51,51)  */
  --dr-link:  #377C2B;   /* rgb(55,124,43) — a{} de style.css */
}

/* ---------- contenedor (.main-container: padding 0 15px 14px) ---------- */
.dr-page{
  display: block;
  padding: 0 15px 14px;
  font-family: 'Roboto JD', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;          /* 20px */
  color: var(--dr-text);
}
.dr-page a{ color: var(--dr-link); text-decoration: none; }
.dr-page a:hover,
.dr-page a:focus{ color: var(--dr-link); text-decoration: underline; }
.dr-page img{ vertical-align: middle; border: 0; }
.dr-page p{ margin: 0 0 10px; }
.dr-page p:last-child{ margin-bottom: 0; }

/* ---------- grid 9 / 3 (Bootstrap col-sm-*) ---------- */
.dr-page .dr-row{ margin-left: -15px; margin-right: -15px; }
.dr-page .dr-row::before,
.dr-page .dr-row::after{ content: " "; display: table; }
.dr-page .dr-row::after{ clear: both; }
.dr-page .dr-col-9,
.dr-page .dr-col-3{ position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px){
  .dr-page .dr-col-9{ float: left; width: 75%; }
  .dr-page .dr-col-3{ float: left; width: 25%; }
}

/* ---------- título de página ---------- */
.dr-page h1.page-header{
  font-family: 'Roboto JD', sans-serif;
  font-size: 30px;                  /* 30px / 33px */
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
  margin: .65em 0;                  /* 19.5px */
  padding: 0;
  border: 0;
}

.dr-page .form-group{ margin-bottom: 15px; }
.dr-page .form-group:last-child{ margin-bottom: 0; }
/* En el original la View NO es el último hijo de .region-content (después
   va section#block-whatsapp, de alto 0), así que conserva su margin-bottom
   de 15px. Aquí el WhatsApp vive fuera de <main>, por eso se fija explícito. */
.dr-page .region-content > .views-element-container.form-group{ margin-bottom: 15px; }

/* ---------- View "web_section_content" (lista imagen + resumen) ---------- */
.dr-page .view-web-section-content .views-row{ clear: both; margin-top: 2em; }
.dr-page .view-web-section-content .views-row::before,
.dr-page .view-web-section-content .views-row::after{ content: " "; display: table; }
.dr-page .view-web-section-content .views-row::after{ clear: both; }
.dr-page .view-web-section-content .views-field-field-summary-image{
  float: left;
  margin-right: 2em;                /* 28px */
  width: 260px;
}
.dr-page .view-web-section-content .views-field-field-summary-image img{
  display: block;                   /* .img-responsive */
  max-width: 100%;
  width: 100%;                      /* se agranda a 260px como en el original */
  height: auto;
}
.dr-page .view-web-section-content .views-field-title a{
  color: var(--dr-text);
  font-size: 1.2em;                 /* 16.8px / 24px */
  font-weight: bold;                /* sintética */
}
.dr-page .view-web-section-content .views-field-title a:hover,
.dr-page .view-web-section-content .views-field-title a:focus{ color: var(--dr-text); }

/* ---------- barra lateral (.well vacío en esta página) ---------- */
.dr-page .well{
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* =====================================================================
   ARTÍCULO (nodo "section-content": /node/1385, 1386, 1387)
   Valores = CSS computado del original (Chrome, 2026-09-21).
   ===================================================================== */
.dr-page .contextual-region{ position: relative; }   /* contextual.module de Drupal (el <article> lo lleva) */
.dr-page .img-responsive{ display: block; max-width: 100%; height: auto; }   /* Bootstrap */
.dr-page--node .field--name-field-date{   /* el original la acota a .page-node-type-section-content: en el LISTADO la fecha va a 14px */
  font-size: .85em;                 /* 11.9px / 17px — style.css */
  margin-bottom: 1em;               /* 11.9px */
}
.dr-page .field--name-field-summary-image{ margin: 1em .3em; }  /* 14px 4.2px (computado; imagen a tamaño natural, sin float) */
.dr-page .field--name-body ul{ margin: 0 0 10px; padding-left: 1.5em; }   /* 21px (computado) */
.dr-page h5{
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;                 /* sin cara 500 cargada → se ve regular, igual que el original */
  line-height: 1.1;                 /* 15.4px */
  color: inherit;
  margin: 10px 0;
}

/* ---------- Botones de compartir (réplica estática de AddToAny) ----------
   En el original los dibuja static.addtoany.com/menu/page.js. Por decisión del
   usuario se replican estáticos: mismos SVG y medidas, links directos para
   compartir la URL del artículo original. El botón google_plus existe pero
   AddToAny lo oculta (a:empty → display:none). */
.dr-page .a2a_kit{ touch-action: manipulation; outline: 0; }
.dr-page .a2a_default_style a{ float: left; line-height: 16px; padding: 0 2px; cursor: pointer; }
.dr-page .a2a_default_style a:hover .a2a_svg{ opacity: .7; }   /* CSS de AddToAny */
.dr-page .a2a_default_style a:empty{ display: none; }            /* oculta google_plus, igual que AddToAny */
.dr-page .a2a_svg{
  display: block; float: left; overflow: hidden;
  background-repeat: repeat; border-radius: 4px;   /* el style en línea lo deja en 3px */
  padding: 0; pointer-events: none;
}
.dr-page .a2a_svg svg{ display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
.dr-page .a2a_label{
  position: absolute !important;
  clip-path: polygon(0 0, 0 0, 0 0);
  height: 1px; width: 1px; overflow: hidden; white-space: nowrap;
}

/* =====================================================================
   NUESTROS SERVICIOS (/content/our_services y sus 6 artículos)
   Valores copiados del CSS del original (tema JD2017 style.css) salvo
   donde se indica. Añadido 2026-09-22.
   ===================================================================== */
/* En el original TODAS las imágenes de estas páginas tienen max-width:100%
   computado. La hoja que lo aplica (font.css) redirige a otro dominio y el
   navegador no deja leer sus reglas: FUENTE EXACTA DESCONOCIDA, EFECTO
   CONFIRMADO (Chrome, 2026-09-22). Se replica el efecto. */
.dr-page img{ max-width: 100%; }

/* Listado: el resumen de una ficha empieza con <h3>; Bootstrap le pone
   margin-top:20px y el original lo anula con estas 2 reglas. */
.dr-page .view-web-section-content h3{ margin-top: 3em; }
.dr-page .view-web-section-content h3:first-of-type{ margin-top: 0; }

/* Banner de la barra lateral (vista web_block_banners, display
   block_banner_sidebar). En Otros productos esta barra va vacía. */
.dr-page .block-views-blockweb-block-banners-block-banner-sidebar .views-row{ margin: 1em 0; }
.dr-page .block-views-blockweb-block-banners-block-banner-sidebar .views-row:first-child{ margin-top: 0; }
.dr-page .block-views-blockweb-block-banners-block-banner-sidebar .views-row img{ max-width: 100%; }
.dr-page .banner{ position: relative; }
.dr-page .banner_image{ position: relative; display: block; }
.dr-page .banner_image .banner_link{ text-decoration: none; position: absolute; top: initial; bottom: 8%; left: 5%; z-index: 2; }
/* El botón "Agregar banner" del original está oculto para el visitante. */
.dr-page .btn-add-banner{ display: none; }

/* =====================================================================
   FINANCIAMIENTO (/content/financing y su artículo)
   Añadido 2026-09-22. Regla copiada del style.css del tema original.
   ===================================================================== */
/* En el listado, el artículo se muestra completo y su <h2> va oculto
   (el título lo pone el <h1> de la página). */
.dr-page .view-web-section-content article.section-content h2{ display: none; }
/* `style.css` del proyecto pone h2 en 400; en el original manda el 500 de
   Bootstrap. El h2 va oculto, así que no tiene efecto visual, pero se
   replica el peso para que el elemento coincida. */
.dr-page .view-web-section-content article.section-content h2,
.dr-page .view-web-section-content article.section-content h2 a{ font-weight: 500; }

/* =====================================================================
   NUESTRA GENTE  (vista web_our_staff, /staff)
   Filtro por sucursal + tablas de personal agrupadas por departamento.
   La hoja del original (font.css) está en otro dominio y el navegador no
   deja leer sus reglas: origen exacto DESCONOCIDO, efecto CONFIRMADO
   elemento por elemento con estilos computados.
   ===================================================================== */
.dr-page .views-exposed-form .form--inline{display:flex;flex-wrap:wrap}
.dr-page .views-exposed-form .form-item{display:block;width:348px}
.dr-page .views-exposed-form label.control-label{display:inline-block;width:90px;margin:0 4.2px 5px 0;padding-left:36px;font-size:14px;line-height:20px;font-weight:400;color:#464646}
.dr-page .views-exposed-form .select-wrapper{display:inline-block;width:250px;position:relative}
.dr-page .views-exposed-form .select-wrapper::after{content:"\e114";position:absolute;top:17px;right:0;width:21px;height:14px;font-family:"Glyphicons Halflings";font-size:14px;line-height:14px;color:#377c2b;pointer-events:none}
.dr-page .views-exposed-form select.form-control{width:250px;height:34px;padding:3px 25px 3px 3px;font:400 14px/14px "Roboto JD",sans-serif;color:#377c2b;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-appearance:none;appearance:none}
.dr-page .views-exposed-form .form-actions{margin:0 0 0 14px}
/* El botón "Apply" va oculto en el original: el select recarga solo. */
.dr-page .views-exposed-form .btn-info{display:none;margin:0 10px 0 0;padding:16px 30px;font-weight:700;color:#222;background-color:#fdda01;border-color:#fdda01;border-radius:0;min-width:100px}
@media (min-width:768px){
  .dr-page .views-exposed-form .form-item{margin:0}
  .dr-page .views-exposed-form label.control-label{margin-bottom:0}
}

.dr-page .view-web-our-staff table.table{border:1px solid #ddd}
.dr-page .view-web-our-staff caption{font-size:1.2em;line-height:24px;color:#377c2b}
.dr-page .view-web-our-staff thead{display:none}
.dr-page .view-web-our-staff th{border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom-width:2px}
.dr-page .view-web-our-staff th.views-field-field-telephone{width:30%}
.dr-page .view-web-our-staff th.views-field-field-main-contact,
.dr-page .view-web-our-staff th.views-field-field-email{width:5%}
.dr-page .view-web-our-staff tbody tr{background-color:#fff}
.dr-page .view-web-our-staff tbody td{vertical-align:middle;border:1px solid #ddd;border-bottom-color:#e5e6e6}
.dr-page .view-web-our-staff td.views-field-field-main-contact{width:5%}
.dr-page .view-web-our-staff td.views-field-field-image{width:10%}
.dr-page .view-web-our-staff td.views-field-edit-node{display:none;width:5%}
.dr-page .view-web-our-staff td.views-field-field-telephone{width:15%}
.dr-page .view-web-our-staff td.views-field-nothing,
.dr-page .view-web-our-staff td.views-field-field-email{width:35%}
.dr-page .view-web-our-staff .views-field-field-main-contact{font-size:1.3em;line-height:26px;color:#fcdb00;text-align:center;vertical-align:middle}
.dr-page .view-web-our-staff .views-field-field-email{color:#377c2b;text-align:center;vertical-align:middle}
.dr-page .view-web-our-staff .views-field-field-telephone{text-align:left}
.dr-page .view-web-our-staff .staff-name{font-size:1.1em;line-height:22px;font-weight:700}

/* =====================================================================
   UBICACIONES  (vista web_location, /location)
   Página a ancho completo (sin barra lateral) con la rejilla de sucursales.
   Origen exacto DESCONOCIDO (font.css del original está en otro dominio y el
   navegador no deja leer sus reglas); efecto CONFIRMADO con estilos
   computados, elemento por elemento.
   ===================================================================== */
.dr-page .dr-col-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px;width:100%}

.dr-page .location-page-view .view-content{font-size:13px;line-height:1.42857143}
.dr-page .location-page-view .views-row{float:left;clear:both}
.dr-page .location-page-view .views-col{float:left}
.dr-page .location-page-view .views-field .field-content{display:inline}
.dr-page .location-page-view .views-field-title{margin:2em 0 1em}
.dr-page .location-page-view .views-field-title h2.field-content{display:inline;margin:20px 0 10px;font-family:'Roboto JD',sans-serif;font-size:16px;line-height:1.1;font-weight:700;color:#377c2b}
.dr-page .location-page-view .views-field .field-content.operarion-hour-label{display:block;margin-top:1em;font-weight:700}
@media (max-width:991px){
  .dr-page .location-page-view .views-field-title h2.field-content{margin-top:35px}
}

/* =====================================================================
   NOTICIAS  (vista web_section_news, /content/news)
   Mismo molde que Nuestros servicios; solo cambian estas 3 reglas.
   Origen exacto DESCONOCIDO (font.css del original está en otro dominio y el
   navegador no deja leer sus reglas); efecto CONFIRMADO con estilos computados.
   ===================================================================== */
.dr-page .view-web-section-news .views-field-field-date{ font-size: .85em; }
/* En el original, de la segunda ficha en adelante solo se ve "Leer más". */
.dr-page .view-web-section-news .views-row ~ .views-row .views-field-nothing .field-content > *:not(.read-more-link-container){ display: none; }
/* h2 del resumen: va oculto, pero se replica su peso y margen del original. */
.dr-page .view-web-section-news .views-field-nothing h2{ margin: 20px 0 10px; font-weight: 500; }

/* =====================================================================
   GALERÍA DE IMÁGENES  (vistas web_image_galleries y nodos image-gallery)
   Origen exacto DESCONOCIDO (font.css del original está en otro dominio y el
   navegador no deja leer sus reglas); efecto CONFIRMADO con estilos
   computados, elemento por elemento.
   ===================================================================== */
/* --- rejilla de miniaturas dentro de cada galería --- */
.dr-page .field--name-field-images{ margin-left: -14px; }
.dr-page .field--name-field-images .field--item{ display: inline-block; width: 100%; padding: 14px; vertical-align: top; }
@media (min-width: 768px){ .dr-page .field--name-field-images .field--item{ width: 48%; } }
@media (min-width: 992px){ .dr-page .field--name-field-images .field--item{ width: 32%; } }
.dr-page .colorbox-image .image-caption{ padding: 5px 0; font-size: .85em; line-height: 17px; color: #377c2b; text-align: center; }
/* alto del pie: 30 px vacío y 29.75 px con texto, medido en el original */
.dr-page .colorbox-image .image-caption:empty{ min-height: 30px; }
.dr-page .colorbox-image .image-caption:not(:empty){ min-height: 29.75px; }
.dr-page .a2a_kit .a2a_svg svg{ position: relative; }

/* --- listado de galerías --- */
.dr-page .view-web-image-galleries .views-row{ margin-bottom: 21px; padding-bottom: 14px; border-bottom: 1px solid #ddd; }
.dr-page .view-web-image-galleries .views-row:last-child{ border-bottom: 0; }
.dr-page .view-web-image-galleries .views-field-edit-node .field-content{ display: none; }
.dr-page .view-web-image-galleries .views-field-title{ margin-bottom: 10.5px; font-size: 1.5em; line-height: 30px; color: #377c2b; }

/* --- utilidad de Drupal que usa el paginador --- */
.dr-page .visually-hidden{ display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.dr-page h4.visually-hidden{ margin: 10px 0; }
.dr-page span.visually-hidden{ margin: 0; }

/* --- lightbox propio (réplica de Colorbox, sin dependencias) --- */
.jd-lb{ position: fixed; inset: 0; z-index: 1050; display: none; background: rgba(0,0,0,.9); }
.jd-lb.is-open{ display: block; }
.jd-lb__img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 90%; max-height: 85%; }
.jd-lb__cap{ position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font-size: 13px; }
.jd-lb__btn{ position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 28px; line-height: 1; padding: 12px 16px; cursor: pointer; }
.jd-lb__btn--prev{ left: 12px; } .jd-lb__btn--next{ right: 12px; }
.jd-lb__close{ position: absolute; top: 12px; right: 16px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* =====================================================================
   GALERÍA DE VIDEOS  (vista web_video_galleries y nodos video-gallery)
   Origen exacto DESCONOCIDO (font.css del original está en otro dominio y el
   navegador no deja leer sus reglas); efecto CONFIRMADO con estilos
   computados, elemento por elemento.
   ===================================================================== */
/* --- listado: mismo molde que la galería de imágenes --- */
.dr-page .view-web-video-galleries .views-row{ margin-bottom: 21px; padding-bottom: 14px; border-bottom: 1px solid #ddd; }
.dr-page .view-web-video-galleries .views-row:last-child{ border-bottom: 0; }
.dr-page .view-web-video-galleries .views-field-edit-node .field-content{ display: none; }
.dr-page .view-web-video-galleries .views-field-title{ margin-bottom: 10.5px; font-size: 1.5em; line-height: 30px; color: #377c2b; }

/* --- nodo video-gallery --- */
.dr-page .video-gallery .field--name-body{ margin-bottom: 1.5em; }   /* 21px computado */
.dr-page .video_embed_title{ margin-top: .5em; font-weight: 700; }   /* 7px y negrita, computado */

/* --- modal del video (réplica del Colorbox del original, sin dependencias) ---
   Medidas tomadas del original con el modal abierto: overlay negro .85,
   contenido 854 px de ancho, iframe 854×480. */
.jd-lb--video .jd-lb__video{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  max-width: 96%; background: #fff; padding: 15px;
}
.jd-lb--video .jd-lb__video > div{ max-width: 100%; }
.jd-lb--video .jd-lb__video iframe{ display: block; max-width: 100%; border: 0; }

/* =====================================================================
   CONTACTO  (formulario Drupal forms-addrequestform, /send/form/contact)
   Origen exacto DESCONOCIDO (font.css del original está en otro dominio y el
   navegador no deja leer sus reglas); efecto CONFIRMADO con estilos
   computados, elemento por elemento.
   ===================================================================== */
/* style.css (tema propio) impone en .form-group label 13px y display:block;
   el original deja el label de Bootstrap: 14/20, en línea y ancho al contenido. */
.dr-page--contacto .form-group label.control-label{
  display: inline-block; max-width: 100%; width: auto;
  margin-bottom: 5px; font-size: 14px; line-height: 20px; font-weight: 700; color: #333;
}
/* asterisco rojo de los campos obligatorios: en el original es la imagen
   themes/bootstrap/css/images/required.svg como fondo de un ::after de 10×7 */
.dr-page--contacto .form-required::after{
  content: ""; display: inline-block; width: 10px; height: 7px;
  margin-left: 4px; vertical-align: 3px; line-height: 14px;
  background: url("../assets/img/p/be621968ab.svg") 0 0 / 10px 7px repeat;
}
/* .form-inline (solo lo lleva el campo Teléfono): el label no separa abajo.
   Igual que en Bootstrap, solo a partir de 768 px (por debajo vuelve a 5 px). */
@media (min-width: 768px){
  .dr-page--contacto .form-inline label.control-label{ margin-bottom: 0; vertical-align: middle; }
}
/* style.css convierte .form-checkbox en un contenedor flex de 13px; en el
   original esa clase la lleva el propio <input> y no cambia nada. */
.dr-page--contacto input.form-checkbox{ display: block; font-size: 14px; margin-bottom: 0; }
/* Botón Enviar: verde del tema, sin radio; el hover no cambia de color
   (comprobado con el ratón encima en el original), solo hereda la transición. */
.dr-page--contacto .form-actions .btn-primary{
  padding: 16px 30px; font-size: 14px; line-height: 20px; font-weight: 700;
  color: #fff; background-color: #377c2b; border: 1px solid #266b1a; border-radius: 0;
  transition: .5s ease-out;
}
.dr-page--contacto .form-actions .btn-primary:hover,
.dr-page--contacto .form-actions .btn-primary:focus,
.dr-page--contacto .form-actions .btn-primary:active{
  color: #fff; background-color: #377c2b; border-color: #266b1a;
}