/*
Theme Name:   Subgráfica theme
 Theme URI:    https://subgrafica.com/
 Description:  Subgráfica WP theme - If you’re reading this, please say hi!!
 Author:       Subgráfica Estudio
 Author URI:   https://subgrafica.com/
 Template:     Divi
 Version:      6.0 AGO
 License:      Attribution-NonCommercial 4.0 International
 License URI:  https://creativecommons.org/licenses/by-nc/4.0/
 */


/* =========================================================
   1. TOKENS / VARIABLES
========================================================= */
 :root {

    /* Colores */
  --gr: #c0c0c0;   /* gris */
  --ne: #000000;   /* negro */
  --bl: #ffffff;   /* blanco */
  --na: #fd572b;
  --mo: #6a5bc6;
  --ve: #d8ff02;
  --transp: transparent;
	--tranlu: rgba(255,255,255,0.6);
	--tranlu-2: rgba(255, 255, 255, 0.75);

  /* Tipografías y pesos */
  --ffa: 'bb-Sr', sans-serif;                 /* Fuente A principal  */
  --ffb: 'source-sans-3-variable',sans-serif;
  --ffc: 'server-m', monospace;
  --fwl-hai: 200;           /* Peso hair   */
  --fwl-reg: 400;           /* Peso regular */
  --fwl-med: 500;           /* Peso medio   */
  --fwl-bol: 700;           /* Peso bold    */

  /* Tamaños para encabezados */
  --fs-h1: clamp(2.2rem, 4vw + 1rem, 3.0rem);    /* H1 */
  --fs-h2: clamp(2.0rem, 4vw + 1rem, 2.5rem);    /* H2 */
  --fs-h3: clamp(1.6rem, 4vw + 1rem, 2.3rem);    /* H3 */
  --fs-h4: clamp(1.6rem, 4vw + 1rem, 2.0rem);    /* H4 */
  --fs-h5: clamp(1.1rem, 4vw + 1rem, 1.8rem);    /* H5 */
  --fs-h6: clamp(0.9rem, 2vw + 1rem, 1.10rem);   /* H6 */

  /* Tamaños para párrafos */
  --fs-p-pe: clamp(0.6rem, 2vw + 1rem, 1.0rem);  /* Párrafo pequeño */
  --fs-p-no: clamp(0.9rem, 2vw + 1rem, 1.15rem);  /* Párrafo normal  */
  --fs-p-gr: clamp(1rem, 2vw + 1rem, 1.20rem);     /* Párrafo grande  */
  --fls: .1rem;
  /* Tamaños especiales */
  --fs-esp-h1: clamp(.9rem, 3vw + 1rem, 3.6rem); /* Especial H1 */
  --fs-esp-h4: clamp(.9rem, 3vw + 1rem, 2.2rem); /* Especial H4 */

  /* Line heights */
  --flh0: 100%;
  --flh1: 110%;
  --flh2: 150%;
}
/* =========================================================
   2. RESET / BASE
========================================================= */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* =========================================================
   3. TIPOGRAFÍA Y TEXTO
========================================================= */
body {
  height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}

