/*
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: #888888;   /* gris */
  --ne: #111111;   /* negro */
  --bl: #ffffff;   /* blanco */
  --az: #2c3ef6;   /* azul */
  --az2:#e3e7f3;  /* azul claro */
  --az3:#e6e6e6;  /* azul oscuro */
  --transp: transparent;

  /* Tipografías y pesos */
  --ffa: 'Inter Tight', sans-serif;              /* Fuente A principal  */
  --ffb: 'AktifoA-Me', Helvetica, Arial, Sans-Serif;  /* Fuente B secundaria */
  --ffc: 'Projekt-Blackbird', sans-serif;               /* Fuente C terciaria */
  --ffd: 'Work Sans', sans-serif;                /* Fuente D cuaternaria */

  --fwl-reg: 400;           /* Peso regular */
  --fwl-med: 500;           /* Peso medio   */
  --fwl-bol: 700;           /* Peso bold    */
  --fwl-ext: 900;           /* Peso extra font */

  /* Tamaños para encabezados */
  --fs-h1: clamp(2.2rem, 4vw + 1rem, 4.0rem);    /* H1 */
  --fs-h2: clamp(2.0rem, 4vw + 1rem, 2.5rem);    /* H2 */
  --fs-h3: clamp(1.6rem, 4vw + 1rem, 2.25rem);    /* H3 */
  --fs-h4: clamp(1.6rem, 4vw + 1rem, 2.0rem);    /* H4 */
  --fs-h5: clamp(1.1rem, 4vw + 1rem, 1.75rem);    /* H5 */
  --fs-h6: clamp(1.1rem, 4vw + 1rem, 1.4rem);    /* H6 */

  /* Tamaños para párrafos */
  --fs-p-pe: clamp(0.7rem, 2vw + 1rem, 1.2rem);  /* Párrafo pequeño */
  --fs-p-nor: clamp(1.1rem, 4vw + 1rem, 1.4rem);  /* Párrafo normal  */
  --fs-p-gr: clamp(1rem, 2vw + 1rem, 1.6rem);     /* 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: 110%;
  --flh1: 140%;
  --flh2: 120%;
}
/* =========================================================
   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(--beige_50);
  color:var(--azul);
}

::-moz-selection {
  background: var(--beige_50);
  color:var(--azul);
}

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: justify;
   text-justify: newspaper;
   overflow-wrap: normal;
 }
br {
  margin-bottom: 4px;
}

a:link {
  text-decoration: none;
  opacity: 1;
  color: var(--bl);
  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: .5;
   transition: all 0.2s ease-in-out;
 }

 a:visited {
   color: var(--bl);
   opacity: .5;
 }
 /* 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(--ffc);
   font-size: var(--fs-h1) !important;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
   text-transform: uppercase;
 }
 h2 {
   font-family: var(--ffc);
   font-size: var(--fs-h2) !important;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
   text-transform: uppercase;
 }
 h3 {
   font-family: var(--ffc);
   font-size: var(--fs-h3) !important;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
   text-transform: uppercase;
 }
 h4 {
   font-family: var(--ffc);
   font-size: var(--fs-h4) !important;
   text-transform: uppercase;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
 }
 h5 {
   font-family: var(--ffc);
   font-size: var(--fs-h5) !important;
   text-transform: uppercase;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
 }
 h6 {
   font-family: var(--ffc);
   font-size: var(--fs-h6) !important;
   text-transform: uppercase;
   font-weight: var(--fwl-ext);
   line-height: var(--flh0);
 }
 blockquote {
 border-color: var(--azul_claro);
}
.par-gra p {

}
.par-peq p {

}
 .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;
}
/* =========================================================
   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");
}

/* Estilo base para botones */

.et_pb_button.b-h {
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  background-color: var(--transp);
  color: var(--az3) !important;
  border-radius: 0px;
  border: 2px solid var(--az3);
  padding: 14px 44px 14px 44px !important;
  display: inline-block;
  position: relative;
  text-decoration: none;
  line-height: none;
  transition: background-color 0.3s ease;
}
.et_pb_button.b-h:hover {
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  background-color: var(--az3);
  color: var(--az) !important;
  border-radius: 0px;
  border: 2px solid var(--az3);
  padding: 14px 44px 14px 44px !important;
  display: inline-block;
  position: relative;
  text-decoration: none;
  line-height: none;
  opacity: 1;
}
.et_pb_button.et_pb_button.b-h:focus {
  background-color: var(--az);
  color: var(--az3) !important;
  border: 2px solid var(--az3);
}
.et_pb_button.b-h::before,
.et_pb_button.b-h::after {
  content: none !important; /* elimina los íconos o pseudo-elementos */
  opacity: 0 !important;
}

/* 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 */
#sec-menu-movil .btn-close-menu-movil {
  position: fixed;
  top: calc(17px + env(safe-area-inset-top));
  right: calc(4% + env(safe-area-inset-right));
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 100000;
}

/* Ícono X desde content */
#sec-menu-movil .btn-close-menu-movil::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://oliverrenecirugiaplastica.com/wp-content/themes/subgrafica-theme/data/img/iconos/hm-oliver-rene_4.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Interacciones del botón */
#sec-menu-movil .btn-close-menu-movil:hover::after { opacity: .8; }
#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;
}


.et_pb_row.random {
  position: relative;
  overflow: hidden;
}

.et_pb_row.random::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  transform-origin: center center;
  transition: none;
  display: block;
}

.et_pb_row.random > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   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: 1920px !important;
}
.et_pb_section {
  background-color: transparent;
}

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

 /* 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) {
  /* 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 */
}