/*
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 */
	--7d: #7D7D7D;
	--gr: #272727;
	--11: #0c0c0c;
	--22: #222222;
	--26: #262626;
	--bl: #ffffff;
	--bl2: #c0c0c0;
	--transp: transparent;
	--tranlu: rgba(255,255,255,0.6);
	--tranlu-2: rgba(255, 255, 255, 0.75);

	/* Tipografías y pesos */
	--ffa: 'DM Sans', sans-serif;
	--ffb: 'AktifoA-Medium', Helvetica, Arial, Sans-Serif;
	--fwl-reg: 400;
	--fwl-med: 500;
	--fwl-bol: 700;

	/* Tamaños encabezados */
	--fs-h1: clamp(1.25rem, 1vw + 1rem, 1.60rem);
	--fs-h2: clamp(1.00rem, 1vw + 1rem, 1.0rem);
	--fs-h3: clamp(1.00rem, 1vw + 1rem, 2.0rem);
	--fs-h4: clamp(1.00rem, 1vw + 1rem, 2.0rem);
	--fs-h5: clamp(1.00rem, 1vw + 1rem, 1.4rem);
	--fs-h6: clamp(1.00rem, 1vw + 1rem, 1.4rem);

	/* Párrafos */
	--fs-p-pe: clamp(0.85rem, 1vw + 1rem, 0.85rem);
  	--fs-p-no: clamp(0.90rem, 1vw + 0.9rem, 1.00rem);
	/* Especiales */
	--fs-esp-h1: clamp(.9rem, 3vw + 1rem, 3.6rem);
	--fs-esp-h4: clamp(.9rem, 3vw + 1rem, 2.2rem);

	/* Interlineado */
	--flh0: 100%;
	--flh1: 125%;
	--flh2: 150%;

	/* Animación de logotipo */
	--lf-size: clamp(120px, 20vw, 260px);
    --intro-w: 90vw;   /* ancho visible inicial */
    --intro-h: auto;   /* mantiene proporción natural */
    --intro-x: 0;
    --intro-y: 0;
	--lf-hold: 1800ms;
	--lf-travel: 900ms;
	--lf-fadeout: 250ms;
	--lf-total: calc(var(--lf-hold) + var(--lf-travel) + var(--lf-fadeout));
	--footer-fade: 500ms;
	--footer-delay: calc(var(--lf-total) - 150ms);
	--travel-overshoot: 4vh;
	--start-scale: 1;
	--end-scale: 0.85;
}

/* =========================
   2) Reset / Base
========================= */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Altura base viewport */
body { height: 100vh; }
@supports (-webkit-touch-callout: none) {
	body { height: -webkit-fill-available; }
}

/* Tipografía base */
body {
	font-family: var(--ffa);
	font-size: var(--fs-p-no);
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	color: var(--bl);
	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);
}

/* Selección */
::selection { background: var(--gr); color: var(--7d); }
::-moz-selection { background: var(--gr); color: var(--7d); }

/* Accesibilidad de enlaces */
a:active, a:active * { outline: none !important; outline-style: none !important; }
a:focus, a:focus * { outline: none !important; outline-style: none !important; }

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
	color: var(--bl);
	-webkit-hyphens: none; -moz-hyphens: none; hyphens: none;
	text-justify: inter-character;
}
h1 { font-family: var(--ffa); font-size: var(--fs-h1) !important; font-weight: var(--fwl-med); line-height: var(--flh1); text-transform: uppercase; }
h2, h3, h4, h5, h6 {
	font-family: var(--ffa);
	font-size: var(--fs-h2) !important;
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	text-transform: uppercase;
}

/* Párrafos */
p {
	font-family: var(--ffa);
	font-size: var(--fs-p-no);
	font-weight: var(--fwl-reg);
	text-align: left;
	line-height: var(--flh1);
	padding-bottom: 1.1em;
	hyphens: none;
	overflow-wrap: normal;
}
b, strong { font-weight: var(--fwl-bol); }
br { margin-bottom: 4px; }