body {
  font-family: var(--ffa);
  font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  color: var(--azul);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

::selection {
  background: var(--na);
  color:var(--ne);
}

::-moz-selection {
  background: var(--na);
  color:var(--ne);
}

a:active, a:active * {
  outline: none !important;
  outline-style: none !important;
}

a:focus, a:focus * {
  outline: none !important;
  outline-style: none !important;
}

 h1, h2, h3, h4, h5, h6 {
   -webkit-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
   text-justify: inter-character;
 }

 p {
   hyphens: none;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   text-align: left;
   overflow-wrap: normal;
 }
br {
  margin-bottom: 6px;
}

a:link {
  text-decoration: none;
  opacity: 1;
  color: var(--na);
  font-weight: var(--fwl);
   transition-duration: 0.2s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
 }

 a:hover {
   text-decoration: none;
   opacity: .9;
   transition: all 0.2s ease-in-out;
 }

 a:visited {
   color: var(--na);
   opacity: .9;
 }
 /* Imágenes dentro de enlaces */
a img {
  transition: opacity 0.3s ease; /* transición base */
}

a:hover img {
  opacity: 0.9;
}

/* SVG inline dentro de enlaces */
a svg {
  transition: opacity 0.3s ease; /* transición base */
}

a:hover svg {
  opacity: 0.9;
}

a:visited svg {
  opacity: 1;
}

 h1 {
   font-family: var(--ffa);
   font-size: var(--fs-h1) !important;
   font-weight: var(--fwl);
   line-height: var(--flh1);
   text-transform: uppercase;
 }
 h2 {
   font-family: var(--ffb);
   font-size: var(--fs-h2) !important;
   font-weight: var(--fwl-hai);
   line-height: var(--flh1);
   letter-spacing: var(--fls);
 }
 h3 {
   font-family: var(--ffb);
   font-size: var(--fs-h3) !important;
   font-weight: var(--fwl);
   line-height: var(--flh1);
   text-transform: uppercase;
   letter-spacing: var(--fls);
 }
 h4 {
   font-family: var(--ffb);
   font-size: var(--fs-h4) !important;
   text-transform: uppercase;
   letter-spacing: var(--fls);
 }
 h5 {
   font-family: var(--ffb);
   font-size: var(--fs-h5) !important;
   text-transform: uppercase;
   letter-spacing: var(--fls);
 }
 h6 {
   font-family: var(--ffb);
   font-size: var(--fs-h6) !important;
   text-transform: uppercase;
   letter-spacing: var(--fls);
 }
 blockquote {
 border-color: var(--azul_claro);
}
strong {
  font-weight: 600;
}
.par-gra p {
  font-size: var(--fs-p-gr) !important;
  line-height: var(--flh1);
  font-weight: 400 !important;
}
.par-nor p {
  font-size: var(--fs-p-no) !important;
  line-height: var(--flh1);
}
.par-peq p {
  font-size: var(--fs-p-pe) !important;

}
 .no-text {
   cursor: default;
 }
 .no-data {
  -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+ */
          user-select: none; /* Estándar moderno: Chrome, Edge, Firefox, Opera, Safari */
}
.link-especifico a:link,
.link-especifico a:visited {
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.3s ease, color 0.3s ease;
}


/* ============================
   SISTEMA DE COLORES UTILITARIOS
   ============================ */

/* Gris */
.c-gr, .c-gr * {
    color: var(--gr) !important;
}

/* Negro */
.c-ne, .c-ne * {
    color: var(--ne) !important;
}

/* Blanco */
.c-bl, .c-bl * {
    color: var(--bl) !important;
}

/* Naranja */
.c-na, .c-na * {
    color: var(--na) !important;
}

/* Morado */
.c-mo, .c-mo * {
    color: var(--mo) !important;
}

/* Verde */
.c-ve, .c-ve * {
    color: var(--ve) !important;
}

/* =========================================================
   4. LISTAS Y TEXTO DECORADO
========================================================= */
.lista-base ul {
  line-height: 28px;
}
.lista-base ul li {
  margin-bottom: 12px;
  line-height: var(--flh1);
    font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
}

.lista-base ul li a,
.lista-base ol li a {
  opacity: 1;
}

.lista-base ul li a:hover,
.lista-base ol li a:hover {
  opacity: 1;
}
.lista-base ul li a:visited,
.lista-base ol li a:visited {
  opacity: 1;
}
/* Base para todos los p con ícono */
p.icono {
  position: relative;
  padding-left: 40px;   /* espacio para el ícono */
}

/* Estilo del pseudo-elemento */
p.icono::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Ícono mapa */
p.icono.map::before {
  background-image: url("https://oliverrenecirugiaplastica.com/wp-content/themes/subgrafica-theme/data/img/iconos/icon_LO.svg");
}

/* Ícono teléfono */
p.icono.tel::before {
  background-image: url("https://oliverrenecirugiaplastica.com/wp-content/themes/subgrafica-theme/data/img/iconos/icon_WH.svg");
}

.typed-text-sub {
  font-family: var(--ffa);
  font-size: var(--fs-p-no) !important;
  font-weight: var(--fwl-reg);
}

/* Base: oculto pero ocupando el viewport fijo */
#sec-menu-movil {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  z-index: 99999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* Estado oculto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Fade fino */
  transition: opacity .28s ease, visibility .28s ease;
}

/* Visible */
#sec-menu-movil.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* Botón de cierre dentro del contenido */
#sec-menu-movil .btn-close-menu-movil {
  position: relative; /* ya no fixed */
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 0 auto; /* ejemplo: centrarlo dentro del contenedor */
  display: block;
}

/* Ícono X desde content */
#sec-menu-movil .btn-close-menu-movil::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transition: background-color 0.3s ease;
}


/* Interacciones del botón */
#sec-menu-movil .btn-close-menu-movil:hover::after { 
  opacity: .8;
  transition: background-color 0.3s ease;
 }
