/*
Theme Name: Subgráfica
Author: Subgráfica Estudio
Template: _sbgrfc
Version:      6.0 AGO
License:      Attribution-NonCommercial 4.0 International
License URI:  https://creativecommons.org/licenses/by-nc/4.0/
*/
/* This file was modified 2025-10-30 by WP Zone to customize metadata in header comment */


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

    /* Colores */
  --gr: #888888;      /* gris */
  --ne: #333333;      /* negro */
  --ne-2: #000000;      /* negro */

  --bl: #ffffff;      /* blanco */
  --rojo: #ff2a00;    /* rojo */
  --verde: #009d03;   /* verde */
  --b-obs: #e6b88a;   /* beige oscuro */
  --b-med: #f5e7d6;   /* beige medio */
  --b-cla: #f6f0ea;   /* beige claro */
  --transp: transparent;
  --shadow: 0em 0.07em 0.07em rgba(0,0,0,0.2);

  /* Tipografías y pesos */
  --ffa: 'DM Sans', system-ui;             /* Fuente A principal  */
  --ffb: 'Sniglet', system-ui, Helvetica, Arial, Sans-Serif;  /* Fuente B secundaria */
  --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, 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: 100%;
  font-weight: var(--fwl-reg);
  color: var(--ne);
  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(--rojo);
  color:var(--b-cla);
}

::-moz-selection {
  background: var(--rojo);
  color:var(--b-cla);
}

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;
   line-height: var(--flh0);
 }

 p {
   font-size: var(--fs-p-nor);
   line-height: var(--flh2);
   hyphens: none;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   overflow-wrap: normal;
 }
br {
  margin-bottom: 4px;
}

a:link {
   text-decoration: none;
   opacity: 1;
   color: var(--ne-2)!important;
   text-decoration: var(--rojo) underline;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
 }

 a:hover {
   color: var(--ne-2)!important;
   text-decoration: var(--rojo) wavy underline;
   opacity: 1;
   transition: all 0.2s ease-in-out;
 }

 a:visited {
   color: currentColor !important;
   opacity: .9;
 }
 /* Imágenes dentro de enlaces */
a img {
  transition: opacity 0.3s ease; /* transición base */
}

a:hover img {
  opacity: 1.0;
}

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

a:hover svg {
  opacity: 1.0;
}

a:visited svg {
  opacity: 1;
}

 h1 {
   font-family: var(--ffb);
   font-size: var(--fs-h1) !important;
   font-weight: var(--fwl);
 }
 h2 {
   font-family: var(--ffa);
   font-size: var(--fs-h2) !important;
   font-weight: var(--fwl);
   font-style: italic;
 }
 h3 {
   font-family: var(--ffb);
   font-size: var(--fs-h3) !important;
   font-weight: var(--fwl);
 }
 h4 {
   font-family: var(--ffa);
   font-size: var(--fs-h4) !important;
 }
 h5 {
   font-family: var(--ffa);
   font-size: var(--fs-h5) !important;
 }
 h6 {
   font-family: var(--ffb);
   font-size: var(--fs-h6) !important;
 }
blockquote {
  border-color: var(--rojo);
}
.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;
}
.link-foot p a,
.link-foot p a:visited {
  text-decoration: none;
  color: var(--bl) !important;
  transition: color 0.3s ease;
}

/* Hover */
.link-foot p a:hover {
  color: var(--b-cla) !important;
  text-decoration:underline;
}

/* Active (cuando haces clic) */
.link-foot p a:active {
  color: var(--b-obs) !important;
  text-decoration: none;
}


.color-rojo h1,
.color-rojo h2,
.color-rojo h3,
.color-rojo h4,
.color-rojo h5,
.color-rojo h6,
.color-rojo p {
 color: var(--rojo) !important;
}
.color-rojo a:link{
  color: var(--rojo) !important;
  }
.color-rojo a:hover,
.color-rojo a:focus {
  color: var(--rojo-hover, var(--rojo)) !important; /* usa variable si tienes un tono hover */
  text-decoration: wavy  underline; /* o lo que prefieras */
}
.sombra {
  text-shadow: var(--shadow);
}
.sombra p {
  text-shadow: var(--shadow);
}
.sombra h1,
.sombra h2,
.sombra h3,
.sombra h4,
.sombra h5,
.sombra h6 {
  text-shadow: var(--shadow);
}
/* =========================================================
   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;
}

ul.menu-base {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* column-gap: 6px; */
  font-family: var(--ffa);
  font-size: var(--fs-p-nor);
  font-weight: var(--fwl-bol);
}