/* Enlaces */
a, a:link {
	text-decoration: none;
	color: var(--bl);
	opacity: 1;
	transition: color .2s ease-in-out, opacity .2s ease-in-out;
}
a:hover { opacity: 1; color: var(--bl); text-decoration: underline; }

/* Enlaces con imágenes/SVG */
a img, a svg { transition: opacity .3s ease; }
a:hover img, a:hover svg { opacity: .9; }
a:visited svg { opacity: 1; }

/* Bloques de texto utilitarios */
blockquote { border-color: var(--7d); }
.par-gra p {}
.par-peq p {
	font-family: var(--ffa);
	font-size: var(--fs-p-pe);
	font-weight: var(--fwl-reg);
	text-align: left;
	line-height: var(--flh1);
	hyphens: none;
	overflow-wrap: normal;
}
.no-text { cursor: default; }
.no-data { user-select: none; }
.link-especifico a:link, .link-especifico a:visited {
	text-decoration: none;
	opacity: 1;
	transition: opacity .3s ease, color .3s ease;
}

/* =========================
   4) Listas y texto decorado
========================= */
.lista-base ul {
	list-style-type: none !important;
	padding: 10px 0 23px 0 !important;
}
.lista-base ul li {
	font-family: var(--ffa);
	font-size: var(--fs-p-no);
	font-weight: var(--fwl-reg);
	line-height: var(--flh0);
	margin-bottom: var(--fs-p-pe);
}
.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; }

.lista-premios ul {
	list-style-type: none !important;
	padding: 10px 0 23px 0 !important;
}
.lista-premios ul li {
	font-family: var(--ffa);
	font-size: var(--fs-p-no);
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	margin-bottom:var(--fs-h1);
}


/* Texto con icono */
p.icono { 
	position: relative;
	text-transform: uppercase; 
}
p.icono::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	width: 11px; height: 11px;
	background-repeat: no-repeat; background-size: contain; background-position: center;
	vertical-align: middle; margin-bottom: 3px;
}
p.icono.flecha::after {
	background-image: url("https://sbgrfc.com/martin/wp-content/themes/subgrafica-theme/data/img/flecha.svg");
	animation: iconFade .8s ease-out .2s forwards;
	transition: transform .3s ease;
}

.bar-desktop {
	position: relative;
	min-height: 80px;
	display: block;
	align-items: center;
}

/* Logos Desktop */
.bar-desktop .logo-normal,
.bar-desktop .logo-sticky {
	width: auto;
	min-height: 1px;
	transition: opacity 0.7s ease;
}

/* Estado base */
.bar-desktop .logo-normal {
	display: block;
	width: 33vw; 
	opacity: 1;
}

.bar-desktop .logo-sticky {
	width: 328px;
	opacity: 0;
	visibility: hidden;
}

/* Cambio al activar sticky (desktop) */
.et_pb_sticky .logo-normal { 
	opacity: 0;
	visibility: hidden;
}

.et_pb_sticky .logo-sticky {
	opacity: 1;
	visibility: visible;
}

/* Menú */
.menu-ini {
  display: inline-flex;
  justify-content: end;
  align-items: center;
  gap: 1px;
}

.menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 30px;
	border-radius: 2px;
  	background-color: var(--tranlu);
  	color: var(--11) !important;
    backdrop-filter: blur(6px);
  	-webkit-backdrop-filter: blur(6px);
	font-family: var(--ffa);
	font-size: var(--fs-h2) !important;
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item:hover { 
	background-color: var(--tranlu-2);
	color: var(--11); 
	text-decoration: none !important;
}

.menu-item.current-menu-item,
.menu-item.current_page_item,
.menu-item.current_page_ancestor { 	
	background-color: var(--tranlu-2);
	color: var(--11);
}

/* Estado inicial: transparentes */
.menu-ini,
.logo-normal,
.logo-sticky,
.logo-movil {
  background-color: var(--transp);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.6s ease, backdrop-filter 0.6s ease;
}

