/*
Theme Name:   Subgráfica theme
 Theme URI:    https://subgrafica.com/
 Description:  Subgráfica WP theme - 2026
 Author:       Subgráfica Estudio
 Author URI:   https://subgrafica.com/
 Template:     Divi
 Version:      7.0 2026 FEB
 License:      Attribution-NonCommercial 4.0 International
 License URI:  https://creativecommons.org/licenses/by-nc/4.0/
 */


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

    /* Colores */
  --gr: #B0B0B0;   /* gris */
  --ne: #111111;   /* negro */
  --bl: #F3F3F3;   /* blanco */
  --transp: transparent;

  /* Tipografías y pesos */
  --ffa: 'ar-reg', sans-serif;  /* Fuente A principal  */
  --ffb: 'lb-reg', sans-serif;  /* Fuente B secundaria */
  --fwl-reg: 400;           /* Peso regular */

  /* Tamaños para encabezados */
  --fs-h1: clamp(0.9rem, 1vw + 1rem, 0.9rem);    /* H1 */
  --fs-h2: clamp(1.0rem, 1vw + 1rem, 1.0rem);    /* H2 */
  --fs-h3: clamp(1.0rem, 1vw + 1rem, 1.0rem);    /* H3 */
  --fs-h4: clamp(1.0rem, 1vw + 1rem, 1.0rem);    /* H4 */
  --fs-h5: clamp(1.0rem, 1vw + 1rem, 1.0rem);    /* H5 */
  --fs-h6: clamp(1.0rem, 1vw + 1rem, 1.0rem);    /* H6 */

  /* Tamaños para párrafos */
  --fs-p-no: clamp(0.8rem, 2vw + 1rem, 0.8rem);  /* Párrafo normal  */
  --fs-p-gr: clamp(0.8rem, 1vw + 1rem, 0.85rem);     /* Párrafo grande  */
  --fls: 1px;
  /* 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: 120%;
  --flh2: 150%;
}
/* =========================================================
   2. RESET / BASE
========================================================= */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* =========================================================
   3. TIPOGRAFÍA Y TEXTO
========================================================= */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}
body {
  font-family: var(--ffa);
  font-size: var(--fs-p-no);
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  color: var(--gr) !important; 
  background-color: var(--ne) !important;
  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(--gr);
  color:var(--ne);
}

::-moz-selection {
  background: var(--gr);
  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 {
  color: var(--gr) !  important;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  text-justify: inter-character;
 }

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

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

 a:hover {
   opacity: 1;
   text-decoration: none;
   color: var(--bl);
   transition: all 0.2s ease-in-out;
 }

 a:visited {
   color: var(--gr);
   opacity: 1;
 }
 /* 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;
   line-height: var(--flh1);
   letter-spacing: var(--fls);
 }
 h2 {
   font-family: var(--ffa);
   font-size: var(--fs-h1) !important;
   line-height: var(--flh1);
 }
 h3 {
   font-family: var(--ffa);
   font-size: var(--fs-h1) !important;
   line-height: var(--flh1);
 }
 h4 {
   font-family: var(--ffb);
   font-size: var(--fs-h2) !important;
   line-height: var(--flh1);
 }
 h5 {
   font-family: var(--ffb);
   font-size: var(--fs-h2) !important;
   line-height: var(--flh1);
 }
 h6 {
   font-family: var(--ffb);
   font-size: var(--fs-h2) !important;
   line-height: var(--flh1);
 }
 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;
}
.logo img {
  height: 14px !important;
  width: auto !important;
  max-width: none !important;
}

/* =========================================================
   4. LISTAS Y TEXTO DECORADO
========================================================= */
.lista-base ul {
  font-family: var(--ffb);
  list-style: none;
  color: var(--gr);
  font-size: var(--fs-p-gr);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  padding: 0;
  margin: 0;
  width: fit-content;
  text-align:left;
  line-height: none !important;
  cursor: default;
}

.lista-base ul li {
  margin-bottom: 5px;
  cursor: default;
}

.lista-base ul li a {
  font-family: var(--ffb);
  font-size: var(--fs-p-gr);
  line-height: var(--flh1);
  color: var(--gr);
  display: inline;
  text-decoration: none;
  opacity: 1;
}

/* Hover */
.lista-base ul li a:hover {
   text-decoration: none;
    color: var(--bl);
}

/* Visited */
.lista-base ul li a:visited {
  color: var(--gr);
  opacity: 1;
}

.lista-base ul {
  font-family: var(--ffb);
  list-style: none;
  color: var(--gr);
  font-size: var(--fs-p-gr);
  padding: 0;
  margin: 0;
  width: fit-content;
}

.lista-base ul li {
  margin-bottom: 5px;
}

.lista-base ul li a {
  font-family: var(--ffb);
  font-size: var(--fs-p-gr);
  color: var(--gr);
}

/* hover */
.lista-base ul li a:hover {
   text-decoration: none;
    color: var(--bl);
}

/* FIX REAL */
.lista-base a.is-active {
   text-decoration: none;
    color: var(--bl);
}

/* anchor auto */
.lista-base a.is-anchor-active {
   text-decoration: none;
    color: var(--bl);
}

/* horizontal */
.lista-base.horizontal ul {
  display: flex;
  gap: 25px;
}
/* =========================
   ACTIVE LINK PRO
========================= */

/* estado base activo */
.lista-base a.is-active{
  color: var(--bl);
  text-decoration: none;
}

/* hover del activo */
.lista-base a.is-active:hover{
  color: var(--bl);
  text-decoration: none;
}
/* visited se mantiene igual */
.lista-base a.is-active:visited{
  color: var(--bl);
}


/* ===============================
   VARIANTE HORIZONTAL
================================ */

.lista-base.horizontal ul {
  display: flex;
  gap: 25px; /* separación horizontal */
  align-items: left;
}

.lista-base.horizontal ul li {
  margin-bottom: 5px !important;
}
/* Link visualmente neutro (como span) */


/* estado editorial manual */
.lista-base .is-active {
   text-decoration: none;
    color: var(--bl);
}

/* estado automático por anchor */
.lista-base a.is-anchor-active {
   text-decoration: none;
    color: var(--bl);
}
/* asegurar hover visible siempre */
.lista-base ul li a:hover{
   text-decoration: none !important;
    color: var(--bl);
}

.archer {
   text-decoration: none !important;
    color: var(--bl) !important;
}

.lista-base .lang-switch a.is-active{
   text-decoration: none !important;
    color: var(--bl);
  opacity: 1 !important;
}

.back-close {
  display: inline-block;
  line-height: 0; /* evita espacio raro */
}

.back-close img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.back-close:hover img {
  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;
}
#proyecto {
  cursor: default;
}