#sec-menu-movil .btn-close-menu-movil:focus {
}


/* Bloqueo de scroll del documento cuando el menú está abierto */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}


/* ==========================================================
   CONFIGURACIÓN GENERAL — SOLO BOTÓN .b-negro
   ========================================================== */

.et_pb_button.b-negro {
  font-family: var(--ffa);
  font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
  letter-spacing: var(--fls-tags);
  text-transform: uppercase;
  border-radius: 0px;
  border: 1px solid var(--bl);
  padding: 15px 50px 12px 30px !important;
  display: inline-block;
  position: relative;
  text-decoration: none;
  line-height: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  background-color: var(--bl);
  color: var(--ne) !important;
  border-color: var(--bl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  animation: bNegroDelayIn 0.4s ease-out forwards;
  animation-delay: 4s; /* ajusta el tiempo de retraso aquí */
}

/* Evitar crecimiento en hover */
.et_pb_button.b-negro:hover {
  padding: 15px 50px 12px 30px !important;
  border-width: 1px !important;
}

/* ==========================================================
   FLECHA — SOLO PARA .b-negro
   ========================================================== */

.et_pb_button.b-negro::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 48%;
  right: 20px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: transform 0.3s ease;
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* Movimiento en hover */
.et_pb_button.b-negro:hover::before {
  transform: translate(3px, -50%);
}

/* ==========================================================
   COLORES EN HOVER — SOLO PARA .b-negro
   ========================================================== */

.et_pb_button.b-negro:hover {
  background-color: var(--ve);
  color: var(--ne) !important;
  border-color: var(--ve);
}

.et_pb_button.b-negro:hover::before {
  background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
}

/* ============================================
   BOTÓN REGISTRO (HTML LIBRE)
   ============================================ */

.btn-registro {
    position: relative;
    display: inline-flex;
    align-items: center;

    height: 48px;
    padding-left: 30px;
    padding-right: 40px;

    background-color: var(--bl);
    color: var(--ne);
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}

/* ============================================
   SHAPE LATERAL — AHORA CON MÁSCARA
   ============================================ */

.btn-registro::after {
    content: "";
    position: absolute;
    top: 0;
  right: -24px;
  width: 28px;
  height: 48px;

    /* IMPORTANTE: ahora el shape usa el color del botón */
    background-color:var(--bl);
    mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg") center/contain no-repeat;
    -webkit-mask: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/lateral.svg") center/contain no-repeat;
}

/* HOVER — shape cambia automáticamente */
.btn-registro:hover::after {
    background-color:var(--na);
}

/* ============================================
   TEXTO + FLECHA
   ============================================ */

.btn-text {
    position: relative;
    display: inline-block;
    font-size: var(--fs-h6);
    text-transform: uppercase;
    color: var(--ne) !important;
}

.btn-text::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.25s ease;
}

.btn-registro:hover .btn-text::before {
    background-image: url("https://entrancexp.com/wp-content/themes/subgrafica-theme/data/img/flecha-boton_n_.svg");
    transform: translateY(-50%) translateX(3px);
}


/* ============================================
   HOVER GENERAL DEL BOTÓN
   ============================================ */

.btn-registro:hover {
    background-color: var(--na);
    color: var(--bl) !important;
}


/* ==========================================================
   ANIMACIÓN DE ENTRADA — RETRASO BOTÓN .b-negro
   ========================================================== */

@keyframes bNegroDelayIn {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.blur-bg {
  background-color: var(--translu);
	backdrop-filter: blur(3px);
}



/* =====================================
   CONTACT FORM 7 - CAMPOS
   ===================================== */

/* Campos de texto, email, tel, etc. dentro de CF7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="password"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  max-width: 100%;     /* evita overflow en móviles */
  box-sizing: border-box;
  margin-bottom: 5px;
  background-color: var(--bl);
  border: 1px solid var(--gr) !important;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-top: 7px;
  color: var(--ne);
  font-size: var(--flh1);
}

/* Ajuste responsivo: en móviles ocupa todo el ancho */
@media (max-width: 480px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="password"],
  .wpcf7 input[type="tel"],
  .wpcf7 select,
  .wpcf7 textarea {
    width: 100%;
  }
}

/* Etiquetas */
.wpcf7-form label {
  font-weight: var(--fwl-bol);
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* =============================
   UACF7 Country Select
   ============================= */
#uacf7_country_select .country-select,
#uacf7_country_select .country-select .wpcf7-uacf7_country_dropdown {
  width: 100%;
  max-width: 310px;
}