/* Estado activo al hacer scroll */
.menu-ini.activo,
.logo-normal.activo,
.logo-sticky.activo {
  background-color: var(--translu);
  backdrop-filter: blur(3px);
  border-radius: 4px;
}
.modo-texto-negro,
.modo-texto-negro * {
  color: var(--11) !important; /* negro */
  transition: color 0.3s ease;
}

/* Si querés lo inverso (de negro a blanco) */
.modo-texto-blanco,
.modo-texto-blanco * {
  color: var(--bl) !important; /* blanco */
  transition: color 0.3s ease;
}




/* Barra móvil */
.bar-movil {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.bar-movil {
	position: relative;
	min-height: 1px;
	display: flex;
	align-items: center;
}

/* Logo móvil */
.bar-movil .logo-movil {
	display: block;
	width: 328px; 
	min-height: 1px;
	margin-top: 10px;
	transition: opacity 0.7s ease;
	opacity: 1;
}

/* Menú móvil (idéntico al desktop) */
.bar-movil .menu-ini {
	display: inline-flex;              
	justify-content: end;
	align-items: center;
	gap: 1px;
}

.bar-movil .menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 30px;
	border-radius: 2px;
	background-color: var(--tranlu);
	color: var(--11) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--ffa);
	font-size: var(--fs-h2) !important;
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.bar-movil .menu-item:hover { 
	background-color: var(--tranlu-2);
	color: var(--11); 
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px); 
	text-decoration: none !important; 
	transition: background-color 0.3s ease, color 0.3s ease;
}

.bar-movil .menu-item.current-menu-item,
.bar-movil .menu-item.current_page_item,
.bar-movil .menu-item.current_page_ancestor { 	
	background-color: var(--tranlu-2);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);  
	color: var(--11); 
	text-decoration: none !important;
}

/* Estado inicial: transparentes */
.bar-movil,
.bar-movil .logo-movil,
.bar-movil .menu-ini {
	background-color: var(--transp);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 6px;
	border-radius: 4px;
	transition: background-color 0.6s ease, backdrop-filter 0.6s ease;
}

/* Estado activo al hacer scroll */
.bar-movil.activo,
.bar-movil .logo-movil.activo,
.bar-movil .menu-ini.activo {
	padding: 6px;
	background-color: var(--translu);
	backdrop-filter: blur(3px);
	border-radius: 4px;
}
.project-title p {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fwl-med);
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.project-title {
  padding-top: none;
}
.project-list p {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fwl-med);
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.project-text p {
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.project-text {
}
.project-text {
  margin-top: 0;
}

.project-text > *:not(:empty) {
  margin-top: 11px;
}
.et-pb-contact-message p {
  font-weight: bold;
}

#et-boc .area-outer-wrap[data-da-shadow="yes"] [data-da-area] {
  -webkit-box-shadow: 0 3px 10px -1px rgba(0,0,0,0),0 2px 50px 2px rgba(0,0,0,0);
  box-shadow: 0 3px 10px -1px rgba(0,0,0,0),0 2px 50px 2px rgba(0,0,0,0);
}
#et_pb_contact_form_0 .et_pb_contact_field {
  width: 100% !important;   /* ocupa toda la fila */
  float: none !important;   /* elimina el flujo horizontal */
  clear: both !important;   /* asegura salto de línea */
}
#et_pb_contact_form_0 .et_pb_contact_field {
  margin-bottom: 30px;
}
/* Texto informativo alineado con los campos del formulario */
#et_pb_contact_form_0 .et_contact_bottom_container::before {
  content: "Access is exclusively for professional review purposes";
  display: block;
  color: var(--7d);
  text-align: left;
  opacity: 0.8;
  margin-left: 6px; /* alinea con los campos */
  margin-bottom: 10px;
  line-height: 1.2;
  position: relative;
  top: 12px; /* lo centra verticalmente con los inputs */
}
.et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:hover {
  padding: 1em 1em !important;
}

.da-overlay-visible .da-overlay {
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
}
.da-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0,0,0,.70);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: -webkit-backdrop-filter 1s 1s,backdrop-filter 1s 1s;
  z-index: 99;
}
.et_pb_contact p input, .et_pb_contact p textarea {
  -webkit-appearance: none;
  background-color: #eee;
  width: 100%;
  border-width: 0;
  border-radius: 0;
  color: var(--7d);
  font-size: 14px;
  padding: 16px;
  border: 1px solid var(--11);
  border-radius: 2px;
}