#proyecto p {
color: var(--gr) !important;
padding-bottom: 20px;
text-align: justify;
}

#proyecto h4 {
  color: var(--gr) !important;
  padding-bottom: 30px;
}

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

.et_pb_preload::before {
  display: none !important;
}

/* Base: oculto pero ocupando el viewport fijo */
#sec-menu-movil {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  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;
}
.navbar-blur {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

/* Capa visual extendida */
.navbar-blur::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px; /* más grande que los 64px reales */

  pointer-events: none;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  /* Gradiente muy sutil */
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 20%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 20%,
    transparent 100%
  );
}


.lg-backdrop {
  background-color: var(--ne) !important;
}
.lg-outer .lg-img-wrap {
  padding: 10% !important;
}
/* Quitar zoom inicial LightGallery */
.lg-outer.lg-start-zoom .lg-object {
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.grid-item {
  transition: opacity .35s ease !important;
}

.isotope-item {
  transition: opacity .35s ease !important;
}

/* evitar movimiento */
.grid-item,
.isotope-item {
  transition-property: opacity !important;
}
.difl_imagegallery_0 .grid .grid-item {
}
.lg-toolbar .lg-close::after {
  content: "\e070";
  position: fixed !important;
  top: 20px !important;
  right: 2% !important;
  width: 20px !important;
  height: 20px !important;
  background: url('https://subgrafica.com/data/img/close_.png') no-repeat center center !important;
    background-size: auto;
  background-size: auto;
  background-size: contain !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: 0.6 !important;
  padding: 0 !important;
  z-index: 9999999 !important;
  transition: opacity 0.3s ease;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1024px !important;
}


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

.et_pb_section.has-background {
  background-color: unset;
}
.df_ig_gallery {
  opacity: 0;
}

.df_ig_gallery.loaded {
  opacity: 1;
  transition: opacity .5s ease;
}
/* =========================================================
   8. EFECTOS Y ANIMACIONES
========================================================= */
.et_pb_preload, .et_pb_section.et_pb_section_video.et_pb_preload {
  position: relative;
  background: var(--ne) !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; }
}

/* =========================================
   PAGE TRANSITION FADE
========================================= */

.page-transition-overlay{
  position: fixed;
  inset:0;
  background:var(--ne) !important;
  opacity:0;
  pointer-events:none;
  z-index:999999;
  transition: opacity .20s ease;
}

.page-transition-overlay.is-active{
  opacity:1;
  pointer-events:auto;
}

/* entrada suave al cargar */
body.page-enter{
  opacity:0;
  transition: opacity .20s ease;
}

body.page-enter.page-enter-active{
  opacity:1;
}


.is-editor-role #wp-admin-bar-et-use-visual-builder,
.is-editor-role #wp-admin-bar-et_visual_builder {
  display: none !important;
}

#wp-admin-bar-agsdg-et-use-visual-builder {
  display: none;
}

/* ============================
   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 */
}
@media (max-width: 980px) {
  .et_pb_column {
    width: 100%;
    margin-bottom: 0px;
  }
}