.country-select.inside input,
.country-select.inside input[type="text"] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
  margin-bottom: 10px !important;
}

.country-select .flag-dropdown {
  top: -10px;
}

.country-select.inside .flag-dropdown:hover .selected-flag {
  background-color: var(--transp);
}

/* =====================================
   MENSAJES DE RESPUESTA
   ===================================== */
.wpcf7 form .wpcf7-response-output {
  padding: 1em 1em !important;
  margin: 20px 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900;
  background-color: #ffb900;
  font-weight: var(--fwl-med);
  font-size: var(--fs-p-no);
  text-transform: uppercase;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #46b450;
  font-weight: bolder;
  font-size: larger;
  color: var(--ne);
}


.wpcf7-not-valid-tip {
  color: #dc3232;
  font-weight: var(--fwl-bol);
}
.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  display: block;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: #46b450;
  font-weight: bolder;
  font-size: larger;
  color: var(--ne);
}

/* =====================================
   SPINNER
   ===================================== */
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: var(--az);
  opacity: 1;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: -10px 10px;
  position: relative;
}

/* =====================================
   BOTÓN DE ENVÍO
   ===================================== */
.wpcf7-form-control.wpcf7-submit.has-spinner {
  font-family: var(--ffa);
  font-size: var(--fs-p-nor);
  font-weight: var(--fwl-reg);
  font-size: var(--fs-p-no) !important;
  text-transform: uppercase;
  line-height: 1em;
  background-color: var(--ne);
  color: var(--bl) !important;
  border-radius: 0;
  border: 1px solid var(--az);
  padding: 15px 25px 15px 25px !important;
  margin-top: 15px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: background-color 0.3s ease;
  opacity: 1;
  cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background-color: var(--na);
  color: var(--bl) !important;
  transition: background-color 0.3s ease;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  font-weight: var(--fwl-bol);
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* =========================================================
   7. LAYOUT Y UTILIDADES
========================================================= */
.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.et_pb_row {
    max-width: 100% !important;
}
.et_pb_section {
  background-color: transparent;
}

.et_pb_section.has-background {
  background-color: unset;
}
/* =========================================================
   8. EFECTOS Y ANIMACIONES
========================================================= */


.et_pb_preload, .et_pb_section.et_pb_section_video.et_pb_preload {
  position: relative;
  background: var(--ne) !important;
}
.et_pb_preload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://agenciapart.mx/x/wp-content/themes/Divi/includes/builder/styles/images/preloader.gif) no-repeat;
  border-radius: 32px;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  display: none !important;
}

 /* Fade effect overlay-*/
 .animate {
   animation: fader 8s infinite linear;
 }

 @-webkit-keyframes fader {
   0% {
     opacity: 0;
   }

   80% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 .effect::after {
     animation: grain 6s steps(10) infinite;
     background-image: url('https://subgrafica.com/data/img/grain.png');
     background-repeat: repeat;
     content: '';
     height: 300%;
     left: -100%;
     opacity: .04;
     pointer-events: none;
     position: fixed;
     top: -100%;
     transition: opacity 0.4s ease;
     width: 300%;
     will-change: transform;
     z-index: 3;
   }

 @keyframes grain {
   0% { transform: translate(20%, -15%) }
   10% { transform: translate(-20%, -15%) }
   20% { transform: translate(20%, -5%) }
   30% { transform: translate(-20%, -5%) }
   40% { transform: translate(20%, 5%) }
   50% { transform: translate(-20%, 5%) }
   60% { transform: translate(20%, 15%) }
   70% { transform: translate(-20%, 15%) }
   80% { transform: translate(20%, 5%) }
   90% { transform: translate(-20%, 5%) }
   100% { transform: translate(20%, -5%) }
 }

 /*  animation: fade-object 0.8s ease-out 0.2s forwards;
  transition: background 0.3s ease, transform 0.3s ease; */

 @keyframes fade-object {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ============================
   MEDIA QUERIES DEFINITIVOS
============================ */

/* 1. Mundo móvil (tablets verticales + celulares) */
@media (max-width: 880px) {
  .wpcf7-form label {
  margin-bottom: 25px;
}
  /* estilos móviles */
}

/* 2. Todo hasta desktop mediano (incluye tablets horizontales y laptops pequeñas) */
@media (max-width: 1365px) {
  /* estilos para pantallas <= 1365px */
}

/* 3. Desktop grande en adelante */
@media (min-width: 1366px) {
  /* estilos para pantallas grandes */
}