/* ============================================================
FOPESA · HOJA DE ESTILOS ÚNICA Y COMPARTIDA
Base dominante: index.html
Ajustes exclusivos de Nosotros: aislados con body.page-nosotros
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* Sistema tipográfico compartido FOPESA.
Todas las páginas cargan únicamente styles/fopesa.css. */
html,
body,
button,
input,
select,
textarea {
font-family: var(--font-main);
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
small { font-size: var(--type-small); font-weight: 400; }
@media (max-width: 900px) {
:root {
--type-h1: clamp(42px, 12vw, 56px);
--type-h2: clamp(34px, 9vw, 46px);
--type-h3: clamp(27px, 7vw, 36px);
}
}
/* ==================== BASE PRINCIPAL: INICIO ==================== */
:root {
--header: 84px;
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
--text-h3: 24px;
--text-card: 32px;
--text-h2: 48px;
--text-stat: 56px;
--text-h1: 72px;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
a {color: inherit; text-decoration: none;}
button,
input,
textarea,
select {font: inherit;}
p,
h1,
h2,
h3 {margin-top: 0;}
h1,
h2,
h3 {margin: 0;
font-family: var(--font-main);
font-weight: 800;
color: var(--color-white);}
p {margin: 0;}
.page {width: 100%;
min-height: 100vh;
overflow-x: clip;}
.menu-list {width: 100%;}
.menu-section {width: 100%;
padding-top: 20px;
background: var(--color-dark);
}
.menu-real {width: 100%;
margin: 0;
padding: 0;
overflow: hidden;}
.site-header {width: 100%;
min-height: var(--header);
position: relative;
top: auto;
z-index: 5;
background: var(--color-white);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
.header-inner {width: min(calc(100% - 96px), 1440px);
max-width: 1440px;
min-height: var(--header);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 28px;
padding: 0;}
.header-zone {min-width: 0;
min-height: var(--header);
display: flex;
align-items: center;
gap: 18px;}
.zone-left {justify-content: flex-start; justify-self: stretch;}
.zone-center {justify-content: center; justify-self: center;}
.zone-right {justify-content: flex-end; justify-self: stretch;}
.logo {display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
min-width: 0;
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 900;
letter-spacing: -.035em;
line-height: 1;
white-space: nowrap;}
.main-nav {display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 1 auto;
min-width: 0;}
.main-nav a {position: relative;
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 13px;
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 800;
line-height: 1;
white-space: nowrap;
transition: color .25s ease, background .25s ease;}
.main-nav a::after {display: none;}
.main-nav a:hover {color: var(--color-dark);
background: var(--color-light);}
.main-nav a:hover::after {transform: none;}
.contact-btn {display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 48px;
padding: 0 22px;
border: 1px solid transparent;
background: var(--color-key);
color: var(--color-white);
font-size: var(--text-small);
font-weight: 900;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;}
.contact-btn:hover {transform: translateY(-2px);
background: var(--color-dark);
color: var(--color-white);}
.menu-toggle {display: none;
align-items: center;
justify-content: center;
justify-self: end;
width: 46px;
height: 46px;
border: 1px solid var(--color-line);
background: transparent;
color: var(--color-dark);
cursor: pointer;}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {content: "";
display: block;
width: 20px;
height: 2px;
background: currentColor;
transition: transform .25s ease, opacity .25s ease;}
.menu-toggle span::before {transform: translateY(-7px);}
.menu-toggle span::after {transform: translateY(5px);}
.site-header.is-open .menu-toggle span {transform: rotate(45deg);}
.site-header.is-open .menu-toggle span::before {transform: translateY(0) rotate(90deg);}
.site-header.is-open .menu-toggle span::after {opacity: 0;}
@media (max-width: 1180px){
h1 {font-size: 62px;}
h2 {font-size: 42px;}
.header-inner {width: min(calc(100% - 56px), 1440px); padding-left: 0; padding-right: 0;}
.header-inner {gap: 18px;}
.header-zone {gap: 12px;}
.main-nav {gap: 0;}
.main-nav a {padding: 0 9px;}
}
@media (max-width: 900px){
:root {--header: 74px;}
h1 {font-size: clamp(42px, 12vw, 56px);}
h2 {font-size: 34px;}
h3 {font-size: 22px;}
.menu-section {padding-top: 20px;}
.site-header {position: relative; top: auto;}
.header-inner {grid-template-columns: 1fr auto;
gap: 16px;}
.header-zone {display: contents;}
.logo {grid-column: 1;
grid-row: 1;
justify-self: start;}
.menu-toggle {display: inline-flex;
grid-column: 2;
grid-row: 1;}
.main-nav {display: none;
grid-column: 1 / -1;
width: 100%;
padding-top: 14px;
border-top: 1px solid var(--color-line);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;}
.main-nav a {width: 100%;
min-height: 46px;
padding: 0;}
.main-nav a::after {left: 0; right: 0;}
.contact-btn {display: none;
grid-column: 1 / -1;
width: 100%;
margin: 12px 0 18px;}
.site-header.is-open .main-nav,
.site-header.is-open .contact-btn {display: flex;}
}
@media (max-width: 520px){
.header-inner {width: calc(100% - 36px); padding-left: 0; padding-right: 0;}
.logo span:last-child {max-width: 180px; overflow: hidden; text-overflow: ellipsis;}
}
.footer-section {width: 100%;
padding-top: 34px;
background: var(--color-dark);
}
.footer-real {width: 100%;
margin: 0;
padding: 0;}
.site-footer {width: 100%;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);}
.footer-inner {width: min(1440px, 100%);
margin: 0 auto;
padding: 56px 42px;}
.footer-nav a {color: var(--color-dark);
transition: color .25s ease, background .25s ease, transform .25s ease;}
.footer-nav a:hover {color: var(--color-key);}
.footer-logo {display: inline-flex;
align-items: center;
gap: 12px;
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 900;
letter-spacing: -.035em;
line-height: 1;
white-space: nowrap;}
.footer-title {margin: 0 0 14px;
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;}
.footer-copy {color: rgba(20,42,92,.72);
font-size: var(--text-small);
line-height: 1.7;}
.footer-nav {display: grid;
gap: 10px;}
.footer-nav a {font-size: var(--text-small);
font-weight: 700;
line-height: 1.4;}
@media (max-width: 1100px){
.footer-inner {padding-left: 28px; padding-right: 28px;}
}
@media (max-width: 720px){
.footer-inner {padding-left: 18px; padding-right: 18px;}
}
.layout-section {width: 100%;
padding-top: 34px;
background: var(--color-dark);
}
.layout-real {width: 100%;
margin: 0;
padding: 0;}
:root {--about-square-img: url("../images-fopesa/fopesa-nosotros-historia-trayectoria.webp");}
.about-square-label {display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
.about-contained-demo {width: 100%;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
.about-contained-inner {width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 96px 0;
display: grid;
grid-template-columns: 50% 50%;
align-items: stretch;}
.about-contained-content {display: grid;
place-items: center;
padding: 56px clamp(42px, 5vw, 84px);
background: var(--color-white);}
.about-contained-copy {width: min(100%, 560px);}
.about-contained-label {display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
.about-contained-copy h3 {margin: 0;
color: var(--color-dark);
font-size: var(--text-h2);
line-height: 1.1;
letter-spacing: -.045em;}
.about-contained-copy p {margin: 14px 0 0;
color: rgba(20,42,92,.72);
font-size: var(--text-body);
line-height: 1.8;}
.about-contained-actions {display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;}
.about-contained-actions a {min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px;
border: 1px solid var(--color-line);
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 900;
line-height: 1;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;}
.about-contained-actions a:first-child {background: var(--color-key);
border-color: var(--color-key);
color: var(--color-white);}
.about-contained-actions a:hover {transform: translateY(-2px);
background: var(--color-dark);
border-color: var(--color-dark);
color: var(--color-white);}
@media (max-width: 1100px){
.about-contained-inner {width: min(100% - 56px, 1440px);
grid-template-columns: 1fr;
padding: 80px 0;}
.about-contained-content {padding: 56px 0 0;
place-items: start;}
}
@media (max-width: 720px){
.about-contained-inner {width: min(100% - 36px, 1440px);
padding: 58px 0;}
.about-contained-content {padding-top: 42px;}
.about-contained-copy h3 {font-size: 34px;}
.about-contained-actions {align-items: stretch;
flex-direction: column;}
}
#seccion-nosotros-gallery-01 {padding-top: 34px;}
#seccion-nosotros-gallery-01 .about-contained-demo {width: 100%;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
#seccion-nosotros-gallery-01 .about-contained-inner {width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 96px 0;
display: grid;
grid-template-columns: 50% 50%;
align-items: stretch;}
#seccion-nosotros-gallery-01 .about-contained-content {display: grid;
place-items: center;
padding: 56px clamp(42px, 5vw, 84px);
background: var(--color-white);}
#seccion-nosotros-gallery-01 .about-contained-label {display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
#seccion-nosotros-gallery-01 .about-contained-copy h3 {margin: 0;
color: var(--color-dark);
font-size: var(--text-h2);
line-height: 1.1;
letter-spacing: -.045em;}
#seccion-nosotros-gallery-01 .about-contained-copy p {margin: 14px 0 0;
font-size: var(--text-body);
line-height: 1.8;}
.about-gallery-grid {width: 100%;
min-height: 640px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px;}
.about-gallery-img {background-image: var(--about-square-img);
background-size: cover;
background-position: center center;
box-shadow: var(--shadow-5);}
.about-gallery-img.vertical {grid-row: span 2;
min-height: 640px;}
.about-gallery-img.square {aspect-ratio: 1 / 1;
min-height: 0;}
@media (max-width: 1100px){
#seccion-nosotros-gallery-01 .about-contained-inner {width: min(100% - 56px, 1440px);
grid-template-columns: 1fr;
padding: 80px 0;}
#seccion-nosotros-gallery-01 .about-contained-content {padding: 56px 0 0;
place-items: start;}
.about-gallery-grid {min-height: 520px;}
.about-gallery-img.vertical {min-height: 520px;}
}
@media (max-width: 720px){
#seccion-nosotros-gallery-01 .about-contained-inner {width: min(100% - 36px, 1440px);
padding: 58px 0;}
#seccion-nosotros-gallery-01 .about-contained-content {padding-top: 42px;}
#seccion-nosotros-gallery-01 .about-contained-copy h3 {font-size: 34px;}
.about-gallery-grid {grid-template-columns: 1fr;
grid-template-rows: none;
min-height: auto;}
.about-gallery-img.vertical {grid-row: auto;
min-height: 420px;}
.about-gallery-img.square {min-height: 280px;
aspect-ratio: auto;}
}
#seccion-nosotros-gallery-01 .about-contained-copy {width: 100% !important;
max-width: none !important;}
#seccion-nosotros-gallery-01 .about-contained-content {padding-left: 0 !important;
padding-right: clamp(42px, 5vw, 84px) !important;}
@media (max-width: 1100px){
#seccion-nosotros-gallery-01 .about-contained-content {padding-left: 0 !important;
padding-right: 0 !important;}
}
.icon-cards-section {width: 100%;
padding-top: 34px;
background: var(--color-dark);
}
.icon-cards-real {width: 100%;
margin: 0;
padding: 0;
background: var(--color-white);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
.icon-cards-inner {width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 72px 0;}
.icon-card-grid {display: grid;
gap: 22px;}
.icon-card-grid.three {grid-template-columns: repeat(3, 1fr);}
.icon-card {min-height: 300px;
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px;
background: var(--color-white);
border: 1px solid var(--color-line);
color: var(--color-dark);
transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;}
.icon-card:hover {transform: translateY(-8px);
background: var(--color-dark);
color: var(--color-white);
border-color: var(--color-dark);
box-shadow: var(--shadow-4);}
.icon-card-icon {width: 58px;
height: 58px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: var(--color-key);
color: var(--color-white);
flex: 0 0 auto;
transition: background .28s ease, color .28s ease;}
.icon-card-icon svg {width: 26px;
height: 26px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;}
.icon-card h3 {margin: 2px 0 0;
color: var(--color-dark);
font-size: var(--text-h3);
line-height: 1.22;
letter-spacing: -.025em;
transition: color .28s ease;}
.icon-card p {margin: 0;
font-size: var(--text-small);
line-height: 1.7;
transition: color .28s ease;}
.icon-card:hover h3,
.icon-card:hover p {color: var(--color-white);}
@media (max-width: 900px){
.icon-cards-inner {width: min(100% - 56px, 1440px);}
.icon-card-grid.three {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px){
.icon-cards-inner {width: min(100% - 36px, 1440px);
padding: 54px 0;}
.icon-card-grid.three {grid-template-columns: 1fr;}
.icon-card {min-height: 260px;
padding: 26px;}
.icon-card h3 {font-size: var(--text-h3);}
}
.trayectoria-stats-embed {--color-dark: #142A5C;
--color-white: #FFFFFF;
--color-line: #E0E5F0;
--font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-secondary: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
--text-h3: 24px;
--text-h2: 48px;}
.trayectoria-stats-embed * {box-sizing: border-box;}
.trayectoria-stats-embed {scroll-behavior: smooth;}
.trayectoria-stats-embed {
font-size: var(--text-body);
line-height: 1.7;}
.trayectoria-stats-embed .template-item {width: 100%;
padding-top: 20px;
background: var(--color-dark);
}
.trayectoria-stats-embed .template-demo {width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] {--tray-dark: #142A5C;
--tray-white: #FFFFFF;
--tray-line: rgba(20,42,92, .14);
--tray-line-light: rgba(255,255,255, .14);}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-section {width: 100%;
padding: 86px 42px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-wrap {
margin: 0 auto;}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] article {box-sizing: border-box;}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] strong,
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] span {display: inline-block;}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] strong {font-size: clamp(48px, 6vw, 96px);
line-height: .9;
letter-spacing: -.075em;
color: var(--tray-key);}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] span {color: var(--tray-key);
font-size: clamp(28px, 3vw, 54px);
line-height: 1;
font-weight: 800;}
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] p {margin: 12px 0 0;
font-size: 15px;
line-height: 1.55;}
.trayectoria-stats-embed /* 01 */
#DEMO-TRAYECTORIA-01 .tray-dark {background: var(--tray-dark); color: var(--tray-white);}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--tray-line-light);}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article {padding: 48px 34px; background: var(--tray-dark);}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article p {color: rgba(255,255,255, .72); font-weight: 700;}
@media (max-width: 1000px){
.trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-section {padding: 72px 24px;}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 620px){
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid {grid-template-columns: 1fr;}
}
.trayectoria-stats-embed /* ANCHO GLOBAL SOLICITADO: todos los bloques internos a 1440px */
[id^="DEMO-TRAYECTORIA-"] .tray-wrap {width: min(100%, 1440px);}
.trayectoria-stats-embed {width: 100%;
max-width: none;
margin: 0;
padding: 0;
background: var(--color-dark);
color: var(--color-white);
font-family: var(--font-secondary);
isolation: isolate;
overflow: hidden;}
/* Paso 1: eliminar el espacio residual de las filas descriptivas borradas */
.menu-section,
.layout-section,
.icon-cards-section,
.footer-section,
.trayectoria-stats-embed .template-item {
padding-top: 0 !important;
}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-section {padding-top: 48px; padding-bottom: 48px;}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article {padding-top: 34px; padding-bottom: 34px;}
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-counter,
.trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid span {color: var(--tray-white);}
.menu-section,
.layout-section,
.icon-cards-section,
.footer-section,
.trayectoria-stats-embed .template-item,
.site-header,
.icon-cards-real,
.about-contained-demo,
#seccion-nosotros-gallery-01 .about-contained-demo,
.site-footer {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* Paso 6 — Nuestro equipo: Sticky scrollytelling + ticker vertical, aislado */
#fopesa-equipo-scroll {
position: relative;
background: var(--equipo-light);
color: var(--equipo-dark);
overflow: visible;
isolation: isolate;
}
#fopesa-equipo-scroll,
#fopesa-equipo-scroll * {
box-sizing: border-box;
}
#fopesa-equipo-scroll .fopesa-equipo-sticky {
position: sticky;
top: 0;
min-height: 100svh;
height: 100svh;
overflow: hidden;
background: var(--equipo-light);
}
#fopesa-equipo-scroll .fopesa-equipo-layout {
width: 100%;
height: 100%;
margin: 0;
display: grid;
grid-template-columns: minmax(360px, calc((100vw - min(100vw, 1440px)) / 2 + 520px)) minmax(0, 1fr);
gap: clamp(36px, 5vw, 84px);
align-items: stretch;
}
#fopesa-equipo-scroll .fopesa-equipo-copy {
position: relative;
z-index: 4;
align-self: center;
padding: clamp(42px, 6vh, 72px) 0 clamp(42px, 6vh, 72px) max(48px, calc((100vw - 1440px) / 2 + 48px));
}
#fopesa-equipo-scroll .fopesa-equipo-label {
display: block;
margin-bottom: 14px;
}
#fopesa-equipo-scroll .fopesa-equipo-copy h2 {
margin: 0;
max-width: 560px;
}
#fopesa-equipo-scroll .fopesa-equipo-copy p {
max-width: 500px;
margin-top: 22px;
}
#fopesa-equipo-scroll .fopesa-equipo-visual {
position: relative;
min-height: 100%;
overflow: hidden;
mask-image: linear-gradient(180deg, transparent 0%, #142A5C 12%, #142A5C 88%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #142A5C 12%, #142A5C 88%, transparent 100%);
}
#fopesa-equipo-scroll .fopesa-equipo-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 30%, rgba(32,67,147,.12), transparent 28%),
radial-gradient(circle at 82% 70%, rgba(20,42,92,.08), transparent 24%);
}
#fopesa-equipo-scroll .fopesa-equipo-columns {
position: absolute;
z-index: 2;
inset: -30vh 0 -30vh 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.55vw, 24px);
will-change: transform;
}
#fopesa-equipo-scroll .fopesa-equipo-col {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.55vw, 24px);
will-change: transform;
}
#fopesa-equipo-scroll .fopesa-equipo-photo {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 0;
border: 1px solid rgba(20,42,92, .12);
background: #E0E5F0;
box-shadow: var(--shadow-5);
}
#fopesa-equipo-scroll .fopesa-equipo-photo::before {
content: "";
position: absolute;
inset: 0;
transform: scale(1.02);
}
#fopesa-equipo-scroll .fopesa-equipo-photo::after {
content: attr(data-label);
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
color: #FFFFFF;
font-size: clamp(13px, .9vw, 15px);
font-weight: 850;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
}
#fopesa-equipo-scroll .fopesa-equipo-photo.is-wide {
aspect-ratio: 16 / 10;
}
#fopesa-equipo-scroll .fopesa-equipo-photo.is-loop-pre {
order: -1;
}
@media (max-width: 980px){
#fopesa-equipo-scroll .fopesa-equipo-sticky {
position: relative;
height: auto;
min-height: auto;
overflow: hidden;
padding: 72px 0;
}
#fopesa-equipo-scroll .fopesa-equipo-layout {
width: min(100% - 56px, 1440px);
margin-inline: auto;
grid-template-columns: 1fr;
}
#fopesa-equipo-scroll .fopesa-equipo-copy {
padding: 0;
}
#fopesa-equipo-scroll .fopesa-equipo-visual {
height: 92vh;
min-height: 620px;
}
#fopesa-equipo-scroll .fopesa-equipo-columns {
inset: -18vh 0;
gap: 12px;
}
#fopesa-equipo-scroll .fopesa-equipo-col {
gap: 12px;
}
}
/* ==========================================================
Paso 8 · Historia · Time line Video.html
Demo original restaurada y encapsulada
========================================================== */
#fopesa-historia-section {
width: 100%;
overflow: visible;
}
#fopesa-historia-section, #fopesa-historia-section * {
box-sizing: border-box;
}
/* ===============================
FORMATO MAESTRO PARA EXPLICACIONES
================================ */
#fopesa-historia-section .template-item {
width: 100%;
background: var(--color-dark);
}
/* ===============================
CONTENEDOR DEL EJEMPLO ORIGINAL
================================ */
#fopesa-historia-section .template-demo {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: var(--color-dark);
border-bottom: 1px solid var(--color-line);
}
/* Esta demo necesita overflow visible para que position: sticky funcione. */
#fopesa-historia-section #fopesa-historia-timeline-item,
#fopesa-historia-section #fopesa-historia-demo.template-demo {
overflow: visible;
}
/* ===============================
RESPONSIVE
================================ */
/* ==========================================================
CSS ORIGINAL DE LA PLANTILLA
ID ÚNICO: #fopesa-historia-demo
Prefijado para evitar conflictos con el documento maestro
========================================================== */
#fopesa-historia-demo {
--black: #142A5C;
--border-radius--tiny: .375rem;
--border-radius--xtiny: .25rem;
--gray-800: #142A5C;
--nav--gray-800: #142A5C;
--white: #FFFFFF;
--border-radius--xxsmall: .5rem;
--gray-100: #FDEFE1;
--border-radius--xlarge: 2rem;
--border-radius--xxtiny: .175rem;
--border-radius--large-still: 1.75rem;
--border-radius--0: 0rem;
--border-radius--medium: 1.25rem;
--border-radius--large-change: 1.75rem;
--border-radius--xmedium: 1.5rem;
--border-radius--xsmall: .75rem;
--border-radius--small: 1rem;
--border-radius--home-hero: 2rem;
--border-radius--about-image: 2rem;
--border-radius--button-circle: 100vw;
--nav--circle: #142A5C;
width: 100%;
min-height: 100%;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--gray-900);
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
}
#fopesa-historia-demo *,
#fopesa-historia-demo *::before,
#fopesa-historia-demo *::after {
box-sizing: border-box;
}
#fopesa-historia-demo p {
color: var(--gray-500);
margin-bottom: 5rem;
}
#fopesa-historia-demo sup,
#fopesa-historia-demo sub {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
#fopesa-historia-demo sup {
top: 0em;
}
#fopesa-historia-demo .section_tabs {
z-index: 99;
border-radius: var(--border-radius--xlarge);
background-color: var(--gray-800);
position: relative;
}
#fopesa-historia-demo .padding-section-large {
position: relative;
}
#fopesa-historia-demo .tabs_sticky-wrapper {
position: sticky;
}
#fopesa-historia-demo .tabs_container {
margin-left: auto;
margin-right: auto;
}
#fopesa-historia-demo .tabs_component {
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
grid-template-rows: auto;
grid-auto-columns: 1fr;
}
#fopesa-historia-demo .tabs_left {
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
}
#fopesa-historia-demo .tabs_let-content {
padding-top: 0%;
padding-bottom: 0%;
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}
#fopesa-historia-demo .tabs_let-content p {
margin: 0;
}
#fopesa-historia-demo .heading-style-h4 {
letter-spacing: -.02em;
font-size: 2.125rem;
font-weight: 500;
line-height: 1.05;
margin-top: 0;
margin-bottom: 0;
}
#fopesa-historia-demo .text-color-gray100 {
color: var(--gray-100);
}
#fopesa-historia-demo .tabs_line {
width: 100%;
height: 1px;
background-color: var(--gray-500);
}
#fopesa-historia-demo .text-color-gray400 {
color: var(--gray-400);
}
#fopesa-historia-demo .text-size-small {
font-size: 1rem;
}
#fopesa-historia-demo .button {
grid-column-gap: .5rem;
grid-row-gap: .5rem;
border: 1px solid var(--gray-800);
background-color: var(--gray-800);
color: var(--gray-25);
text-align: center;
letter-spacing: .03em;
text-transform: uppercase;
cursor: pointer;
border-radius: .6rem;
justify-content: center;
align-items: center;
padding: .6rem 1.35rem;
font-size: .875rem;
text-decoration: none;
transition: color .6s;
display: flex;
overflow: hidden;
position: relative;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .tabs_right,
#fopesa-historia-demo .button {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
#fopesa-historia-demo .tabs_right {
grid-area: span 1 / span 1 / span 1 / span 1;
}
#fopesa-historia-demo .w-background-video {
width: 100%;
height: 100%;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
#fopesa-historia-demo .tabs_video {
width: 100%;
height: 100%;
border-radius: var(--border-radius--medium);
object-fit: cover;
position: absolute;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
visibility: hidden;
pointer-events: none;
}
#fopesa-historia-demo .tabs_video.is-active {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
#fopesa-historia-demo video {
vertical-align: baseline;
display: inline-block;
}
#fopesa-historia-demo .w-background-video > video {
width: 100%;
height: 100%;
object-fit: cover;
z-index: -100;
background-position: 50%;
background-size: cover;
margin: auto;
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
}
#fopesa-historia-demo img {
border: 0;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
@media (max-width: 900px){
#fopesa-historia-demo .tabs_component {
grid-template-columns: 1fr;
height: auto;
min-height: 90vh;
}
#fopesa-historia-demo .tabs_left {
min-height: 320px;
}
#fopesa-historia-demo .tabs_right {
min-height: 52vh;
}
}
@media (max-width: 576px){
#fopesa-historia-demo .padding-section-large {
padding-top: 2rem;
padding-bottom: 0rem;
}
#fopesa-historia-demo .tabs_height {
height: 600vh;
}
#fopesa-historia-demo .tabs_component {
grid-template-columns: 1fr;
}
#fopesa-historia-demo .tabs_let-content {
gap: 1rem;
justify-content: center;
}
#fopesa-historia-demo .heading-style-h4 {
margin: 0;
font-size: 20px;
}
#fopesa-historia-demo .text-size-small {
font-size: .875rem;
}
}
/* Paso 4 · Hero 01B integrado con Nosotros · lectura principal real acotada */
#fopesa-hero-nosotros-integrado{
--bg:#142A5C;
--ink:#FDEFE1;
--line:rgba(253,239,225,.14);
height:calc(100svh + var(--distance, 1800px));
min-height:100svh;
position:relative;
overflow:visible;
background:#FFFFFF;
color:var(--ink);
z-index:3;
}
#fopesa-hero-nosotros-integrado h2,
#fopesa-hero-nosotros-integrado h3,
#fopesa-hero-nosotros-integrado p{margin:0;}
#fopesaHeroVideoScreen{
position:absolute;
left:0;
top:0;
width:100vw;
height:100svh;
border-radius:0;
overflow:hidden;
transform-origin:50% 50%;
will-change:transform,width,height,border-radius,box-shadow,opacity;
background-size:cover;
background-position:center;
contain:layout paint;
backface-visibility:hidden;
}
#fopesaHeroVideoScreen video,
#fopesaHeroVideoScreen img{
width:100%;
height:100%;
display:block;
}
#fopesaHeroVideoScreen::before{
content:"";
position:absolute;
inset:0;
opacity:.18;
background-size:72px 72px;
pointer-events:none;
}
#fopesaHeroVideoScreen::after{
content:"VIDEO INTEGRADO";
position:absolute;
left:50%;
top:52%;
transform:translate(-50%,-50%);
width:130vw;
color:transparent;
font-weight:900;
font-size:clamp(90px, 17vw, 280px);
line-height:.75;
letter-spacing:-.11em;
text-transform:uppercase;
text-align:center;
pointer-events:none;
}
#fopesaNosotrosStage{
position:absolute;
inset:0;
z-index:10;
display:flex;
align-items:center;
background:#FFFFFF;
color:var(--color-dark);
opacity:0;
pointer-events:none;
will-change:opacity;
}
#fopesaNosotrosText{
opacity:0;
transform:translate3d(0,110px,0);
will-change:opacity,transform;
}
#fopesaHeroNosotrosTarget{
position:relative;
overflow:hidden;
background-image:none !important;
opacity:0;
}
@media (max-width:860px){
/* En móvil, el video termina integrado en formato horizontal 16:9. */
#fopesaHeroNosotrosTarget{
width:100%;
aspect-ratio:16 / 9;
}
}
#fopesa-hero-nosotros-integrado,
#fopesaNosotrosStage,
#fopesaNosotrosText{
background:#FFFFFF !important;
}
#fopesaNosotrosText,
#fopesaNosotrosText h3,
#fopesaNosotrosText h4{
color:var(--color-dark) !important;
}
#fopesaNosotrosText p{
color:rgba(20,42,92,.72) !important;
}
#fopesaHeroVideoScreen{
aspect-ratio:16 / 9;
}
#fopesaHeroVideoScreen video,
#fopesaHeroVideoScreen img{
object-fit:cover !important;
object-position:center center !important;
}
/* Evita que restos globales del archivo de referencia interfieran con esta integración */
#header-04{
height:var(--header) !important;
min-height:var(--header) !important;
padding:0 !important;
margin:0 !important;
overflow:visible !important;
background:transparent !important;
transition:opacity .35s ease, transform .35s ease;
}
#header-04 .site-header{
border-top:0 !important;
box-shadow:var(--shadow-2);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
#header-04.fopesa-header-hidden{
pointer-events:none;
}
#header-04.fopesa-header-hidden .menu-real,
#header-04.fopesa-header-hidden .site-header,
#header-04.fopesa-header-hidden .header-inner,
#header-04.fopesa-header-hidden .main-nav,
#header-04.fopesa-header-hidden .contact-btn,
#header-04.fopesa-header-hidden .logo,
#header-04.fopesa-header-hidden .menu-toggle{
pointer-events:none;
}
#fopesa-hero-nosotros-integrado{
margin-top:0 !important;
}
/* Paso 5 — Nuestros valores, encapsulado */
#fopesa-valores-carousel {
--scene-w: 1680px;
--card-w: 380px;
--card-h: 560px;
--card-gap: 40px;
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
--text-h3: 24px;
--text-card: 32px;
width: 100%;
overflow: hidden;
font-family: var(--font-secondary);
background: var(--color-light);
color: var(--color-dark);
}
#fopesa-valores-carousel,
#fopesa-valores-carousel * { box-sizing: border-box; }
#fopesa-valores-carousel .scene {
position: relative;
min-height: 100vh;
height: 100vh;
overflow: hidden;
padding: clamp(22px, 3.2vh, 40px) 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 26px;
isolation: isolate;
background: var(--color-light);
}
#fopesa-valores-carousel .blob-left,
#fopesa-valores-carousel .blob-right {
position: absolute;
z-index: -2;
pointer-events: none;
background: var(--color-key);
display: none !important;
}
#fopesa-valores-carousel .blob-left {
width: 740px;
height: 740px;
left: calc(50% - 980px);
bottom: -330px;
border-radius: 50%;
}
#fopesa-valores-carousel .blob-right {
width: 900px;
height: 330px;
right: calc(50% - 920px);
top: -150px;
border-bottom-left-radius: 180px;
border-bottom-right-radius: 120px;
transform: rotate(6deg);
}
#fopesa-valores-carousel .carousel-wrap {
position: relative;
width: var(--scene-w);
height: min(700px, calc(100vh - 210px));
min-height: 560px;
flex: 0 0 auto;
}
#fopesa-valores-carousel .track {
position: relative;
width: var(--scene-w);
height: 100%;
perspective: 1800px;
}
#fopesa-valores-carousel .card {
position: absolute;
top: 50%;
left: 50%;
width: var(--card-w);
min-height: var(--card-h);
padding: 26px;
border-radius: 28px;
background: var(--color-white);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-5);
transform-origin: center center;
transition:
transform .72s cubic-bezier(.22,.61,.36,1),
opacity .72s cubic-bezier(.22,.61,.36,1);
overflow: hidden;
will-change: transform, opacity;
cursor: pointer;
user-select: none;
opacity: 0;
pointer-events: none;
}
#fopesa-valores-carousel .card-visual {
position: relative;
height: 320px;
border-radius: 20px;
overflow: hidden;
}
#fopesa-valores-carousel .card-visual img {
display: block;
object-position: center;
}
#fopesa-valores-carousel .card-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,42,92,.04) 0%, rgba(20,42,92,.16) 52%, rgba(20,42,92,.38) 100%);
pointer-events: none;
}
#fopesa-valores-carousel .card-kicker {
position: absolute;
left: 18px;
bottom: 18px;
z-index: 2;
min-height: 30px;
align-items: center;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--color-line);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
#fopesa-valores-carousel .card-content { padding: 24px 2px 2px; }
#fopesa-valores-carousel .card-content h3 {
margin: 0;
color: var(--color-dark);
font-family: var(--font-main);
font-size: 26px;
line-height: 1.04;
letter-spacing: -.045em;
font-weight: 800;
}
#fopesa-valores-carousel .card-content p {
margin: 14px 0 0;
color: var(--color-muted);
font-size: 15px;
line-height: 1.46;
}
#fopesa-valores-carousel .card-content a {
display: inline-flex;
margin-top: 20px;
text-decoration: none;
font-size: 14px;
}
#fopesa-valores-carousel .card.pos-left-2 {
z-index: 3;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(-885px) translateY(124px) rotate(-16deg) scale(1);
}
#fopesa-valores-carousel .card.pos-left-1 {
z-index: 5;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(-440px) translateY(8px) rotate(-8deg) scale(1);
}
#fopesa-valores-carousel .card.pos-center {
z-index: 6;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(0) translateY(-24px) rotate(0deg) scale(1);
}
#fopesa-valores-carousel .card.pos-right-1 {
z-index: 5;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(440px) translateY(8px) rotate(8deg) scale(1);
}
#fopesa-valores-carousel .card.pos-right-2 {
z-index: 3;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(885px) translateY(124px) rotate(16deg) scale(1);
}
#fopesa-valores-carousel .card.hidden-left {
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) translateX(-1210px) translateY(138px) rotate(-18deg) scale(1);
}
#fopesa-valores-carousel .card.hidden-right {
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) translateX(1210px) translateY(138px) rotate(18deg) scale(1);
}
#fopesa-valores-carousel .arrow {
width: 62px;
height: 62px;
border-radius: 50%;
border: 1px solid var(--color-line);
background: var(--color-white);
color: var(--color-dark);
display: grid;
place-items: center;
cursor: pointer;
transition: .22s ease;
backdrop-filter: blur(6px);
box-shadow: none;
}
#fopesa-valores-carousel .arrow:hover,
#fopesa-valores-carousel .arrow.active {
border-color: var(--color-key);
color: var(--color-key);
background: var(--color-white);
box-shadow: none;
}
#fopesa-valores-carousel .arrow svg {
width: 22px;
height: 22px;
}
#fopesa-valores-carousel .cat-btn {
min-height: 60px;
padding: 0 32px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-white);
color: var(--color-dark);
font-family: inherit;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: .22s ease;
box-shadow: none;
}
#fopesa-valores-carousel .cat-btn:hover { filter: brightness(.98); }
#fopesa-valores-carousel .cat-btn.active {
border-color: var(--color-key);
background: var(--color-key);
color: var(--color-white);
}
#fopesa-valores-carousel .scene-v2 .carousel-wrap {
height: min(700px, calc(100vh - 92px));
}
#fopesa-valores-carousel .scene-v2 { gap: 0; }
#fopesa-valores-carousel .scene-v2 .side-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
border-color: var(--color-key) !important;
background: var(--color-key) !important;
color: var(--color-white) !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev { left: clamp(20px, 4vw, 78px); }
#fopesa-valores-carousel .scene-v2 .side-next { right: clamp(20px, 4vw, 78px); }
#fopesa-valores-carousel .scene-v2 .side-arrow:hover,
#fopesa-valores-carousel .scene-v2 .side-arrow.active {
transform: translateY(-50%) scale(1.04);
border-color: var(--color-key) !important;
background: var(--color-key) !important;
color: var(--color-white) !important;
filter: brightness(1.06);
}
#fopesa-valores-carousel .carousel-name {
align-items: center;
pointer-events: none;
}
@media (max-width: 720px){
#fopesa-valores-carousel .scene {
height: auto;
min-height: 100svh;
padding: 22px 0 28px;
gap: 18px;
}
#fopesa-valores-carousel .card.pos-left-2,
#fopesa-valores-carousel .card.pos-right-2 {
opacity: 0;
pointer-events: none;
}
#fopesa-valores-carousel .cat-btn {
min-height: 48px;
padding: 0 18px;
font-size: 14px;
}
#fopesa-valores-carousel .scene-v2 .side-arrow {
top: auto;
bottom: 24px;
transform: none;
}
#fopesa-valores-carousel .scene-v2 .side-arrow:hover,
#fopesa-valores-carousel .scene-v2 .side-arrow.active {
transform: scale(1.04);
}
#fopesa-valores-carousel .carousel-name {
top: 16px;
left: 16px;
min-height: 30px;
padding: 0 10px;
font-size: 10px;
letter-spacing: .12em;
}
}
/* Paso 7 · Responsabilidad Social · 01B integrado con 04 Nosotros invertido */
#fopesa-rs-integrado{
height:calc(100svh + var(--rs-distance, 2500px));
min-height:100svh;
position:relative;
overflow:visible;
background:#FFFFFF;
color:var(--color-dark);
z-index:2;
}
#fopesa-rs-integrado,
#fopesa-rs-integrado *{
box-sizing:border-box;
}
#fopesa-rs-integrado .fopesa-rs-stage{
position:absolute;
inset:0;
z-index:10;
display:flex;
align-items:center;
background:#FFFFFF;
opacity:0;
pointer-events:none;
will-change:opacity;
}
#fopesa-rs-integrado .layout-section{
width:100%;
}
#fopesa-rs-video-target{
position:relative;
}
#fopesa-rs-video-screen{
position:absolute;
left:0;
top:0;
width:100vw;
height:100svh;
border-radius:0;
overflow:hidden;
transform-origin:50% 50%;
will-change:transform,width,height,border-radius,box-shadow,opacity;
contain:layout paint;
backface-visibility:hidden;
}
#fopesa-rs-video-screen video,
#fopesa-rs-video-screen img{
max-width:none;
}
#fopesa-rs-video-screen::before{
content:"";
position:absolute;
inset:0;
opacity:.18;
background-size:72px 72px;
pointer-events:none;
}
#fopesa-rs-video-screen::after{
content:"VIDEO INTEGRADO";
position:absolute;
left:50%;
top:52%;
transform:translate(-50%,-50%);
width:130vw;
color:transparent;
font-weight:900;
font-size:clamp(90px, 17vw, 280px);
line-height:.75;
letter-spacing:-.11em;
text-transform:uppercase;
text-align:center;
pointer-events:none;
}
#fopesa-rs-video-target{
opacity:0 !important;
}
#fopesa-rs-video-screen{
aspect-ratio:16 / 9;
box-shadow:none !important;
background-size:cover !important;
background-position:center center !important;
}
#fopesa-rs-video-screen video,
#fopesa-rs-video-screen img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
}
#fopesa-historia-section .template-demo{background:transparent!important;border-top:0!important;}
#fopesa-historia-section .template-item{padding-top:0!important;}
#fopesa-historia-demo .section_tabs{margin-top:0!important;}
#fopesa-historia-section #fopesa-historia-timeline-item {
padding-top: 0 !important;
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
#fopesa-historia-section #fopesa-historia-demo {
margin-top: 0 !important;
}
#fopesa-historia-section #fopesa-historia-demo .section_tabs {
margin-top: 0 !important;
}
#fopesa-historia-section{
background: transparent !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#fopesa-historia-section .template-item,
#fopesa-historia-section .template-demo{
background: transparent !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: 0 !important;
}
#fopesa-historia-demo .tabs_height{
height: 1200vh !important;
}
#fopesa-historia-demo .section_tabs{
margin-bottom: 0 !important;
}
/* Paso 8 ajuste Historia: barra vertical, sin bordes, videos 16:10 y textos FOPESA */
#fopesa-historia-section,
#fopesa-historia-section .template-item,
#fopesa-historia-section .template-demo,
#fopesa-historia-demo .section_tabs,
#fopesa-historia-demo .padding-section-large{
border:0!important;
border-radius:0!important;
}
#fopesa-historia-demo .padding-section-large{
padding-top:0!important;
padding-bottom:0!important;
}
#fopesa-historia-demo .tabs_component{
grid-template-columns:.42fr 1fr!important;
align-items:center!important;
gap:0!important;
padding-left:0!important;
padding-right:0!important;
border:0!important;
border-radius:0!important;
}
#fopesa-historia-demo .tabs_left{
border:0!important;
background-color:var(--gray-700)!important;
}
#fopesa-historia-demo .tabs_right{
align-self:center!important;
border-radius:0!important;
border:0!important;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .w-background-video{
border-radius:0!important;
border:0!important;
}
#fopesa-historia-demo .w-background-video > video,
#fopesa-historia-demo .tabs_video video{
z-index:0!important;
}
@media (max-width:900px){
#fopesa-historia-demo .tabs_component{
height:auto!important;
min-height:100vh!important;
grid-template-columns:1fr!important;
}
#fopesa-historia-demo .tabs_progress{
right:.75rem!important;
}
}
/* Paso 8 ajuste solicitado: video full width, texto dark semitransparente y progreso horizontal inferior */
#fopesa-historia-section,
#fopesa-historia-section .template-item,
#fopesa-historia-section .template-demo,
#fopesa-historia-demo .section_tabs,
#fopesa-historia-demo .padding-section-large,
#fopesa-historia-demo .tabs_component,
#fopesa-historia-demo .tabs_left,
#fopesa-historia-demo .tabs_right,
#fopesa-historia-demo .tabs_video{
border:0!important;
border-radius:0!important;
}
#fopesa-historia-demo .tabs_sticky-wrapper{
top:0!important;
height:100vh!important;
display:flex!important;
align-items:center!important;
overflow:hidden!important;
background:#142A5C!important;
}
#fopesa-historia-demo .tabs_container{
width:100%!important;
max-width:none!important;
height:100vh!important;
}
#fopesa-historia-demo .tabs_component{
width:100%!important;
height:100vh!important;
display:block!important;
position:relative!important;
padding:0!important;
overflow:hidden!important;
background:#142A5C!important;
}
/* Video como fondo visual de ancho completo */
#fopesa-historia-demo .tabs_right{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
aspect-ratio:auto!important;
overflow:hidden!important;
z-index:1!important;
background:#142A5C!important;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .w-background-video{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
aspect-ratio:16/10!important;
overflow:hidden!important;
z-index:1!important;
}
#fopesa-historia-demo .w-background-video > video,
#fopesa-historia-demo .tabs_video video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
aspect-ratio:16/10!important;
position:absolute!important;
inset:0!important;
margin:0!important;
}
/* Caja de texto sobre el video */
#fopesa-historia-demo .tabs_left{
position:absolute!important;
width:min(560px, calc(100vw - 2.5rem))!important;
display:block!important;
color:#FFFFFF!important;
z-index:8!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
}
#fopesa-historia-demo .fopesa-history-year{
letter-spacing:-.04em!important;
font-weight:500!important;
}
#fopesa-historia-demo .fopesa-history-copy{
color:rgba(255,255,255,.78)!important;
}
#fopesa-historia-demo .tabs_line{
background:rgba(255,255,255,.26)!important;
}
/* Barra de progreso horizontal, pegada abajo dentro del sticky */
#fopesa-historia-demo .tabs_progress{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
width:100%!important;
z-index:30!important;
border-radius:0!important;
overflow:hidden!important;
}
#fopesa-historia-demo .tabs_progress-fill{
background:var(--green)!important;
}
@media (max-width:900px){
#fopesa-historia-demo .tabs_progress{
height:4px!important;
}
}
#fopesa-historia-demo .tabs_left{
overflow-y:auto!important;
overflow-x:hidden!important;
transition:height .35s ease, max-height .35s ease!important;
}
#fopesa-historia-demo .tabs_left-top{
transition:height .35s ease!important;
}
#fopesa-historia-demo .tabs_let-content{
top:0!important;
left:0!important;
right:0!important;
bottom:auto!important;
}
#fopesa-historia-demo .tabs_let-content:not(.is-active){
pointer-events:none!important;
}
#fopesa-historia-demo .tabs_progress-fill{
transition:transform .08s linear!important;
}
#fopesa-cta-clasico-azul,
#fopesa-cta-clasico-azul * {
box-sizing: border-box;
}
#fopesa-cta-clasico-azul a {
color: inherit;
text-decoration: none;
}
#fopesa-cta-clasico-azul .cta-real {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-dark);
}
#fopesa-cta-clasico-azul .cta-real .cta {
width: 100%;
min-height: 360px;
}
#fopesa-cta-clasico-azul .cta-real .cta h2 {
margin: 0;
font-family: var(--font-main);
font-weight: 800;
}
#fopesa-cta-clasico-azul .cta-real .cta p {
margin: 0;
}
#fopesa-cta-clasico-azul .cta-real .cta-inner {
width: min(1440px, 100%);
margin: 0 auto;
}
#fopesa-cta-clasico-azul .cta-real .cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 28px;
border: 1px solid transparent;
font-size: var(--text-small);
font-weight: 900;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
#fopesa-cta-clasico-azul .cta-real .cta-btn:hover {
transform: translateY(-2px);
}
#fopesa-cta-clasico-azul .cta-real .cta-btn-light {
background: var(--color-white);
color: var(--color-dark);
}
#fopesa-cta-clasico-azul .cta-real .cta-btn-light:hover {
background: var(--color-dark);
color: var(--color-white);
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic {
padding: 96px 42px;
background: var(--color-key);
color: var(--color-white);
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 42px;
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 h2 {
max-width: 820px;
color: var(--color-white);
font-size: clamp(40px, 6vw, 72px);
line-height: .98;
letter-spacing: -.065em;
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 p {
margin-top: 18px;
max-width: 620px;
font-size: 18px;
line-height: 1.7;
}
@media (max-width: 900px){
#fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic {
padding: 72px 28px;
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
@media (max-width: 720px){
#fopesa-cta-clasico-azul .cta-real .cta-btn {
width: 100%;
}
#fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic {
padding: 64px 18px;
}
}
:root{
/* Selección actual */
--scale-selected:1.250;
--shape-selected:base;
/* Colores */
/* Tipografía modular */
/* Espacio y curvas */
/* Pesos */
}
/*
No definir anchos globales.
No aplicar max-width, width, min-width, containers, wrappers, grids, columnas ni breakpoints nuevos.
Usar siempre los anchos existentes de la plantilla original.
*/
body{
margin:0;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
h1,h2,h3,h4,h5,h6,p{margin:0;}
h1,
h2,
h3,
h4,
h5,
h6{font-family:var(--font-primary);}
.card{
padding:var(--space-content);
border:1px solid var(--color-line);
}
.button,
button[data-ui="button"]{
cursor:pointer;
transition:transform .24s ease,box-shadow .24s ease,background .24s ease,color .24s ease,border-color .24s ease;
}
input,
select,
textarea{
border:1px solid var(--color-line);
border-radius:var(--radius-button);
background:var(--color-white);
color:var(--color-dark);
font-family:var(--font-main);
font-size:var(--type-small);
outline:none;
}
input:focus,
select:focus,
textarea:focus{
border-color:var(--color-key);
}
.about-square-label,
.about-contained-label,
.fopesa-equipo-label,
.fopesa-procesos-label{
color:var(--color-key) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.about-contained-copy h3,
.fopesa-equipo-copy h2,
#fopesa-procesos-horizontal h2{
color:var(--color-dark) !important;
}
#fopesaNosotrosText h1{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h1) !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.06em !important;
}
#fopesaHeroVideoScreen video,
#fopesa-rs-video-screen iframe{
width:100% !important;
height:100% !important;
display:block !important;
border:0 !important;
}
#fopesaHeroVideoScreen video{
object-fit:cover !important;
object-position:center center !important;
}
#fopesaHeroVideoScreen::before,
#fopesaHeroVideoScreen::after,
#fopesa-rs-video-screen::before,
#fopesa-rs-video-screen::after{
content:none !important;
display:none !important;
background:none !important;
}
#fopesa-rs-video-screen iframe{
width:100% !important;
height:100% !important;
border:0 !important;
display:block !important;
}
#fopesa-equipo-scroll .fopesa-equipo-photo,
#fopesa-equipo-scroll .fopesa-equipo-photo.is-wide{
aspect-ratio:16 / 10 !important;
}
#fopesa-equipo-scroll .fopesa-equipo-photo::before{
background:
linear-gradient(180deg, rgba(20,42,92,0) 54%, rgba(20,42,92,.46) 100%),
var(--equipo-img) !important;
background-size:cover !important;
background-position:center center !important;
}
:root{
--color-dark:#204393 !important;
--color-key:#EF7701 !important;
--color-support:#63B246 !important;
--color-light:#FDEFE1 !important;
--color-white:#FFFFFF !important;
--color-muted:#6C83B8 !important;
--color-line:#E0E5F0 !important;
--space-content:20px !important;
--radius-card:20px !important;
--radius-button:20px !important;
--radius-label:5px !important;
--weight-medium:500 !important;
}
body{
background:var(--color-light) !important;
color:var(--color-dark) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-body) !important;
line-height:1.6 !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
[class*="title"],
[class*="heading"]{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
}
h1{line-height:.96 !important;letter-spacing:-.06em !important;}
h2{line-height:1 !important;letter-spacing:-.055em !important;}
h3{line-height:1.04 !important;letter-spacing:-.05em !important;}
h4{line-height:1.08 !important;letter-spacing:-.04em !important;}
h5{line-height:1.12 !important;letter-spacing:-.035em !important;}
h6{line-height:1.16 !important;letter-spacing:-.03em !important;}
body,p,span,a,li,label,input,select,textarea,button,.card{
font-family:var(--font-secondary) !important;
}
p{
line-height:1.7 !important;
color:var(--color-muted) !important;
}
[class*="label"],
[class*="eyebrow"],
[class*="kicker"],
[class*="tag"],
[class*="badge"]{
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
}
.button,
button[data-ui="button"]{
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-key) !important;
border-radius:var(--radius-button) !important;
background:var(--color-key) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
}
.button:hover,
button[data-ui="button"]:hover{
transform:translateY(-3px) !important;
background:var(--color-dark) !important;
color:var(--color-white) !important;
border-color:var(--color-dark) !important;
}
input,select,textarea{
border:1px solid var(--color-line) !important;
border-radius:var(--radius-button) !important;
background:var(--color-white) !important;
color:var(--color-dark) !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
}
.card{
border-color:var(--color-line) !important;
border-radius:var(--radius-card) !important;
background:var(--color-white) !important;
color:var(--color-dark) !important;
}
/* Variables locales de secciones que venían de la demo azul original. */
#fopesa-valores-carousel{
--color-dark:#204393 !important;
--color-key:#EF7701 !important;
--color-support:#63B246 !important;
--color-light:#FDEFE1 !important;
--color-white:#FFFFFF !important;
--color-muted:#6C83B8 !important;
--color-line:#E0E5F0 !important;
--font-main:var(--font-secondary) !important;
--font-secondary:var(--font-secondary) !important;
}
#fopesa-equipo-scroll{
--equipo-dark:#204393 !important;
--equipo-light:#FDEFE1 !important;
--equipo-white:#FFFFFF !important;
--equipo-muted:#6C83B8 !important;
--equipo-line:#E0E5F0 !important;
--equipo-accent:#EF7701 !important;
}
#fopesa-equipo-scroll .fopesa-equipo-label{
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-micro) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
#fopesa-equipo-scroll .fopesa-equipo-copy h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
#fopesa-equipo-scroll .fopesa-equipo-copy p{
color:var(--color-muted) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-body) !important;
line-height:1.7 !important;
font-weight:var(--weight-regular) !important;
}
#fopesa-valores-carousel .carousel-name{
position:absolute !important;
top:42px !important;
left:42px !important;
z-index:50 !important;
margin:0 !important;
padding:0 !important;
min-height:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
text-transform:none !important;
backdrop-filter:none !important;
}
#fopesa-valores-carousel .card,
#fopesa-valores-carousel [class*="card"]{
border-radius:var(--radius-card) !important;
}
#stats-counters-secciones .tray-counter,
#stats-counters-secciones strong{
font-family:var(--font-primary) !important;
font-size:var(--type-stats) !important;
color:var(--color-white) !important;
}
#fopesa-rs-video-screen video{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:center center !important;
border:0 !important;
}
#fopesa-rs-video-screen,
#fopesa-rs-video-target{
background:transparent !important;
box-shadow:none !important;
}
#fopesa-rs-video-screen{
background-image:none !important;
background-color:transparent !important;
}
#fopesa-rs-video-screen video{
background:transparent !important;
}
#fopesaHeroVideoScreen{background:transparent !important; box-shadow:none !important;}
#fopesaHeroNosotrosTarget{background:transparent !important; box-shadow:none !important;}
#fopesa-rs-video-target{background:transparent !important; box-shadow:none !important;}
#fopesaHeroVideoScreen::before,
#fopesaHeroVideoScreen::after{content:none !important; display:none !important;}
#fopesaNosotrosText h1{line-height:1.08 !important;}
#stats-counters-secciones .tray-section{background:var(--color-dark) !important;}
#stats-counters-secciones .tray-grid article,
#stats-counters-secciones .tray-counter,
#stats-counters-secciones .tray-grid span,
#stats-counters-secciones .tray-grid p{color:#FFFFFF !important;}
#stats-counters-secciones .tray-grid span{display:none !important;}
#fopesa-valores-carousel .card-kicker{background:var(--color-key) !important; border-color:var(--color-key) !important; color:#FFFFFF !important;}
#fopesa-valores-carousel .card-visual{display:flex; align-items:center; justify-content:center;}
#fopesa-valores-carousel .card-visual::after{display:none !important;}
#fopesa-valores-carousel .card-visual img{width:68%; height:68%; object-fit:contain !important;}
#fopesa-valores-carousel .card-content a{color:var(--color-key) !important; font-weight:700 !important;}
#fopesa-valores-carousel .card-content p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.fopesa-valores-modal{position:fixed; inset:0; z-index:9999; display:none;}
.fopesa-valores-modal[aria-hidden="false"]{display:block;}
.fopesa-valores-modal-backdrop{position:absolute; inset:0; background:rgba(20,42,92,.58);}
.fopesa-valores-modal-dialog{position:relative; width:min(92vw, 680px); margin:10vh auto 0; background:var(--color-dark); color:#FFFFFF; border-radius:20px; padding:36px 34px 30px; box-shadow:var(--shadow-5);}
.fopesa-valores-modal-close{position:absolute; top:12px; right:14px; border:0; background:transparent; color:#FFFFFF; font-size:32px; line-height:1; cursor:pointer;}
.fopesa-valores-modal-logo-wrap{width:320px; height:320px; display:flex; align-items:center; justify-content:center; background:var(--color-dark); border-radius:24px; margin-bottom:18px; overflow:hidden; max-width:100%;}
.fopesa-valores-modal-logo-wrap img{width:84%; height:84%; display:block; object-fit:contain; object-position:center; filter:none;}
#fopesaValoresModalTitle{color:#FFFFFF !important; margin-bottom:14px !important;}
#fopesaValoresModalText{color:rgba(255,255,255,.86) !important;}
body.fopesa-modal-open{overflow:hidden;}
#fopesa-valores-carousel .carousel-name{
display:block !important;
width:100% !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
justify-self:center !important;
align-self:center !important;
}
#fopesa-valores-carousel .card-visual img{
position:relative !important;
z-index:2 !important;
}
/* Etiquetas estandarizadas en todo el documento */
.about-square-label,
.about-contained-label,
.fopesa-equipo-label,
.fopesa-procesos-eyebrow,
.fopesa-procesos-label > div:first-child{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-height:24px !important;
margin:0 0 18px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-micro) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
/* Nuestros Valores: sin numeración y con fondo azul en visual */
#fopesa-valores-carousel .card-kicker{
display:none !important;
}
#fopesa-valores-carousel .card-visual{
background:var(--color-dark) !important;
}
/* Sección Nuestra política en dark */
#fopesa-cta-clasico-azul .cta-classic{
background:var(--color-dark) !important;
color:var(--color-white) !important;
}
#fopesa-cta-clasico-azul h2,
#fopesa-cta-clasico-azul h3{
color:var(--color-white) !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px;
}
#fopesa-cta-clasico-azul .cta-btn{
background:var(--color-key) !important;
border-color:var(--color-key) !important;
color:var(--color-white) !important;
}
#fopesa-cta-clasico-azul .cta-btn:hover{
background:var(--color-white) !important;
border-color:var(--color-white) !important;
color:var(--color-dark) !important;
}
@media (max-width: 760px){
#fopesa-cta-clasico-azul .fopesa-politica-actions{
grid-template-columns:1fr;
}
}
#fopesa-cta-clasico-azul .cta-inner{
display:grid !important;
align-items:start !important;
gap:0 !important;
}
#fopesa-cta-clasico-azul .cta-copy{
grid-column:1 !important;
padding-right:32px !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions{
display:contents !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
gap:18px !important;
padding-left:24px !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1){
grid-column:2 !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
grid-column:3 !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions .cta-btn{
width:max-content !important;
}
@media (max-width: 900px){
#fopesa-cta-clasico-azul .cta-inner{
gap:28px !important;
}
#fopesa-cta-clasico-azul .cta-copy,
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
grid-column:1 !important;
padding-left:0 !important;
padding-right:0 !important;
}
}
/* Botones redondeados según UI Kit */
.button,
.contact-btn,
.cta-btn,
.about-contained-actions a,
button[data-ui="button"],
#fopesa-valores-carousel .card-content a{
border-radius:var(--radius-button) !important;
}
/* Retirar títulos/labels visibles sobre las fotos de Familia FOPESA */
#fopesa-equipo-scroll .fopesa-equipo-photo::after,
#fopesa-equipo-scroll .fopesa-equipo-photo [class*="title"],
#fopesa-equipo-scroll .fopesa-equipo-photo [class*="label"]{
content:none !important;
display:none !important;
}
/* Política: bloques con estilo card manteniendo 60/20/20 */
#fopesa-cta-clasico-azul .fopesa-politica-actions article h3{
font-size:var(--type-h5) !important;
line-height:1.12 !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions .cta-btn{
border-radius:var(--radius-button) !important;
}
/* Historia: todos los años en blanco */
#fopesa-historia-demo .fopesa-history-year,
#fopesa-historia-demo .tabs_left h2,
#fopesa-historia-demo .tabs_let-content h2{
color:var(--color-white) !important;
}
/* Procesos: fondo dark y textos blancos */
#fopesa-procesos-horizontal{
background:var(--color-dark) !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-sticky{
background:var(--color-dark) !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-label,
#fopesa-procesos-horizontal .fopesa-procesos-label h2,
#fopesa-procesos-horizontal .fopesa-procesos-label p{
color:var(--color-white) !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-eyebrow{
color:var(--color-key) !important;
}
/* Cards de Obras civiles / operaciones: texto blanco en rollover */
#icon-cards-02 .icon-card:hover h3,
#icon-cards-02 .icon-card:hover p,
#icon-cards-02 .icon-card:hover .icon-card-icon{
color:var(--color-white) !important;
}
/* Trabaja con Nosotros */
#seccion-nosotros-gallery-01 .about-contained-copy h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
#seccion-nosotros-gallery-01 .about-contained-copy p{
margin-top:18px !important;
color:var(--color-muted) !important;
}
#seccion-nosotros-gallery-01 .about-contained-actions{
margin-top:26px !important;
}
#seccion-nosotros-gallery-01 .fopesa-computrabajo-btn{
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-support) !important;
border-radius:var(--radius-button) !important;
background:var(--color-support) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
}
#seccion-nosotros-gallery-01 .fopesa-computrabajo-btn:hover{
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
/* Nuestros Procesos: fondo dark plano, sin efectos ni degradados */
#fopesa-procesos-horizontal,
#fopesa-procesos-horizontal .fopesa-procesos-sticky,
#fopesa-procesos-horizontal .fopesa-procesos-label,
#fopesa-procesos-horizontal .fopesa-procesos-track,
#fopesa-procesos-horizontal .fopesa-procesos-panel{
background:var(--color-dark) !important;
background-image:none !important;
box-shadow:none !important;
}
#fopesa-procesos-horizontal::before,
#fopesa-procesos-horizontal::after,
#fopesa-procesos-horizontal .fopesa-procesos-sticky::before,
#fopesa-procesos-horizontal .fopesa-procesos-sticky::after,
#fopesa-procesos-horizontal .fopesa-procesos-label::before,
#fopesa-procesos-horizontal .fopesa-procesos-label::after,
#fopesa-procesos-horizontal .fopesa-procesos-track::before,
#fopesa-procesos-horizontal .fopesa-procesos-track::after,
#fopesa-procesos-horizontal .fopesa-procesos-panel::before,
#fopesa-procesos-horizontal .fopesa-procesos-panel::after{
content:none !important;
display:none !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-label h2,
#fopesa-procesos-horizontal .fopesa-procesos-label p{
color:var(--color-white) !important;
}
/* Nuestros Procesos: texto a lo ancho de la sección */
#fopesa-procesos-horizontal .fopesa-procesos-label{
width:min(1440px, 100%) !important;
max-width:none !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-label p{
max-width:100% !important;
width:100% !important;
}
/* Nuestra política: separación y estados de cards/botones */
#fopesa-cta-clasico-azul .cta-inner{
grid-template-columns:56% 21% 21% !important;
column-gap:1% !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article{
padding:24px !important;
border:1px solid var(--color-line) !important;
border-radius:var(--radius-card) !important;
background:var(--color-white) !important;
color:var(--color-dark) !important;
transition:background .24s ease, border-color .24s ease, color .24s ease, transform .24s ease !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article h3{
color:var(--color-dark) !important;
transition:color .24s ease !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:hover{
background:var(--color-key) !important;
border-color:var(--color-key) !important;
color:var(--color-white) !important;
transform:translateY(-3px) !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:hover h3{
color:var(--color-white) !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article .cta-btn{
width:max-content !important;
background:var(--color-support) !important;
border-color:var(--color-support) !important;
color:var(--color-white) !important;
border-radius:var(--radius-button) !important;
transition:background .24s ease, border-color .24s ease, color .24s ease, transform .24s ease !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article .cta-btn:hover{
background:var(--color-white) !important;
border-color:var(--color-white) !important;
color:var(--color-dark) !important;
transform:translateY(-2px) !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:hover .cta-btn{
background:var(--color-support) !important;
border-color:var(--color-support) !important;
color:var(--color-white) !important;
}
#fopesa-cta-clasico-azul .fopesa-politica-actions article:hover .cta-btn:hover{
background:var(--color-white) !important;
border-color:var(--color-white) !important;
color:var(--color-dark) !important;
}
@media (max-width: 900px){
#fopesa-cta-clasico-azul .cta-inner{
grid-template-columns:1fr !important;
row-gap:24px !important;
}
}
/* Nuestro equipo / Familia FOPESA: redondeado suave en fotos */
#fopesa-equipo-scroll .fopesa-equipo-photo{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
#fopesa-equipo-scroll .fopesa-equipo-photo::before,
#fopesa-equipo-scroll .fopesa-equipo-photo::after{
border-radius:inherit !important;
}
/* Timeline: redondeado visible en el recuadro oscuro general */
#fopesa-historia-demo .tabs_left{
border-radius:var(--radius-card) !important;
background-clip:padding-box !important;
}
#fopesa-historia-demo .tabs_left::before,
#fopesa-historia-demo .tabs_left::after{
border-radius:inherit !important;
}
#fopesa-historia-demo .tabs_left-top{
border-radius:inherit !important;
}
/* Cards ISO 9001: bordes redondeados, íconos y estados */
#icon-cards-02 .icon-card{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
#icon-cards-02 .icon-card-icon{
width:72px !important;
height:72px !important;
border-radius:var(--radius-card) !important;
background:var(--color-dark) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--color-white) !important;
overflow:hidden !important;
transition:background .24s ease, color .24s ease, transform .24s ease !important;
}
#icon-cards-02 .icon-card:hover .icon-card-icon{
background:var(--color-white) !important;
color:var(--color-dark) !important;
}
#icon-cards-02 .icon-card-img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
display:block !important;
}
#icon-cards-02 .icon-card-img-active{
display:none !important;
}
#icon-cards-02 .icon-card:hover .icon-card-img-inactive{
display:none !important;
}
#icon-cards-02 .icon-card:hover .icon-card-img-active{
display:block !important;
}
#icon-cards-02 .icon-card p + p{
margin-top:12px !important;
}
#icon-cards-02 .icon-card:hover h3,
#icon-cards-02 .icon-card:hover p{
color:var(--color-white) !important;
}
/* Trabaja con Nosotros: misma imagen en los 3 recuadros, adaptada al tamaño del recuadro */
#seccion-nosotros-gallery-01 .about-gallery-img{
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-equipo.webp") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
/* Header FOPESA */
.site-header .fopesa-main-logo{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
}
.site-header .fopesa-main-logo img{
display:block !important;
height:42px !important;
width:auto !important;
object-fit:contain !important;
}
.site-header .zone-right{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:12px !important;
}
.site-header .contact-btn{
border-radius:var(--radius-button) !important;
min-height:44px !important;
padding:0 20px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
font-weight:var(--weight-medium) !important;
line-height:1 !important;
text-decoration:none !important;
}
.site-header .fopesa-header-cta-key{
background:var(--color-key) !important;
border-color:var(--color-key) !important;
color:var(--color-white) !important;
}
.site-header .fopesa-header-cta-support{
background:var(--color-support) !important;
border-color:var(--color-support) !important;
color:var(--color-white) !important;
}
.site-header .fopesa-header-cta-key:hover,
.site-header .fopesa-header-cta-support:hover{
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
/* Header inicial: blanco sólido, sin efecto glass */
#header-04,
#header-04 .menu-real,
#header-04 .site-header,
#header-04 .header-inner{
background:var(--color-white) !important;
background-color:var(--color-white) !important;
background-image:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:none !important;
}
#header-04 .site-header{
border-bottom:1px solid var(--color-line) !important;
}
#header-04 .main-nav a{
color:var(--color-dark) !important;
}
/* Logo al 80% de la altura del menú */
#header-04 .fopesa-main-logo img{
height:calc(var(--header) * .8) !important;
max-height:68px !important;
width:auto !important;
object-fit:contain !important;
}
/* Menú principal sin negrita */
#header-04 .main-nav a{
font-weight:var(--weight-regular) !important;
}
/* Contamos con la
Trinomia ISO: 4 columnas, sin marcos, fondo blanco */
#fopesa-certificaciones{
background:var(--color-white) !important;
color:var(--color-dark) !important;
padding:96px 42px !important;
}
#fopesa-certificaciones .fopesa-certificaciones-inner{
margin:0 auto !important;
}
#fopesa-certificaciones .fopesa-certificaciones-grid{
display:grid !important;
}
#fopesa-certificaciones .fopesa-certificacion-item{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
#fopesa-certificaciones .fopesa-certificacion-item img{
object-position:center !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
@media (max-width: 760px){
#fopesa-certificaciones{
padding:72px 24px !important;
}
}
/* Contamos con la
Trinomia ISO: contenedor 960px */
/* Contamos con la
Trinomia ISO: alto mínimo */
/* Contamos con la
Trinomia ISO: imágenes a tamaño real y sección con alto mínimo */
#fopesa-certificaciones{
padding-top:16px !important;
padding-bottom:16px !important;
}
#fopesa-certificaciones .fopesa-certificacion-item{
min-height:0 !important;
height:auto !important;
padding:0 !important;
line-height:0 !important;
}
#fopesa-certificaciones .fopesa-certificacion-item img{
width:auto !important;
height:auto !important;
max-width:100% !important;
max-height:none !important;
object-fit:contain !important;
display:block !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title h2{
margin:0 !important;
}
/* Nuestros Procesos: redondeado suave en imágenes */
#fopesa-procesos-horizontal .fopesa-procesos-panel,
#fopesa-procesos-horizontal .fopesa-procesos-panel img{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
/* Footer FOPESA */
#footer-01,
#footer-01 .footer-real,
#footer-01 .site-footer{
background:var(--color-dark) !important;
color:var(--color-white) !important;
}
#footer-01 .fopesa-footer{
padding:72px 42px 40px !important;
}
#footer-01 .fopesa-footer-grid{
margin:0 auto !important;
display:grid !important;
grid-template-columns:1.35fr .85fr .95fr .9fr 1.15fr !important;
gap:36px !important;
align-items:start !important;
}
#footer-01 .fopesa-footer-logo{
display:inline-flex !important;
align-items:center !important;
margin-bottom:22px !important;
}
#footer-01 .fopesa-footer-logo img{
display:block !important;
width:180px !important;
height:auto !important;
object-fit:contain !important;
}
#footer-01 .footer-title{
margin:0 0 18px !important;
color:var(--color-white) !important;
font-family:var(--font-primary) !important;
text-transform:none !important;
}
#footer-01 .footer-copy{
margin:0 0 18px !important;
color:rgba(255,255,255,.72) !important;
font-size:var(--type-body) !important;
line-height:1.7 !important;
}
#footer-01 .fopesa-footer-small{
margin:22px 0 8px !important;
color:rgba(255,255,255,.64) !important;
font-size:var(--type-small) !important;
line-height:1.45 !important;
}
#footer-01 .fopesa-footer-micro{
margin:0 !important;
color:rgba(255,255,255,.48) !important;
font-size:var(--type-micro) !important;
line-height:1.4 !important;
letter-spacing:.04em !important;
}
#footer-01 .footer-nav{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
#footer-01 .footer-nav a{
color:rgba(255,255,255,.72) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-small) !important;
line-height:1.35 !important;
font-weight:var(--weight-regular) !important;
text-decoration:none !important;
transition:color .22s ease !important;
}
#footer-01 .footer-nav a:hover{
color:var(--color-key) !important;
}
#footer-01 .fopesa-footer-contact-list a{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:10px !important;
}
#footer-01 .fopesa-contact-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
background:var(--color-key) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:14px !important;
line-height:1 !important;
}
#footer-01 .fopesa-footer-label{
margin:24px 0 10px !important;
color:var(--color-white) !important;
font-size:var(--type-small) !important;
line-height:1.35 !important;
font-weight:var(--weight-medium) !important;
}
#footer-01 .fopesa-footer-info{
margin:0 !important;
color:rgba(255,255,255,.72) !important;
font-size:var(--type-small) !important;
line-height:1.55 !important;
}
#footer-01 .fopesa-social-links{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
#footer-01 .fopesa-social-links a{
width:34px !important;
height:34px !important;
border-radius:50% !important;
background:rgba(255,255,255,.10) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:15px !important;
line-height:1 !important;
font-weight:var(--weight-bold) !important;
text-decoration:none !important;
transition:background .22s ease, color .22s ease, transform .22s ease !important;
}
#footer-01 .fopesa-social-links a:hover{
background:var(--color-key) !important;
color:var(--color-white) !important;
transform:translateY(-2px) !important;
}
@media (max-width: 1180px){
#footer-01 .fopesa-footer-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px){
#footer-01 .fopesa-footer{
padding:56px 24px 34px !important;
}
#footer-01 .fopesa-footer-grid{
grid-template-columns:1fr !important;
gap:30px !important;
}
}
/* Footer: contenedor interno a 1440px reales */
#footer-01 .fopesa-footer{
padding-left:0 !important;
padding-right:0 !important;
}
#footer-01 .fopesa-footer-grid{
width:min(1440px, 100%) !important;
max-width:1440px !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media (max-width: 1488px){
#footer-01 .fopesa-footer-grid{
width:calc(100% - 48px) !important;
max-width:1440px !important;
}
}
/* Footer: columna logo queda más arriba; columnas siguientes bajan 50px */
#footer-01 .fopesa-footer-grid > div:not(:first-child){
margin-top:50px !important;
}
@media (max-width: 760px){
#footer-01 .fopesa-footer-grid > div:not(:first-child){
margin-top:0 !important;
}
}
/* Trabaja con Nosotros: fotos finales en los 3 recuadros */
#seccion-nosotros-gallery-01 .about-gallery-img.vertical{
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-03.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(2){
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-01.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(3){
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-02.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img::before,
#seccion-nosotros-gallery-01 .about-gallery-img::after{
background-image:none !important;
}
/* Trabaja con Nosotros: bordes redondeados en los 3 recuadros de fotos */
#seccion-nosotros-gallery-01 .about-gallery-img{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
background-clip:padding-box !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img::before,
#seccion-nosotros-gallery-01 .about-gallery-img::after{
border-radius:inherit !important;
overflow:hidden !important;
}
/* Timeline: mover la caja de año + descripción al lado derecho, sin mover el video */
#fopesa-historia-demo .tabs_left{
left:auto !important;
right:clamp(1.25rem, 5vw, 6rem) !important;
top:50% !important;
transform:translateY(-50%) !important;
}
#fopesa-historia-demo .tabs_let-content .fopesa-history-year,
#fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
text-align:right !important;
margin-left:auto !important;
}
#fopesa-historia-demo .tabs_let-content .tabs_line{
margin-left:auto !important;
}
@media (max-width:900px){
#fopesa-historia-demo .tabs_let-content,
#fopesa-historia-demo .tabs_let-content .fopesa-history-year,
#fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
text-align:left !important;
align-items:flex-start !important;
margin-left:0 !important;
}
#fopesa-historia-demo .tabs_let-content .tabs_line{
margin-left:0 !important;
}
}
/* Trinomia ISO: un poco más ancho y título en 2 líneas */
/* Trinomia ISO: más ancho visible y columna de título más amplia */
#fopesa-certificaciones .fopesa-certificaciones-inner{
width:min(1280px, 100%) !important;
max-width:1280px !important;
margin-left:auto !important;
margin-right:auto !important;
}
#fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:1fr 1fr 1fr 2fr !important;
gap:36px !important;
align-items:center !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title{
min-width:380px !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title h2{
max-width:460px !important;
width:460px !important;
white-space:normal !important;
line-height:.95 !important;
}
@media (max-width: 1180px){
#fopesa-certificaciones .fopesa-certificaciones-title{
min-width:0 !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title h2{
width:auto !important;
max-width:460px !important;
}
}
@media (max-width: 1024px){
#fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px){
#fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:1fr !important;
}
}
/* Familia FOPESA: duración original restaurada */
#fopesa-equipo-scroll{
min-height:230svh !important;
}
/* Videos integrados: esquinas rectas en fullscreen y redondeo suave al llegar a posición final */
#fopesaHeroVideoScreen,
#fopesa-rs-video-screen{
overflow:hidden !important;
}
#fopesaHeroVideoScreen video,
#fopesaHeroVideoScreen img,
#fopesa-rs-video-screen video,
#fopesa-rs-video-screen img,
#fopesa-rs-video-screen iframe{
border-radius:inherit !important;
}
/* 01B · Video integrado — Versión 2, incorporado desde - Scroll.html */
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
--fopesa-v2-distance: 320vh;
position:relative;
height:calc(100svh + var(--fopesa-v2-distance));
min-height:100svh;
overflow:visible;
background:#FFFFFF;
color:#142A5C;
isolation:isolate;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-sticky{
position:sticky;
top:0;
width:100%;
height:100svh;
min-height:620px;
overflow:hidden;
background:#FFFFFF;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-wrap{
position:absolute;
inset:0;
z-index:6;
overflow:hidden;
pointer-events:none;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen{
position:absolute;
inset:0;
width:100vw;
height:100svh;
overflow:hidden;
border-radius:0;
transform-origin:center center;
will-change:transform,border-radius,box-shadow;
background:#142A5C;
box-shadow:none;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen video{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg,rgba(20,42,92,.08),rgba(20,42,92,.05) 48%,rgba(20,42,92,.42));
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
position:absolute;
z-index:20;
left:7vw;
top:50%;
bottom:auto;
width:min(54vw,840px);
max-width:none;
opacity:0;
transform:translateY(calc(-50% + 22px));
pointer-events:auto;
will-change:opacity,transform;
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-eyebrow{
margin-bottom:10px;
font-size:11px;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy h1{
margin:0;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h1) !important;
line-height:.96 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.06em !important;
text-transform:none;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy p{
max-width:800px;
margin:12px 0 0;
color:rgba(20,42,92,.72);
font-size:clamp(13px,.95vw,16px);
line-height:1.42;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-details{
margin-top:clamp(18px,2.4vh,28px);
border-top:1px solid rgba(32,67,147,.22);
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row{
display:grid;
grid-template-columns:minmax(145px,180px) minmax(0,1fr);
gap:clamp(18px,2.2vw,32px);
align-items:start;
padding:clamp(12px,1.7vh,18px) 0;
border-bottom:1px solid rgba(32,67,147,.22);
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row h2{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-card, 20px) !important;
line-height:1.2 !important;
font-weight:var(--weight-bold) !important;
letter-spacing:-.02em !important;
text-transform:none !important;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row p{
max-width:none;
margin:0;
color:rgba(20,42,92,.72);
font-size:clamp(12px,.78vw,14px);
line-height:1.45;
}
@media (max-width:860px){
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
--fopesa-v2-distance:280vh;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-sticky{
min-height:560px;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
left:7vw;
right:7vw;
top:auto;
bottom:7vh;
width:auto;
max-width:86vw;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy h1{
font-size:var(--type-h1) !important;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
max-height:calc(100svh - 92px);
overflow-y:auto;
padding-right:5px;
scrollbar-width:thin;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-details{
margin-top:16px;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row{
grid-template-columns:1fr;
gap:5px;
padding:10px 0;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row h2{
font-size:var(--type-card, 20px) !important;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row p{
font-size:12px;
line-height:1.38;
}
}
@media (prefers-reduced-motion:reduce){
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
height:100svh;
}
:is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen{
transform:none !important;
border-radius:0 !important;
box-shadow:none !important;
}
}
/* Sección independiente: Nuestra Visión / Nuestra Misión */
#fopesa-vision-mision-columns{
position:relative;
background:#FFFFFF;
color:#142A5C;
padding:clamp(54px,7vw,108px) 0;
}
#fopesa-vision-mision-columns .fopesa-vision-mission-column h2{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-card,20px) !important;
line-height:1.2 !important;
font-weight:var(--weight-bold) !important;
letter-spacing:-.02em !important;
text-transform:none !important;
}
#fopesa-vision-mision-columns .fopesa-vision-mission-column p{
max-width:none;
margin:12px 0 0;
color:rgba(20,42,92,.72);
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(13px,.95vw,16px);
line-height:1.5;
}
@media (max-width:860px){
#fopesa-vision-mision-columns{
padding:48px 0 58px;
}
#fopesa-vision-mision-columns .fopesa-vision-mission-column + .fopesa-vision-mission-column{
padding-top:28px;
border-top:1px solid rgba(32,67,147,.22);
}
#fopesa-vision-mision-columns .fopesa-vision-mission-column h2{
font-size:var(--type-card,20px) !important;
}
#fopesa-vision-mision-columns .fopesa-vision-mission-column p{
font-size:14px;
line-height:1.48;
}
}
@media (min-width:861px){
#fopesa-vision-mision-columns{
--fopesa-vision-overlap:0px;
--fopesa-video-notch-left:100vw;
--fopesa-video-clearance:0px;
padding-top:20px;
z-index:24;
isolation:isolate;
}
#fopesa-vision-mision-columns::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
}
}
/* Interlineado más compacto para todos los párrafos solo en responsive. */
@media (max-width: 900px){
body p{
line-height:1.4 !important;
}
}
/* Barra del menú fija y visible en escritorio, tablet y móvil */
#header-04{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:99999 !important;
opacity:1 !important;
transform:translate3d(0,0,0) !important;
visibility:visible !important;
pointer-events:none !important;
}
#header-04.fopesa-header-hidden{
opacity:1 !important;
transform:translate3d(0,0,0) !important;
visibility:visible !important;
}
#header-04 .menu-real,
#header-04 .site-header,
#header-04 .header-inner,
#header-04 .main-nav,
#header-04 .contact-btn,
#header-04 .logo,
#header-04 .menu-toggle{
pointer-events:auto !important;
}
/* Estadísticas: conservar los cuatro indicadores en una sola fila en responsive. */
@media (max-width: 900px){
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-grid{
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:1px !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
min-width:0 !important;
text-align:center !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-counter{
display:block !important;
font-size:clamp(24px, 7vw, 40px) !important;
line-height:1 !important;
white-space:nowrap !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
font-size:clamp(10px, 2.8vw, 13px) !important;
line-height:1.15 !important;
overflow-wrap:anywhere !important;
}
}
@media (max-width: 420px){
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding-left:2px !important;
padding-right:2px !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-counter{
font-size:clamp(22px, 7vw, 30px) !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
font-size:10px !important;
}
}
/* Estadísticas: reducir únicamente el alto del bloque en responsive. */
@media (max-width: 900px){
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section{
padding:16px 10px !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding:15px 3px !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
margin-top:4px !important;
}
}
@media (max-width: 420px){
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section{
padding-top:12px !important;
padding-bottom:12px !important;
}
#stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding-top:12px !important;
padding-bottom:12px !important;
}
}
@media (max-width: 900px){
#fopesa-valores-carousel .card-visual{
border-radius: 16px !important;
}
#fopesa-valores-carousel .card-content{
padding: 16px 0 0 !important;
}
#fopesa-valores-carousel .card-content h3{
font-size: 22px !important;
line-height: 1.06 !important;
}
#fopesa-valores-carousel .card-content p{
margin-top: 10px !important;
font-size: 13px !important;
line-height: 1.38 !important;
}
#fopesa-valores-carousel .card-content a{
margin-top: 14px !important;
font-size: 13px !important;
}
}
@media (max-width: 720px){
#fopesa-valores-carousel .card.pos-left-1{
transform: translate(-50%, -50%) translateX(-292px) translateY(18px) rotate(-8deg) scale(1) !important;
}
#fopesa-valores-carousel .card.pos-center{
transform: translate(-50%, -50%) translateX(0) translateY(-4px) rotate(0deg) scale(1) !important;
}
#fopesa-valores-carousel .card.pos-right-1{
transform: translate(-50%, -50%) translateX(292px) translateY(18px) rotate(8deg) scale(1) !important;
}
#fopesa-valores-carousel .arrow{
width: 48px !important;
height: 48px !important;
}
}
/* Nuestros Valores: flechas colocadas a ambos lados del card central solo en responsive. */
@media (max-width: 900px){
#fopesa-valores-carousel .scene-v2 .side-arrow{
top: 50% !important;
bottom: auto !important;
z-index: 60 !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev{
right: auto !important;
transform: translate(-50%, -50%) !important;
}
#fopesa-valores-carousel .scene-v2 .side-next{
left: auto !important;
transform: translate(50%, -50%) !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev:hover,
#fopesa-valores-carousel .scene-v2 .side-prev.active{
transform: translate(-50%, -50%) scale(1.04) !important;
}
#fopesa-valores-carousel .scene-v2 .side-next:hover,
#fopesa-valores-carousel .scene-v2 .side-next.active{
transform: translate(50%, -50%) scale(1.04) !important;
}
}
/* Nuestros Valores: título centrado y card más compacto solo en responsive. */
@media (max-width: 900px){
#fopesa-valores-carousel .carousel-name{
left:50% !important;
right:auto !important;
width:auto !important;
max-width:calc(100% - 32px) !important;
transform:translateX(-50%) !important;
text-align:center !important;
white-space:nowrap !important;
}
#fopesa-valores-carousel{
--card-w:min(72vw, 290px) !important;
--card-h:420px !important;
}
#fopesa-valores-carousel .carousel-wrap,
#fopesa-valores-carousel .track,
#fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:475px !important;
min-height:475px !important;
}
#fopesa-valores-carousel .card{
padding:16px !important;
}
#fopesa-valores-carousel .card-visual{
height:210px !important;
}
#fopesa-valores-carousel .card-content{
padding-top:14px !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(42vw, 170px)) !important;
}
#fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(42vw, 170px)) !important;
}
}
@media (max-width: 720px){
#fopesa-valores-carousel{
--card-w:min(70vw, 270px) !important;
--card-h:390px !important;
}
#fopesa-valores-carousel .carousel-wrap,
#fopesa-valores-carousel .track,
#fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:445px !important;
min-height:445px !important;
}
#fopesa-valores-carousel .card-visual{
height:190px !important;
}
#fopesa-valores-carousel .card-content h3{
font-size:19px !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(42vw, 155px)) !important;
}
#fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(42vw, 155px)) !important;
}
}
@media (max-width: 480px){
#fopesa-valores-carousel{
--card-w:min(68vw, 250px) !important;
--card-h:365px !important;
}
#fopesa-valores-carousel .carousel-wrap,
#fopesa-valores-carousel .track,
#fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:420px !important;
min-height:420px !important;
}
#fopesa-valores-carousel .card{
padding:14px !important;
}
#fopesa-valores-carousel .card-visual{
height:174px !important;
}
#fopesa-valores-carousel .card-content h3{
font-size:18px !important;
}
#fopesa-valores-carousel .card-content p{
font-size:12px !important;
line-height:1.34 !important;
}
#fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(43vw, 145px)) !important;
}
#fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(43vw, 145px)) !important;
}
}
/* Ocultar únicamente la etiqueta Nosotros del hero integrado en responsive. */
@media (max-width: 900px){
#fopesa-scroll-video-v2 .fopesa-scroll-v2-eyebrow{
display:none !important;
}
}
/* Familia FOPESA y Responsabilidad Social: mismo tratamiento del párrafo Fopesa solo en responsive. */
@media (max-width:900px){
#fopesa-equipo-scroll .fopesa-equipo-copy p{
color:rgba(20,42,92,.72) !important;
font-family:var(--font-primary) !important;
font-size:15px !important;
font-style:normal !important;
font-weight:400 !important;
line-height:1.4 !important;
letter-spacing:normal !important;
text-align:left !important;
text-transform:none !important;
}
}
@media (max-width: 900px){
.fopesa-valores-modal-dialog{
margin-top:calc(10vh + 20px) !important;
}
.fopesa-valores-modal-logo-wrap{
width:min(320px, 100%) !important;
height:clamp(190px, 52vw, 220px) !important;
margin-bottom:12px !important;
}
.fopesa-valores-modal-logo-wrap img{
width:84% !important;
height:88% !important;
object-fit:contain !important;
}
}
/* Nuestra Política: corregir reglas previas que eliminaban el espacio interno */
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
box-sizing:border-box !important;
padding:28px !important;
}
@media (max-width:900px){
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
#fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
padding:24px !important;
}
}
/* Time lapse / Historia: reducir solo el párrafo de cada card en responsive. */
/* Timeline responsive: el gesto vertical controla la página y el cambio de etapa,
no un scroll interno dentro de la card. */
@media (max-width:900px){
#fopesa-historia-demo .tabs_left-top,
#fopesa-historia-demo .tabs_let-content,
#fopesa-historia-demo .tabs_let-content.is-active{
max-height:none !important;
overflow:visible !important;
touch-action:pan-y !important;
}
}
#fopesa-procesos-horizontal .fopesa-procesos-track{
top:64% !important;
}
#fopesa-certificaciones .fopesa-cert-title-mobile{
display:none;
}
@media (max-width:900px){
#fopesa-certificaciones{
padding:24px 14px !important;
}
#fopesa-certificaciones .fopesa-certificaciones-inner{
width:100% !important;
max-width:100% !important;
}
#fopesa-certificaciones .fopesa-certificaciones-grid{
display:grid !important;
gap:16px 10px !important;
align-items:center !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title{
min-width:0 !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title h2{
width:100% !important;
max-width:none !important;
margin:0 !important;
text-align:center !important;
line-height:1 !important;
}
#fopesa-certificaciones .fopesa-cert-title-desktop{
display:none !important;
}
#fopesa-certificaciones .fopesa-cert-title-mobile{
display:block !important;
}
#fopesa-certificaciones .fopesa-certificacion-item{
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
}
@media (max-width:480px){
#fopesa-certificaciones{
padding-left:10px !important;
padding-right:10px !important;
}
#fopesa-certificaciones .fopesa-certificaciones-grid{
gap:14px 6px !important;
}
}
@media (max-width:480px){
#fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:124px !important;
max-height:100px !important;
}
}
@media (max-width:900px){
#fopesa-certificaciones .fopesa-certificacion-item{
width:100% !important;
min-width:0 !important;
padding:0 !important;
overflow:visible !important;
}
#fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:none !important;
max-height:none !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}
}
/* Únete a nuestro equipo: en móvil conserva la composición del escritorio. */
@media (max-width: 720px){
#seccion-nosotros-gallery-01 .about-gallery-grid{
width:100% !important;
min-height:0 !important;
aspect-ratio:1 / 1 !important;
display:grid !important;
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
gap:8px !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.vertical{
grid-column:1 !important;
grid-row:1 / span 2 !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
aspect-ratio:auto !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.square{
grid-column:2 !important;
min-width:0 !important;
min-height:0 !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(2){
grid-row:1 !important;
}
#seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(3){
grid-row:2 !important;
}
}
@media (max-width:900px){
#seccion-nosotros-gallery-01 .about-contained-inner{
display:flex !important;
flex-direction:column !important;
}
#seccion-nosotros-gallery-01 .about-gallery-grid{
order:1 !important;
}
#seccion-nosotros-gallery-01 .about-contained-content{
order:2 !important;
width:100% !important;
padding-top:28px !important;
}
#seccion-nosotros-gallery-01 .about-contained-copy{
display:flex !important;
flex-direction:column !important;
width:100% !important;
}
#seccion-nosotros-gallery-01 .about-contained-actions{
order:99 !important;
width:100% !important;
}
}
@media (max-width:900px){
#seccion-nosotros-gallery-01 .about-gallery-img{
box-shadow:none !important;
}
}
@media (max-width:900px){
#fopesa-certificaciones{
padding-left:7vw !important;
padding-right:7vw !important;
}
#fopesa-certificaciones .fopesa-certificaciones-grid{
width:100% !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
column-gap:6px !important;
}
#fopesa-certificaciones .fopesa-certificacion-item,
#fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:none !important;
}
}
@media (max-width:900px){
#fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-rows:auto auto !important;
row-gap:16px !important;
}
#fopesa-certificaciones .fopesa-certificacion-item{
grid-row:1 !important;
}
#fopesa-certificaciones .fopesa-certificaciones-title{
grid-column:1 / -1 !important;
grid-row:2 !important;
}
}
@media (max-width:900px){
#fopesa-historia-demo .tabs_sticky-wrapper,
#fopesa-historia-demo .tabs_container,
#fopesa-historia-demo .tabs_component{
background:#142A5C !important;
}
#fopesa-historia-demo .tabs_right{
position:absolute !important;
top:calc(var(--header) + 24px) !important;
bottom:auto !important;
z-index:2 !important;
background:#142A5C !important;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .w-background-video{
position:absolute !important;
inset:0 !important;
}
#fopesa-historia-demo .w-background-video > video,
#fopesa-historia-demo .tabs_video video{
position:absolute !important;
inset:0 !important;
object-position:center center !important;
}
#fopesa-historia-demo .tabs_left{
z-index:8 !important;
}
}
:root{
--color-darkest:#142A5C;
--color-dark:#204393;
--color-key:#EF7701;
--color-support:#63B246;
--color-light:#FDEFE1;
--color-white:#FFFFFF;
--color-muted:#6C83B8;
--color-line:#E0E5F0;
--shadow-1:0 1px 2px rgba(20,42,92,.06);
--shadow-2:0 4px 12px rgba(20,42,92,.10);
--shadow-3:0 10px 28px rgba(20,42,92,.14);
--shadow-4:0 20px 50px rgba(20,42,92,.18);
--shadow-5:0 30px 80px rgba(20,42,92,.24);
}
#stats-counters-secciones,
#stats-counters-secciones #DEMO-TRAYECTORIA-01,
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section,
#stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-grid article{
background:#204393 !important;
}
/* Footer: espacio vertical casi al mínimo, sin comprimir el contenido interno. */
#footer-01 .fopesa-footer{
padding-top:6px !important;
padding-bottom:4px !important;
}
@media (max-width:760px){
#footer-01 .fopesa-footer{
padding-top:6px !important;
padding-bottom:4px !important;
}
}
/* Footer responsive: marca a todo el ancho y contenido distribuido en dos columnas independientes. */
#footer-01 .fopesa-footer-responsive-column{
display:contents;
}
@media (max-width:760px){
#footer-01 .fopesa-footer-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
column-gap:22px !important;
row-gap:24px !important;
align-items:start !important;
}
#footer-01 .fopesa-footer-responsive-column{
display:flex !important;
flex-direction:column !important;
gap:28px !important;
min-width:0 !important;
margin-top:0 !important;
}
#footer-01 .fopesa-footer-responsive-column > div{
min-width:0 !important;
margin-top:0 !important;
}
#footer-01 .footer-title{
margin-bottom:14px !important;
}
#footer-01 .footer-nav{
gap:9px !important;
}
#footer-01 .footer-nav a,
#footer-01 .fopesa-footer-info{
overflow-wrap:anywhere !important;
word-break:normal !important;
}
#footer-01 .fopesa-footer-contact-list a{
align-items:flex-start !important;
}
#footer-01 .fopesa-footer-contact-list a > span:last-child{
min-width:0 !important;
overflow-wrap:anywhere !important;
}
#footer-01 .fopesa-contact-icon{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#footer-01 .fopesa-social-links{
flex-wrap:wrap !important;
gap:8px !important;
}
#footer-01 .fopesa-social-links a{
width:30px !important;
height:30px !important;
}
}
/* Footer responsive: ampliar el ancho útil reduciendo los márgenes laterales. */
@media (max-width:760px){
#footer-01 .fopesa-footer-grid{
width:calc(100% - 20px) !important;
max-width:none !important;
margin-left:10px !important;
margin-right:10px !important;
}
}
@media (max-width:760px){
#footer-01 .fopesa-footer-responsive-column-one{
grid-column:1 !important;
order:1 !important;
}
#footer-01 .fopesa-footer-responsive-column-two{
grid-column:2 !important;
order:2 !important;
}
#footer-01 .fopesa-footer-brand{
grid-column:1 / -1 !important;
order:3 !important;
margin-top:4px !important;
}
}
/* Footer responsive: ocultar solo los iconos de teléfono y correo. */
/* Iconos SVG adjuntos centrados dentro de los círculos sociales del footer. */
#footer-01 .fopesa-social-links a{
overflow:hidden !important;
flex:0 0 auto !important;
}
#footer-01 .fopesa-social-links a img{
display:block !important;
width:16px !important;
height:16px !important;
max-width:16px !important;
max-height:16px !important;
object-fit:contain !important;
object-position:center !important;
filter:brightness(0) invert(1) !important;
pointer-events:none !important;
}
@media (max-width:760px){
#footer-01 .fopesa-social-links a img{
width:15px !important;
height:15px !important;
max-width:15px !important;
max-height:15px !important;
}
}
/* Solo escritorio: ajuste fino para alinear los títulos con el texto del bloque Fopesa. */
@media (min-width:761px){
#footer-01 .fopesa-footer-brand{
position:relative !important;
top:-25px !important;
}
/* Los contenedores padre usan display:contents en escritorio; se desplazan sus bloques internos reales. */
#footer-01 .fopesa-footer-responsive-column > div{
position:relative !important;
top:25px !important;
}
}
/* Plantilla reducida: header + video inicial + sección inmediatamente siguiente */
main.menu-list{min-height:0 !important;}
#fopesa-vision-mision-columns{margin-bottom:0 !important;}
/* Plantilla: texto centrado arriba y video centrado debajo durante el estado final. */
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
left:50% !important;
right:auto !important;
bottom:auto !important;
max-width:980px !important;
text-align:center !important;
}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy p{
max-width:900px !important;
margin-left:auto !important;
margin-right:auto !important;
}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-eyebrow{
display:table !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media (max-width:860px){
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
left:50% !important;
right:auto !important;
bottom:auto !important;
max-height:none !important;
overflow:visible !important;
padding-right:0 !important;
text-align:center !important;
}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy p{
max-width:90vw !important;
}
}
/* La sección siguiente comienza después del encuadre final, sin solaparse con el video centrado. */
@media (min-width:861px){
#fopesa-vision-mision-columns{
margin-top:0 !important;
background:#FFFFFF !important;
}
#fopesa-vision-mision-columns::before{
clip-path:none !important;
background:#FFFFFF !important;
}
}
/* Mensaje principal en tres líneas, con la paleta institucional. */
#fopesa-scroll-video-v2 .fopesa-hero-message{
margin:0 !important;
text-align:center !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-line{
display:block !important;
white-space:nowrap;
}
#fopesa-scroll-video-v2 .fopesa-hero-dark{
color:var(--color-dark) !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-key{
color:var(--color-key) !important;
}
@media (max-width:860px){
#fopesa-scroll-video-v2 .fopesa-hero-message{
font-size:clamp(34px, 10vw, 48px) !important;
line-height:1 !important;
letter-spacing:-.05em !important;
}
}
@media (max-width:390px){
#fopesa-scroll-video-v2 .fopesa-hero-message{
font-size:clamp(30px, 9.2vw, 38px) !important;
}
}
/* Composición final inspirada en la referencia: cinco imágenes arriba,
cuatro abajo y el video en el centro de la segunda fila. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
will-change:opacity,transform;
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item{
position:absolute;
left:50%;
width:min(18vw,300px);
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:var(--color-line);
transform:translateX(-50%);
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
/* Cinco centros equidistantes; los extremos quedan parcialmente fuera del viewport. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-1{left:0%;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-2{left:25%;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-3{left:50%;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-4,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-4{left:75%;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-5,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-5{left:100%;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-3,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-5{top:5.2vh;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-4{top:10.6vh;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-4{bottom:5vh;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-5{bottom:10.6vh;}
/* No cambia la tipografía: solo se recoloca el bloque existente. */
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
top:40vh !important;
width:min(72vw,980px) !important;
}
@media (max-width:860px){
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item{
width:34vw;
max-width:210px;
border-radius:10px;
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-4{bottom:3vh;}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-5{bottom:9vh;}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
width:92vw !important;
max-width:92vw !important;
}
}
/*
La composición completa permanece renderizada desde el inicio.
El video ocupa la capa superior y, al reducirse, descubre el texto y las imágenes
que siempre estuvieron colocados detrás.
*/
#fopesa-scroll-video-v2 .fopesa-scroll-v2-wrap{
z-index:12 !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery{
z-index:2 !important;
opacity:1 !important;
transform:none !important;
visibility:visible !important;
}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
z-index:3 !important;
opacity:1 !important;
visibility:visible !important;
transform:translate(-50%, 0) !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item,
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
transition:none !important;
animation:none !important;
}
/* Nueva sección: composición diagonal de marcas basada en la referencia adjunta. */
#fopesa-nuestras-marcas{
color:#204393;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
position:absolute;
z-index:3;
top:12.5%;
left:50%;
margin:0;
color:#204393;
font-family:var(--font-main);
line-height:.76;
letter-spacing:-.055em;
text-align:center;
}
#fopesa-nuestras-marcas .fopesa-marcas-title span{
display:block;
}
#fopesa-nuestras-marcas .fopesa-marcas-stage{
position:absolute;
inset:0;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
position:absolute;
z-index:2;
width:clamp(132px, 12.5vw, 210px);
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:50%;
background:#FFFFFF;
border:none;
box-shadow:var(--shadow-4, 0 20px 50px rgba(20,42,92,.18));
}
#fopesa-nuestras-marcas .fopesa-brand-circle img{
display:block;
width:64%;
height:64%;
object-fit:contain;
object-position:center;
}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-inti img{width:62%; height:62%;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-eco img{width:90%; height:90%;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-arizona img{width:60%; height:60%;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-fragata img{width:64%; height:64%;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-tumi img{width:66%; height:66%;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-la-llama img{width:92%; height:92%; transform:translateY(7%);}
/* Fondos oficiales por marca. */
#fopesa-nuestras-marcas .fopesa-brand-circle.is-club-parrillero{background:#000000 !important;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-la-llama{background:#f3d02c !important;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-inti-principal,
#fopesa-nuestras-marcas .fopesa-brand-circle.is-tumi{background:#FFED00 !important;}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-arizona,
#fopesa-nuestras-marcas .fopesa-brand-circle.is-fragata{background:#000000 !important;}
/* Arco inferior: siete logos distribuidos sobre un medio círculo en forma de U. */
#fopesa-nuestras-marcas .brand-1{left:8.5%; top:26%;}
#fopesa-nuestras-marcas .brand-2{left:22%; top:41%;}
#fopesa-nuestras-marcas .brand-3{left:35.5%; top:54%;}
#fopesa-nuestras-marcas .brand-4{left:50%; top:60%;}
#fopesa-nuestras-marcas .brand-5{left:64.5%; top:54%;}
#fopesa-nuestras-marcas .brand-6{left:78%; top:41%;}
#fopesa-nuestras-marcas .brand-7{left:91.5%; top:26%;}
@media (max-width:900px){
#fopesa-nuestras-marcas{
border-radius:0 0 14px 14px;
}
}
@media (max-width:390px){
#fopesa-nuestras-marcas{
padding-left:10px;
padding-right:10px;
}
#fopesa-nuestras-marcas .fopesa-marcas-stage{
gap:18px 8px;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
width:min(36vw, 138px);
}
}
@media (min-width:901px){
#fopesa-nuestras-marcas .fopesa-marcas-title{
top:28% !important;
}
}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-inti-principal{
background:#FFED00 !important;
}
/* Agrandar solo los logos internos; los círculos conservan su tamaño. */
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-5 img,
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-6 img,
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-7 img{
width:76% !important;
height:76% !important;
}
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-3 img{
width:90% !important;
height:90% !important;
}
/* Logos internos del lado derecho: mayor presencia sin cambiar el círculo. */
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-5 img,
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-6 img{
width:84% !important;
height:84% !important;
}
/* El último logo de la derecha queda ligeramente más grande. */
/* Footer: títulos en tamaño párrafo y Bold. */
/* Sección Línea de Productos. */
#fopesa-linea-productos{
position:relative;
width:100%;
background:#FFFFFF;
}
#fopesa-linea-productos .fopesa-productos-heading{
text-align:center;
}
#fopesa-linea-productos .fopesa-productos-title{
margin:0;
}
#fopesa-linea-productos .fopesa-productos-title span{
display:block;
}
#fopesa-linea-productos .fopesa-productos-title .is-key{
color:#EF7701;
}
#fopesa-linea-productos .fopesa-productos-title .is-dark{
color:#204393;
}
#fopesa-linea-productos .fopesa-productos-intro{
color:#204393;
font-weight:400;
}
#fopesa-linea-productos .fopesa-products-carousel{
position:relative;
width:100%;
isolation:isolate;
}
#fopesa-linea-productos .fopesa-product-slide{
position:absolute;
top:0;
left:50%;
width:min(58vw,820px);
opacity:0;
visibility:hidden;
transform:translateX(-50%) scale(.58);
transform-origin:center center;
transition:
left .72s cubic-bezier(.22,.75,.18,1),
width .72s cubic-bezier(.22,.75,.18,1),
transform .72s cubic-bezier(.22,.75,.18,1),
opacity .42s ease,
filter .72s ease;
z-index:0;
pointer-events:none;
}
#fopesa-linea-productos .fopesa-product-slide.is-active,
#fopesa-linea-productos .fopesa-product-slide.is-prev,
#fopesa-linea-productos .fopesa-product-slide.is-next{
visibility:visible;
}
#fopesa-linea-productos .fopesa-product-slide.is-active{
left:50%;
width:min(58vw,820px);
opacity:1;
transform:translateX(-50%) scale(1);
filter:none;
z-index:3;
pointer-events:auto;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev{
left:8.5%;
width:min(23vw,310px);
opacity:.64;
transform:translateX(-50%) scale(.76);
filter:saturate(.82);
z-index:1;
}
#fopesa-linea-productos .fopesa-product-slide.is-next{
left:91.5%;
width:min(23vw,310px);
opacity:.64;
transform:translateX(-50%) scale(.76);
filter:saturate(.82);
z-index:1;
}
#fopesa-linea-productos .fopesa-product-card{
width:100%;
}
#fopesa-linea-productos .fopesa-product-media{
position:relative;
}
#fopesa-linea-productos .fopesa-product-media img{
display:block;
transform:scale(1.002);
transition:transform .72s cubic-bezier(.22,.75,.18,1);
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-media img{
transform:scale(1);
}
#fopesa-linea-productos .fopesa-product-content{
grid-template-columns:minmax(0,1fr) auto;
opacity:0;
max-height:0;
overflow:hidden;
transition:opacity .32s ease .24s, transform .48s ease .18s, max-height .48s ease, padding .48s ease;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-content{
opacity:1;
}
#fopesa-linea-productos .fopesa-product-copy{
min-width:0;
}
#fopesa-linea-productos .fopesa-product-card-title{
margin:0 0 8px;
color:#204393;
}
#fopesa-linea-productos .fopesa-product-description{
margin:0;
color:#204393;
font-size:16px;
font-weight:400;
}
#fopesa-linea-productos .fopesa-product-more{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:#EF7701;
color:#FFFFFF;
text-decoration:none;
font-size:12px;
line-height:1;
font-weight:700;
white-space:nowrap;
transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
#fopesa-linea-productos .fopesa-product-more:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(239,119,1,.24);
}
}
#fopesa-linea-productos .fopesa-carousel-arrow{
position:absolute;
width:52px;
height:52px;
border:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
color:#204393;
box-shadow:0 12px 30px rgba(20,42,92,.18);
cursor:pointer;
z-index:8;
transform:translateY(-50%);
transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
#fopesa-linea-productos .fopesa-carousel-arrow svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-prev{
left:calc(50% - min(29vw,410px) - 26px);
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-next{
right:calc(50% - min(29vw,410px) - 26px);
}
@media (hover:hover){
#fopesa-linea-productos .fopesa-carousel-arrow:hover{
transform:translateY(-50%) scale(1.08);
background:#204393;
color:#FFFFFF;
}
}
#fopesa-linea-productos .fopesa-carousel-arrow:focus-visible,
#fopesa-linea-productos .fopesa-product-more:focus-visible{
outline:3px solid #EF7701;
outline-offset:4px;
}
@media (max-width:900px){
#fopesa-linea-productos .fopesa-product-slide,
#fopesa-linea-productos .fopesa-product-slide.is-active{
width:86vw;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev{
left:-4%;
width:34vw;
opacity:.52;
transform:translateX(-50%) scale(.72);
}
#fopesa-linea-productos .fopesa-product-slide.is-next{
left:104%;
width:34vw;
opacity:.52;
transform:translateX(-50%) scale(.72);
}
#fopesa-linea-productos .fopesa-product-card{
border-radius:18px;
}
#fopesa-linea-productos .fopesa-product-content{
grid-template-columns:1fr;
gap:18px;
align-items:start;
padding:0 20px;
}
#fopesa-linea-productos .fopesa-product-more{
width:max-content;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
width:44px;
height:44px;
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-prev{
left:5px;
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-next{
right:5px;
}
}
@media (prefers-reduced-motion:reduce){
#fopesa-linea-productos *,
#fopesa-linea-productos *::before,
#fopesa-linea-productos *::after{
transition:none !important;
}
}
/*
Línea de Productos después de Nuestras Marcas.
Presentación libre: imágenes sin card, sin recorte y con su transparencia visible.
*/
#fopesa-linea-productos{
padding-top:clamp(86px,9vw,140px) !important;
}
#fopesa-linea-productos .fopesa-product-card{
overflow:visible !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#fopesa-linea-productos .fopesa-product-media{
width:100% !important;
aspect-ratio:auto !important;
overflow:visible !important;
background:transparent !important;
border-radius:0 !important;
}
#fopesa-linea-productos .fopesa-product-media img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center center !important;
background:transparent !important;
filter:drop-shadow(0 16px 20px rgba(20,42,92,.12));
}
#fopesa-linea-productos .fopesa-product-slide.is-prev .fopesa-product-media img,
#fopesa-linea-productos .fopesa-product-slide.is-next .fopesa-product-media img{
filter:drop-shadow(0 10px 14px rgba(20,42,92,.10));
}
#fopesa-linea-productos .fopesa-product-content{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:16px !important;
text-align:center !important;
padding:0 !important;
margin:0 auto !important;
transform:translateY(10px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-content{
transform:translateY(0) !important;
}
#fopesa-linea-productos .fopesa-product-copy{
width:100% !important;
max-width:680px !important;
}
@media (max-width:900px){
#fopesa-linea-productos{
padding-top:76px !important;
}
}
/* Línea de Productos: misma escala H1 que Nuestras Marcas y composición completa en 1 viewport. */
#fopesa-linea-productos{
height:100svh !important;
min-height:0 !important;
box-sizing:border-box !important;
padding:clamp(22px,3.2vh,38px) 0 clamp(16px,2.4vh,28px) !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}
#fopesa-linea-productos .fopesa-productos-heading{
flex:0 0 auto !important;
width:min(900px,88vw) !important;
margin:0 auto clamp(10px,1.6vh,18px) !important;
}
#fopesa-linea-productos .fopesa-productos-title{
font-size:var(--type-h1,72px) !important;
font-weight:var(--weight-extrabold,800) !important;
line-height:.80 !important;
letter-spacing:-.055em !important;
}
#fopesa-linea-productos .fopesa-productos-intro{
max-width:760px !important;
margin:clamp(10px,1.4vh,16px) auto 0 !important;
font-size:16px !important;
line-height:1.38 !important;
}
#fopesa-linea-productos .fopesa-products-carousel{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
}
#fopesa-linea-productos .fopesa-product-media{
height:clamp(220px,38vh,390px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev .fopesa-product-media,
#fopesa-linea-productos .fopesa-product-slide.is-next .fopesa-product-media{
height:clamp(120px,18vh,190px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-content{
max-height:150px !important;
padding:clamp(10px,1.5vh,16px) 20px 0 !important;
gap:clamp(8px,1.2vh,13px) !important;
}
#fopesa-linea-productos .fopesa-product-card-title{
margin-bottom:4px !important;
}
#fopesa-linea-productos .fopesa-product-description{
line-height:1.35 !important;
}
#fopesa-linea-productos .fopesa-product-more{
min-height:40px !important;
padding:0 20px !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
top:clamp(110px,19vh,195px) !important;
}
@media (max-width:900px){
#fopesa-linea-productos{
height:100svh !important;
min-height:0 !important;
padding:clamp(14px,2.3svh,22px) 0 clamp(10px,1.8svh,18px) !important;
}
#fopesa-linea-productos .fopesa-productos-heading{
width:90vw !important;
}
#fopesa-linea-productos .fopesa-productos-title{
font-size:var(--type-h1,clamp(40px,calc(22.34px + 5.52vw),72px)) !important;
line-height:.82 !important;
}
#fopesa-linea-productos .fopesa-productos-intro{
margin-top:clamp(8px,1.2svh,12px) !important;
font-size:15px !important;
line-height:1.32 !important;
}
#fopesa-linea-productos .fopesa-products-carousel{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
}
#fopesa-linea-productos .fopesa-product-media{
height:clamp(180px,37svh,285px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev .fopesa-product-media,
#fopesa-linea-productos .fopesa-product-slide.is-next .fopesa-product-media{
height:clamp(88px,18svh,135px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-content{
max-height:145px !important;
padding:clamp(8px,1.2svh,12px) 14px 0 !important;
gap:clamp(7px,1svh,10px) !important;
}
#fopesa-linea-productos .fopesa-product-description{
font-size:15px !important;
line-height:1.28 !important;
}
#fopesa-linea-productos .fopesa-product-more{
min-height:36px !important;
padding:0 18px !important;
}
}
@media (max-height:680px) and (min-width:901px){
#fopesa-linea-productos{
padding-top:16px !important;
padding-bottom:12px !important;
}
#fopesa-linea-productos .fopesa-productos-title{
font-size:64px !important;
}
#fopesa-linea-productos .fopesa-productos-intro{
margin-top:8px !important;
line-height:1.3 !important;
}
#fopesa-linea-productos .fopesa-product-media{
height:34vh !important;
}
}
@media (max-width:900px) and (max-height:650px){
#fopesa-linea-productos .fopesa-productos-title{
font-size:clamp(36px,7.5vw,44px) !important;
}
#fopesa-linea-productos .fopesa-productos-intro{
font-size:14px !important;
line-height:1.25 !important;
}
#fopesa-linea-productos .fopesa-product-media{
height:32svh !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-content{
max-height:126px !important;
}
}
/* Amplía únicamente el producto principal, manteniendo los laterales y la sección dentro de un viewport. */
@media (min-width:901px){
#fopesa-linea-productos .fopesa-product-slide.is-active{
width:min(64vw,920px) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-media{
height:clamp(255px,43vh,450px) !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-prev{
left:calc(50% - min(32vw,460px) - 26px) !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow.is-next{
right:calc(50% - min(32vw,460px) - 26px) !important;
}
}
@media (max-width:900px){
#fopesa-linea-productos .fopesa-product-slide.is-active{
width:92vw !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-media{
height:clamp(205px,40svh,315px) !important;
}
}
@media (max-height:680px) and (min-width:901px){
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-media{
height:38vh !important;
}
}
@media (max-width:900px) and (max-height:650px){
#fopesa-linea-productos .fopesa-product-slide.is-active .fopesa-product-media{
height:35svh !important;
}
}
/* Nuestras Marcas: recorrido fijado ligeramente más corto para liberar antes el scroll. */
/* Profundidad visual de los productos, realizada únicamente con CSS. */
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap{
position:relative !important;
isolation:isolate !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap::after{
content:"";
position:absolute;
left:50%;
bottom:1.5%;
width:72%;
height:10%;
min-height:18px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(0,0,0,.30);
filter:blur(18px);
opacity:.72;
z-index:-1;
pointer-events:none;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap::after{
width:68%;
height:8%;
bottom:3%;
transform:translateX(-50%) rotate(-2deg);
filter:blur(16px);
opacity:.68;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap::after{
width:66%;
height:11%;
bottom:1%;
filter:blur(20px);
opacity:.76;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product{
position:relative !important;
z-index:1 !important;
filter:
drop-shadow(0 10px 10px rgba(0,0,0,.18))
drop-shadow(0 24px 28px rgba(0,0,0,.25)) !important;
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap::after{
width:62%;
height:8%;
min-height:14px;
filter:blur(14px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product{
filter:
drop-shadow(0 7px 8px rgba(0,0,0,.16))
drop-shadow(0 16px 20px rgba(0,0,0,.22)) !important;
}
}
/* Alto ajustado al contenido: deja de ocupar una pantalla completa. */
#fopesa-historia-demo .tabs_left{
height:auto!important;
min-height:auto!important;
max-height:calc(100svh - 6rem)!important;
overflow:visible!important;
padding:clamp(1.45rem,2.4vw,2.55rem)!important;
background:rgba(20,42,92,.72)!important;
box-shadow:var(--shadow-4) !important;
}
#fopesa-historia-demo .tabs_left-top{
height:auto!important;
min-height:0!important;
max-height:none!important;
position:relative!important;
display:block!important;
overflow:visible!important;
}
#fopesa-historia-demo .tabs_let-content{
position:absolute!important;
inset:0 auto auto 0!important;
width:100%!important;
height:auto!important;
min-height:0!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateY(10px)!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:flex-start!important;
text-align:left!important;
gap:clamp(.8rem,1.15vw,1.25rem)!important;
padding:0!important;
}
#fopesa-historia-demo .tabs_let-content.is-active{
position:relative!important;
inset:auto!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateY(0)!important;
}
#fopesa-historia-demo .fopesa-history-year{
margin:0!important;
font-size:clamp(2.25rem,4.1vw,4.75rem)!important;
line-height:.95!important;
}
#fopesa-historia-demo .fopesa-history-copy{
margin:0!important;
max-width:62ch!important;
font-size:clamp(.92rem,.96vw,1.05rem)!important;
line-height:1.55!important;
}
#fopesa-historia-demo .tabs_progress{
height:8px!important;
}
#fopesa-historia-demo .tabs_progress-fill{
display:block!important;
width:100%!important;
height:100%!important;
min-width:100%!important;
transform:scaleX(0);
transform-origin:left center;
will-change:transform;
}
/* Paso 9 · Procesos de producción · 09 Horizontal scrolling effect encapsulado */
#fopesa-procesos-horizontal{
--procesos-bg:#142A5C;
--procesos-ink:#FDEFE1;
--procesos-line:rgba(253,239,225,.14);
min-height:calc(100svh + var(--fopesa-procesos-distance, 1800px));
position:relative;
overflow:visible;
background:var(--procesos-bg);
color:var(--procesos-ink);
isolation:isolate;
}
#fopesa-procesos-horizontal,
#fopesa-procesos-horizontal *{
box-sizing:border-box;
}
#fopesa-procesos-horizontal .fopesa-procesos-sticky{
position:sticky;
top:0;
width:100%;
height:100svh;
min-height:620px;
overflow:hidden;
background:var(--procesos-bg);
isolation:isolate;
}
#fopesa-procesos-horizontal .fopesa-procesos-sticky::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background-size:auto, auto, 72px 72px, 72px 72px;
}
#fopesa-procesos-horizontal .fopesa-procesos-sticky::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}
#fopesa-procesos-horizontal .fopesa-procesos-label{
position:absolute;
z-index:4;
top:8vh;
left:7vw;
max-width:min(760px, 76vw);
}
#fopesa-procesos-horizontal .fopesa-procesos-eyebrow{
color:var(--procesos-gold);
font-size:12px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
margin-bottom:12px;
}
#fopesa-procesos-horizontal .fopesa-procesos-label h2{
margin:0;
color:var(--procesos-ink);
font-family:Inter, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(34px,4.6vw,64px);
line-height:1.05;
letter-spacing:-.045em;
text-transform:none;
}
#fopesa-procesos-horizontal .fopesa-procesos-label p{
margin:20px 0 0;
max-width:560px;
color:var(--procesos-soft);
font-size:clamp(16px,1.25vw,20px);
line-height:1.45;
}
#fopesa-procesos-horizontal .fopesa-procesos-track{
position:absolute;
z-index:3;
left:0;
top:58%;
transform:translateY(-50%);
display:flex;
gap:24px;
padding:0 8vw;
width:max-content;
will-change:transform;
}
#fopesa-procesos-horizontal .fopesa-procesos-panel{
flex:0 0 min(82vw, 1040px);
height:62vh;
border:1px solid var(--procesos-line);
display:flex;
position:relative;
overflow:hidden;
}
#fopesa-procesos-horizontal .fopesa-procesos-panel::before{
content:"";
position:absolute;
width:52%;
aspect-ratio:1;
top:12%;
right:7%;
border-radius:50%;
filter:blur(14px);
opacity:.58;
background:radial-gradient(circle,var(--procesos-gold),transparent 68%);
}
#fopesa-procesos-horizontal .fopesa-procesos-panel{
padding:0;
align-items:stretch;
}
#fopesa-procesos-horizontal .fopesa-procesos-panel::before{
display:none;
}
#fopesa-procesos-horizontal .fopesa-procesos-panel img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
#fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(2)::before{background:radial-gradient(circle,var(--procesos-blue),transparent 68%);}
#fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(3)::before{background:radial-gradient(circle,var(--procesos-violet),transparent 68%);}
#fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(4)::before{background:radial-gradient(circle,var(--procesos-green),transparent 68%);}
#fopesa-procesos-horizontal .fopesa-procesos-panel b{
position:relative;
z-index:2;
color:var(--procesos-ink);
font-family:Inter, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(52px,9vw,150px);
line-height:.76;
letter-spacing:-.1em;
text-transform:uppercase;
}
@media (max-width:860px){
#fopesa-procesos-horizontal .fopesa-procesos-sticky{min-height:560px;}
#fopesa-procesos-horizontal .fopesa-procesos-label{left:7vw;right:7vw;top:7vh;}
#fopesa-procesos-horizontal .fopesa-procesos-label h2{font-size:clamp(32px,10vw,52px);line-height:1.05;}
#fopesa-procesos-horizontal .fopesa-procesos-panel{height:56vh;}
}
/* Timeline historia: eliminar verde original y usar solo dark → key */
html body #fopesa-historia-demo{
--green:var(--color-key) !important;
--dark-green:var(--color-dark) !important;
}
html body #fopesa-historia-demo .tabs_progress{
background:var(--color-dark) !important;
background-color:var(--color-dark) !important;
box-shadow:var(--shadow-3) !important;
}
html body #fopesa-historia-demo .tabs_progress-fill{
background:linear-gradient(90deg, var(--color-dark) 0%, var(--color-key) 100%) !important;
background-color:var(--color-key) !important;
background-image:linear-gradient(90deg, var(--color-dark) 0%, var(--color-key) 100%) !important;
}
@media (max-width: 900px){
#header-04 .header-inner{
align-items:center !important;
}
#header-04 .zone-right{
display:none !important;
grid-column:1 / -1 !important;
width:100% !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:10px !important;
padding:0 0 18px !important;
}
#header-04 .site-header.is-open .zone-right{
display:flex !important;
}
#header-04 .zone-right .contact-btn{
display:flex !important;
width:100% !important;
min-height:48px !important;
margin:0 !important;
padding:0 20px !important;
}
}
/* Tipografía final: Inter en todo el documento y escala fluida solo en responsive. */
:root{
--font-primary:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
--font-secondary:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
--font-main:var(--font-primary) !important;
}
html,
body,
body *,
button,
input,
select,
textarea{
font-family:var(--font-primary) !important;
}
@media (max-width:900px){
h1{font-size:var(--type-h1) !important;}
h2{font-size:var(--type-h2) !important;}
h3{font-size:var(--type-h3) !important;}
h4{font-size:var(--type-h4) !important;}
h5{font-size:var(--type-h5) !important;}
h6{font-size:var(--type-h6) !important;}
[class*="card-title"],
[class*="card__title"]{
font-size:var(--type-card) !important;
}
p{
font-size:var(--type-body) !important;
}
}
/* Familia FOPESA: dos columnas equilibradas solo en móvil. */
@media (max-width: 640px){
#fopesa-equipo-scroll .fopesa-equipo-layout{
width:calc(100% - 32px) !important;
margin-inline:auto !important;
}
#fopesa-equipo-scroll .fopesa-equipo-visual{
width:100% !important;
height:82svh !important;
min-height:560px !important;
overflow:hidden !important;
}
#fopesa-equipo-scroll .fopesa-equipo-columns{
inset:-14svh 0 !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
width:100% !important;
}
#fopesa-equipo-scroll .fopesa-equipo-col{
min-width:0 !important;
gap:10px !important;
}
#fopesa-equipo-scroll .fopesa-equipo-col:nth-child(3){
display:none !important;
}
#fopesa-equipo-scroll .fopesa-equipo-photo,
#fopesa-equipo-scroll .fopesa-equipo-photo.is-wide{
width:100% !important;
aspect-ratio:4 / 3 !important;
}
}
/*
Familia FOPESA: en responsive el sticky ya se convierte en bloque normal.
Por eso se anula el min-height global de 230svh que dejaba espacio vacío.
Escritorio conserva intacta la duración original del efecto.
*/
@media (max-width: 980px){
#fopesa-equipo-scroll{
min-height:auto !important;
height:auto !important;
}
#fopesa-equipo-scroll .fopesa-equipo-sticky{
padding-top:72px !important;
padding-bottom:20px !important;
}
}
@media (max-width:900px){
#fopesa-historia-demo .tabs_left{
left:1rem !important;
right:1rem !important;
top:auto !important;
bottom:1.5rem !important;
transform:none !important;
width:auto !important;
height:fit-content !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
overflow-x:hidden !important;
overflow-y:hidden !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:auto !important;
touch-action:pan-y !important;
pointer-events:none !important;
padding:1rem !important;
}
#fopesa-historia-demo .tabs_left-top{
position:relative !important;
display:block !important;
width:100% !important;
height:fit-content !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
pointer-events:none !important;
touch-action:pan-y !important;
}
#fopesa-historia-demo .tabs_let-content{
position:absolute !important;
inset:0 auto auto 0 !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
pointer-events:none !important;
touch-action:pan-y !important;
}
#fopesa-historia-demo .tabs_let-content.is-active{
position:relative !important;
inset:auto !important;
display:flex !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
#fopesa-historia-demo .tabs_let-content:not(.is-active){
opacity:0 !important;
visibility:hidden !important;
}
#fopesa-historia-demo .fopesa-history-year{
margin:0 !important;
font-size:clamp(2rem, 10vw, 2.75rem) !important;
line-height:.92 !important;
}
#fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
margin:0 !important;
font-size:14px !important;
line-height:1.38 !important;
max-width:none !important;
}
}
/*
Timeline móvil: las capas visuales no capturan el gesto.
El desplazamiento vertical queda en manos de la página para que
actualice el año, el texto y el video de fondo.
*/
@media (max-width:900px){
#fopesa-historia-demo,
#fopesa-historia-demo .section_tabs,
#fopesa-historia-demo .padding-section-large,
#fopesa-historia-demo .tabs_height,
#fopesa-historia-demo .tabs_sticky-wrapper,
#fopesa-historia-demo .tabs_container,
#fopesa-historia-demo .tabs_component{
touch-action:pan-y !important;
overscroll-behavior-y:auto !important;
}
/* El video nativo era la capa que todavía capturaba el dedo. */
#fopesa-historia-demo .tabs_right,
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .tabs_video.is-active,
#fopesa-historia-demo .w-background-video,
#fopesa-historia-demo video,
#fopesa-historia-demo .tabs_progress,
#fopesa-historia-demo .tabs_progress-fill{
pointer-events:none !important;
touch-action:pan-y !important;
user-select:none !important;
-webkit-user-select:none !important;
}
/* El texto permanece visible, pero tampoco crea una superficie táctil propia. */
#fopesa-historia-demo .tabs_left,
#fopesa-historia-demo .tabs_left-top,
#fopesa-historia-demo .tabs_let-content,
#fopesa-historia-demo .tabs_let-content.is-active,
#fopesa-historia-demo .fopesa-history-year,
#fopesa-historia-demo .fopesa-history-copy{
pointer-events:none !important;
touch-action:pan-y !important;
overscroll-behavior:auto !important;
}
}
@media (max-width: 860px){
#fopesa-procesos-horizontal .fopesa-procesos-track{
top:68% !important;
}
}
/* Procesos de Producción: el bloque de texto respeta siempre el ancho visible. */
@media (max-width: 860px){
#fopesa-procesos-horizontal .fopesa-procesos-label{
left:7vw !important;
right:7vw !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
box-sizing:border-box !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-label h2,
#fopesa-procesos-horizontal .fopesa-procesos-label p{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow-wrap:break-word !important;
word-break:normal !important;
box-sizing:border-box !important;
}
}
/* Timeline responsive: el video horizontal respeta los márgenes generales del documento. */
@media (max-width:900px){
#fopesa-historia-demo .tabs_right{
box-sizing:border-box !important;
margin:0 !important;
transform:none !important;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .w-background-video,
#fopesa-historia-demo .w-background-video > video,
#fopesa-historia-demo .tabs_video video{
max-width:100% !important;
box-sizing:border-box !important;
}
}
/* Timeline responsive: proporción 16:9 real y bordes curvos. */
@media (max-width:900px){
#fopesa-historia-demo .tabs_right{ /* 86vw × 9 / 16 */
min-height:0 !important;
max-height:none !important;
border-radius:18px !important;
overflow:hidden !important;
}
#fopesa-historia-demo .tabs_video,
#fopesa-historia-demo .w-background-video{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
border-radius:inherit !important;
overflow:hidden !important;
}
#fopesa-historia-demo .w-background-video > video,
#fopesa-historia-demo .tabs_video video{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
border-radius:inherit !important;
object-fit:cover !important;
}
}
/* Timeline responsive: video ligeramente más ancho, manteniendo 16:9. */
@media (max-width:900px){
#fopesa-historia-demo .tabs_right{
inset:calc(var(--header) + 24px) 5vw auto 5vw !important;
left:5vw !important;
right:5vw !important;
width:90vw !important;
max-width:90vw !important;
height:50.625vw !important; /* 90vw × 9 / 16 */
aspect-ratio:16 / 9 !important;
}
}
/* Solo escritorio: desplazar hacia abajo, como una unidad, la etiqueta, el texto y las imágenes de Procesos. */
@media (min-width:901px){
#fopesa-procesos-horizontal .fopesa-procesos-label{
top:calc(8vh + 28px) !important;
}
#fopesa-procesos-horizontal .fopesa-procesos-track{
top:calc(64% + 28px) !important;
}
}
/*
Nuestras Marcas: sección fijada al viewport.
El contenido se construye con el scroll y solo después se libera el footer.
*/
#fopesa-nuestras-marcas{
position:relative !important;
width:100% !important;
padding:0 !important;
overflow:visible !important;
background:#FFFFFF !important;
border-radius:0 !important;
isolation:isolate;
}
#fopesa-nuestras-marcas .fopesa-marcas-sticky{
position:sticky;
top:0;
width:100%;
height:100svh;
overflow:hidden;
background:#FFFFFF;
border-radius:0 0 18px 18px;
isolation:isolate;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
opacity:0;
transform:translate(-50%, 34px) scale(.94) !important;
will-change:transform, opacity;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
opacity:0;
transform:translate(calc(-50% + var(--fopesa-enter-x, 0px)), var(--fopesa-enter-y, 0px)) scale(var(--fopesa-enter-scale, .78)) !important;
will-change:transform, opacity, filter;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
#fopesa-nuestras-marcas.is-marcas-complete .fopesa-brand-circle{
filter:none !important;
}
@media (max-width:900px){
#fopesa-nuestras-marcas{
padding:0 !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-sticky{
top:0;
height:100svh;
padding:max(calc(var(--header, 74px) + 12px), 11svh) 10px 18px;
box-sizing:border-box;
display:flex;
flex-direction:column;
border-radius:0 0 14px 14px;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
position:relative !important;
top:auto !important;
left:auto !important;
flex:0 0 auto;
margin:0 auto 2.5svh !important;
line-height:.78 !important;
transform:translateY(28px) scale(.94) !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-stage{
position:relative !important;
inset:auto !important;
flex:1 1 auto;
min-height:0;
width:100%;
display:grid !important;
gap:1.6svh 8px !important;
align-items:center;
justify-items:center;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
position:relative !important;
left:auto !important;
top:auto !important;
transform:translate(var(--fopesa-enter-x, 0px), var(--fopesa-enter-y, 0px)) scale(var(--fopesa-enter-scale, .82)) !important;
}
}
@media (prefers-reduced-motion:reduce){
#fopesa-nuestras-marcas{
height:auto !important;
min-height:auto !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-sticky{
position:relative;
height:auto;
min-height:100svh;
}
#fopesa-nuestras-marcas .fopesa-marcas-title,
#fopesa-nuestras-marcas .fopesa-brand-circle{
opacity:1 !important;
filter:none !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
transform:translateX(-50%) !important;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
transform:translateX(-50%) !important;
}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
#fopesa-nuestras-marcas .fopesa-marcas-title,
#fopesa-nuestras-marcas .fopesa-brand-circle{
transform:none !important;
}
}
@media (min-width:901px){
#fopesa-nuestras-marcas .brand-1{left:10.5% !important;}
#fopesa-nuestras-marcas .brand-7{left:89.5% !important;}
}
/* Cada marca funciona como enlace y crece suavemente sin interferir con la trayectoria circular del scroll. */
#fopesa-nuestras-marcas .fopesa-brand-circle{
text-decoration:none;
color:inherit;
cursor:pointer;
scale:1;
transition:scale .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease;
transform-origin:center center;
-webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){
#fopesa-nuestras-marcas .fopesa-brand-circle:hover{
scale:1.09;
z-index:6;
box-shadow:0 24px 58px rgba(20,42,92,.24);
}
}
#fopesa-nuestras-marcas .fopesa-brand-circle:focus-visible{
scale:1.09;
z-index:6;
outline:3px solid #EF7701;
outline-offset:5px;
}
@media (prefers-reduced-motion:reduce){
#fopesa-nuestras-marcas .fopesa-brand-circle{
transition:none;
}
}
/* Primer logo a la derecha del central: se desplaza solo el contenido, no el círculo. */
#fopesa-nuestras-marcas .fopesa-brand-circle.brand-5 img{
transform:translateX(3%) !important;
}
/* Último círculo derecho: fondo negro y logo blanco con mayor presencia. */
#fopesa-nuestras-marcas .fopesa-brand-circle.is-fragata{
background:#000000 !important;
}
#fopesa-nuestras-marcas .fopesa-brand-circle.is-fragata img{
width:96% !important;
height:96% !important;
filter:brightness(0) invert(1) !important;
}
/* Escala tipográfica final solicitada. No modifica tipografía, estructura ni animaciones. */
:root{
--type-h1:72px !important;
--type-h2:54px !important;
--type-h3:41px !important;
--type-h4:30px !important;
--type-h5:23px !important;
--type-h6:17px !important;
--type-card:17px !important;
--type-stats:72px !important;
--type-body:16px !important;
--type-small:12px !important;
--type-micro:9px !important;
--weight-regular:400 !important;
--weight-semibold:600 !important;
--weight-bold:700 !important;
--weight-extrabold:800 !important;
--weight-black:800 !important;
}
h1{
font-size:var(--type-h1) !important;
font-weight:var(--weight-extrabold) !important;
}
h2{
font-size:var(--type-h2) !important;
font-weight:var(--weight-bold) !important;
}
h3{
font-size:var(--type-h3) !important;
font-weight:var(--weight-bold) !important;
}
h4{
font-size:var(--type-h4) !important;
font-weight:var(--weight-semibold) !important;
}
h5{
font-size:var(--type-h5) !important;
font-weight:var(--weight-semibold) !important;
}
h6{
font-size:var(--type-h6) !important;
font-weight:var(--weight-bold) !important;
}
[class*="card-title"],
[class*="card__title"]{
font-size:var(--type-card) !important;
font-weight:var(--weight-bold) !important;
}
[class*="stat-number"],
[class*="stats-number"]{
font-size:var(--type-stats) !important;
font-weight:var(--weight-extrabold) !important;
}
p{
font-size:var(--type-body) !important;
font-weight:var(--weight-regular) !important;
}
small,
.fopesa-footer-small,
.footer-nav a,
.main-nav a,
.contact-btn{
font-size:var(--type-small) !important;
font-weight:var(--weight-regular) !important;
}
.fopesa-footer-micro{
font-size:var(--type-micro) !important;
font-weight:var(--weight-regular) !important;
}
/* Elementos visibles de esta plantilla. */
#fopesa-scroll-video-v2 .fopesa-hero-message{
font-size:var(--type-h1) !important;
font-weight:var(--weight-extrabold) !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
font-size:var(--type-h1) !important;
font-weight:var(--weight-extrabold) !important;
}
@media (max-width:900px){
:root{
--type-h1:clamp(40px,calc(22.34px + 5.52vw),72px) !important;
--type-h2:clamp(32px,calc(19.86px + 3.79vw),54px) !important;
--type-h3:clamp(26px,calc(17.72px + 2.59vw),41px) !important;
--type-h4:clamp(22px,calc(17.59px + 1.38vw),30px) !important;
--type-h5:clamp(19px,calc(16.79px + .69vw),23px) !important;
--type-h6:17px !important;
--type-card:17px !important;
--type-stats:clamp(48px,calc(34.76px + 4.14vw),72px) !important;
--type-body:16px !important;
--type-small:12px !important;
--type-micro:9px !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-message{
font-size:var(--type-h1) !important;
}
#fopesa-nuestras-marcas .fopesa-marcas-title{
font-size:var(--type-h1) !important;
font-weight:var(--weight-extrabold) !important;
}
}
/* Segunda sección: recorrido fijado más corto para liberar antes el scroll. */
#fopesa-impulsa-tu-marca{
position:relative;
width:100%;
min-height:100svh;
overflow:hidden;
background:
linear-gradient(180deg, rgba(9,146,37,.03), rgba(0,78,22,.12)),
url('../images-fopesa/fopesa-destaca-tu-marca-fondo.jpg') center/cover no-repeat;
color:#FFFFFF;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
position:relative;
min-height:100svh;
width:min(1680px,100%);
margin:0 auto;
padding:clamp(50px,7vh,92px) clamp(42px,4.8vw,76px) clamp(40px,6vh,68px);
display:grid;
grid-template-columns:minmax(220px, 1fr) minmax(380px, 1.05fr) minmax(220px, 1fr);
grid-template-rows:auto 1fr auto;
align-items:start;
gap:clamp(10px,1.6vw,24px) clamp(18px,2.6vw,40px);
isolation:isolate;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
position:absolute;
width:min(74vw,1180px);
aspect-ratio:1 / 1;
left:50%;
top:calc(50% - min(74vw,1180px));
transform:translateX(-50%);
border-radius:50%;
background:rgba(77, 197, 74, .18);
border:1.5px solid rgba(255,255,255,.20);
z-index:0;
pointer-events:none;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
grid-column:2;
grid-row:1 / span 2;
position:relative;
z-index:1;
max-width:720px;
margin:0 auto;
text-align:center;
align-self:start;
padding-top:clamp(18px,3vh,40px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
margin:0;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-title span{display:block;}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro{
margin:clamp(20px,2.6vh,30px) auto 0;
max-width:720px;
color:#FFFFFF;
font-size:16px;
line-height:1.38;
font-weight:400;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
position:relative;
z-index:2;
align-self:end;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
text-align:center;
gap:18px;
padding-bottom:clamp(8px,1vh,18px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left{
grid-column:1;
grid-row:2 / span 2;
justify-self:start;
align-self:end;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
grid-column:3;
grid-row:2 / span 2;
justify-self:end;
align-self:end;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap{
display:flex;
align-items:flex-end;
justify-content:center;
min-height:clamp(300px,35vw,470px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap{
width:min(33vw,560px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
width:min(28vw,460px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product{
display:block;
width:100%;
height:auto;
object-fit:contain;
filter:drop-shadow(0 16px 24px rgba(0,0,0,.16));
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
max-height:min(36vw,510px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
max-height:min(30vw,420px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
margin:0;
color:#FFFFFF;
font-size:17px;
line-height:1.28;
font-weight:700;
max-width:340px;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 24px;
border-radius:999px;
background:#EF7701;
color:#FFFFFF;
text-decoration:none;
font-size:12px;
line-height:1;
font-weight:700;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
@media (hover:hover){
#fopesa-impulsa-tu-marca .fopesa-impulsa-more:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(239,119,1,.24);
}
}
@media (max-width:1024px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
gap:22px;
padding:clamp(32px,5vh,56px) 7vw clamp(34px,5vh,48px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
width:min(120vw,760px);
top:calc(50% - min(120vw,760px));
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
grid-column:1;
grid-row:1;
padding-top:8px;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
grid-column:1;
justify-self:center;
width:100%;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left{ grid-row:2; }
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{ grid-row:3; }
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
align-self:start;
padding-bottom:0;
gap:14px;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
width:min(86vw,540px);
min-height:auto;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
max-height:320px;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
font-size:var(--type-h1,clamp(40px,calc(22.34px + 5.52vw),72px));
line-height:.92;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro{
font-size:15px;
line-height:1.34;
}
}
/* Alineación efectiva de escritorio, incluyendo vistas de 901 a 1024 px. */
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
position:absolute !important;
aspect-ratio:1 / 1 !important;
border-radius:50% !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
position:absolute !important;
top:clamp(74px,12vh,112px) !important;
left:50% !important;
width:min(760px,58vw) !important;
margin:0 !important;
padding:0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
line-height:.92 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro{
line-height:1.35 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
position:absolute !important;
top:auto !important;
bottom:clamp(52px,8vh,76px) !important;
padding:0 !important;
margin:0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left{
left:2.2vw !important;
right:auto !important;
width:min(35vw,620px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
right:2.8vw !important;
left:auto !important;
width:min(29vw,500px) !important;
}
}
@media (min-width:901px) and (max-height:760px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
top:64px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
bottom:38px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
max-height:38vh !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
max-height:34vh !important;
}
}
/* Igualar el título a Nuestra Línea de Productos y asegurar todos los textos solicitados en blanco. */
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
color:#FFFFFF !important;
font-size:var(--type-h1,72px) !important;
font-weight:var(--weight-extrabold,800) !important;
line-height:.80 !important;
letter-spacing:-.055em !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro,
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
color:#FFFFFF !important;
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
font-size:var(--type-h1,clamp(40px,calc(22.34px + 5.52vw),72px)) !important;
font-weight:var(--weight-extrabold,800) !important;
line-height:.82 !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
position:relative !important;
display:grid !important;
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
grid-template-rows:1fr !important;
align-items:center !important;
justify-items:center !important;
width:100% !important;
max-width:1680px !important;
margin:0 auto !important;
box-sizing:border-box !important;
gap:clamp(18px,2vw,34px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
position:relative !important;
inset:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
align-self:center !important;
justify-self:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left{
grid-column:1 !important;
grid-row:1 !important;
max-width:520px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
grid-column:2 !important;
grid-row:1 !important;
max-width:610px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
grid-column:3 !important;
grid-row:1 !important;
max-width:480px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
width:100% !important;
min-height:0 !important;
display:flex !important;
justify-content:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
margin:0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro{
width:100% !important;
max-width:560px !important;
margin:clamp(18px,2.4vh,26px) auto 0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
max-width:340px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
}
}
@media (min-width:901px) and (max-height:760px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
padding-top:34px !important;
padding-bottom:34px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
height:clamp(230px,38vh,330px) !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca{
height:clamp(600px,68vh,680px) !important;
min-height:clamp(600px,68vh,680px) !important;
max-height:680px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
height:100% !important;
min-height:0 !important;
padding:clamp(34px,4vh,48px) clamp(24px,3vw,52px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
width:min(76vw,1280px) !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca{
height:auto !important;
min-height:0 !important;
max-height:none !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
height:auto !important;
min-height:0 !important;
padding:clamp(42px,7vw,62px) 7vw clamp(46px,8vw,68px) !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
justify-content:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
align-self:center !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
transform-origin:center bottom !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
transform-origin:center bottom !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
max-width:none !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
max-width:none !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca{
overflow:hidden !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-circle{
z-index:0 !important;
opacity:.92 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
z-index:5 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
transform:translateY(-28px) !important;
z-index:6 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
height:clamp(390px,56vh,520px) !important;
overflow:visible !important;
align-items:flex-end !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
width:138% !important;
max-width:760px !important;
max-height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
transform:translateY(-10px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
width:140% !important;
max-width:660px !important;
max-height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
transform:translateY(-10px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
line-height:1.14 !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca{
overflow:hidden !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
gap:4px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
align-items:flex-end !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product{
width:120% !important;
transform:translateY(-6px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
width:122% !important;
transform:translateY(-6px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
margin-top:-8px !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-title{
margin-top:0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-intro{
margin-top:14px !important;
}
}
/* Línea de Productos: centra verticalmente el carrusel completo dentro del espacio disponible. */
@media (min-width:901px){
#fopesa-linea-productos .fopesa-products-carousel{
position:relative !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-active{
transform:translate(-50%,-50%) scale(1) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev,
#fopesa-linea-productos .fopesa-product-slide.is-next{
transform:translate(-50%,-50%) scale(.76) !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
transform:translateY(-50%) !important;
}
}
@media (max-width:900px){
#fopesa-linea-productos .fopesa-product-slide.is-active{
transform:translate(-50%,-50%) scale(1) !important;
}
#fopesa-linea-productos .fopesa-product-slide.is-prev,
#fopesa-linea-productos .fopesa-product-slide.is-next{
transform:translate(-50%,-50%) scale(.72) !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
transform:translateY(-50%) !important;
}
}
/* Impulsa tu marca: título y párrafo centrados en el alto. */
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
align-self:center !important;
justify-self:center !important;
transform:none !important;
padding-top:0 !important;
}
/* Sube mucho más los títulos y botones laterales hacia la base de cada producto. */
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
margin-bottom:-72px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
margin-top:0 !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
transform:none !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
margin-bottom:-58px !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
margin-bottom:-28px !important;
}
}
/* Baja ligeramente ambos títulos y conserva cada botón inmediatamente debajo. */
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-side{
gap:0 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
position:relative !important;
top:auto !important;
margin:0 auto !important;
transform:translateY(-50px) !important;
font-weight:700 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
position:relative !important;
top:auto !important;
transform:translateY(-50px) !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
position:relative !important;
top:auto !important;
margin:0 auto !important;
font-weight:700 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
position:relative !important;
top:auto !important;
}
}
@media (min-width:901px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title,
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
transform:translateY(-36px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
margin-top:10px !important;
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title,
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
transform:translateY(-20px) !important;
}
}
@media (prefers-reduced-motion:no-preference){
@keyframes fopesaImpulsaFloatLeft{
0%,100%{transform:translateY(0px) rotate(-0.6deg);}
50%{transform:translateY(-10px) rotate(0.8deg);}
}
@keyframes fopesaImpulsaFloatRight{
0%,100%{transform:translateY(0px) rotate(0.6deg);}
50%{transform:translateY(-9px) rotate(-0.8deg);}
}
@keyframes fopesaImpulsaShakeLeft{
0%,100%{transform:translateY(0px) rotate(0deg);}
18%{transform:translateY(-2px) rotate(-2deg);}
36%{transform:translateY(0px) rotate(2.2deg);}
54%{transform:translateY(-1px) rotate(-1.8deg);}
72%{transform:translateY(0px) rotate(1.5deg);}
}
@keyframes fopesaImpulsaShakeRight{
0%,100%{transform:translateY(0px) rotate(0deg);}
18%{transform:translateY(-2px) rotate(2deg);}
36%{transform:translateY(0px) rotate(-2.2deg);}
54%{transform:translateY(-1px) rotate(1.8deg);}
72%{transform:translateY(0px) rotate(-1.5deg);}
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
will-change:transform;
transform-origin:center bottom;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap{
animation:fopesaImpulsaFloatLeft 4.8s ease-in-out infinite;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
animation:fopesaImpulsaFloatRight 5.4s ease-in-out infinite .25s;
}
@media (hover:hover){
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left:hover .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left:focus-within .fopesa-impulsa-product-wrap{
animation:fopesaImpulsaShakeLeft .55s ease-in-out 1;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right:hover .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right:focus-within .fopesa-impulsa-product-wrap{
animation:fopesaImpulsaShakeRight .58s ease-in-out 1;
}
}
}
#fopesa-nuestras-marcas .fopesa-marcas-title,
#fopesa-nuestras-marcas .fopesa-brand-circle{
opacity:1 !important;
filter:none !important;
}
/* Reduce a aproximadamente un tercio la separación visual entre el texto introductorio y las imágenes. */
@media (max-width:900px){
#fopesa-linea-productos .fopesa-products-carousel{
transform:translateY(clamp(-30px,-4svh,-18px)) !important;
}
}
#fopesa-linea-productos .fopesa-productos-heading{
margin-bottom:0 !important;
}
#fopesa-linea-productos .fopesa-products-carousel{
transform:none !important;
}
@media (min-width:901px){
#fopesa-linea-productos .fopesa-product-slide{
top:36% !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
top:36% !important;
}
}
@media (max-width:900px){
#fopesa-linea-productos .fopesa-productos-heading{
margin-bottom:0 !important;
}
#fopesa-linea-productos .fopesa-product-slide{
top:40% !important;
}
#fopesa-linea-productos .fopesa-carousel-arrow{
top:40% !important;
}
}
#fopesa-linea-productos .fopesa-product-card-title{
font-size:var(--type-h3,41px) !important;
line-height:1.08 !important;
font-weight:700 !important;
letter-spacing:-.025em !important;
}
@media (max-width:900px){
#fopesa-linea-productos .fopesa-product-card-title{
font-size:clamp(27px,7vw,36px) !important;
}
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-title{
margin:clamp(18px,2.4vh,26px) auto 0 !important;
max-width:520px;
font-size:clamp(27px,2.25vw,var(--type-h3,41px));
line-height:1.08;
font-weight:700;
letter-spacing:-.025em;
text-align:center;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
margin-top:clamp(12px,1.6vh,17px);
padding:0 26px;
border-radius:999px;
background:#EF7701;
color:#FFFFFF;
font-size:12px;
line-height:1;
font-weight:700;
text-decoration:none;
white-space:nowrap;
transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-button:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(0,0,0,.18);
}
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-title{
margin-top:18px !important;
font-size:clamp(25px,7vw,34px);
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-button{
min-height:42px;
margin-top:12px;
padding:0 22px;
}
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-title{
color:#FFFFFF !important;
-webkit-text-fill-color:#FFFFFF !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-note{
margin:10px auto 0 !important;
max-width:560px;
color:#FFFFFF !important;
-webkit-text-fill-color:#FFFFFF !important;
font-size:16px;
line-height:1.4;
font-weight:400;
text-align:center;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-note + .fopesa-impulsa-logo-button{
margin-top:14px !important;
}
@media (max-width:900px){
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-note{
max-width:88vw;
font-size:15px;
line-height:1.35;
}
}
#footer-01 .footer-title{
font-size:16px !important;
line-height:1.5 !important;
font-weight:700 !important;
letter-spacing:normal !important;
}
#footer-01 .fopesa-footer-contact-list .fopesa-contact-icon{
display:inline-flex !important;
overflow:hidden !important;
}
#footer-01 .fopesa-footer-contact-list .fopesa-contact-icon img{
display:block !important;
width:16px !important;
height:16px !important;
object-fit:contain !important;
filter:brightness(0) invert(1) !important;
}
@media (max-width:760px){
#footer-01 .fopesa-footer-contact-list .fopesa-contact-icon{
display:inline-flex !important;
}
#footer-01 .fopesa-footer-contact-list a{
gap:7px !important;
}
}
/* Menú principal y botones del header en tamaño párrafo. */
#header-04 .main-nav a,
#header-04 .zone-right .contact-btn{
font-size:var(--type-body,16px) !important;
}
/* Desplazamiento visual sin alterar el alto ni el flujo del header. */
#header-04 .main-nav a,
#header-04 .zone-right .contact-btn{
position:relative !important;
top:5px !important;
}
/* Todos los botones de contenido en mayúsculas; el menú del header queda intacto. */
body :is(a, button):is(
[class*="btn"],
[class*="button"],
[class*="more"],
[class*="cta"]
):not(#header-04 *),
main button:not(.fopesa-carousel-arrow){
text-transform:uppercase !important;
}
@media (max-width:860px){
/* Baja todavía más la fila superior completa. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-3,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-5{
top:13vh !important;
}
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-4{
top:19vh !important;
}
/* Sube las dos imágenes que quedan inmediatamente a los lados del video. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-2,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-4{
bottom:17vh !important;
}
/* Mantiene las dos imágenes exteriores más abajo. */
}
@media (max-width:860px){
/* Baja solo las dos imágenes exteriores de la fila superior. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.top-5{
top:27vh !important;
}
}
@media (max-width:860px){
/* Sube solo las dos imágenes exteriores de la fila inferior,
hasta sobrepasar visualmente la mitad de las imágenes interiores. */
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-1,
#fopesa-scroll-video-v2 .fopesa-hero-gallery-item.bottom-5{
bottom:25vh !important;
}
}
@media (max-width:860px){
#fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
top:calc(39vh + 12px) !important;
}
}
@media (max-width:900px){
#fopesa-nuestras-marcas .fopesa-marcas-stage{
grid-template-columns:repeat(6, minmax(0,1fr)) !important;
grid-template-rows:repeat(3, minmax(0,1fr)) !important;
column-gap:4px !important;
row-gap:1.8svh !important;
}
#fopesa-nuestras-marcas .fopesa-brand-circle{
grid-column:auto !important;
grid-row:auto !important;
width:min(27vw, 13svh, 118px) !important;
}
/* Fila 1: tres logos. */
#fopesa-nuestras-marcas .brand-1{grid-column:1 / span 2 !important; grid-row:1 !important;}
#fopesa-nuestras-marcas .brand-2{grid-column:3 / span 2 !important; grid-row:1 !important;}
#fopesa-nuestras-marcas .brand-3{grid-column:5 / span 2 !important; grid-row:1 !important;}
/* Fila 2: dos logos centrados. */
#fopesa-nuestras-marcas .brand-4{grid-column:2 / span 2 !important; grid-row:2 !important;}
#fopesa-nuestras-marcas .brand-5{grid-column:4 / span 2 !important; grid-row:2 !important;}
/* Fila 3: dos logos centrados. */
#fopesa-nuestras-marcas .brand-6{grid-column:2 / span 2 !important; grid-row:3 !important;}
#fopesa-nuestras-marcas .brand-7{grid-column:4 / span 2 !important; grid-row:3 !important;}
}
@media (max-width:900px){
/* Bloque de texto arriba y los dos productos debajo, en una sola fila. */
#fopesa-impulsa-tu-marca .fopesa-impulsa-inner{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:auto auto !important;
column-gap:clamp(10px,3vw,18px) !important;
row-gap:clamp(14px,4vw,24px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-copy{
grid-column:1 / -1 !important;
grid-row:1 !important;
width:100% !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
grid-row:2 !important;
width:100% !important;
min-width:0 !important;
justify-self:stretch !important;
align-self:start !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left{
grid-column:1 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right{
grid-column:2 !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product-wrap,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product-wrap{
width:100% !important;
height:clamp(155px,43vw,245px) !important;
min-height:0 !important;
margin-bottom:-18px !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-left .fopesa-impulsa-product,
#fopesa-impulsa-tu-marca .fopesa-impulsa-side.is-right .fopesa-impulsa-product{
width:108% !important;
max-width:none !important;
max-height:100% !important;
object-fit:contain !important;
object-position:center bottom !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-product-title{
width:100% !important;
max-width:190px !important;
min-height:2.6em !important;
font-size:clamp(13px,3.6vw,16px) !important;
line-height:1.28 !important;
transform:translateY(-12px) !important;
}
#fopesa-impulsa-tu-marca .fopesa-impulsa-more{
min-height:40px !important;
margin-top:6px !important;
padding:0 18px !important;
transform:translateY(-12px) !important;
}
}
/* El contenedor principal conserva la proporción nativa 3840:2160 (16:9) en todo momento. */
#fopesa-scroll-video-v2 .fopesa-scroll-v2-screen{
width:max(100vw,177.7778svh);
height:auto;
aspect-ratio:16 / 9 !important;
background:#000 !important;
overflow:hidden !important;
left:50%;
top:50%;
right:auto;
bottom:auto;
transform:translate(-50%,-50%);
}
#fopesa-scroll-video-v2 .fopesa-scroll-v2-screen iframe{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
aspect-ratio:16 / 9 !important;
border:0 !important;
pointer-events:none !important;
}
/* Extiende el tramo sticky para que la entrada de los logos requiera más scroll. */
#fopesa-nuestras-marcas{
height:210vh !important;
min-height:210vh !important;
}
@media (max-width:900px){
#fopesa-nuestras-marcas{
height:260vh !important;
min-height:260vh !important;
}
}
@media (max-width:900px){
#header-04,
#header-04 .menu-real,
#header-04 .site-header,
#header-04 .header-inner{
background:var(--color-white) !important;
background-color:var(--color-white) !important;
background-image:none !important;
}
#header-04 .site-header{
border-top:1px solid var(--color-line) !important;
border-bottom:1px solid var(--color-line) !important;
}
#header-04 .fopesa-main-logo img{
content:url("../images-fopesa/fopesa-logo-header.svg") !important;
height:calc(var(--header) * .72) !important;
max-height:54px !important;
width:auto !important;
object-fit:contain !important;
}
#header-04 .menu-toggle{
background:transparent !important;
border-color:var(--color-line) !important;
color:var(--color-dark) !important;
}
#header-04 .menu-toggle:hover,
#header-04 .menu-toggle:focus-visible{
background:var(--color-light) !important;
border-color:var(--color-dark) !important;
}
#header-04 .site-header.is-open .main-nav{
border-top:0 !important;
}
#header-04 .site-header.is-open .main-nav a:hover,
#header-04 .site-header.is-open .main-nav a:focus-visible{
color:var(--color-white) !important;
background:rgba(255,255,255,.1) !important;
}
#header-04 .site-header.is-open .contact-btn{
margin:0 !important;
min-height:50px !important;
border:0 !important;
border-top:1px solid rgba(255,255,255,.12) !important;
background:var(--color-dark) !important;
color:var(--color-white) !important;
}
#header-04 .site-header.is-open .contact-btn:hover,
#header-04 .site-header.is-open .contact-btn:focus-visible{
transform:none !important;
background:#1d3978 !important;
color:var(--color-white) !important;
}
}
@media (max-width:900px){
#header-04 .site-header.is-open,
#header-04 .site-header.is-open .header-inner{
background:var(--color-dark) !important;
background-color:var(--color-dark) !important;
background-image:none !important;
}
#header-04 .site-header.is-open{
border-top-color:var(--color-dark) !important;
border-bottom-color:var(--color-dark) !important;
}
#header-04 .site-header.is-open .menu-toggle{
border-color:rgba(255,255,255,.35) !important;
}
#header-04 .site-header.is-open .menu-toggle:hover,
#header-04 .site-header.is-open .menu-toggle:focus-visible{
border-color:var(--color-white) !important;
}
#header-04 .site-header.is-open .main-nav,
#header-04 .site-header.is-open .contact-btn{
background:var(--color-dark) !important;
}
}
@media (max-width:900px){
html.fopesa-mobile-menu-open,
html.fopesa-mobile-menu-open body{
overflow:hidden !important;
overscroll-behavior:none !important;
}
#header-04 .site-header.is-open{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100svh !important;
min-height:100svh !important;
max-height:100svh !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:var(--color-dark) !important;
border:0 !important;
box-shadow:none !important;
z-index:10001 !important;
}
#header-04 .site-header.is-open .header-inner{
width:100% !important;
min-height:100svh !important;
height:auto !important;
margin:0 !important;
align-content:start !important;
gap:0 !important;
background:var(--color-dark) !important;
}
#header-04 .site-header.is-open .menu-toggle{
width:46px !important;
height:46px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
outline-offset:4px !important;
background:transparent !important;
box-shadow:none !important;
color:var(--color-white) !important;
}
#header-04 .site-header.is-open .menu-toggle:hover,
#header-04 .site-header.is-open .menu-toggle:focus-visible{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--color-white) !important;
}
#header-04 .site-header.is-open .main-nav{
width:100% !important;
margin-top:34px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
#header-04 .site-header.is-open .main-nav a{
min-height:54px !important;
padding:0 4px !important;
background:transparent !important;
color:var(--color-white) !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
}
#header-04 .site-header.is-open .zone-right{
width:100% !important;
margin-top:22px !important;
padding:0 !important;
gap:12px !important;
background:transparent !important;
}
#header-04 .site-header.is-open .zone-right .contact-btn{
width:100% !important;
min-height:52px !important;
margin:0 !important;
border:0 !important;
color:var(--color-white) !important;
}
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-key{
background:var(--color-key) !important;
}
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-support{
background:var(--color-support) !important;
}
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-key:hover,
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-key:focus-visible{
background:var(--color-key) !important;
}
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-support:hover,
#header-04 .site-header.is-open .zone-right .fopesa-header-cta-support:focus-visible{
background:var(--color-support) !important;
}
}
/* El logo del menú abierto ocupa exactamente la misma caja del header cerrado. */
@media (max-width:900px){
#header-04 .site-header.is-open .header-inner{
padding:0 28px 30px !important;
grid-template-columns:1fr auto !important;
grid-template-rows:var(--header) auto auto !important;
align-items:center !important;
}
#header-04 .site-header.is-open .zone-left{
display:flex !important;
grid-column:1 !important;
grid-row:1 !important;
min-height:var(--header) !important;
align-items:center !important;
justify-content:flex-start !important;
justify-self:stretch !important;
}
#header-04 .site-header.is-open .fopesa-main-logo{
display:inline-flex !important;
height:var(--header) !important;
align-items:center !important;
justify-content:flex-start !important;
align-self:center !important;
margin:0 !important;
padding:0 !important;
}
#header-04 .site-header.is-open .fopesa-main-logo img{
content:url("../images-fopesa/fopesa-logo-footer.svg") !important;
display:block !important;
height:calc(var(--header) * .72) !important;
max-height:54px !important;
width:auto !important;
margin:0 !important;
object-fit:contain !important;
object-position:left center !important;
}
#header-04 .site-header.is-open .menu-toggle{
grid-column:2 !important;
grid-row:1 !important;
align-self:center !important;
justify-self:end !important;
margin:0 !important;
}
#header-04 .site-header.is-open .main-nav{
grid-column:1 / -1 !important;
grid-row:2 !important;
}
#header-04 .site-header.is-open .zone-right{
grid-column:1 / -1 !important;
grid-row:3 !important;
}
}
@media (max-width:520px){
#header-04 .site-header.is-open .header-inner{
padding-left:18px !important;
padding-right:18px !important;
}
}
/* ============ AJUSTES EXCLUSIVOS: NOSOTROS.HTML ============
Conservan el hero y las animaciones/efectos de sus secciones,
sin modificar Inicio, header, footer ni tipografía global.
============================================================ */
body.page-nosotros .layout-section{width: 100%;
padding-top: 34px;
background: var(--color-dark);
}
body.page-nosotros .layout-real{width: 100%;
margin: 0;
padding: 0;}
body.page-nosotros .about-square-label{display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
body.page-nosotros .about-contained-demo{width: 100%;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
body.page-nosotros .about-contained-inner{width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 96px 0;
display: grid;
grid-template-columns: 50% 50%;
align-items: stretch;}
body.page-nosotros .about-contained-content{display: grid;
place-items: center;
padding: 56px clamp(42px, 5vw, 84px);
background: var(--color-white);}
body.page-nosotros .about-contained-copy{width: min(100%, 560px);}
body.page-nosotros .about-contained-label{display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
body.page-nosotros .about-contained-copy h3{margin: 0;
color: var(--color-dark);
font-size: var(--text-h2);
line-height: 1.1;
letter-spacing: -.045em;}
body.page-nosotros .about-contained-copy p{margin: 14px 0 0;
color: rgba(20,42,92,.72);
font-size: var(--text-body);
line-height: 1.8;}
body.page-nosotros .about-contained-actions{display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;}
body.page-nosotros .about-contained-actions a{min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px;
border: 1px solid var(--color-line);
color: var(--color-dark);
font-size: var(--text-small);
font-weight: 900;
line-height: 1;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;}
body.page-nosotros .about-contained-actions a:first-child{background: var(--color-key);
border-color: var(--color-key);
color: var(--color-white);}
body.page-nosotros .about-contained-actions a:hover{transform: translateY(-2px);
background: var(--color-dark);
border-color: var(--color-dark);
color: var(--color-white);}
@media (max-width: 1100px){
body.page-nosotros .about-contained-inner{width: min(100% - 56px, 1440px);
grid-template-columns: 1fr;
padding: 80px 0;}
body.page-nosotros .about-contained-content{padding: 56px 0 0;
place-items: start;}
}
@media (max-width: 720px){
body.page-nosotros .about-contained-inner{width: min(100% - 36px, 1440px);
padding: 58px 0;}
body.page-nosotros .about-contained-content{padding-top: 42px;}
body.page-nosotros .about-contained-copy h3{font-size: 34px;}
body.page-nosotros .about-contained-actions{align-items: stretch;
flex-direction: column;}
}
body.page-nosotros #seccion-nosotros-gallery-01{padding-top: 34px;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-demo{width: 100%;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-inner{width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 96px 0;
display: grid;
grid-template-columns: 50% 50%;
align-items: stretch;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{display: grid;
place-items: center;
padding: 56px clamp(42px, 5vw, 84px);
background: var(--color-white);}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-label{display: block;
margin: 0 0 11px;
color: var(--color-key);
font-size: var(--text-label);
font-weight: 400;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy h3{margin: 0;
color: var(--color-dark);
font-size: var(--text-h2);
line-height: 1.1;
letter-spacing: -.045em;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy p{margin: 14px 0 0;
font-size: var(--text-body);
line-height: 1.8;}
body.page-nosotros .about-gallery-grid{width: 100%;
min-height: 640px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px;}
body.page-nosotros .about-gallery-img{background-image: var(--about-square-img);
background-size: cover;
background-position: center center;
box-shadow: var(--shadow-5);}
body.page-nosotros .about-gallery-img.vertical{grid-row: span 2;
min-height: 640px;}
body.page-nosotros .about-gallery-img.square{aspect-ratio: 1 / 1;
min-height: 0;}
@media (max-width: 1100px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-inner{width: min(100% - 56px, 1440px);
grid-template-columns: 1fr;
padding: 80px 0;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{padding: 56px 0 0;
place-items: start;}
body.page-nosotros .about-gallery-grid{min-height: 520px;}
body.page-nosotros .about-gallery-img.vertical{min-height: 520px;}
}
@media (max-width: 720px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-inner{width: min(100% - 36px, 1440px);
padding: 58px 0;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{padding-top: 42px;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy h3{font-size: 34px;}
body.page-nosotros .about-gallery-grid{grid-template-columns: 1fr;
grid-template-rows: none;
min-height: auto;}
body.page-nosotros .about-gallery-img.vertical{grid-row: auto;
min-height: 420px;}
body.page-nosotros .about-gallery-img.square{min-height: 280px;
aspect-ratio: auto;}
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy{width: 100% !important;
max-width: none !important;}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{padding-left: 0 !important;
padding-right: clamp(42px, 5vw, 84px) !important;}
@media (max-width: 1100px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{padding-left: 0 !important;
padding-right: 0 !important;}
}
body.page-nosotros .icon-cards-section{width: 100%;
padding-top: 34px;
background: var(--color-dark);
}
body.page-nosotros .icon-cards-real{width: 100%;
margin: 0;
padding: 0;
background: var(--color-white);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
body.page-nosotros .icon-cards-inner{width: min(100% - 96px, 1440px);
margin-inline: auto;
padding: 72px 0;}
body.page-nosotros .icon-card-grid{display: grid;
gap: 22px;}
body.page-nosotros .icon-card-grid.three{grid-template-columns: repeat(3, 1fr);}
body.page-nosotros .icon-card{min-height: 300px;
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px;
background: var(--color-white);
border: 1px solid var(--color-line);
color: var(--color-dark);
transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;}
body.page-nosotros .icon-card:hover{transform: translateY(-8px);
background: var(--color-dark);
color: var(--color-white);
border-color: var(--color-dark);
box-shadow: var(--shadow-4);}
body.page-nosotros .icon-card-icon{width: 58px;
height: 58px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: var(--color-key);
color: var(--color-white);
flex: 0 0 auto;
transition: background .28s ease, color .28s ease;}
body.page-nosotros .icon-card-icon svg{width: 26px;
height: 26px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;}
body.page-nosotros .icon-card h3{margin: 2px 0 0;
color: var(--color-dark);
font-size: var(--text-h3);
line-height: 1.22;
letter-spacing: -.025em;
transition: color .28s ease;}
body.page-nosotros .icon-card p{margin: 0;
font-size: var(--text-small);
line-height: 1.7;
transition: color .28s ease;}
body.page-nosotros .icon-card:hover h3,
body.page-nosotros .icon-card:hover p{color: var(--color-white);}
@media (max-width: 900px){
body.page-nosotros .icon-cards-inner{width: min(100% - 56px, 1440px);}
body.page-nosotros .icon-card-grid.three{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px){
body.page-nosotros .icon-cards-inner{width: min(100% - 36px, 1440px);
padding: 54px 0;}
body.page-nosotros .icon-card-grid.three{grid-template-columns: 1fr;}
body.page-nosotros .icon-card{min-height: 260px;
padding: 26px;}
body.page-nosotros .icon-card h3{font-size: var(--text-h3);}
}
body.page-nosotros .trayectoria-stats-embed{--color-dark: #142A5C;
--color-white: #FFFFFF;
--color-line: #E0E5F0;
--font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-secondary: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
--text-h3: 24px;
--text-h2: 48px;}
body.page-nosotros .trayectoria-stats-embed *{box-sizing: border-box;}
body.page-nosotros .trayectoria-stats-embed{scroll-behavior: smooth;}
body.page-nosotros .trayectoria-stats-embed{
font-size: var(--text-body);
line-height: 1.7;}
body.page-nosotros .trayectoria-stats-embed .template-item{width: 100%;
padding-top: 20px;
background: var(--color-dark);
}
body.page-nosotros .trayectoria-stats-embed .template-demo{width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-dark);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"]{--tray-dark: #142A5C;
--tray-white: #FFFFFF;
--tray-line: rgba(20,42,92, .14);
--tray-line-light: rgba(255,255,255, .14);}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-section{width: 100%;
padding: 86px 42px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-wrap{
margin: 0 auto;}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] article{box-sizing: border-box;}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] strong,
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] span{display: inline-block;}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] strong{font-size: clamp(48px, 6vw, 96px);
line-height: .9;
letter-spacing: -.075em;
color: var(--tray-key);}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] span{color: var(--tray-key);
font-size: clamp(28px, 3vw, 54px);
line-height: 1;
font-weight: 800;}
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] p{margin: 12px 0 0;
font-size: 15px;
line-height: 1.55;}
body.page-nosotros .trayectoria-stats-embed /* 01 */
#DEMO-TRAYECTORIA-01 .tray-dark{background: var(--tray-dark); color: var(--tray-white);}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--tray-line-light);}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article{padding: 48px 34px; background: var(--tray-dark);}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article p{color: rgba(255,255,255, .72); font-weight: 700;}
@media (max-width: 1000px){
body.page-nosotros .trayectoria-stats-embed [id^="DEMO-TRAYECTORIA-"] .tray-section{padding: 72px 24px;}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 620px){
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid{grid-template-columns: 1fr;}
}
body.page-nosotros .trayectoria-stats-embed /* ANCHO GLOBAL SOLICITADO: todos los bloques internos a 1440px */
[id^="DEMO-TRAYECTORIA-"] .tray-wrap{width: min(100%, 1440px);}
body.page-nosotros .trayectoria-stats-embed{width: 100%;
max-width: none;
margin: 0;
padding: 0;
background: var(--color-dark);
color: var(--color-white);
font-family: var(--font-secondary);
isolation: isolate;
overflow: hidden;}
body.page-nosotros .layout-section,
body.page-nosotros .icon-cards-section,
body.page-nosotros .trayectoria-stats-embed .template-item{
padding-top: 0 !important;
}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-section{padding-top: 48px; padding-bottom: 48px;}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 article{padding-top: 34px; padding-bottom: 34px;}
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-counter,
body.page-nosotros .trayectoria-stats-embed #DEMO-TRAYECTORIA-01 .tray-grid span{color: var(--tray-white);}
body.page-nosotros .layout-section,
body.page-nosotros .icon-cards-section,
body.page-nosotros .trayectoria-stats-embed .template-item,
body.page-nosotros .icon-cards-real,
body.page-nosotros .about-contained-demo,
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-demo{
border-top: 0 !important;
border-bottom: 0 !important;
}
body.page-nosotros #fopesa-equipo-scroll{
position: relative;
background: var(--equipo-light);
color: var(--equipo-dark);
overflow: visible;
isolation: isolate;
}
body.page-nosotros #fopesa-equipo-scroll,
body.page-nosotros #fopesa-equipo-scroll *{
box-sizing: border-box;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-sticky{
position: sticky;
top: 0;
min-height: 100svh;
height: 100svh;
overflow: hidden;
background: var(--equipo-light);
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-layout{
width: 100%;
height: 100%;
margin: 0;
display: grid;
grid-template-columns: minmax(360px, calc((100vw - min(100vw, 1440px)) / 2 + 520px)) minmax(0, 1fr);
gap: clamp(36px, 5vw, 84px);
align-items: stretch;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy{
position: relative;
z-index: 4;
align-self: center;
padding: clamp(42px, 6vh, 72px) 0 clamp(42px, 6vh, 72px) max(48px, calc((100vw - 1440px) / 2 + 48px));
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-label{
display: block;
margin-bottom: 14px;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy h2{
margin: 0;
max-width: 560px;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy p{
max-width: 500px;
margin-top: 22px;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-visual{
position: relative;
min-height: 100%;
overflow: hidden;
mask-image: linear-gradient(180deg, transparent 0%, #142A5C 12%, #142A5C 88%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #142A5C 12%, #142A5C 88%, transparent 100%);
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-visual::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 30%, rgba(32,67,147,.12), transparent 28%),
radial-gradient(circle at 82% 70%, rgba(20,42,92,.08), transparent 24%);
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-columns{
position: absolute;
z-index: 2;
inset: -30vh 0 -30vh 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.55vw, 24px);
will-change: transform;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-col{
display: flex;
flex-direction: column;
gap: clamp(14px, 1.55vw, 24px);
will-change: transform;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo{
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 0;
border: 1px solid rgba(20,42,92, .12);
background: #E0E5F0;
box-shadow: var(--shadow-5);
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::before{
content: "";
position: absolute;
inset: 0;
transform: scale(1.02);
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::after{
content: attr(data-label);
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
color: #FFFFFF;
font-size: clamp(13px, .9vw, 15px);
font-weight: 850;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo.is-wide{
aspect-ratio: 16 / 10;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo.is-loop-pre{
order: -1;
}
@media (max-width: 980px){
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-sticky{
position: relative;
height: auto;
min-height: auto;
overflow: hidden;
padding: 72px 0;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-layout{
width: min(100% - 56px, 1440px);
margin-inline: auto;
grid-template-columns: 1fr;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy{
padding: 0;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-visual{
height: 92vh;
min-height: 620px;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-columns{
inset: -18vh 0;
gap: 12px;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-col{
gap: 12px;
}
}
body.page-nosotros #fopesa-historia-section{
width: 100%;
overflow: visible;
}
body.page-nosotros #fopesa-historia-section,
body.page-nosotros #fopesa-historia-section *{
box-sizing: border-box;
}
body.page-nosotros #fopesa-historia-section .template-item{
width: 100%;
background: var(--color-dark);
}
body.page-nosotros #fopesa-historia-section .template-demo{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: var(--color-dark);
border-bottom: 1px solid var(--color-line);
}
body.page-nosotros #fopesa-historia-section #fopesa-historia-timeline-item,
body.page-nosotros #fopesa-historia-section #fopesa-historia-demo.template-demo{
overflow: visible;
}
body.page-nosotros #fopesa-historia-demo{
--black: #142A5C;
--border-radius--tiny: .375rem;
--border-radius--xtiny: .25rem;
--gray-800: #142A5C;
--nav--gray-800: #142A5C;
--white: #FFFFFF;
--border-radius--xxsmall: .5rem;
--gray-100: #FDEFE1;
--border-radius--xlarge: 2rem;
--border-radius--xxtiny: .175rem;
--border-radius--large-still: 1.75rem;
--border-radius--0: 0rem;
--border-radius--medium: 1.25rem;
--border-radius--large-change: 1.75rem;
--border-radius--xmedium: 1.5rem;
--border-radius--xsmall: .75rem;
--border-radius--small: 1rem;
--border-radius--home-hero: 2rem;
--border-radius--about-image: 2rem;
--border-radius--button-circle: 100vw;
--nav--circle: #142A5C;
width: 100%;
min-height: 100%;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--gray-900);
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
}
body.page-nosotros #fopesa-historia-demo *,
body.page-nosotros #fopesa-historia-demo *::before,
body.page-nosotros #fopesa-historia-demo *::after{
box-sizing: border-box;
}
body.page-nosotros #fopesa-historia-demo p{
color: var(--gray-500);
margin-bottom: 5rem;
}
body.page-nosotros #fopesa-historia-demo sup,
body.page-nosotros #fopesa-historia-demo sub{
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
body.page-nosotros #fopesa-historia-demo sup{
top: 0em;
}
body.page-nosotros #fopesa-historia-demo .section_tabs{
z-index: 99;
border-radius: var(--border-radius--xlarge);
background-color: var(--gray-800);
position: relative;
}
body.page-nosotros #fopesa-historia-demo .padding-section-large{
position: relative;
}
body.page-nosotros #fopesa-historia-demo .tabs_sticky-wrapper{
position: sticky;
}
body.page-nosotros #fopesa-historia-demo .tabs_container{
margin-left: auto;
margin-right: auto;
}
body.page-nosotros #fopesa-historia-demo .tabs_component{
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
grid-template-rows: auto;
grid-auto-columns: 1fr;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content{
padding-top: 0%;
padding-bottom: 0%;
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content p{
margin: 0;
}
body.page-nosotros #fopesa-historia-demo .heading-style-h4{
letter-spacing: -.02em;
font-size: 2.125rem;
font-weight: 500;
line-height: 1.05;
margin-top: 0;
margin-bottom: 0;
}
body.page-nosotros #fopesa-historia-demo .text-color-gray100{
color: var(--gray-100);
}
body.page-nosotros #fopesa-historia-demo .tabs_line{
width: 100%;
height: 1px;
background-color: var(--gray-500);
}
body.page-nosotros #fopesa-historia-demo .text-color-gray400{
color: var(--gray-400);
}
body.page-nosotros #fopesa-historia-demo .text-size-small{
font-size: 1rem;
}
body.page-nosotros #fopesa-historia-demo .button{
grid-column-gap: .5rem;
grid-row-gap: .5rem;
border: 1px solid var(--gray-800);
background-color: var(--gray-800);
color: var(--gray-25);
text-align: center;
letter-spacing: .03em;
text-transform: uppercase;
cursor: pointer;
border-radius: .6rem;
justify-content: center;
align-items: center;
padding: .6rem 1.35rem;
font-size: .875rem;
text-decoration: none;
transition: color .6s;
display: flex;
overflow: hidden;
position: relative;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .tabs_right,
body.page-nosotros #fopesa-historia-demo .button{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
body.page-nosotros #fopesa-historia-demo .tabs_right{
grid-area: span 1 / span 1 / span 1 / span 1;
}
body.page-nosotros #fopesa-historia-demo .w-background-video{
width: 100%;
height: 100%;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
body.page-nosotros #fopesa-historia-demo .tabs_video{
width: 100%;
height: 100%;
border-radius: var(--border-radius--medium);
object-fit: cover;
position: absolute;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
visibility: hidden;
pointer-events: none;
}
body.page-nosotros #fopesa-historia-demo .tabs_video.is-active{
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
body.page-nosotros #fopesa-historia-demo video{
vertical-align: baseline;
display: inline-block;
}
body.page-nosotros #fopesa-historia-demo .w-background-video > video{
width: 100%;
height: 100%;
object-fit: cover;
z-index: -100;
background-position: 50%;
background-size: cover;
margin: auto;
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
}
body.page-nosotros #fopesa-historia-demo img{
border: 0;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
@media (max-width: 900px){
body.page-nosotros #fopesa-historia-demo .tabs_component{
grid-template-columns: 1fr;
height: auto;
min-height: 90vh;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
min-height: 320px;
}
body.page-nosotros #fopesa-historia-demo .tabs_right{
min-height: 52vh;
}
}
@media (max-width: 576px){
body.page-nosotros #fopesa-historia-demo .padding-section-large{
padding-top: 2rem;
padding-bottom: 0rem;
}
body.page-nosotros #fopesa-historia-demo .tabs_height{
height: 600vh;
}
body.page-nosotros #fopesa-historia-demo .tabs_component{
grid-template-columns: 1fr;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content{
gap: 1rem;
justify-content: center;
}
body.page-nosotros #fopesa-historia-demo .heading-style-h4{
margin: 0;
font-size: 20px;
}
body.page-nosotros #fopesa-historia-demo .text-size-small{
font-size: .875rem;
}
}
body.page-nosotros #fopesa-hero-nosotros-integrado{
--bg:#142A5C;
--ink:#FDEFE1;
--line:rgba(253,239,225,.14);
height:calc(100svh + var(--distance, 1800px));
min-height:100svh;
position:relative;
overflow:visible;
background:#FFFFFF;
color:var(--ink);
z-index:3;
}
body.page-nosotros #fopesa-hero-nosotros-integrado h2,
body.page-nosotros #fopesa-hero-nosotros-integrado h3,
body.page-nosotros #fopesa-hero-nosotros-integrado p{margin:0;}
body.page-nosotros #fopesaHeroVideoScreen{
position:absolute;
left:0;
top:0;
width:100vw;
height:100svh;
border-radius:0;
overflow:hidden;
transform-origin:50% 50%;
will-change:transform,width,height,border-radius,box-shadow,opacity;
background-size:cover;
background-position:center;
contain:layout paint;
backface-visibility:hidden;
}
body.page-nosotros #fopesaHeroVideoScreen video,
body.page-nosotros #fopesaHeroVideoScreen img{
width:100%;
height:100%;
display:block;
}
body.page-nosotros #fopesaHeroVideoScreen::before{
content:"";
position:absolute;
inset:0;
opacity:.18;
background-size:72px 72px;
pointer-events:none;
}
body.page-nosotros #fopesaHeroVideoScreen::after{
content:"VIDEO INTEGRADO";
position:absolute;
left:50%;
top:52%;
transform:translate(-50%,-50%);
width:130vw;
color:transparent;
font-weight:900;
font-size:clamp(90px, 17vw, 280px);
line-height:.75;
letter-spacing:-.11em;
text-transform:uppercase;
text-align:center;
pointer-events:none;
}
body.page-nosotros #fopesaNosotrosStage{
position:absolute;
inset:0;
z-index:10;
display:flex;
align-items:center;
background:#FFFFFF;
color:var(--color-dark);
opacity:0;
pointer-events:none;
will-change:opacity;
}
body.page-nosotros #fopesaNosotrosText{
opacity:0;
transform:translate3d(0,110px,0);
will-change:opacity,transform;
}
body.page-nosotros #fopesaHeroNosotrosTarget{
position:relative;
overflow:hidden;
background-image:none !important;
opacity:0;
}
@media (max-width:860px){
body.page-nosotros #fopesaHeroNosotrosTarget{
width:100%;
aspect-ratio:16 / 9;
}
}
body.page-nosotros #fopesa-hero-nosotros-integrado,
body.page-nosotros #fopesaNosotrosStage,
body.page-nosotros #fopesaNosotrosText{
background:#FFFFFF !important;
}
body.page-nosotros #fopesaNosotrosText,
body.page-nosotros #fopesaNosotrosText h3,
body.page-nosotros #fopesaNosotrosText h4{
color:var(--color-dark) !important;
}
body.page-nosotros #fopesaNosotrosText p{
color:rgba(20,42,92,.72) !important;
}
body.page-nosotros #fopesaHeroVideoScreen{
aspect-ratio:16 / 9;
}
body.page-nosotros #fopesaHeroVideoScreen video,
body.page-nosotros #fopesaHeroVideoScreen img{
object-fit:cover !important;
object-position:center center !important;
}
body.page-nosotros #fopesa-hero-nosotros-integrado{
margin-top:0 !important;
}
body.page-nosotros #fopesa-valores-carousel{
--scene-w: 1680px;
--card-w: 380px;
--card-h: 560px;
--card-gap: 40px;
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
--text-h3: 24px;
--text-card: 32px;
width: 100%;
overflow: hidden;
font-family: var(--font-secondary);
background: var(--color-light);
color: var(--color-dark);
}
body.page-nosotros #fopesa-valores-carousel,
body.page-nosotros #fopesa-valores-carousel *{ box-sizing: border-box; }
body.page-nosotros #fopesa-valores-carousel .scene{
position: relative;
min-height: 100vh;
height: 100vh;
overflow: hidden;
padding: clamp(22px, 3.2vh, 40px) 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 26px;
isolation: isolate;
background: var(--color-light);
}
body.page-nosotros #fopesa-valores-carousel .blob-left,
body.page-nosotros #fopesa-valores-carousel .blob-right{
position: absolute;
z-index: -2;
pointer-events: none;
background: var(--color-key);
display: none !important;
}
body.page-nosotros #fopesa-valores-carousel .blob-left{
width: 740px;
height: 740px;
left: calc(50% - 980px);
bottom: -330px;
border-radius: 50%;
}
body.page-nosotros #fopesa-valores-carousel .blob-right{
width: 900px;
height: 330px;
right: calc(50% - 920px);
top: -150px;
border-bottom-left-radius: 180px;
border-bottom-right-radius: 120px;
transform: rotate(6deg);
}
body.page-nosotros #fopesa-valores-carousel .carousel-wrap{
position: relative;
width: var(--scene-w);
height: min(700px, calc(100vh - 210px));
min-height: 560px;
flex: 0 0 auto;
}
body.page-nosotros #fopesa-valores-carousel .track{
position: relative;
width: var(--scene-w);
height: 100%;
perspective: 1800px;
}
body.page-nosotros #fopesa-valores-carousel .card{
position: absolute;
top: 50%;
left: 50%;
width: var(--card-w);
min-height: var(--card-h);
padding: 26px;
border-radius: 28px;
background: var(--color-white);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-5);
transform-origin: center center;
transition:
transform .72s cubic-bezier(.22,.61,.36,1),
opacity .72s cubic-bezier(.22,.61,.36,1);
overflow: hidden;
will-change: transform, opacity;
cursor: pointer;
user-select: none;
opacity: 0;
pointer-events: none;
}
body.page-nosotros #fopesa-valores-carousel .card-visual{
position: relative;
height: 320px;
border-radius: 20px;
overflow: hidden;
}
body.page-nosotros #fopesa-valores-carousel .card-visual img{
display: block;
object-position: center;
}
body.page-nosotros #fopesa-valores-carousel .card-visual::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,42,92,.04) 0%, rgba(20,42,92,.16) 52%, rgba(20,42,92,.38) 100%);
pointer-events: none;
}
body.page-nosotros #fopesa-valores-carousel .card-kicker{
position: absolute;
left: 18px;
bottom: 18px;
z-index: 2;
min-height: 30px;
align-items: center;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--color-line);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
body.page-nosotros #fopesa-valores-carousel .card-content{ padding: 24px 2px 2px; }
body.page-nosotros #fopesa-valores-carousel .card-content h3{
margin: 0;
color: var(--color-dark);
font-family: var(--font-main);
font-size: 26px;
line-height: 1.04;
letter-spacing: -.045em;
font-weight: 800;
}
body.page-nosotros #fopesa-valores-carousel .card-content p{
margin: 14px 0 0;
color: var(--color-muted);
font-size: 15px;
line-height: 1.46;
}
body.page-nosotros #fopesa-valores-carousel .card-content a{
display: inline-flex;
margin-top: 20px;
text-decoration: none;
font-size: 14px;
}
body.page-nosotros #fopesa-valores-carousel .card.pos-left-2{
z-index: 3;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(-885px) translateY(124px) rotate(-16deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.pos-left-1{
z-index: 5;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(-440px) translateY(8px) rotate(-8deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.pos-center{
z-index: 6;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(0) translateY(-24px) rotate(0deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.pos-right-1{
z-index: 5;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(440px) translateY(8px) rotate(8deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.pos-right-2{
z-index: 3;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) translateX(885px) translateY(124px) rotate(16deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.hidden-left{
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) translateX(-1210px) translateY(138px) rotate(-18deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .card.hidden-right{
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) translateX(1210px) translateY(138px) rotate(18deg) scale(1);
}
body.page-nosotros #fopesa-valores-carousel .arrow{
width: 62px;
height: 62px;
border-radius: 50%;
border: 1px solid var(--color-line);
background: var(--color-white);
color: var(--color-dark);
display: grid;
place-items: center;
cursor: pointer;
transition: .22s ease;
backdrop-filter: blur(6px);
box-shadow: none;
}
body.page-nosotros #fopesa-valores-carousel .arrow:hover,
body.page-nosotros #fopesa-valores-carousel .arrow.active{
border-color: var(--color-key);
color: var(--color-key);
background: var(--color-white);
box-shadow: none;
}
body.page-nosotros #fopesa-valores-carousel .arrow svg{
width: 22px;
height: 22px;
}
body.page-nosotros #fopesa-valores-carousel .cat-btn{
min-height: 60px;
padding: 0 32px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-white);
color: var(--color-dark);
font-family: inherit;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: .22s ease;
box-shadow: none;
}
body.page-nosotros #fopesa-valores-carousel .cat-btn:hover{ filter: brightness(.98); }
body.page-nosotros #fopesa-valores-carousel .cat-btn.active{
border-color: var(--color-key);
background: var(--color-key);
color: var(--color-white);
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .carousel-wrap{
height: min(700px, calc(100vh - 92px));
}
body.page-nosotros #fopesa-valores-carousel .scene-v2{ gap: 0; }
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
border-color: var(--color-key) !important;
background: var(--color-key) !important;
color: var(--color-white) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev{ left: clamp(20px, 4vw, 78px); }
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next{ right: clamp(20px, 4vw, 78px); }
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow:hover,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow.active{
transform: translateY(-50%) scale(1.04);
border-color: var(--color-key) !important;
background: var(--color-key) !important;
color: var(--color-white) !important;
filter: brightness(1.06);
}
body.page-nosotros #fopesa-valores-carousel .carousel-name{
align-items: center;
pointer-events: none;
}
@media (max-width: 720px){
body.page-nosotros #fopesa-valores-carousel .scene{
height: auto;
min-height: 100svh;
padding: 22px 0 28px;
gap: 18px;
}
body.page-nosotros #fopesa-valores-carousel .card.pos-left-2,
body.page-nosotros #fopesa-valores-carousel .card.pos-right-2{
opacity: 0;
pointer-events: none;
}
body.page-nosotros #fopesa-valores-carousel .cat-btn{
min-height: 48px;
padding: 0 18px;
font-size: 14px;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow{
top: auto;
bottom: 24px;
transform: none;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow:hover,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow.active{
transform: scale(1.04);
}
body.page-nosotros #fopesa-valores-carousel .carousel-name{
top: 16px;
left: 16px;
min-height: 30px;
padding: 0 10px;
font-size: 10px;
letter-spacing: .12em;
}
}
body.page-nosotros #fopesa-rs-integrado{
height:calc(100svh + var(--rs-distance, 2500px));
min-height:100svh;
position:relative;
overflow:visible;
background:#FFFFFF;
color:var(--color-dark);
z-index:2;
}
body.page-nosotros #fopesa-rs-integrado,
body.page-nosotros #fopesa-rs-integrado *{
box-sizing:border-box;
}
body.page-nosotros #fopesa-rs-integrado .fopesa-rs-stage{
position:absolute;
inset:0;
z-index:10;
display:flex;
align-items:center;
background:#FFFFFF;
opacity:0;
pointer-events:none;
will-change:opacity;
}
body.page-nosotros #fopesa-rs-integrado .layout-section{
width:100%;
}
body.page-nosotros #fopesa-rs-video-target{
position:relative;
}
body.page-nosotros #fopesa-rs-video-screen{
position:absolute;
left:0;
top:0;
width:100vw;
height:100svh;
border-radius:0;
overflow:hidden;
transform-origin:50% 50%;
will-change:transform,width,height,border-radius,box-shadow,opacity;
contain:layout paint;
backface-visibility:hidden;
}
body.page-nosotros #fopesa-rs-video-screen video,
body.page-nosotros #fopesa-rs-video-screen img{
max-width:none;
}
body.page-nosotros #fopesa-rs-video-screen::before{
content:"";
position:absolute;
inset:0;
opacity:.18;
background-size:72px 72px;
pointer-events:none;
}
body.page-nosotros #fopesa-rs-video-screen::after{
content:"VIDEO INTEGRADO";
position:absolute;
left:50%;
top:52%;
transform:translate(-50%,-50%);
width:130vw;
color:transparent;
font-weight:900;
font-size:clamp(90px, 17vw, 280px);
line-height:.75;
letter-spacing:-.11em;
text-transform:uppercase;
text-align:center;
pointer-events:none;
}
body.page-nosotros #fopesa-rs-video-target{
opacity:0 !important;
}
body.page-nosotros #fopesa-rs-video-screen{
aspect-ratio:16 / 9;
box-shadow:none !important;
background-size:cover !important;
background-position:center center !important;
}
body.page-nosotros #fopesa-rs-video-screen video,
body.page-nosotros #fopesa-rs-video-screen img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
}
body.page-nosotros #fopesa-historia-section .template-demo{background:transparent!important;border-top:0!important;}
body.page-nosotros #fopesa-historia-section .template-item{padding-top:0!important;}
body.page-nosotros #fopesa-historia-demo .section_tabs{margin-top:0!important;}
body.page-nosotros #fopesa-historia-section #fopesa-historia-timeline-item{
padding-top: 0 !important;
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
body.page-nosotros #fopesa-historia-section #fopesa-historia-demo{
margin-top: 0 !important;
}
body.page-nosotros #fopesa-historia-section #fopesa-historia-demo .section_tabs{
margin-top: 0 !important;
}
body.page-nosotros #fopesa-historia-section{
background: transparent !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-nosotros #fopesa-historia-section .template-item,
body.page-nosotros #fopesa-historia-section .template-demo{
background: transparent !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: 0 !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_height{
height: 1200vh !important;
}
body.page-nosotros #fopesa-historia-demo .section_tabs{
margin-bottom: 0 !important;
}
body.page-nosotros #fopesa-historia-section,
body.page-nosotros #fopesa-historia-section .template-item,
body.page-nosotros #fopesa-historia-section .template-demo,
body.page-nosotros #fopesa-historia-demo .section_tabs,
body.page-nosotros #fopesa-historia-demo .padding-section-large{
border:0!important;
border-radius:0!important;
}
body.page-nosotros #fopesa-historia-demo .padding-section-large{
padding-top:0!important;
padding-bottom:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_component{
grid-template-columns:.42fr 1fr!important;
align-items:center!important;
gap:0!important;
padding-left:0!important;
padding-right:0!important;
border:0!important;
border-radius:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
border:0!important;
background-color:var(--gray-700)!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_right{
align-self:center!important;
border-radius:0!important;
border:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
border-radius:0!important;
border:0!important;
}
body.page-nosotros #fopesa-historia-demo .w-background-video > video,
body.page-nosotros #fopesa-historia-demo .tabs_video video{
z-index:0!important;
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_component{
height:auto!important;
min-height:100vh!important;
grid-template-columns:1fr!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress{
right:.75rem!important;
}
}
body.page-nosotros #fopesa-historia-section,
body.page-nosotros #fopesa-historia-section .template-item,
body.page-nosotros #fopesa-historia-section .template-demo,
body.page-nosotros #fopesa-historia-demo .section_tabs,
body.page-nosotros #fopesa-historia-demo .padding-section-large,
body.page-nosotros #fopesa-historia-demo .tabs_component,
body.page-nosotros #fopesa-historia-demo .tabs_left,
body.page-nosotros #fopesa-historia-demo .tabs_right,
body.page-nosotros #fopesa-historia-demo .tabs_video{
border:0!important;
border-radius:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_sticky-wrapper{
top:0!important;
height:100vh!important;
display:flex!important;
align-items:center!important;
overflow:hidden!important;
background:#142A5C!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_container{
width:100%!important;
max-width:none!important;
height:100vh!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_component{
width:100%!important;
height:100vh!important;
display:block!important;
position:relative!important;
padding:0!important;
overflow:hidden!important;
background:#142A5C!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_right{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
aspect-ratio:auto!important;
overflow:hidden!important;
z-index:1!important;
background:#142A5C!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
aspect-ratio:16/10!important;
overflow:hidden!important;
z-index:1!important;
}
body.page-nosotros #fopesa-historia-demo .w-background-video > video,
body.page-nosotros #fopesa-historia-demo .tabs_video video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
aspect-ratio:16/10!important;
position:absolute!important;
inset:0!important;
margin:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
position:absolute!important;
width:min(560px, calc(100vw - 2.5rem))!important;
display:block!important;
color:#FFFFFF!important;
z-index:8!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-year{
letter-spacing:-.04em!important;
font-weight:500!important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-copy{
color:rgba(255,255,255,.78)!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_line{
background:rgba(255,255,255,.26)!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
width:100%!important;
z-index:30!important;
border-radius:0!important;
overflow:hidden!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress-fill{
background:var(--green)!important;
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_progress{
height:4px!important;
}
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
overflow-y:auto!important;
overflow-x:hidden!important;
transition:height .35s ease, max-height .35s ease!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left-top{
transition:height .35s ease!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content{
top:0!important;
left:0!important;
right:0!important;
bottom:auto!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content:not(.is-active){
pointer-events:none!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress-fill{
transition:transform .08s linear!important;
}
body.page-nosotros #fopesa-cta-clasico-azul,
body.page-nosotros #fopesa-cta-clasico-azul *{
box-sizing: border-box;
}
body.page-nosotros #fopesa-cta-clasico-azul a{
color: inherit;
text-decoration: none;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-dark);
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta{
width: 100%;
min-height: 360px;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta h2{
margin: 0;
font-family: var(--font-main);
font-weight: 800;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta p{
margin: 0;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-inner{
width: min(1440px, 100%);
margin: 0 auto;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 28px;
border: 1px solid transparent;
font-size: var(--text-small);
font-weight: 900;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-btn:hover{
transform: translateY(-2px);
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-btn-light{
background: var(--color-white);
color: var(--color-dark);
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-btn-light:hover{
background: var(--color-dark);
color: var(--color-white);
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic{
padding: 96px 42px;
background: var(--color-key);
color: var(--color-white);
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-inner{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 42px;
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 h2{
max-width: 820px;
color: var(--color-white);
font-size: clamp(40px, 6vw, 72px);
line-height: .98;
letter-spacing: -.065em;
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 p{
margin-top: 18px;
max-width: 620px;
font-size: 18px;
line-height: 1.7;
}
@media (max-width: 900px){
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic{
padding: 72px 28px;
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-inner{
grid-template-columns: 1fr;
gap: 28px;
}
}
@media (max-width: 720px){
body.page-nosotros #fopesa-cta-clasico-azul .cta-real .cta-btn{
width: 100%;
}
body.page-nosotros #fopesa-cta-clasico-azul #CTA-DEMO-01 .cta-classic{
padding: 64px 18px;
}
}
body.page-nosotros .card{
padding:var(--space-content);
border:1px solid var(--color-line);
}
body.page-nosotros .button,
body.page-nosotros button[data-ui="button"]{
cursor:pointer;
transition:transform .24s ease,box-shadow .24s ease,background .24s ease,color .24s ease,border-color .24s ease;
}
body.page-nosotros input:focus,
body.page-nosotros select:focus,
body.page-nosotros textarea:focus{
border-color:var(--color-key);
}
body.page-nosotros .about-square-label,
body.page-nosotros .about-contained-label,
body.page-nosotros .fopesa-equipo-label,
body.page-nosotros .fopesa-procesos-label{
color:var(--color-key) !important;
}
body.page-nosotros .about-contained-copy h3,
body.page-nosotros .fopesa-equipo-copy h2,
body.page-nosotros #fopesa-procesos-horizontal h2{
color:var(--color-dark) !important;
}
body.page-nosotros #fopesaNosotrosText h1{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h1) !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.06em !important;
}
body.page-nosotros #fopesaHeroVideoScreen video,
body.page-nosotros #fopesa-rs-video-screen iframe{
width:100% !important;
height:100% !important;
display:block !important;
border:0 !important;
}
body.page-nosotros #fopesaHeroVideoScreen video{
object-fit:cover !important;
object-position:center center !important;
}
body.page-nosotros #fopesaHeroVideoScreen::before,
body.page-nosotros #fopesaHeroVideoScreen::after,
body.page-nosotros #fopesa-rs-video-screen::before,
body.page-nosotros #fopesa-rs-video-screen::after{
content:none !important;
display:none !important;
background:none !important;
}
body.page-nosotros #fopesa-rs-video-screen iframe{
width:100% !important;
height:100% !important;
border:0 !important;
display:block !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo,
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo.is-wide{
aspect-ratio:16 / 10 !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::before{
background:
linear-gradient(180deg, rgba(20,42,92,0) 54%, rgba(20,42,92,.46) 100%),
var(--equipo-img) !important;
background-size:cover !important;
background-position:center center !important;
}
body.page-nosotros [class*="title"],
body.page-nosotros [class*="heading"]{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
}
body.page-nosotros span,
body.page-nosotros li,
body.page-nosotros label,
body.page-nosotros .card{
font-family:var(--font-secondary) !important;
}
body.page-nosotros [class*="label"],
body.page-nosotros [class*="eyebrow"],
body.page-nosotros [class*="kicker"],
body.page-nosotros [class*="tag"],
body.page-nosotros [class*="badge"]{
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
}
body.page-nosotros .button,
body.page-nosotros button[data-ui="button"]{
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-key) !important;
border-radius:var(--radius-button) !important;
background:var(--color-key) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
}
body.page-nosotros .button:hover,
body.page-nosotros button[data-ui="button"]:hover{
transform:translateY(-3px) !important;
background:var(--color-dark) !important;
color:var(--color-white) !important;
border-color:var(--color-dark) !important;
}
body.page-nosotros .card{
border-color:var(--color-line) !important;
border-radius:var(--radius-card) !important;
background:var(--color-white) !important;
color:var(--color-dark) !important;
}
body.page-nosotros #fopesa-valores-carousel{
--color-dark:#204393 !important;
--color-key:#EF7701 !important;
--color-support:#63B246 !important;
--color-light:#FDEFE1 !important;
--color-white:#FFFFFF !important;
--color-muted:#6C83B8 !important;
--color-line:#E0E5F0 !important;
--font-main:var(--font-secondary) !important;
--font-secondary:var(--font-secondary) !important;
}
body.page-nosotros #fopesa-equipo-scroll{
--equipo-dark:#204393 !important;
--equipo-light:#FDEFE1 !important;
--equipo-white:#FFFFFF !important;
--equipo-muted:#6C83B8 !important;
--equipo-line:#E0E5F0 !important;
--equipo-accent:#EF7701 !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-label{
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-micro) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy p{
color:var(--color-muted) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-body) !important;
line-height:1.7 !important;
font-weight:var(--weight-regular) !important;
}
body.page-nosotros #fopesa-valores-carousel .carousel-name{
position:absolute !important;
top:42px !important;
left:42px !important;
z-index:50 !important;
margin:0 !important;
padding:0 !important;
min-height:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
text-transform:none !important;
backdrop-filter:none !important;
}
body.page-nosotros #fopesa-valores-carousel .card,
body.page-nosotros #fopesa-valores-carousel [class*="card"]{
border-radius:var(--radius-card) !important;
}
body.page-nosotros #stats-counters-secciones .tray-counter,
body.page-nosotros #stats-counters-secciones strong{
font-family:var(--font-primary) !important;
font-size:var(--type-stats) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-rs-video-screen video{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:center center !important;
border:0 !important;
}
body.page-nosotros #fopesa-rs-video-screen,
body.page-nosotros #fopesa-rs-video-target{
background:transparent !important;
box-shadow:none !important;
}
body.page-nosotros #fopesa-rs-video-screen{
background-image:none !important;
background-color:transparent !important;
}
body.page-nosotros #fopesa-rs-video-screen video{
background:transparent !important;
}
body.page-nosotros #fopesaHeroVideoScreen{background:transparent !important; box-shadow:none !important;}
body.page-nosotros #fopesaHeroNosotrosTarget{background:transparent !important; box-shadow:none !important;}
body.page-nosotros #fopesa-rs-video-target{background:transparent !important; box-shadow:none !important;}
body.page-nosotros #fopesaHeroVideoScreen::before,
body.page-nosotros #fopesaHeroVideoScreen::after{content:none !important; display:none !important;}
body.page-nosotros #fopesaNosotrosText h1{line-height:1.08 !important;}
body.page-nosotros #stats-counters-secciones .tray-section{background:var(--color-dark) !important;}
body.page-nosotros #stats-counters-secciones .tray-grid article,
body.page-nosotros #stats-counters-secciones .tray-counter,
body.page-nosotros #stats-counters-secciones .tray-grid span,
body.page-nosotros #stats-counters-secciones .tray-grid p{color:#FFFFFF !important;}
body.page-nosotros #stats-counters-secciones .tray-grid span{display:none !important;}
body.page-nosotros #fopesa-valores-carousel .card-kicker{background:var(--color-key) !important; border-color:var(--color-key) !important; color:#FFFFFF !important;}
body.page-nosotros #fopesa-valores-carousel .card-visual{display:flex; align-items:center; justify-content:center;}
body.page-nosotros #fopesa-valores-carousel .card-visual::after{display:none !important;}
body.page-nosotros #fopesa-valores-carousel .card-visual img{width:68%; height:68%; object-fit:contain !important;}
body.page-nosotros #fopesa-valores-carousel .card-content a{color:var(--color-key) !important; font-weight:700 !important;}
body.page-nosotros #fopesa-valores-carousel .card-content p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
body.page-nosotros .fopesa-valores-modal{position:fixed; inset:0; z-index:9999; display:none;}
body.page-nosotros .fopesa-valores-modal[aria-hidden="false"]{display:block;}
body.page-nosotros .fopesa-valores-modal-backdrop{position:absolute; inset:0; background:rgba(20,42,92,.58);}
body.page-nosotros .fopesa-valores-modal-dialog{position:relative; width:min(92vw, 680px); margin:10vh auto 0; background:var(--color-dark); color:#FFFFFF; border-radius:20px; padding:36px 34px 30px; box-shadow:var(--shadow-5);}
body.page-nosotros .fopesa-valores-modal-close{position:absolute; top:12px; right:14px; border:0; background:transparent; color:#FFFFFF; font-size:32px; line-height:1; cursor:pointer;}
body.page-nosotros .fopesa-valores-modal-logo-wrap{width:320px; height:320px; display:flex; align-items:center; justify-content:center; background:var(--color-dark); border-radius:24px; margin-bottom:18px; overflow:hidden; max-width:100%;}
body.page-nosotros .fopesa-valores-modal-logo-wrap img{width:84%; height:84%; display:block; object-fit:contain; object-position:center; filter:none;}
body.page-nosotros #fopesaValoresModalTitle{color:#FFFFFF !important; margin-bottom:14px !important;}
body.page-nosotros #fopesaValoresModalText{color:rgba(255,255,255,.86) !important;}
body.page-nosotros #fopesa-valores-carousel .carousel-name{
display:block !important;
width:100% !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
justify-self:center !important;
align-self:center !important;
}
body.page-nosotros #fopesa-valores-carousel .card-visual img{
position:relative !important;
z-index:2 !important;
}
body.page-nosotros .about-square-label,
body.page-nosotros .about-contained-label,
body.page-nosotros .fopesa-equipo-label,
body.page-nosotros .fopesa-procesos-eyebrow,
body.page-nosotros .fopesa-procesos-label > div:first-child{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-height:24px !important;
margin:0 0 18px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
color:var(--color-key) !important;
font-family:var(--font-secondary) !important;
font-size:var(--type-micro) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
body.page-nosotros #fopesa-valores-carousel .card-kicker{
display:none !important;
}
body.page-nosotros #fopesa-valores-carousel .card-visual{
background:var(--color-dark) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-classic{
background:var(--color-dark) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul h2,
body.page-nosotros #fopesa-cta-clasico-azul h3{
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-btn{
background:var(--color-key) !important;
border-color:var(--color-key) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-btn:hover{
background:var(--color-white) !important;
border-color:var(--color-white) !important;
color:var(--color-dark) !important;
}
@media (max-width: 760px){
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions{
grid-template-columns:1fr;
}
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-inner{
display:grid !important;
align-items:start !important;
gap:0 !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-copy{
grid-column:1 !important;
padding-right:32px !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions{
display:contents !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
gap:18px !important;
padding-left:24px !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1){
grid-column:2 !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
grid-column:3 !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions .cta-btn{
width:max-content !important;
}
@media (max-width: 900px){
body.page-nosotros #fopesa-cta-clasico-azul .cta-inner{
gap:28px !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-copy,
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
grid-column:1 !important;
padding-left:0 !important;
padding-right:0 !important;
}
}
body.page-nosotros .button,
body.page-nosotros .cta-btn,
body.page-nosotros .about-contained-actions a,
body.page-nosotros button[data-ui="button"],
body.page-nosotros #fopesa-valores-carousel .card-content a{
border-radius:var(--radius-button) !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::after,
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo [class*="title"],
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo [class*="label"]{
content:none !important;
display:none !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article h3{
font-size:var(--type-h5) !important;
line-height:1.12 !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions .cta-btn{
border-radius:var(--radius-button) !important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-year,
body.page-nosotros #fopesa-historia-demo .tabs_left h2,
body.page-nosotros #fopesa-historia-demo .tabs_let-content h2{
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-procesos-horizontal{
background:var(--color-dark) !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky{
background:var(--color-dark) !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label h2,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label p{
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-eyebrow{
color:var(--color-key) !important;
}
body.page-nosotros #icon-cards-02 .icon-card:hover h3,
body.page-nosotros #icon-cards-02 .icon-card:hover p,
body.page-nosotros #icon-cards-02 .icon-card:hover .icon-card-icon{
color:var(--color-white) !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
line-height:1 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy p{
margin-top:18px !important;
color:var(--color-muted) !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-actions{
margin-top:26px !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .fopesa-computrabajo-btn{
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-support) !important;
border-radius:var(--radius-button) !important;
background:var(--color-support) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .fopesa-computrabajo-btn:hover{
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-procesos-horizontal,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel{
background:var(--color-dark) !important;
background-image:none !important;
box-shadow:none !important;
}
body.page-nosotros #fopesa-procesos-horizontal::before,
body.page-nosotros #fopesa-procesos-horizontal::after,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky::before,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky::after,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label::before,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label::after,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track::before,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track::after,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel::before,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel::after{
content:none !important;
display:none !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label h2,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label p{
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label{
width:min(1440px, 100%) !important;
max-width:none !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label p{
max-width:100% !important;
width:100% !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .cta-inner{
grid-template-columns:56% 21% 21% !important;
column-gap:1% !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article{
padding:24px !important;
border:1px solid var(--color-line) !important;
border-radius:var(--radius-card) !important;
background:var(--color-white) !important;
color:var(--color-dark) !important;
transition:background .24s ease, border-color .24s ease, color .24s ease, transform .24s ease !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article h3{
color:var(--color-dark) !important;
transition:color .24s ease !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:hover{
background:var(--color-key) !important;
border-color:var(--color-key) !important;
color:var(--color-white) !important;
transform:translateY(-3px) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:hover h3{
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article .cta-btn{
width:max-content !important;
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-key) !important;
border-radius:var(--radius-button) !important;
background:var(--color-key) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
transition:transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article .cta-btn:hover{
transform:translateY(-3px) !important;
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:hover .cta-btn{
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:hover .cta-btn:hover{
background:var(--color-white) !important;
border-color:var(--color-white) !important;
color:var(--color-dark) !important;
}
@media (max-width: 900px){
body.page-nosotros #fopesa-cta-clasico-azul .cta-inner{
grid-template-columns:1fr !important;
row-gap:24px !important;
}
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::before,
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::after{
border-radius:inherit !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
border-radius:var(--radius-card) !important;
background-clip:padding-box !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left::before,
body.page-nosotros #fopesa-historia-demo .tabs_left::after{
border-radius:inherit !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left-top{
border-radius:inherit !important;
}
body.page-nosotros #icon-cards-02 .icon-card{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
body.page-nosotros #icon-cards-02 .icon-card-icon{
width:72px !important;
height:72px !important;
border-radius:var(--radius-card) !important;
background:var(--color-dark) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--color-white) !important;
overflow:hidden !important;
transition:background .24s ease, color .24s ease, transform .24s ease !important;
}
body.page-nosotros #icon-cards-02 .icon-card:hover .icon-card-icon{
background:var(--color-white) !important;
color:var(--color-dark) !important;
}
body.page-nosotros #icon-cards-02 .icon-card-img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
display:block !important;
}
body.page-nosotros #icon-cards-02 .icon-card-img-active{
display:none !important;
}
body.page-nosotros #icon-cards-02 .icon-card:hover .icon-card-img-inactive{
display:none !important;
}
body.page-nosotros #icon-cards-02 .icon-card:hover .icon-card-img-active{
display:block !important;
}
body.page-nosotros #icon-cards-02 .icon-card p + p{
margin-top:12px !important;
}
body.page-nosotros #icon-cards-02 .icon-card:hover h3,
body.page-nosotros #icon-cards-02 .icon-card:hover p{
color:var(--color-white) !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img{
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-equipo.webp") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.page-nosotros #fopesa-certificaciones{
background:var(--color-white) !important;
color:var(--color-dark) !important;
padding:96px 42px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-inner{
margin:0 auto !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
display:grid !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item img{
object-position:center !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title h2{
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h2) !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.055em !important;
}
@media (max-width: 760px){
body.page-nosotros #fopesa-certificaciones{
padding:72px 24px !important;
}
}
body.page-nosotros #fopesa-certificaciones{
padding-top:16px !important;
padding-bottom:16px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item{
min-height:0 !important;
height:auto !important;
padding:0 !important;
line-height:0 !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item img{
width:auto !important;
height:auto !important;
max-width:100% !important;
max-height:none !important;
object-fit:contain !important;
display:block !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title h2{
margin:0 !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel img{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.vertical{
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-03.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(2){
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-01.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(3){
background-image:url("../images-fopesa/fopesa-trabaja-con-nosotros-personal-02.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img::before,
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img::after{
background-image:none !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img{
border-radius:var(--radius-card) !important;
overflow:hidden !important;
background-clip:padding-box !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img::before,
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img::after{
border-radius:inherit !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
left:auto !important;
right:clamp(1.25rem, 5vw, 6rem) !important;
top:50% !important;
transform:translateY(-50%) !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content .fopesa-history-year,
body.page-nosotros #fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
text-align:right !important;
margin-left:auto !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content .tabs_line{
margin-left:auto !important;
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_let-content,
body.page-nosotros #fopesa-historia-demo .tabs_let-content .fopesa-history-year,
body.page-nosotros #fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
text-align:left !important;
align-items:flex-start !important;
margin-left:0 !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content .tabs_line{
margin-left:0 !important;
}
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-inner{
width:min(1280px, 100%) !important;
max-width:1280px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:1fr 1fr 1fr 2fr !important;
gap:36px !important;
align-items:center !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title{
min-width:380px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title h2{
max-width:460px !important;
width:460px !important;
white-space:normal !important;
line-height:.95 !important;
}
@media (max-width: 1180px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title{
min-width:0 !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title h2{
width:auto !important;
max-width:460px !important;
}
}
@media (max-width: 1024px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-columns:1fr !important;
}
}
body.page-nosotros #fopesa-equipo-scroll{
min-height:230svh !important;
}
body.page-nosotros #fopesaHeroVideoScreen,
body.page-nosotros #fopesa-rs-video-screen{
overflow:hidden !important;
}
body.page-nosotros #fopesaHeroVideoScreen video,
body.page-nosotros #fopesaHeroVideoScreen img,
body.page-nosotros #fopesa-rs-video-screen video,
body.page-nosotros #fopesa-rs-video-screen img,
body.page-nosotros #fopesa-rs-video-screen iframe{
border-radius:inherit !important;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
--fopesa-v2-distance: 320vh;
position:relative;
height:calc(100svh + var(--fopesa-v2-distance));
min-height:100svh;
overflow:visible;
background:#FFFFFF;
color:#142A5C;
isolation:isolate;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-sticky{
position:sticky;
top:0;
width:100%;
height:100svh;
min-height:620px;
overflow:hidden;
background:#FFFFFF;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-wrap{
position:absolute;
inset:0;
z-index:6;
overflow:hidden;
pointer-events:none;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen{
position:absolute;
inset:auto;
left:50%;
top:50%;
width:max(100vw,177.7778svh);
height:auto;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:0;
transform:translate(-50%,-50%);
transform-origin:center center;
will-change:left,top,width,height,border-radius,box-shadow;
background:#142A5C;
box-shadow:none;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen video{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg,rgba(20,42,92,.08),rgba(20,42,92,.05) 48%,rgba(20,42,92,.42));
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
position:absolute;
z-index:20;
left:7vw;
top:50%;
bottom:auto;
width:min(54vw,840px);
max-width:none;
opacity:0;
transform:translateY(calc(-50% + 22px));
pointer-events:auto;
will-change:opacity,transform;
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-eyebrow{
margin-bottom:10px;
font-size:11px;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy h1{
margin:0;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h1) !important;
line-height:.96 !important;
font-weight:var(--weight-black) !important;
letter-spacing:-.06em !important;
text-transform:none;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy p{
max-width:800px;
margin:12px 0 0;
color:rgba(20,42,92,.72);
font-size:clamp(13px,.95vw,16px);
line-height:1.42;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-details{
margin-top:clamp(18px,2.4vh,28px);
border-top:1px solid rgba(32,67,147,.22);
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row{
display:grid;
grid-template-columns:minmax(145px,180px) minmax(0,1fr);
gap:clamp(18px,2.2vw,32px);
align-items:start;
padding:clamp(12px,1.7vh,18px) 0;
border-bottom:1px solid rgba(32,67,147,.22);
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row h2{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-card, 20px) !important;
line-height:1.2 !important;
font-weight:var(--weight-bold) !important;
letter-spacing:-.02em !important;
text-transform:none !important;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row p{
max-width:none;
margin:0;
color:rgba(20,42,92,.72);
font-size:clamp(12px,.78vw,14px);
line-height:1.45;
}
@media (max-width:860px){
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
--fopesa-v2-distance:280vh;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-sticky{
min-height:560px;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
left:7vw;
right:7vw;
top:auto;
bottom:7vh;
width:auto;
max-width:86vw;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy h1{
font-size:var(--type-h1) !important;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-copy{
max-height:calc(100svh - 92px);
overflow-y:auto;
padding-right:5px;
scrollbar-width:thin;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-details{
margin-top:16px;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row{
grid-template-columns:1fr;
gap:5px;
padding:10px 0;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row h2{
font-size:var(--type-card, 20px) !important;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-detail-row p{
font-size:12px;
line-height:1.38;
}
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado){
height:100svh;
}
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen{
transform:none !important;
border-radius:0 !important;
box-shadow:none !important;
}
}
@media (max-width:860px){
body.page-nosotros #fopesa-vision-mision-columns{
padding:48px 0 58px;
}
}
@media (min-width:861px){
body.page-nosotros #fopesa-vision-mision-columns{
--fopesa-vision-overlap:0px;
--fopesa-video-notch-left:100vw;
--fopesa-video-clearance:0px;
margin-top:calc(-1 * var(--fopesa-vision-overlap));
padding-top:20px;
background:transparent;
z-index:24;
isolation:isolate;
}
body.page-nosotros #fopesa-vision-mision-columns::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:#FFFFFF;
clip-path:polygon(
0 0,
var(--fopesa-video-notch-left) 0,
var(--fopesa-video-notch-left) var(--fopesa-video-clearance),
100% var(--fopesa-video-clearance),
100% 100%,
0 100%
);
}
}
@media (max-width: 900px){
body.page-nosotros p{
line-height:1.4 !important;
}
}
@media (max-width: 900px){
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-grid{
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:1px !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
min-width:0 !important;
text-align:center !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-counter{
display:block !important;
font-size:clamp(24px, 7vw, 40px) !important;
line-height:1 !important;
white-space:nowrap !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
font-size:clamp(10px, 2.8vw, 13px) !important;
line-height:1.15 !important;
overflow-wrap:anywhere !important;
}
}
@media (max-width: 420px){
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding-left:2px !important;
padding-right:2px !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-counter{
font-size:clamp(22px, 7vw, 30px) !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
font-size:10px !important;
}
}
@media (max-width: 900px){
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section{
padding:16px 10px !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding:15px 3px !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article p{
margin-top:4px !important;
}
}
@media (max-width: 420px){
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section{
padding-top:12px !important;
padding-bottom:12px !important;
}
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 article{
padding-top:12px !important;
padding-bottom:12px !important;
}
}
@media (max-width: 900px){
body.page-nosotros #fopesa-valores-carousel .card-visual{
border-radius: 16px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content{
padding: 16px 0 0 !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content h3{
font-size: 22px !important;
line-height: 1.06 !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content p{
margin-top: 10px !important;
font-size: 13px !important;
line-height: 1.38 !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content a{
margin-top: 14px !important;
font-size: 13px !important;
}
}
@media (max-width: 720px){
body.page-nosotros #fopesa-valores-carousel .card.pos-left-1{
transform: translate(-50%, -50%) translateX(-292px) translateY(18px) rotate(-8deg) scale(1) !important;
}
body.page-nosotros #fopesa-valores-carousel .card.pos-center{
transform: translate(-50%, -50%) translateX(0) translateY(-4px) rotate(0deg) scale(1) !important;
}
body.page-nosotros #fopesa-valores-carousel .card.pos-right-1{
transform: translate(-50%, -50%) translateX(292px) translateY(18px) rotate(8deg) scale(1) !important;
}
body.page-nosotros #fopesa-valores-carousel .arrow{
width: 48px !important;
height: 48px !important;
}
}
@media (max-width: 900px){
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-arrow{
top: 50% !important;
bottom: auto !important;
z-index: 60 !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev{
right: auto !important;
transform: translate(-50%, -50%) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next{
left: auto !important;
transform: translate(50%, -50%) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev:hover,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev.active{
transform: translate(-50%, -50%) scale(1.04) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next:hover,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next.active{
transform: translate(50%, -50%) scale(1.04) !important;
}
}
@media (max-width: 900px){
body.page-nosotros #fopesa-valores-carousel .carousel-name{
left:50% !important;
right:auto !important;
width:auto !important;
max-width:calc(100% - 32px) !important;
transform:translateX(-50%) !important;
text-align:center !important;
white-space:nowrap !important;
}
body.page-nosotros #fopesa-valores-carousel{
--card-w:min(72vw, 290px) !important;
--card-h:420px !important;
}
body.page-nosotros #fopesa-valores-carousel .carousel-wrap,
body.page-nosotros #fopesa-valores-carousel .track,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:475px !important;
min-height:475px !important;
}
body.page-nosotros #fopesa-valores-carousel .card{
padding:16px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-visual{
height:210px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content{
padding-top:14px !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(42vw, 170px)) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(42vw, 170px)) !important;
}
}
@media (max-width: 720px){
body.page-nosotros #fopesa-valores-carousel{
--card-w:min(70vw, 270px) !important;
--card-h:390px !important;
}
body.page-nosotros #fopesa-valores-carousel .carousel-wrap,
body.page-nosotros #fopesa-valores-carousel .track,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:445px !important;
min-height:445px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-visual{
height:190px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content h3{
font-size:19px !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(42vw, 155px)) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(42vw, 155px)) !important;
}
}
@media (max-width: 480px){
body.page-nosotros #fopesa-valores-carousel{
--card-w:min(68vw, 250px) !important;
--card-h:365px !important;
}
body.page-nosotros #fopesa-valores-carousel .carousel-wrap,
body.page-nosotros #fopesa-valores-carousel .track,
body.page-nosotros #fopesa-valores-carousel .scene-v2 .carousel-wrap{
height:420px !important;
min-height:420px !important;
}
body.page-nosotros #fopesa-valores-carousel .card{
padding:14px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-visual{
height:174px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content h3{
font-size:18px !important;
}
body.page-nosotros #fopesa-valores-carousel .card-content p{
font-size:12px !important;
line-height:1.34 !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-prev{
left:calc(50% - min(43vw, 145px)) !important;
}
body.page-nosotros #fopesa-valores-carousel .scene-v2 .side-next{
right:calc(50% - min(43vw, 145px)) !important;
}
}
@media (max-width: 900px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-eyebrow{
display:none !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-copy p{
color:rgba(20,42,92,.72) !important;
font-family:var(--font-primary) !important;
font-size:15px !important;
font-style:normal !important;
font-weight:400 !important;
line-height:1.4 !important;
letter-spacing:normal !important;
text-align:left !important;
text-transform:none !important;
}
}
@media (max-width: 900px){
body.page-nosotros .fopesa-valores-modal-dialog{
margin-top:calc(10vh + 20px) !important;
}
body.page-nosotros .fopesa-valores-modal-logo-wrap{
width:min(320px, 100%) !important;
height:clamp(190px, 52vw, 220px) !important;
margin-bottom:12px !important;
}
body.page-nosotros .fopesa-valores-modal-logo-wrap img{
width:84% !important;
height:88% !important;
object-fit:contain !important;
}
}
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
box-sizing:border-box !important;
padding:28px !important;
}
@media (max-width:900px){
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(1),
body.page-nosotros #fopesa-cta-clasico-azul .fopesa-politica-actions article:nth-child(2){
padding:24px !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_left-top,
body.page-nosotros #fopesa-historia-demo .tabs_let-content,
body.page-nosotros #fopesa-historia-demo .tabs_let-content.is-active{
max-height:none !important;
overflow:visible !important;
touch-action:pan-y !important;
}
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track{
top:64% !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-cert-title-mobile{
display:none;
}
@media (max-width:900px){
body.page-nosotros #fopesa-certificaciones{
padding:24px 14px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-inner{
width:100% !important;
max-width:100% !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
display:grid !important;
gap:16px 10px !important;
align-items:center !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title{
min-width:0 !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title h2{
width:100% !important;
max-width:none !important;
margin:0 !important;
text-align:center !important;
line-height:1 !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-cert-title-desktop{
display:none !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-cert-title-mobile{
display:block !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item{
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
}
@media (max-width:480px){
body.page-nosotros #fopesa-certificaciones{
padding-left:10px !important;
padding-right:10px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
gap:14px 6px !important;
}
}
@media (max-width:480px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:124px !important;
max-height:100px !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item{
width:100% !important;
min-width:0 !important;
padding:0 !important;
overflow:visible !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:none !important;
max-height:none !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}
}
@media (max-width: 720px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-grid{
width:100% !important;
min-height:0 !important;
aspect-ratio:1 / 1 !important;
display:grid !important;
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
gap:8px !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.vertical{
grid-column:1 !important;
grid-row:1 / span 2 !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
aspect-ratio:auto !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.square{
grid-column:2 !important;
min-width:0 !important;
min-height:0 !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(2){
grid-row:1 !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img.square:nth-of-type(3){
grid-row:2 !important;
}
}
@media (max-width:900px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-inner{
display:flex !important;
flex-direction:column !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-grid{
order:1 !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-content{
order:2 !important;
width:100% !important;
padding-top:28px !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-copy{
display:flex !important;
flex-direction:column !important;
width:100% !important;
}
body.page-nosotros #seccion-nosotros-gallery-01 .about-contained-actions{
order:99 !important;
width:100% !important;
}
}
@media (max-width:900px){
body.page-nosotros #seccion-nosotros-gallery-01 .about-gallery-img{
box-shadow:none !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-certificaciones{
padding-left:7vw !important;
padding-right:7vw !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
width:100% !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
column-gap:6px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item,
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item img{
width:100% !important;
max-width:none !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-grid{
grid-template-rows:auto auto !important;
row-gap:16px !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificacion-item{
grid-row:1 !important;
}
body.page-nosotros #fopesa-certificaciones .fopesa-certificaciones-title{
grid-column:1 / -1 !important;
grid-row:2 !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_sticky-wrapper,
body.page-nosotros #fopesa-historia-demo .tabs_container,
body.page-nosotros #fopesa-historia-demo .tabs_component{
background:#142A5C !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_right{
position:absolute !important;
top:calc(var(--header) + 24px) !important;
bottom:auto !important;
z-index:2 !important;
background:#142A5C !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
position:absolute !important;
inset:0 !important;
}
body.page-nosotros #fopesa-historia-demo .w-background-video > video,
body.page-nosotros #fopesa-historia-demo .tabs_video video{
position:absolute !important;
inset:0 !important;
object-position:center center !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
z-index:8 !important;
}
}
body.page-nosotros #stats-counters-secciones,
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01,
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-section,
body.page-nosotros #stats-counters-secciones #DEMO-TRAYECTORIA-01 .tray-grid article{
background:#204393 !important;
}
body.page-nosotros main button:not(.fopesa-carousel-arrow){
text-transform:uppercase !important;
}
@media (max-width:900px){
body.page-nosotros html.fopesa-mobile-menu-open body{
overflow:hidden !important;
overscroll-behavior:none !important;
}
}
body.page-nosotros #fopesa-historia-demo .tabs_left{
height:auto!important;
min-height:auto!important;
max-height:calc(100svh - 6rem)!important;
overflow:visible!important;
padding:clamp(1.45rem,2.4vw,2.55rem)!important;
background:rgba(20,42,92,.72)!important;
box-shadow:var(--shadow-4) !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left-top{
height:auto!important;
min-height:0!important;
max-height:none!important;
position:relative!important;
display:block!important;
overflow:visible!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content{
position:absolute!important;
inset:0 auto auto 0!important;
width:100%!important;
height:auto!important;
min-height:0!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateY(10px)!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:flex-start!important;
text-align:left!important;
gap:clamp(.8rem,1.15vw,1.25rem)!important;
padding:0!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content.is-active{
position:relative!important;
inset:auto!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateY(0)!important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-year{
margin:0!important;
font-size:clamp(2.25rem,4.1vw,4.75rem)!important;
line-height:.95!important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-copy{
margin:0!important;
max-width:62ch!important;
font-size:clamp(.92rem,.96vw,1.05rem)!important;
line-height:1.55!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress{
height:8px!important;
}
body.page-nosotros #fopesa-historia-demo .tabs_progress-fill{
display:block!important;
width:100%!important;
height:100%!important;
min-width:100%!important;
transform:scaleX(0);
transform-origin:left center;
will-change:transform;
}
body.page-nosotros #fopesa-procesos-horizontal{
--procesos-bg:#142A5C;
--procesos-ink:#FDEFE1;
--procesos-line:rgba(253,239,225,.14);
min-height:calc(100svh + var(--fopesa-procesos-distance, 1800px));
position:relative;
overflow:visible;
background:var(--procesos-bg);
color:var(--procesos-ink);
isolation:isolate;
}
body.page-nosotros #fopesa-procesos-horizontal,
body.page-nosotros #fopesa-procesos-horizontal *{
box-sizing:border-box;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky{
position:sticky;
top:0;
width:100%;
height:100svh;
min-height:620px;
overflow:hidden;
background:var(--procesos-bg);
isolation:isolate;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background-size:auto, auto, 72px 72px, 72px 72px;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label{
position:absolute;
z-index:4;
top:8vh;
left:7vw;
max-width:min(760px, 76vw);
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-eyebrow{
color:var(--procesos-gold);
font-size:12px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
margin-bottom:12px;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label h2{
margin:0;
color:var(--procesos-ink);
font-family:Inter, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(34px,4.6vw,64px);
line-height:1.05;
letter-spacing:-.045em;
text-transform:none;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label p{
margin:20px 0 0;
max-width:560px;
color:var(--procesos-soft);
font-size:clamp(16px,1.25vw,20px);
line-height:1.45;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track{
position:absolute;
z-index:3;
left:0;
top:58%;
transform:translateY(-50%);
display:flex;
gap:24px;
padding:0 8vw;
width:max-content;
will-change:transform;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel{
flex:0 0 min(82vw, 1040px);
height:62vh;
border:1px solid var(--procesos-line);
display:flex;
position:relative;
overflow:hidden;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel::before{
content:"";
position:absolute;
width:52%;
aspect-ratio:1;
top:12%;
right:7%;
border-radius:50%;
filter:blur(14px);
opacity:.58;
background:radial-gradient(circle,var(--procesos-gold),transparent 68%);
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel{
padding:0;
align-items:stretch;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel::before{
display:none;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(2)::before{background:radial-gradient(circle,var(--procesos-blue),transparent 68%);}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(3)::before{background:radial-gradient(circle,var(--procesos-violet),transparent 68%);}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel:nth-child(4)::before{background:radial-gradient(circle,var(--procesos-green),transparent 68%);}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel b{
position:relative;
z-index:2;
color:var(--procesos-ink);
font-family:Inter, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(52px,9vw,150px);
line-height:.76;
letter-spacing:-.1em;
text-transform:uppercase;
}
@media (max-width:860px){
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-sticky{min-height:560px;}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label{left:7vw;right:7vw;top:7vh;}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label h2{font-size:clamp(32px,10vw,52px);line-height:1.05;}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-panel{height:56vh;}
}
body.page-nosotros body #fopesa-historia-demo{
--green:var(--color-key) !important;
--dark-green:var(--color-dark) !important;
}
body.page-nosotros body #fopesa-historia-demo .tabs_progress{
background:var(--color-dark) !important;
background-color:var(--color-dark) !important;
box-shadow:var(--shadow-3) !important;
}
body.page-nosotros body #fopesa-historia-demo .tabs_progress-fill{
background:linear-gradient(90deg, var(--color-dark) 0%, var(--color-key) 100%) !important;
background-color:var(--color-key) !important;
background-image:linear-gradient(90deg, var(--color-dark) 0%, var(--color-key) 100%) !important;
}
body.page-nosotros *{
font-family:var(--font-primary) !important;
}
@media (max-width:900px){
body.page-nosotros [class*="card-title"],
body.page-nosotros [class*="card__title"]{
font-size:var(--type-card) !important;
}
}
@media (max-width: 640px){
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-layout{
width:calc(100% - 32px) !important;
margin-inline:auto !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-visual{
width:100% !important;
height:82svh !important;
min-height:560px !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-columns{
inset:-14svh 0 !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
width:100% !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-col{
min-width:0 !important;
gap:10px !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-col:nth-child(3){
display:none !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo,
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo.is-wide{
width:100% !important;
aspect-ratio:4 / 3 !important;
}
}
@media (max-width: 980px){
body.page-nosotros #fopesa-equipo-scroll{
min-height:auto !important;
height:auto !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-sticky{
padding-top:72px !important;
padding-bottom:20px !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_left{
left:1rem !important;
right:1rem !important;
top:auto !important;
bottom:1.5rem !important;
transform:none !important;
width:auto !important;
height:fit-content !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
overflow-x:hidden !important;
overflow-y:hidden !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:auto !important;
touch-action:pan-y !important;
pointer-events:none !important;
padding:1rem !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left-top{
position:relative !important;
display:block !important;
width:100% !important;
height:fit-content !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
pointer-events:none !important;
touch-action:pan-y !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content{
position:absolute !important;
inset:0 auto auto 0 !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
pointer-events:none !important;
touch-action:pan-y !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content.is-active{
position:relative !important;
inset:auto !important;
display:flex !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content:not(.is-active){
opacity:0 !important;
visibility:hidden !important;
}
body.page-nosotros #fopesa-historia-demo .fopesa-history-year{
margin:0 !important;
font-size:clamp(2rem, 10vw, 2.75rem) !important;
line-height:.92 !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_let-content .fopesa-history-copy{
margin:0 !important;
font-size:14px !important;
line-height:1.38 !important;
max-width:none !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo,
body.page-nosotros #fopesa-historia-demo .section_tabs,
body.page-nosotros #fopesa-historia-demo .padding-section-large,
body.page-nosotros #fopesa-historia-demo .tabs_height,
body.page-nosotros #fopesa-historia-demo .tabs_sticky-wrapper,
body.page-nosotros #fopesa-historia-demo .tabs_container,
body.page-nosotros #fopesa-historia-demo .tabs_component{
touch-action:pan-y !important;
overscroll-behavior-y:auto !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_right,
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .tabs_video.is-active,
body.page-nosotros #fopesa-historia-demo .w-background-video,
body.page-nosotros #fopesa-historia-demo video,
body.page-nosotros #fopesa-historia-demo .tabs_progress,
body.page-nosotros #fopesa-historia-demo .tabs_progress-fill{
pointer-events:none !important;
touch-action:pan-y !important;
user-select:none !important;
-webkit-user-select:none !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_left,
body.page-nosotros #fopesa-historia-demo .tabs_left-top,
body.page-nosotros #fopesa-historia-demo .tabs_let-content,
body.page-nosotros #fopesa-historia-demo .tabs_let-content.is-active,
body.page-nosotros #fopesa-historia-demo .fopesa-history-year,
body.page-nosotros #fopesa-historia-demo .fopesa-history-copy{
pointer-events:none !important;
touch-action:pan-y !important;
overscroll-behavior:auto !important;
}
}
@media (max-width: 860px){
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track{
top:68% !important;
}
}
@media (max-width: 860px){
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label{
left:7vw !important;
right:7vw !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
box-sizing:border-box !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label h2,
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label p{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow-wrap:break-word !important;
word-break:normal !important;
box-sizing:border-box !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_right{
box-sizing:border-box !important;
margin:0 !important;
transform:none !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video,
body.page-nosotros #fopesa-historia-demo .w-background-video > video,
body.page-nosotros #fopesa-historia-demo .tabs_video video{
max-width:100% !important;
box-sizing:border-box !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_right{ /* 86vw × 9 / 16 */
min-height:0 !important;
max-height:none !important;
border-radius:18px !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
border-radius:inherit !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-historia-demo .w-background-video > video,
body.page-nosotros #fopesa-historia-demo .tabs_video video{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
border-radius:inherit !important;
object-fit:cover !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_right{
inset:calc(var(--header) + 24px) 5vw auto 5vw !important;
left:5vw !important;
right:5vw !important;
width:90vw !important;
max-width:90vw !important;
height:50.625vw !important; /* 90vw × 9 / 16 */
aspect-ratio:16 / 9 !important;
}
}
@media (min-width:901px){
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-label{
top:calc(8vh + 28px) !important;
}
body.page-nosotros #fopesa-procesos-horizontal .fopesa-procesos-track{
top:calc(64% + 28px) !important;
}
}
/* ============================================================
Nosotros · Visión y Misión · scrollytelling fijado
Recupera el comportamiento de las versiones anteriores:
primero asciende Visión, después Misión y la página solo
continúa cuando ambos bloques alcanzaron su posición final.
============================================================ */
body.page-nosotros #fopesa-vision-mision-columns{
--fopesa-vm-distance:190svh;
position:relative !important;
width:100% !important;
height:calc(100svh + var(--fopesa-vm-distance)) !important;
min-height:calc(100svh + 1320px) !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
background:#FFFFFF !important;
color:var(--color-dark) !important;
isolation:isolate !important;
z-index:24 !important;
}
body.page-nosotros #fopesa-vision-mision-columns::before{
display:none !important;
content:none !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column{
position:relative !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
opacity:1;
transform:none;
will-change:transform,opacity;
backface-visibility:hidden;
}
body.page-nosotros #fopesa-vision-mision-columns.is-fopesa-vm-scroll .fopesa-vision-mission-column{
opacity:0;
transform:translate3d(0,72vh,0);
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column h2{
margin:0 !important;
color:var(--color-dark) !important;
font-family:var(--font-primary) !important;
font-size:var(--type-h3,41px) !important;
line-height:1.08 !important;
font-weight:var(--weight-bold,700) !important;
letter-spacing:-.035em !important;
text-transform:none !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column p{
max-width:580px !important;
margin:16px 0 0 !important;
color:rgba(20,42,92,.72) !important;
font-family:var(--font-secondary,"Inter",system-ui,sans-serif) !important;
font-size:var(--type-body,16px) !important;
line-height:1.55 !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-vision-mision-columns{
--fopesa-vm-distance:210svh;
min-height:calc(100svh + 1280px) !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column + .fopesa-vision-mission-column{
padding-top:18px !important;
border-top:1px solid rgba(32,67,147,.22) !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column h2{
font-size:clamp(24px,7.4vw,34px) !important;
line-height:1.05 !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column p{
max-width:none !important;
margin-top:9px !important;
font-size:clamp(12px,3.45vw,14px) !important;
line-height:1.36 !important;
}
}
@media (max-width:420px) and (max-height:720px){
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column + .fopesa-vision-mission-column{
padding-top:12px !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column h2{
font-size:23px !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column p{
font-size:11.5px !important;
line-height:1.28 !important;
}
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros #fopesa-vision-mision-columns{
height:auto !important;
min-height:0 !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column{
opacity:1 !important;
transform:none !important;
}
}
/* Nosotros · Hero · alineación izquierda del bloque de presentación */
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-eyebrow{
display:block !important;
width:fit-content !important;
margin-left:0 !important;
margin-right:auto !important;
text-align:left !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy h1,
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy p{
text-align:left !important;
}
/* ============================================================
Nosotros · contenedores de contenido alineados a la izquierda
Ambos bloques comparten el mismo ancho máximo de 1440 px.
============================================================ */
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
left:50% !important;
right:auto !important;
width:min(calc(100% - 96px), 1440px) !important;
max-width:1440px !important;
text-align:left !important;
transform:translate(-50%, 0) !important;
box-sizing:border-box !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy p{
/* El ancho se limita dinámicamente para conservar 45 px libres antes del video. */
max-width:min(900px, var(--fopesa-hero-copy-safe-width, 900px)) !important;
margin-left:0 !important;
margin-right:0 !important;
}
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column,
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column h2,
body.page-nosotros #fopesa-vision-mision-columns .fopesa-vision-mission-column p{
text-align:left !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
width:calc(100% - 36px) !important;
max-width:none !important;
}
}
/* ============================================================
Nosotros · ajuste final del bloque de presentación del hero
============================================================ */
@media (min-width:861px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
/* Parte de la posición original del hero (40vh) y sube 20 px. */
top:calc(40vh - 20px) !important;
}
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-eyebrow{
margin-bottom:2px !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
/*
El video comparte los mismos límites laterales del bloque de texto.
El contenido se coloca después de su borde inferior real para evitar
cualquier superposición sin reducir el ancho disponible para el texto.
*/
top:var(--fopesa-hero-mobile-copy-top, 260px) !important;
bottom:auto !important;
max-height:calc(100svh - var(--fopesa-hero-mobile-copy-top, 260px) - 14px) !important;
transform:translate(-50%, 0) !important;
}
}
/* ===== Nosotros · Visión y Misión integradas en el hero ===== */
body.page-nosotros #fopesa-scroll-video-v2{
--fopesa-v2-distance:360vh !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
position:absolute !important;
left:0 !important;
top:calc(100% + clamp(18px,2.4vh,28px)) !important;
width:min(100%, var(--fopesa-hero-copy-safe-width, 900px)) !important;
max-width:900px !important;
margin:0 !important;
z-index:22 !important;
pointer-events:none !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row{
transform:translate3d(0,72px,0);
will-change:transform,opacity;
backface-visibility:hidden;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row h2,
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row p{
text-align:left !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2{
--fopesa-v2-distance:380vh !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
position:relative !important;
left:auto !important;
top:auto !important;
width:100% !important;
max-width:none !important;
margin-top:16px !important;
max-height:0;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row{
transform:translate3d(0,48px,0);
}
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
position:relative !important;
top:auto !important;
margin-top:clamp(18px,2.4vh,28px) !important;
max-height:none !important;
overflow:visible !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row{
opacity:1 !important;
transform:none !important;
}
}
/* ============================================================
Nosotros · secuencia final del hero
Contenido principal → línea → Visión → Misión
============================================================ */
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
--fopesa-vm-line-progress:0;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:clamp(28px,4vw,56px) !important;
row-gap:0 !important;
padding-top:clamp(18px,2.2vh,26px) !important;
border-top:0 !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:1px !important;
display:block !important;
background:rgba(32,67,147,.28) !important;
will-change:transform,opacity !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row{
display:block !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row h2{
margin:0 !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row p{
margin:10px 0 0 !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
grid-template-columns:1fr !important;
gap:18px !important;
padding-top:18px !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row + .fopesa-scroll-v2-detail-row{
padding-top:16px !important;
}
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
--fopesa-vm-line-progress:1 !important;
}
}
/* ============================================================
Nosotros · entrada por movimiento de línea, Visión y Misión
Sin fundidos: la línea entra desde la izquierda y las dos
columnas ascienden desde fuera de su área visible.
============================================================ */
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
--fopesa-vm-line-x:-105%;
/* En escritorio, los textos parten realmente desde debajo del viewport.
El sticky del hero recorta el contenido fuera de pantalla. */
overflow:visible !important;
clip-path:none !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
/* En responsive se conserva el colapso del bloque para no desplazar
anticipadamente el contenido principal. */
overflow:hidden !important;
clip-path:inset(0) !important;
}
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details::before{
transform:translate3d(var(--fopesa-vm-line-x),0,0) !important;
transform-origin:center !important;
opacity:1 !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-detail-row{
opacity:1 !important;
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-details{
--fopesa-vm-line-x:0% !important;
}
}
/* Vimeo: Responsabilidad Social e Historia */
body.page-nosotros :is(#fopesa-scroll-video-v2, #fopesa-scroll-video-v2-duplicado) .fopesa-scroll-v2-screen iframe{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
aspect-ratio:16 / 9;
border:0;
pointer-events:none;
}
body.page-nosotros #fopesa-historia-demo .tabs_video iframe{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
max-width:100%;
border:0;
border-radius:inherit;
pointer-events:none;
}
/* ============================================================
Nosotros · todos los videos Vimeo conservan 16:9
Responsabilidad Social se dimensiona desde JavaScript. En Historia,
el escenario de videos cubre el viewport con un marco 16:9 centrado.
============================================================ */
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-scroll-v2-screen{
aspect-ratio:16 / 9 !important;
}
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-scroll-v2-screen iframe,
body.page-nosotros #fopesa-historia-demo .tabs_video iframe{
width:100% !important;
height:100% !important;
aspect-ratio:16 / 9 !important;
border:0 !important;
display:block !important;
}
@media (min-width:901px){
body.page-nosotros #fopesa-historia-demo .tabs_right{
inset:auto !important;
left:50% !important;
top:50% !important;
right:auto !important;
bottom:auto !important;
width:max(100vw,177.7778svh) !important;
height:auto !important;
aspect-ratio:16 / 9 !important;
transform:translate(-50%,-50%) !important;
overflow:hidden !important;
}
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
width:100% !important;
height:100% !important;
aspect-ratio:16 / 9 !important;
}
}
@media (max-width:900px){
body.page-nosotros #fopesa-historia-demo .tabs_right,
body.page-nosotros #fopesa-historia-demo .tabs_video,
body.page-nosotros #fopesa-historia-demo .w-background-video{
aspect-ratio:16 / 9 !important;
}
}
/* ============================================================
Nosotros · ventana de lectura responsive del hero
Mantiene el video en su ancho actual y permite que Visión y Misión
entren completas dentro del espacio disponible debajo del video.
============================================================ */
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy-inner{
position:relative;
width:100%;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
height:calc(100svh - var(--fopesa-hero-mobile-copy-top, 260px) - 14px) !important;
max-height:none !important;
overflow:hidden !important;
padding-right:0 !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy-inner{
will-change:transform;
}
}
@media (prefers-reduced-motion:reduce){
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy{
height:auto !important;
overflow:visible !important;
}
body.page-nosotros #fopesa-scroll-video-v2 .fopesa-scroll-v2-copy-inner{
transform:none !important;
}
}
/* Familia FOPESA: imágenes HTML reales para carga estable */
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo > img{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
display:block !important;
opacity:1 !important;
visibility:visible !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:inherit !important;
}
body.page-nosotros #fopesa-equipo-scroll .fopesa-equipo-photo::before{
z-index:1 !important;
pointer-events:none !important;
background:linear-gradient(180deg, rgba(20,42,92,0) 54%, rgba(20,42,92,.46) 100%) !important;
}
/* Responsabilidad Social · botón alineado al sistema visual del sitio */
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-rs-actions{
margin-top:24px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-rs-youtube-btn{
min-height:44px !important;
padding:0 20px !important;
border:1px solid var(--color-key) !important;
border-radius:var(--radius-button) !important;
background:var(--color-key) !important;
color:var(--color-white) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:var(--font-main) !important;
font-size:var(--type-small) !important;
line-height:1 !important;
font-weight:var(--weight-medium) !important;
text-decoration:none !important;
transition:transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease !important;
}
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-rs-youtube-btn:hover{
transform:translateY(-3px) !important;
background:var(--color-dark) !important;
border-color:var(--color-dark) !important;
color:var(--color-white) !important;
}
@media (max-width:860px){
body.page-nosotros #fopesa-scroll-video-v2-duplicado .fopesa-rs-actions{
justify-content:center !important;
}
}
/* ============================================================
CONTACTANOS.HTML · página de contacto FOPESA
============================================================ */
body.page-contacto{
background:var(--color-light) !important;
}
body.page-contacto .fopesa-contact-page{
width:100%;
padding:96px 42px 112px;
background:var(--color-light);
}
body.page-contacto .fopesa-contact-shell{
width:min(1440px,100%);
margin:0 auto;
}
body.page-contacto .fopesa-contact-heading{
width:min(820px,100%);
margin:0 0 48px;
}
body.page-contacto .fopesa-contact-heading h1{
max-width:760px;
margin:0 0 20px;
color:var(--color-dark) !important;
}
body.page-contacto .fopesa-contact-heading > p{
max-width:690px;
color:rgba(32,67,147,.76);
font-size:18px !important;
line-height:1.7;
}
body.page-contacto .fopesa-contact-layout{
display:grid;
grid-template-columns:minmax(340px,.86fr) minmax(0,1.34fr);
gap:32px;
align-items:stretch;
}
body.page-contacto .fopesa-contact-card,
body.page-contacto .fopesa-contact-form-card{
min-width:0;
border-radius:var(--radius-card);
}
body.page-contacto .fopesa-contact-card{
display:flex;
flex-direction:column;
padding:48px;
background:var(--color-dark);
color:var(--color-white);
}
body.page-contacto .fopesa-contact-card h2{
margin:0 0 18px;
color:var(--color-white) !important;
}
body.page-contacto .fopesa-contact-card-intro{
max-width:440px;
margin:0 0 38px;
color:rgba(255,255,255,.76);
line-height:1.75;
}
body.page-contacto .fopesa-contact-data{
display:grid;
gap:8px;
}
body.page-contacto .fopesa-contact-data-item{
display:grid;
grid-template-columns:48px minmax(0,1fr);
gap:15px;
align-items:center;
min-height:72px;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.13);
color:var(--color-white);
}
body.page-contacto a.fopesa-contact-data-item{
transition:transform .22s ease,color .22s ease;
}
body.page-contacto a.fopesa-contact-data-item:hover{
transform:translateX(4px);
color:var(--color-white);
}
body.page-contacto .fopesa-contact-data-icon{
display:grid;
place-items:center;
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.1);
color:var(--color-white);
}
body.page-contacto .fopesa-contact-data-icon img,
body.page-contacto .fopesa-contact-data-icon svg{
display:block;
width:22px;
height:22px;
object-fit:contain;
filter:brightness(0) invert(1);
}
body.page-contacto .fopesa-contact-data-item > span:last-child{
display:grid;
gap:3px;
min-width:0;
}
body.page-contacto .fopesa-contact-data-item small{
color:rgba(255,255,255,.6);
font-size:var(--type-small);
line-height:1.3;
}
body.page-contacto .fopesa-contact-data-item strong{
color:var(--color-white);
font-size:15px;
font-weight:var(--weight-semibold);
line-height:1.45;
overflow-wrap:anywhere;
}
body.page-contacto .fopesa-contact-social{
margin-top:auto;
padding-top:38px;
}
body.page-contacto .fopesa-contact-social > span{
display:block;
margin-bottom:12px;
color:rgba(255,255,255,.64);
font-size:var(--type-small);
font-weight:var(--weight-semibold);
}
body.page-contacto .fopesa-contact-social-links{
display:flex;
flex-wrap:wrap;
gap:10px;
}
body.page-contacto .fopesa-contact-social-links a{
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.2);
border-radius:50%;
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
body.page-contacto .fopesa-contact-social-links a:hover{
transform:translateY(-3px);
background:var(--color-key);
border-color:var(--color-key);
}
body.page-contacto .fopesa-contact-social-links img{
width:18px;
height:18px;
object-fit:contain;
filter:brightness(0) invert(1);
}
body.page-contacto .fopesa-contact-form-card{
padding:48px;
background:var(--color-white);
box-shadow:0 24px 70px rgba(32,67,147,.13);
}
body.page-contacto .fopesa-contact-form-card h2{
margin:0 0 34px;
color:var(--color-dark) !important;
}
body.page-contacto .fopesa-contact-form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px 20px;
}
body.page-contacto .fopesa-contact-field{
display:grid;
gap:9px;
min-width:0;
}
body.page-contacto .fopesa-contact-field-full{
grid-column:1 / -1;
}
body.page-contacto .fopesa-contact-field label{
color:var(--color-dark);
font-size:13px;
font-weight:var(--weight-semibold);
line-height:1.35;
}
body.page-contacto .fopesa-contact-field input,
body.page-contacto .fopesa-contact-field textarea{
width:100%;
border:1px solid var(--color-line);
border-radius:14px;
outline:0;
background:#fff;
color:var(--color-dark);
font-size:15px;
line-height:1.45;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body.page-contacto .fopesa-contact-field input{
min-height:54px;
padding:0 17px;
}
body.page-contacto .fopesa-contact-field textarea{
min-height:148px;
padding:15px 17px;
resize:vertical;
}
body.page-contacto .fopesa-contact-field input::placeholder,
body.page-contacto .fopesa-contact-field textarea::placeholder{
color:#8e9abd;
opacity:1;
}
body.page-contacto .fopesa-contact-field input:focus,
body.page-contacto .fopesa-contact-field textarea:focus{
border-color:var(--color-key);
box-shadow:0 0 0 4px rgba(239,119,1,.1);
background:#fffdfb;
}
body.page-contacto .fopesa-contact-checkbox{
display:flex;
align-items:flex-start;
gap:11px;
margin:24px 0;
color:rgba(32,67,147,.8);
font-size:13px;
line-height:1.5;
cursor:pointer;
}
body.page-contacto .fopesa-contact-checkbox input{
flex:0 0 auto;
width:18px;
height:18px;
margin:1px 0 0;
accent-color:var(--color-key);
}
body.page-contacto .fopesa-contact-checkbox a{
color:var(--color-key);
font-weight:var(--weight-semibold);
text-decoration:underline;
text-underline-offset:3px;
}
body.page-contacto .fopesa-contact-form-status{
min-height:22px;
margin-top:14px;
color:var(--color-dark);
font-size:12px !important;
line-height:1.45;
}
@media (max-width:1100px){
body.page-contacto .fopesa-contact-page{
padding-left:28px;
padding-right:28px;
}
body.page-contacto .fopesa-contact-layout{
grid-template-columns:minmax(310px,.9fr) minmax(0,1.1fr);
gap:24px;
}
body.page-contacto .fopesa-contact-card,
body.page-contacto .fopesa-contact-form-card{
padding:38px;
}
}
@media (max-width:860px){
body.page-contacto .fopesa-contact-page{
padding-top:70px;
padding-bottom:84px;
}
body.page-contacto .fopesa-contact-heading{
margin-bottom:34px;
}
body.page-contacto .fopesa-contact-heading > p{
font-size:16px !important;
}
body.page-contacto .fopesa-contact-layout{
grid-template-columns:1fr;
}
body.page-contacto .fopesa-contact-card{
min-height:auto;
}
body.page-contacto .fopesa-contact-social{
margin-top:0;
}
}
@media (max-width:620px){
body.page-contacto .fopesa-contact-page{
padding:54px 18px 68px;
}
body.page-contacto .fopesa-contact-card,
body.page-contacto .fopesa-contact-form-card{
padding:28px 22px;
border-radius:18px;
}
body.page-contacto .fopesa-contact-form-grid{
grid-template-columns:1fr;
gap:18px;
}
body.page-contacto .fopesa-contact-field-full{
grid-column:auto;
}
body.page-contacto .fopesa-contact-data-item{
grid-template-columns:42px minmax(0,1fr);
gap:12px;
}
body.page-contacto .fopesa-contact-data-icon{
width:42px;
height:42px;
}
}
/* Footer: ancho útil real de 1440px, alineado con el header. */
#footer-01 .fopesa-footer-grid{
width:min(calc(100% - 96px), 1440px) !important;
max-width:1440px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
@media (max-width:1180px){
#footer-01 .fopesa-footer-grid{
width:min(calc(100% - 56px), 1440px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
@media (max-width:520px){
#footer-01 .fopesa-footer-grid{
width:calc(100% - 36px) !important;
max-width:1440px !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/* Home · botones reutilizan el sistema visual global aprobado en Nosotros */
#fopesa-linea-productos .fopesa-product-more.button,
#fopesa-impulsa-tu-marca .fopesa-impulsa-logo-button.button,
#fopesa-impulsa-tu-marca .fopesa-impulsa-more.button{
min-height:44px !important;
padding:0 20px !important;
}
/* Página Destaca tu marca: separación completa bajo el header fijo. */
.page-destaca-tu-marca #fopesa-impulsa-tu-marca {
top: 40px;
margin-bottom: 40px;
}
/* Iconos de navegación locales: conservan el color heredado de cada botón. */
.fopesa-arrow-glyph{
display:block;
width:22px;
height:22px;
background:currentColor;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:contain;
mask-size:contain;
}
.fopesa-carousel-arrow.is-prev .fopesa-arrow-glyph,
.side-arrow.side-prev .fopesa-arrow-glyph{
-webkit-mask-image:url("../images-fopesa/icono-flecha-izquierda.svg");
mask-image:url("../images-fopesa/icono-flecha-izquierda.svg");
}
.fopesa-carousel-arrow.is-next .fopesa-arrow-glyph,
.side-arrow.side-next .fopesa-arrow-glyph{
-webkit-mask-image:url("../images-fopesa/icono-flecha-derecha.svg");
mask-image:url("../images-fopesa/icono-flecha-derecha.svg");
}