/* Botón de contacto con mismo estilo visual que .menu-item */
#et_pb_contact_form_0 .et_pb_button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto; /* o auto si querés que se ajuste al texto */
	height: 40px;
	border-radius: 3px;
	background-color: var(--tranlu);
	color: var(--11) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--ffa);
	font-size: var(--fs-h2) !important;
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	text-transform: uppercase;
	text-decoration: none !important;
	border: none;
	transition: background-color 0.3s ease, color 0.3s ease;
	cursor: pointer;
}

/* Hover igual al menú */
#et_pb_contact_form_0 .et_pb_button:hover {
	background-color: var(--bl2);
	color: var(--11);
	text-decoration: none !important;
}

/* Quita el ícono de Divi por defecto */
#et_pb_contact_form_0 .et_pb_button:after {
	display: none !important;
}

#et-boc .area-outer-wrap[data-da-color="light"] .da-close {
  background: var(--bl);
  -webkit-box-shadow: 0 0 0px 0px #00000008;
  box-shadow: 0 0 0px 0px #00000008;
  color: var(--11);
}
#et-boc .area-outer-wrap .da-close {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  display: block;
  font-size: 60px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  opacity: .7;
  pointer-events: all;
  position: absolute;
  right: 15px;
  text-align: center;
  text-decoration: none;
  top: 15px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  width: 30px;
}
#et-boc .area-outer-wrap[data-da-color="light"] .da-close:hover {
  background: #fff;
  -webkit-box-shadow: 0 0 0px 0 #0002,0 0 0px 0px #0001;
  box-shadow: 0 0 0px 0 #0002,0 0 0px 0px #0001;
  color: #000;
}
#et-boc .area-outer-wrap .da-close:hover {
  opacity: 1;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}

.boton-item {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: auto; /* se adapta al contenido */
	height: 30px;
	border-radius: 2px;
	background-color: var(--tranlu);
	color: var(--11) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--ffa);
	font-size: var(--fs-h2) !important;
	font-weight: var(--fwl-reg);
	line-height: var(--flh1);
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease;
	padding: 0 16px; 
	cursor: pointer;
}

/* Hover */
.boton-item:hover { 
	background-color: var(--tranlu-2);
	color: var(--11); 
	text-decoration: none !important;
}

/* Estado activo */
.boton-item.current-menu-item,
.boton-item.current_page_item,
.boton-item.current_page_ancestor { 	
	background-color: var(--tranlu-2);
	color: var(--11);
}


/* =========================
   5) Menú móvil de pantalla completa (base)
========================= */
#sec-menu-movil {
	position: fixed;
	inset: 0;
	width: 100vw;
	min-height: 100vh;
	z-index: 99999;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .28s ease, visibility .28s ease;
}
#sec-menu-movil.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
#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;
}
#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;
}
#sec-menu-movil .btn-close-menu-movil:hover::after { opacity: .8; }
#sec-menu-movil .btn-close-menu-movil:focus {}

/* =========================
   6) 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: 2560px !important; }
.et_pb_section { background-color: transparent; }
.et_pb_section.has-background { background-color: unset; }
.et_pb_row.et_pb_gutters1 > .et_pb_column { margin-right: 20px !important; }
.et_pb_row.et_pb_gutters1 > .et_pb_column:last-child { margin-right: 0 !important; }

.et_pb_row.row-list {
  padding-bottom: 12px; /* valor base */
  cursor: default;
}




/* =========================
   8) Overlay y animación de intro
========================= */
:root {
	--intro-overlay-bg: #0c0c0c;
	--intro-overlay-opacity: 1;
	--intro-fade-duration: .6s;
	--intro-delay: .5s;
	--intro-duration: 4s;
	--intro-easing: cubic-bezier(.65,0,.35,1);
	--intro-z-overlay: 9998;
	--intro-z-image: 999999;
}

