/*
Theme Name: divi mexicanwey
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1756942950
Updated: 2025-09-03 23:42:30

*/







/* ==== MW Tabs (Divi) ===================================== */
.mw-tablist{ position:relative; }

/* La fila con los 4 tabs en una sola línea (flex, sin repeat) */
.mw-tablist .et_pb_row{
  display: flex;
  justify-content: center;   /* o space-evenly si quieres más separación */
  gap: 2rem;
  align-items: flex-end;
  flex-wrap: nowrap;
}

/* Que cada columna pese igual y centre su contenido */
.mw-tablist .et_pb_column{
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}


/* Cada tab: usa tus módulos de Texto con la clase "mw-tab" */
.mw-tab{
  position:relative;
  cursor:pointer;
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.25rem .25rem .6rem;
  font-weight:700;
  color:rgba(255,255,255,.75);
  transition:color .25s ease;
  white-space:nowrap;
}
.mw-tab:hover,
.mw-tab.active{ color:#fff; }

/* Emojis/íconos desde CSS (cámbialos o pon URLs propias) */
.mw-tab::before{
  content:"";
  display:inline-block;
  width:1.05rem; height:1.05rem;
  line-height:1; transform:translateY(1px);
}
.mw-mundial::before{ content:"🌍"; }
.mw-saludables::before{ content:"🥗"; }
.mw-callejeras::before{ content:"🌮"; }
.mw-rapidas::before{ content:"⚡"; }

/* Si prefieres tus SVG/PNG, descomenta y pon rutas
.mw-mundial::before{ content:""; background:url(/wp-content/uploads/mundial.svg) no-repeat center/contain; }
.mw-saludables::before{ content:""; background:url(/wp-content/uploads/saludables.svg) no-repeat center/contain; }
.mw-callejeras::before{ content:""; background:url(/wp-content/uploads/callejeras.svg) no-repeat center/contain; }
.mw-rapidas::before{ content:""; background:url(/wp-content/uploads/rapidas.svg) no-repeat center/contain; }
*/

/* Barra deslizante */
.mw-underline{
  position:absolute; left:0; bottom:0;
  height:3px; width:0;
  background:#fff; border-radius:2px;
  transform:translateX(0);
  transition:transform .28s ease, width .28s ease, opacity .2s;
  opacity:.95;
}

/* Responsive: compactar tipografías/espacios */
@media (max-width:980px){
  .mw-tablist .et_pb_row{ gap:1.25rem; }
  .mw-tab{ font-size:.95rem; }
}
@media (max-width:600px){
  .mw-tablist .et_pb_row{ gap:.8rem; }
  .mw-tab{ font-size:.9rem; }
}


/* La FILA de tabs */
.mw-tablist{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: flex-end;
  flex-wrap: nowrap;
  padding-bottom: 8px;       /* deja espacio para la barra */
}

/* Columnas centradas */
.mw-tablist .et_pb_column{
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

/* Barra deslizante */
.mw-underline{
  position: absolute;
  left: 0;
  bottom: 0;                 /* se verá justo bajo los tabs */
  height: 2px;
  width: 0;
  background: #fff;
  border-radius: 2px;
  transform: translateX(0);
  transition: transform .28s ease, width .28s ease, opacity .2s;
  opacity: .95;
  pointer-events: none;
  z-index: 2;
}

/* acercar la barra a los tabs */
.mw-tablist{ padding-bottom: 0px; }      /* antes 8px */
.mw-tab{ padding-bottom: 0rem; }        /* un poco menos */
.mw-underline{ bottom: 0px; }           /* baja la barra 1px opcional */