ul.menu-base > li > a {
  color: var(--rojo) !important;
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  text-decoration: var(--transp) underline;
  position: relative;
  display: inline-block;
  text-decoration: var(--transp) underline;
  padding: 0rem 15px 0rem 0rem;
  box-sizing: border-box;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;

}

ul.menu-base > li > a:hover {
  color: var(--rojo) !important;
  text-decoration: var(--rojo) underline;
  opacity: 1;
}

/* marquee base */

/* Contenedor visible del marquee */
.marquee-text {
  overflow: hidden;     /* fallback */
  overflow: clip;       /* si está soportado */
}

/* Pista que se mueve (recuerda duplicar items en el HTML) */
.marquee-text-track {
  display: flex;
  padding-left: 3.6rem;
  gap: 3.6rem;
  width: max-content;
  will-change: transform;
  animation: marquee-move-text var(--speed, 25s) linear infinite;
  animation-direction: var(--direction, normal); /* normal | reverse */
  /* animation-fill-mode: both;  opcional, sólo si lo necesitas */
}
/* Ítems */
.marquee-text p {
  margin: 0;
  white-space: nowrap; /* evita salto interno */
  padding-bottom: 0;
  font-family: var(--ffb);
  font-size: var(--fs-h3) !important;
  font-weight: var(--fwl);
  text-shadow: var(--shadow);
}
/* Estado normal y visitado */
.et_pb_blurb h5 a,
.et_pb_blurb h5 a:visited {
  text-decoration: none;
  color: var(--bl) !important;
  transition: color 0.3s ease;
}

/* Hover */
.et_pb_blurb h5 a:hover {
  color: var(--b-cla) !important; /* cambia a color oscuro */
    text-decoration: none;
}

/* Active (cuando haces clic) */
.et_pb_blurb h5 a:active {
  color: var(--b-obs) !important;
  text-decoration: none;
}
.et_pb_blurb_description {
  padding: 5px;
}

/* La animación recorre exactamente media pista (porque está duplicada) */
@keyframes marquee-move-text {
  to { transform: translateX(-50%); }
}

/* Wrapper de demo (ajústalo a tu layout real) */
.wrapper {
  max-width:100%;   /* o 100% si quieres full width */
  margin: 0 auto;

  color: var(--b-cla);
}

/* Estilo base para botones */

.et_pb_button.b-hueco {
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  background-color: var(--transp);
  color: var(--rojo) !important;
  border-radius: 999px;
  border: 2px solid var(--rojo);
  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-hueco:hover {
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  background-color: var(--rojo);
  color: var(--b-cla) !important;
  border-radius: 999px;
  border: 2px solid var(--rojo);
  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-hueco:focus {
  background-color: var(--transp);
  color: var(--b-obs) !important;
  border: 2px solid var(--b-obs);
}
.et_pb_button.b-hueco::before,
.et_pb_button.b-hueco::after {
  content: none !important; /* elimina los íconos o pseudo-elementos */
  opacity: 0 !important;
}


.et_pb_button.b-lleno {
  font-family: var(--ffa);
  font-size: var(--fs-p-pe);
  font-weight: var(--fwl-bol);
  background-color: var(--rojo);
  color: var(--b-cla) !important;
  border-radius: 999px;
  border: 2px solid var(--rojo);
  padding: 14px 44px 14px 44px !important;
  display: inline-block;
  position: relative;
  text-decoration: none;
  line-height: normal;
  transition: all 0.3s ease;
}

.et_pb_button.b-lleno:hover {
  background-color: var(--transp);
  color: var(--rojo) !important;
  border: 2px solid var(--rojo);
  opacity: 1;
}

.et_pb_button.b-lleno:focus {
  background-color: var(--transp);
  color: var(--b-obs) !important;
  border: 2px solid var(--b-obs);
}

/* eliminar íconos de Divi */
.et_pb_button.b-lleno::before,
.et_pb_button.b-lleno::after {
  content: none !important;
  opacity: 0 !important;
}

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


/* 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: 30px;
  height: 30px;
  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://thephonow.com/wp-content/themes/subgrafica-theme/data/img/close.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;
}






/* =========================================================
   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 */
}