/* Overlay base */
#intro-overlay {
	position: fixed; inset: 0;
	background: var(--intro-overlay-bg);
	opacity: var(--intro-overlay-opacity);
	z-index: var(--intro-z-overlay);
	pointer-events: none;
	animation-fill-mode: forwards;
}

/* Overlay por página */
body.page-id-14 #intro-overlay { animation: overlayHomeFadeOut 5.0s cubic-bezier(.45,0,.25,1) 3.0s forwards; }
body:not(.page-id-14) #intro-overlay { animation: overlayQuickFade 1.2s ease-in-out .4s forwards; }

/* Keyframes overlay */
@keyframes overlayHomeFadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes overlayQuickFade { 0% { opacity: 1; } 80% { opacity: .2; } 100% { opacity: 0; visibility: hidden; } }

/* Bloqueo de scroll durante intro */
html.intro-lock-scroll, body.intro-lock-scroll { overflow: hidden !important; }

/* Estados de imagen animada (home) */
.image-animate.__prep { visibility: hidden; opacity: 0; }
.image-animate.__flying {
	position: fixed !important;
	top: var(--intro-top); left: var(--intro-left);
	width: var(--intro-w); height: var(--intro-h);
	transform: translate(var(--intro-x), var(--intro-y));
	z-index: var(--intro-z-image) !important;
	will-change: transform, opacity;
	transform-style: preserve-3d;
	visibility: visible;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity .3s ease-out,
		transform var(--intro-duration) var(--intro-easing) 2.0s;
}
.image-animate.__play { opacity: 1; }
body:not(.intro-free-xy) .image-animate.__flying {}
body.intro-free-xy .image-animate.__flying {}
body.intro-done .image-animate {}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	#intro-overlay, .image-animate { animation: none !important; opacity: 0 !important; }
}

/* Visibilidad por defecto de logos (fallback global) 
.logo-sticky { display: none; transition: opacity .3s ease, transform .3s ease; }
.logo-normal { display: block; transition: opacity .3s ease, transform .3s ease; }
.et_pb_sticky .logo-normal { display: none; opacity: 0; transform: scale(0.95); }
.et_pb_sticky .logo-sticky { display: block; opacity: 1; transform: scale(1); }*/

/* =========================
   9) Efectos y animaciones varias
========================= */
.animate { animation: fader 8s infinite linear; }
@keyframes iconFade { from { opacity: 0; } to { opacity: 1; } }
@-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 .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%) }
}
@keyframes fade-object { from { opacity: 0; } to { opacity: 1; } }

/* =========================
   10) Media Queries globales
========================= */

/* 10.1) Mundo móvil (≤880px) */
@media (max-width: 880px) {

}

/* 10.2) Todo hasta desktop mediano (≤1365px) */
@media (max-width: 1365px) {
	/* estilos para pantallas ≤1365px */
}

/* 10.3) Desktop grande (≥1366px) */
@media (min-width: 1366px) {
	/* estilos para pantallas grandes */
}

@media (max-width: 980px) {
  .bar-desktop {
    display: none !important;
  }
  .bar-movil {
  display: block !important;
  opacity: 1;
  visibility: visible;
  }
  .et_pb_row.row-list {
  padding-bottom: 30px !important; /* valor base */
}
  .margen-movil{
  margin-top: 60px !important;
}
.project-title {
  padding-top: 40px !important;
}
}
@media (max-width: 479px) {
  .et_pb_row .et_pb_column.et_pb_column_1_4, .et_pb_row .et_pb_column.et_pb_column_1_5, .et_pb_row .et_pb_column.et_pb_column_1_6 {
    margin: 0 0 0px;
  }
}
@media (max-width: 980px) {
  .bar-movil .menu-ini {
    position: fixed;
    bottom: 24px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 228px;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    background: var(--transp);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
  }
}
.menu-ini {
  display: flex;
  gap: 1px;
}

.menu-item {
  flex: 1 1 0;         /* ambos botones siempre del mismo ancho */
  min-width: 100px;    /* tu ancho original */
  text-align: center;
}