/*
Theme Name: Event Template
Author: Emanuel Alderete & IDE Comunicación Digital
Theme URI: //ideconsultora.com.ar/
Description: Plantilla personalizada para eventos, desarrollada casi en su totalidad desde el código para un mayor control sobre cada componente de la web.
Version: 1.0
Template: twentytwenty
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Paleta editorial */
:root {
--primary-color: #11100F;
--secondary-color: #C8A66A;
--terciary-color: #F3E8D3;
--text-color: #FFFFFF;
--text-muted: #B8AEA0;
--surface-color: #24211E;
--border-color: rgba(200, 166, 106, 0.25);
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'DM Sans', sans-serif;
--container-width: 1440px;
--section-spacing: clamp(80px, 10vw, 160px);
--transition-default: 300ms ease;
--dark-color: var(--primary-color);
--dark-gray-color: var(--text-muted);
--gray-color: var(--text-muted);
--light-gray-color: var(--surface-color);
--light-color: var(--text-color);
--light-shadow: rgba(0, 0, 0, 0.28);
--transition: var(--transition-default);
--bold-font: 600;
--thin-font: 300;
--font-family-primary: var(--font-body);
--header-bg: var(--primary-color);
}
/* Declaraciones Generales */
html {
color-scheme: dark;
font-family: var(--font-body);
font-optical-sizing: auto;
font-size: 16px;
color: var(--text-color);
}
body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden;
background-color: var(--primary-color);
color: var(--text-color);
font-family: var(--font-body);
line-height: 1.7;
}
#header img,
#main img,
#footer img,
#main iframe,
#main video {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--terciary-color);
font-family: var(--font-heading);
font-weight: 500;
line-height: 0.98;
}
p {
max-width: 70ch;
color: var(--text-muted);
line-height: 1.75;
}
h1 {
font-size: clamp(3rem, 7vw, 7rem);
}
h2 {
font-size: clamp(2.5rem, 5vw, 5rem);
}
h3 {
font-size: clamp(2rem, 3.5vw, 3.5rem);
}
h4 {
font-size: clamp(1.45rem, 2.2vw, 2.1rem);
}
h5 {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}
h6 {
font-size: 1rem;
}
.title,
.home-title {
color: var(--terciary-color);
font-family: var(--font-heading);
font-weight: 500;
}
.home-title {
font-size: clamp(2.5rem, 5vw, 5rem);
}
a {
color: var(--secondary-color);
transition: color var(--transition-default);
}
a:hover {
color: var(--terciary-color);
}
/* Módulos reutilizables */
.buttons-center,
.buttons-left,
.buttons-right {
display: flex;
align-items: center;
margin: 1rem 0;
flex-wrap: wrap;
}
.buttons-left {
justify-content: flex-start;
}
.buttons-right {
justify-content: flex-end;
}
.buttons-center {
justify-content: center;
}
.buttons,
.buttons-primary,
.buttons-light,
.buttons-secondary,
.buttons-terciary {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 0.8rem 1.7rem;
border: 1px solid var(--secondary-color);
border-radius: 0;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-default), background-color var(--transition-default), border-color var(--transition-default);
}
.buttons-primary {
background-color: var(--secondary-color);
color: var(--primary-color);
border-color: var(--secondary-color);
&:hover {
background-color: transparent;
color: var(--secondary-color);
}
}
.buttons-light {
background-color: var(--terciary-color);
color: var(--primary-color);
border-color: var(--terciary-color);
&:hover {
background-color: transparent;
color: var(--terciary-color);
}
}
.buttons-secondary {
background-color: transparent;
color: var(--terciary-color);
&:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
}
.buttons-terciary {
background-color: var(--terciary-color);
color: var(--terciary-color);
border-color: var(--border-color);
&:hover {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
}
#header :where(a, button, input, select, textarea, [tabindex]):focus-visible,
#main :where(a, button, input, select, textarea, [tabindex]):focus-visible,
#footer :where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: 3px;
}
.light-separator,
.primary-separator,
.dark-separator {
margin: 2rem auto;
width: 100%;
max-width: 1200px;
height: 2px;
}
.light-separator {
background-color: var(--border-color);
}
.dark-separator {
background-color: var(--border-color);
}
.primary-separator {
background-color: var(--border-color);
}
/* Efectos */
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.primary-text {
color: var(--secondary-color);
}
.secondary-text {
color: var(--secondary-color);
}
.dark-gray-text {
color: var(--text-muted);
}
.light-gray-text {
color: var(--text-muted);
}
.disabled {
color: var(--text-muted) !important;
pointer-events: none;
cursor: not-allowed;
}
.width-restriction-400,
.width-restriction-600 {
margin: auto;
width: 100%;
}
.width-restriction-400 {
max-width: 400px;
}
.width-restriction-600 {
max-width: 600px;
}
/* Header */
#header {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
background-color: rgba(17, 16, 15, 0.96);
border-bottom: 1px solid var(--border-color);
box-shadow: none;
transition: background-color var(--transition-default);
.header__content {
width: 100%;
max-width: var(--container-width);
min-height: 108px;
padding: 0.9rem clamp(1.25rem, 4vw, 4rem);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: clamp(2rem, 6vw, 6rem);
}
}
.header__brand {
flex: 0 0 auto;
width: auto;
max-width: 160px;
a {
position: relative;
display: block;
}
.header__logo {
display: block;
width: 100%;
max-height: 80px;
object-fit: contain;
opacity: 1;
transition: opacity 1.2s ease, visibility 1.2s ease;
}
}
.header__menu {
display: flex;
flex: 0 1 auto;
justify-content: flex-end;
align-items: center;
min-width: 0;
}
.header-home .header__brand picture:nth-of-type(2) {
position: absolute;
inset: 0;
}
.header__logo.is-logo-hidden {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.main-menu {
list-style: none;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: clamp(0.7rem, 1.5vw, 1.75rem);
margin: 0;
li {
a,
button {
color: var(--text-color);
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.08em;
text-decoration: none;
border: none;
background-color: transparent;
transition: color var(--transition-default);
}
}
.menu-item {
margin: 0;
}
.menu-item::after {
content: '';
display: block;
width: 0;
height: 1px;
margin: 0 auto;
background-color: var(--secondary-color);
transition: width var(--transition-default);
}
.menu-item:hover::after {
width: 100%;
}
.main-menu__submenu {
position: relative;
ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 100%;
min-width: 220px;
padding: 0.65rem 0;
transition: opacity var(--transition-default), visibility var(--transition-default);
opacity: 0;
visibility: hidden;
pointer-events: none;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
width: max-content;
overflow: hidden;
.submenu-item {
a {
color: var(--text-muted);
padding: 0.65rem 1rem;
display: block;
text-decoration: none;
border: none;
background-color: transparent;
font-size: 0.76rem;
}
&:hover {
background-color: rgba(200, 166, 106, 0.08);
a {
color: var(--secondary-color);
}
}
}
}
&:hover {
ul {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
&:hover .menu-item::after {
width: 100%;
}
}
}
.header__highlight-button {
padding: 0;
a {
color: var(--primary-color);
padding: 0.8rem 1.35rem;
background-color: var(--secondary-color);
border: 1px solid var(--secondary-color);
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-default), background-color var(--transition-default);
&:hover {
background-color: transparent;
color: var(--secondary-color);
}
}
}
.header__highlight-button.desk {
a {
color: var(--primary-color);
}
}
.header__tickets {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 0.65rem;
min-height: 48px;
padding: 0.875rem 1.5rem;
border: 1px solid var(--secondary-color);
border-radius: 8px;
background-color: var(--secondary-color);
box-shadow: 0 4px 14px color-mix(in srgb, var(--secondary-color) 16%, transparent);
color: var(--primary-color);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1;
text-decoration: none;
transition: background-color var(--transition-default), box-shadow var(--transition-default), color var(--transition-default);
}
.header__tickets i {
transition: transform var(--transition-default);
}
.header__tickets:hover,
.header__tickets:focus-visible {
background-color: color-mix(in srgb, var(--secondary-color) 82%, white);
color: var(--primary-color);
box-shadow: 0 5px 16px color-mix(in srgb, var(--secondary-color) 20%, transparent);
}
.header__tickets:hover i,
.header__tickets:focus-visible i {
transform: translateX(3px);
}
.header__tickets--mobile {
display: none;
}
.header__tickets--desktop {
margin-left: clamp(1rem, 2vw, 2rem);
}
.header__mobile-button {
display: none;
flex: 0 0 auto;
button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--terciary-color);
font-size: 1.6rem;
border: none;
padding: 0.75rem;
}
}
.mobile-menu {
background-color: var(--surface-color);
color: var(--text-color);
font-family: var(--font-body);
.offcanvas-header {
border-bottom: 1px solid var(--border-color);
.mobile-menu__brand {
width: 100%;
max-width: 170px;
.mobile-menu__logo {
width: 100%;
max-height: 70px;
object-fit: contain;
}
}
}
.btn-close {
filter: invert(1);
}
.offcanvas-body {
.mobile-nav {
width: 100%;
list-style: none;
padding: 0;
.mobile-menu__submenu {
.accordion-item {
border: 0;
background-color: transparent;
}
.accordion-header {
margin: 0;
}
.accordion-button {
display: flex;
align-items: center;
width: 100%;
padding: 1rem 0;
border: 0;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
color: var(--terciary-color);
background-color: transparent;
box-shadow: none;
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 500;
}
.accordion-button:hover,
.accordion-button:focus,
.accordion-button:not(.collapsed) {
color: var(--terciary-color);
background-color: transparent;
box-shadow: none;
}
.accordion-button::after {
filter: invert(1);
}
.accordion-button::before {
content: '';
display: inline-block;
width: 0;
height: 1px;
background-color: var(--secondary-color);
transition: width var(--transition-default);
}
.accordion-button:hover::before {
width: 1rem;
margin-right: 0.7rem;
}
.accordion-button:not(.collapsed)::before {
width: 1rem;
margin-right: 0.7rem;
}
.accordion-body {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0.35rem 0 0.75rem;
background-color: transparent;
a {
text-decoration: none;
color: var(--text-muted);
font-size: 0.95rem;
padding: 0.5rem 1rem;
display: flex;
width: 100%;
align-items: center;
&:hover {
color: var(--secondary-color);
}
}
a::before {
content: '';
display: inline-block;
width: 0.75rem;
height: 1px;
background-color: var(--secondary-color);
margin-right: 0.75rem;
}
}
}
.mobile-menu__item {
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 1.1rem;
display: flex;
align-items: center;
a {
text-decoration: none;
color: var(--terciary-color);
}
}
.mobile-menu__item::before {
content: '';
display: inline-block;
width: 0;
height: 1px;
background-color: var(--secondary-color);
transition: width var(--transition-default);
}
.mobile-menu__item:hover::before {
width: 1rem;
margin-right: 0.7rem;
}
}
.header__tickets--mobile {
display: flex;
width: 100%;
margin-top: 1.25rem;
text-align: center;
}
}
}
/* Header [Scroll] */
.header--scroll {
background-color: rgba(17, 16, 15, 0.98) !important;
box-shadow: none;
}
.main-menu--scroll {
li {
a,
button {
color: var(--text-color);
}
}
}
/* Redes sociales: Fixed */
.c-social-media {
width: max-content;
position: fixed;
top: 50%;
right: 3.5rem;
transform: translateY(-50%) rotateZ(-90deg);
transform-origin: top right;
z-index: 8;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0;
padding: 0.3rem;
.c-social-media__content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.c-social-media__item {
color: var(--secondary-color);
font-size: 1.4em;
display: inline-block;
margin: 0.1rem 0;
transform: rotateZ(90deg);
width: 30px;
height: 30px;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
}
span {
color: var(--text-muted);
width: max-content;
white-space: nowrap;
font-weight: 600;
&::after {
content: '';
width: 20px;
height: 2px;
display: inline-block;
background-color: var(--secondary-color);
border-radius: 2px;
margin: 3px 5px 3px 10px;
}
}
}
}
/* Main */
#main {
width: 100%;
margin-inline: auto;
}
/* Sección: Hero */
#hero {
position: relative;
isolation: isolate;
width: 100%;
min-height: 0;
display: grid;
align-items: center;
padding-block: clamp(0.5rem, 1.2vw, 1rem);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--primary-color);
overflow: hidden;
&::before {
position: absolute;
z-index: 0;
inset: 0;
content: "";
background: linear-gradient(90deg, rgba(17, 16, 15, 0.68), rgba(17, 16, 15, 0.12) 75%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 1;
width: 100%;
min-height: 0;
display: block;
}
.n2-section-smartslider,
.n2-ss-slider {
width: 100%;
margin-block: 0 !important;
}
}
/* Sección: Contador del evento */
#countdown {
width: 100%;
margin: 0;
padding: var(--section-spacing) clamp(1.25rem, 5vw, 5rem);
background-color: var(--terciary-color);
.countdown__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: clamp(2rem, 5vw, 4rem);
border-block: 1px solid var(--secondary-color);
background-color: var(--primary-color);
text-align: center;
h1 {
margin-bottom: 1rem;
color: var(--terciary-color);
}
> p {
max-width: none;
margin: 1.5rem 0 0;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
a {
color: var(--secondary-color);
text-decoration: none;
}
.hurrytimer-campaign {
height: auto;
margin: 1.5rem 0;
transform: none;
.hurrytimer-timer {
.hurrytimer-timer-block {
min-width: 4.5rem;
padding: 0.5rem 0.75rem;
background-color: transparent;
margin: 0;
.hurrytimer-timer-digit {
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 500;
}
.hurrytimer-timer-label {
color: var(--text-muted);
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
}
.hurrytimer-timer-sep {
padding: 0 0.5rem;
color: var(--secondary-color);
background-color: transparent;
}
}
}
}
}
/* Sección: Postevento */
.postevent {
width: 100%;
margin: 4rem 0;
.postevent__content {
width: 100%;
padding: 0 2rem;
max-width: 1200px;
margin: 0 auto;
.postevent__inner {
width: 100%;
display: flex;
align-content: center;
justify-content: space-evenly;
gap: 15px;
.postevent__item {
width: 100%;
max-width: 200px;
border: 1px solid rgb(from var(--light-gray-color) r g b / 70%);
transition: var(--transition);
border-radius: 0;
padding: 0.5rem;
&:hover {
transform: scale(1.05);
box-shadow: 10px 10px 10px var(--light-shadow);
}
.postevent__icon {
width: 100%;
max-width: 90px;
margin: 0 auto 1rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
}
/* Sección alternable: congreso */
#nav-tab.congreso__content {
position: relative;
display: flex;
flex-wrap: nowrap;
width: 100%;
border: 0;
background-color: var(--primary-color);
}
#nav-tab .congreso__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 50%;
width: 50%;
height: 75px;
margin: 0;
padding: 1rem 2rem;
overflow: hidden;
border: 0;
border-radius: 0;
color: var(--terciary-color);
font-family: var(--font-family-primary);
font-weight: 500;
line-height: 1.2;
text-align: center;
transform: none;
box-shadow: none;
transition: color 250ms ease, background-color 250ms ease, filter 250ms ease;
}
#nav-tab .congreso__button h5 {
margin: 0;
color: inherit;
font-family: var(--font-family-primary);
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-weight: 700;
}
#nav-tab #nav-buttonTwo-tab {
z-index: 1;
clip-path: none;
background-color: var(--primary-color);
color: var(--terciary-color);
}
#nav-tab #nav-buttonThree-tab {
z-index: 1;
clip-path: none;
background-color: var(--primary-color);
color: var(--terciary-color);
}
#nav-tab::after {
display: none;
}
#nav-tab #nav-buttonTwo-tab:hover,
#nav-tab #nav-buttonTwo-tab:focus-visible {
background-color: var(--surface-color);
}
#nav-tab #nav-buttonThree-tab:hover,
#nav-tab #nav-buttonThree-tab:focus-visible {
background-color: var(--surface-color);
}
#nav-tab #nav-buttonTwo-tab.active {
border-bottom: 1px solid var(--secondary-color);
color: var(--secondary-color);
}
#nav-tab #nav-buttonThree-tab.active {
border-bottom: 1px solid var(--secondary-color);
color: var(--secondary-color);
}
#nav-tab .congreso__button:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: -5px;
}
@media (max-width: 900px) {
#nav-tab .congreso__button {
height: 68px;
}
}
#nav-buttonOne {
.congreso__overlay {
background-color: rgb(from var(--primary-color) r g b / 60%);
color: var(--light-color);
}
}
#nav-buttonTwo {
.congreso__overlay {
background-color: var(--primary-color);
color: var(--text-color);
}
}
#nav-buttonThree {
.congreso__overlay {
background-color: var(--surface-color);
color: var(--text-color);
}
}
.congreso__pane {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
outline: none;
}
.congreso__overlay {
padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem);
width: 100%;
height: 100%;
background-color: var(--surface-color);
.congreso__desc {
width: 100%;
max-width: 70ch;
margin: 0 auto;
}
}
.congreso__h2 {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
}
.congreso__h2--tab::after {
content: "";
display: block;
width: 70px;
height: 1px;
margin: 0.75rem auto 0;
background-color: var(--secondary-color);
}
.congreso__h2--speakers {
font-weight: 800;
}
.congreso__subtitle {
margin-bottom: 2rem;
}
.congreso__subtitle {
font-weight: var(--bold-font);
display: block;
}
.congreso__a {
background-color: var(--secondary-color);
color: var(--primary-color);
}
.congreso__a:hover {
transform: translateY(-2px);
box-shadow: none;
background-color: var(--primary-color);
color: var(--terciary-color);
outline: 1px solid var(--secondary-color);
}
.congreso__loop {
margin-top: 2rem;
}
.congreso-card {
width: 100%;
max-width: 920px;
border-radius: 0;
overflow: hidden;
display: flex;
align-items: stretch;
justify-content: center;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
margin: 1.5rem auto;
color: var(--text-color);
transition: var(--transition);
&:hover {
border-color: var(--secondary-color);
}
.congreso-card__thumbnail {
width: 35%;
height: 240px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.congreso-card__info {
width: 65%;
padding: 1rem 1rem 1rem 1.5rem;
position: relative;
h4 {
color: var(--terciary-color);
margin-top: 0;
margin-bottom: 1.5rem;
}
p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 4;
}
.button-left {
margin-top: 2.5rem;
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
}
}
}
.icon-set {
width: 100%;
max-width: 1200px;
margin: 3rem auto;
padding: 0 2rem;
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-wrap: wrap;
.icon-set__icon {
width: 170px;
.icon {
width: 60%;
margin: 0 auto 1.5rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
/* Redes sociales */
.congress-social-media {
width: 100%;
margin: 2rem 0;
.congress-social-media__content {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0;
width: 100%;
max-width: 992px;
margin: 0 auto;
padding: 2rem;
.congress-social-media__buttons {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
a {
margin: 1rem;
background-color: var(--secondary-color);
border: 2px solid var(--secondary-color);
color: var(--primary-color);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
border-radius: 0;
text-decoration: none;
transition: var(--transition);
&:hover {
box-shadow: none;
background-color: var(--primary-color);
color: var(--secondary-color);
}
}
}
}
}
/* Disertantes en home */
.disertantes {
width: 100%;
padding: 0 clamp(0.75rem, 2vw, 2rem) 2rem;
}
#nav-buttonTwo .congreso__overlay {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--primary-color);
backdrop-filter: none;
}
#nav-buttonTwo .congreso__overlay::before,
#nav-buttonTwo .congreso__overlay::after {
position: absolute;
inset: 0;
z-index: 0;
content: "";
pointer-events: none;
}
#nav-buttonTwo .congreso__overlay::before {
inset: auto 0 0 auto;
width: min(36vw, 520px);
height: 1px;
background-color: var(--border-color);
}
#nav-buttonTwo .congreso__overlay::after {
display: none;
}
#nav-buttonTwo .congreso__overlay > * {
position: relative;
z-index: 1;
}
#nav-buttonTwo .speakers-editorial {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
align-items: start;
gap: 2rem;
width: 100%;
max-width: 1640px;
margin: 0 auto 3rem;
}
#nav-buttonTwo .congreso__h2--speakers {
margin: 0;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(2.75rem, 5vw, 5.5rem);
font-weight: 500;
line-height: 0.98;
text-align: left;
}
#nav-buttonTwo .congreso__h2--speakers::after {
width: 65px;
height: 1px;
background-color: var(--secondary-color);
margin: 0.9rem 0 0;
}
#nav-buttonTwo .speakers-editorial__title-main,
#nav-buttonTwo .speakers-editorial__title-secondary {
display: inline;
}
#nav-buttonTwo .speakers-editorial__title-main {
color: var(--secondary-color);
font-weight: 800;
}
#nav-buttonTwo .speakers-editorial__title-secondary {
color: var(--terciary-color);
font-size: 0.78em;
font-weight: 400;
}
#nav-buttonTwo .speakers-editorial__description {
max-width: 440px;
margin: 0;
padding-top: 0.2rem;
color: var(--text-muted);
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.75;
}
.disertantes .disertantes__content {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
justify-content: center;
align-items: stretch;
gap: 1.5rem;
width: 100%;
max-width: 1640px;
margin: 0 auto;
}
.disertantes-item {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 430px;
height: 100%;
margin: 0;
padding: 1.5rem 1.1rem 1.25rem;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 0;
background-color: var(--surface-color);
box-shadow: none;
transition: border-color var(--transition-default), background-color var(--transition-default);
}
.disertantes-item::before,
.disertantes-item::after {
position: absolute;
z-index: -1;
content: "";
pointer-events: none;
}
.disertantes-item::before {
top: 0;
right: 0;
width: 48px;
height: 1px;
background-color: var(--secondary-color);
clip-path: none;
}
.disertantes-item::after {
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--border-color);
}
.disertantes-item:hover {
border-color: var(--secondary-color);
}
.disertantes-item__thumbnail {
position: relative;
flex: 0 0 220px;
width: min(100%, 180px);
height: 220px;
max-width: 100%;
margin: 0 auto 1.1rem;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 0;
perspective: 1000px;
z-index: 1;
box-shadow: none;
}
.disertantes-item__thumbnail--flippable {
cursor: pointer;
}
.disertantes-item__thumbnail--flippable:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: 4px;
}
.disertantes-item__thumbnail-inner {
position: relative;
width: 100%;
height: 100%;
transform: rotateY(0);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 600ms ease-in-out;
}
.disertantes-item__thumbnail-front,
.disertantes-item__thumbnail-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.disertantes-item__thumbnail-front img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.disertantes-item__thumbnail-front--placeholder {
background-color: var(--surface-color);
}
.disertantes-item__thumbnail-front img.disertantes-item__placeholder {
padding: 18%;
background-color: var(--surface-color);
border-radius: 0;
opacity: 0.45;
object-fit: contain;
overflow: hidden;
}
.disertantes-item__thumbnail-back {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
transform: rotateY(180deg);
background-color: var(--secondary-color);
color: var(--primary-color);
font-family: var(--font-body);
text-align: center;
}
.disertantes-item__organization-name {
display: block;
width: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
overflow-wrap: anywhere;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.2;
}
.disertantes-item__thumbnail--flippable.is-flipped .disertantes-item__thumbnail-inner {
transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
.disertantes-item__thumbnail--flippable:hover .disertantes-item__thumbnail-inner {
transform: rotateY(180deg);
}
}
.disertantes-item__flag {
position: absolute;
top: 1.75rem;
right: 1.75rem;
z-index: 2;
width: 40px;
height: 25px;
overflow: hidden;
border-radius: 5px;
}
.disertantes-item__flag img {
width: 100%;
height: 100%;
object-fit: cover;
}
.disertantes-item__info {
display: flex;
flex: 1 1 auto;
width: 100%;
padding: 0;
background: none;
}
.disertantes-item__inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
}
.disertantes-item__title {
display: inline-block;
max-width: 100%;
margin: 0 0 0.85rem;
padding: 0.5rem 0;
overflow-wrap: anywhere;
background-color: transparent;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: 1.45rem;
font-weight: 600;
line-height: 1.35;
text-align: center;
}
.disertantes-item__inner p {
display: -webkit-box;
width: 100%;
margin: 0 0 1rem;
overflow: hidden;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.disertantes-item__inner .buttons-center {
position: static;
margin-top: auto;
transform: none;
}
.disertantes-item__more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--secondary-color);
font-weight: 700;
text-decoration: none;
transition: color var(--transition-default);
}
.disertantes-item__more span {
display: inline-block;
transition: transform var(--transition-default);
}
.disertantes-item__more:hover,
.disertantes-item__more:focus-visible {
color: var(--secondary-color);
}
.disertantes-item__more:hover span,
.disertantes-item__more:focus-visible span {
transform: translateX(4px);
}
@media (max-width: 1599px) {
.disertantes .disertantes__content {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1600px) {
.disertantes-item:nth-child(5n + 1):nth-last-child(1) {
grid-column: 3;
}
.disertantes-item:nth-child(5n + 1):nth-last-child(2),
.disertantes-item:nth-child(5n + 1):nth-last-child(3) {
grid-column: 2;
}
.disertantes-item:nth-child(5n + 2):last-child,
.disertantes-item:nth-child(5n + 2):nth-last-child(2) {
grid-column: 3;
}
.disertantes-item:nth-child(5n + 3):last-child {
grid-column: 4;
}
.disertantes-item:nth-child(5n + 1):nth-last-child(4),
.disertantes-item:nth-child(5n + 1):nth-last-child(4) ~ .disertantes-item {
transform: translateX(calc(50% + 0.75rem));
}
}
@media (min-width: 1200px) and (max-width: 1599px) {
.disertantes-item:nth-child(4n + 1):nth-last-child(1) {
grid-column: 2 / 4;
justify-self: center;
width: calc((100% - 1.5rem) / 2);
}
.disertantes-item:nth-child(4n + 1):nth-last-child(2) {
grid-column: 2;
}
.disertantes-item:nth-child(4n + 2):last-child {
grid-column: 3;
}
.disertantes-item:nth-child(4n + 1):nth-last-child(3),
.disertantes-item:nth-child(4n + 1):nth-last-child(3) ~ .disertantes-item {
transform: translateX(calc(50% + 0.75rem));
}
}
@media (max-width: 1199px) {
.disertantes .disertantes__content {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 900px) and (max-width: 1199px) {
.disertantes-item:nth-child(3n + 1):nth-last-child(1) {
grid-column: 2;
}
.disertantes-item:nth-child(3n + 1):nth-last-child(2) {
grid-column: 1;
}
.disertantes-item:nth-child(3n + 2):last-child {
grid-column: 2;
}
.disertantes-item:nth-child(3n + 1):nth-last-child(2),
.disertantes-item:nth-child(3n + 1):nth-last-child(2) ~ .disertantes-item {
transform: translateX(calc(50% + 0.75rem));
}
}
@media (min-width: 600px) and (max-width: 899px) {
#nav-buttonTwo .congreso__overlay {
padding: 3rem 1.5rem;
}
#nav-buttonTwo .speakers-editorial {
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
gap: 1.25rem;
margin-bottom: 2.25rem;
}
.disertantes .disertantes__content {
grid-template-columns: repeat(2, minmax(0, 300px));
gap: 1.5rem;
}
.disertantes-item:nth-child(2n + 1):last-child {
grid-column: 1 / -1;
justify-self: center;
max-width: 300px;
}
}
@media (max-width: 599px) {
#nav-buttonTwo .congreso__overlay {
padding: 2.5rem 1rem;
}
#nav-buttonTwo .speakers-editorial {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
margin-bottom: 1.75rem;
}
#nav-buttonTwo .speakers-editorial__description {
max-width: 34rem;
}
.disertantes {
padding: 0 0 1rem;
}
.disertantes .disertantes__content {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.disertantes-item {
min-height: 420px;
max-width: 360px;
justify-self: center;
}
}
#nav-buttonThree .congreso__overlay {
position: relative;
display: flex;
align-items: center;
min-height: 470px;
padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 6rem);
overflow: hidden;
isolation: isolate;
background-color: var(--surface-color);
backdrop-filter: none;
}
#nav-buttonThree .agenda-editorial {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
#nav-buttonThree .agenda-editorial__content {
width: 100%;
max-width: 630px;
}
#nav-buttonThree .congreso__h2 {
margin: 0 0 1.5rem;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(2.75rem, 5vw, 5.25rem);
font-weight: 500;
line-height: 0.98;
text-align: left;
}
#nav-buttonThree .congreso__h2--tab::after {
width: 65px;
height: 1px;
background-color: var(--secondary-color);
margin: 0.9rem 0 0;
}
#nav-buttonThree .agenda-editorial__description {
max-width: 590px;
margin: 0;
color: var(--text-muted);
font-family: var(--font-body);
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.75;
}
#nav-buttonThree .agenda-editorial__actions {
margin: 1.75rem 0 0;
}
#nav-buttonThree .agenda-editorial__button {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1.7rem;
border: 1px solid var(--secondary-color);
background-color: var(--secondary-color);
color: var(--primary-color);
font-family: var(--font-body);
font-weight: 600;
transition: background-color var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}
#nav-buttonThree .agenda-editorial__button span {
display: inline-block;
transition: transform 220ms ease;
}
#nav-buttonThree .agenda-editorial__button:hover,
#nav-buttonThree .agenda-editorial__button:focus-visible {
background-color: transparent;
color: var(--secondary-color);
}
#nav-buttonThree .agenda-editorial__button:hover span,
#nav-buttonThree .agenda-editorial__button:focus-visible span {
transform: translateX(4px);
}
@media (max-width: 900px) {
#nav-buttonThree .congreso__overlay {
min-height: 410px;
padding: 3.5rem 2rem;
}
}
@media (max-width: 600px) {
#nav-buttonThree .congreso__overlay {
min-height: 0;
padding: 2.75rem 1.25rem;
}
#nav-buttonThree .agenda-editorial {
grid-template-columns: minmax(0, 1fr);
}
#nav-buttonThree .agenda-editorial__content {
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
#header,
#header *,
#main,
#main *,
#footer,
#footer * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* Sección Posters del home */
.home-posters {
width: 100%;
margin: 9rem 0;
background-color: var(--primary-color);
.home-posters__content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
.home-posters__inner {
width: 50%;
padding: 2rem 1rem;
}
.home-posters__inner:last-child {
border-radius: 0;
background-color: var(--surface-color);
}
.posters-loop {
width: 100%;
display: flex;
align-items: stretch;
justify-content: space-evenly;
}
.hp-item {
width: 100%;
max-width: 250px;
height: 320px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 15px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--secondary-color), #ffffff 70%);
}
.hp-item__overlay {
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 25%, rgba(17, 16, 15, 0.88) 100%);
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Beneficios */
#beneficios {
width: 100%;
padding-block: var(--section-spacing);
background-color: var(--terciary-color);
.beneficios__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 5rem);
h2 {
color: var(--primary-color);
margin: 0;
text-align: center;
}
.beneficios__group {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
flex-wrap: wrap;
padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
}
.beneficios__footer {
display: none;
}
}
.beneficios-item {
flex: 1 1 280px;
max-width: 430px;
background-color: #fff;
border: 1px solid rgba(17, 16, 15, 0.1);
border-radius: 15px;
box-shadow: 0 10px 28px rgba(17, 16, 15, 0.12);
overflow: hidden;
.beneficios-item__thumbnail {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms ease;
}
}
&:hover .beneficios-item__thumbnail img {
transform: scale(1.025);
}
.beneficios-item__info {
padding: 1.5rem;
h4 {
color: var(--primary-color);
margin: 0 0 0.5rem;
text-align: left;
}
p {
color: #665f56;
margin: 0;
}
.beneficios-item__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid rgba(17, 16, 15, 0.35);
color: var(--primary-color);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-default), border-color var(--transition-default);
&:hover,
&:focus-visible {
color: #8b6c37;
border-color: #8b6c37;
}
}
}
}
.beneficios-item:first-child {
.beneficios-item__info {
padding-right: 1.5rem;
}
}
.beneficios-item:nth-child(2) {
transform: none;
}
.beneficios-item:last-child {
.beneficios-item__info {
padding-left: 1.5rem;
}
}
/* Sponsors */
.supports {
width: 100%;
background-color: var(--primary-color);
margin: 0;
.supports__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: var(--section-spacing) clamp(1.25rem, 5vw, 5rem);
.supports__main-logo {
width: 100%;
max-width: 450px;
margin: 0 auto 2rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.supports__box {
margin: 3rem 0;
.supports__slider {
width: 85%;
margin: 0 auto;
min-height: 9rem;
height: auto;
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3rem 0 3rem 0;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: none;
}
.supports__slider.ss-2 {
background-color: var(--surface-color);
border-color: var(--border-color);
border-radius: 0 3rem 0 3rem;
}
}
}
}
.supports .supports__title {
margin: 0 auto 1.5rem;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2.1vw, 1.75rem);
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.1;
text-align: center;
text-transform: none;
}
/* Noticias */
.news {
width: 100%;
padding-block: var(--section-spacing);
background-color: var(--primary-color);
.news__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 5rem);
.news__loop {
width: 100%;
display: flex;
align-items: stretch;
gap: 1.25rem;
flex-wrap: wrap;
justify-content: center;
}
}
}
.news-item {
flex: 1 1 280px;
max-width: 400px;
margin: 0;
perspective: 1000px;
.news-item__content {
height: 100%;
border: 1px solid var(--border-color);
border-radius: 0;
background-color: var(--surface-color);
transition: border-color var(--transition-default);
width: 100%;
overflow: hidden;
position: relative;
&:hover {
border-color: var(--secondary-color);
}
.news-item__image {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
outline: none;
border-radius: 0;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.news-item__date {
p {
margin: 0;
color: var(--text-muted);
}
}
.news-item__info {
width: 100%;
padding: 1rem;
.news-item__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
height: 54px;
line-clamp: 2;
}
p:not(.news-item__date p) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 3;
height: 67px;
}
}
.news-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
background-color: transparent;
.button-left {
width: 100%;
display: flex;
justify-content: center;
}
.news-item__share {
width: calc(40% - 7.5px);
display: flex;
align-items: center;
justify-content: flex-end;
.share-icon {
width: 35px;
height: 35px;
margin: 0 5px;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
transition: var(--transition);
}
.share-icon.facebook {
background-color: var(--primary-color);
color: var(--light-color);
&:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
}
.share-icon.whatsapp {
background-color: var(--primary-color);
color: var(--light-color);
&:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
}
}
}
}
}
/* Donde encontrarnos */
.news-item__more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.25rem 0;
border: 0;
border-bottom: 1px solid transparent;
background-color: transparent;
color: var(--secondary-color);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-default), border-color var(--transition-default);
}
.news-item__more:hover,
.news-item__more:focus-visible {
border-color: var(--secondary-color);
color: var(--terciary-color);
}
.where {
width: 100%;
padding: var(--section-spacing) clamp(1.25rem, 5vw, 5rem);
background-color: var(--surface-color);
.where__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
text-align: center;
> h2 {
margin: 0;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(2.75rem, 5vw, 4.75rem);
font-weight: 500;
line-height: 1;
}
.where__address {
margin: 1rem auto 2.5rem;
color: var(--text-muted);
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.4vw, 1.05rem);
letter-spacing: 0.08em;
}
.where__location-layout {
display: grid;
grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.6fr);
align-items: stretch;
width: 100%;
max-width: 1200px;
min-height: 380px;
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 24px;
background-color: var(--surface-color);
box-shadow:
0 18px 55px color-mix(in srgb, var(--secondary-color) 12%, transparent),
0 0 45px color-mix(in srgb, var(--secondary-color) 8%, transparent);
}
.where__venue-brand {
display: grid;
place-items: center;
padding: clamp(1.5rem, 4vw, 3.5rem);
background-color: var(--terciary-color);
img {
display: block;
width: 100%;
max-width: 330px;
height: auto;
object-fit: contain;
}
}
.where__map {
width: 100%;
min-width: 0;
min-height: 380px;
position: relative;
overflow: hidden;
border-left: 1px solid #F3E8D3;
iframe {
display: block;
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
}
}
.where__actions {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.where__maps-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 52px;
padding: 0.85rem 1.5rem;
border: 1px solid var(--secondary-color);
border-radius: 999px;
background-color: var(--secondary-color);
color: var(--primary-color);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: color var(--transition-default), background-color var(--transition-default);
&:hover,
&:focus-visible {
background-color: transparent;
color: var(--secondary-color);
}
}
.where__event-time {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin: 1.75rem auto 0;
color: var(--text-muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
i {
color: var(--secondary-color);
}
}
}
}
/* Footer */
#footer {
width: 100%;
background-color: var(--primary-color);
border-top: 1px solid var(--border-color);
padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);
.footer__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap-reverse;
gap: clamp(2rem, 5vw, 5rem);
.footer__inner {
flex: 1 1 300px;
width: auto;
}
.footer__inner:first-child {
display: flex;
flex-direction: column;
align-items: center;
.footer__brand {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
max-width: 300px;
max-height: 100px;
object-fit: contain;
}
}
.footer__info {
list-style: none;
padding: 0;
width: 100%;
max-width: 400px;
margin: 0 auto;
text-align: center;
color: var(--text-muted);
font-family: var(--font-body);
a {
color: var(--text-muted);
text-decoration-color: var(--border-color);
&:hover {
color: var(--secondary-color);
}
}
li {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0.5rem 0;
}
}
}
.footer__inner:last-child {
.contact {
width: 100%;
max-width: 440px;
margin: 0 auto;
background-color: transparent;
border-top: 1px solid var(--border-color);
padding: 1.25rem 0;
color: var(--text-muted);
font-weight: 500;
h3 {
color: var(--terciary-color);
}
.contact__whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
color: var(--text-muted);
font-family: var(--font-body);
text-decoration: none;
transition: color var(--transition-default);
i {
color: var(--secondary-color);
font-size: 1.25rem;
}
&:hover,
&:focus-visible {
color: var(--secondary-color);
}
}
p {
margin: 0;
}
.cf7-input,
.cf7-textarea {
padding: 0.7rem 0.5rem 0.7rem 1rem;
border: none;
border-bottom: 1px solid var(--border-color);
background-color: var(--primary-color);
color: var(--text-color);
width: 100%;
margin: 0.5rem 0;
&:focus {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
}
.cf7-textarea {
height: 6rem;
}
.cf7-submit {
padding: 0.5rem 2rem;
border-radius: 0;
background-color: var(--secondary-color);
color: var(--primary-color);
border: 1px solid var(--secondary-color);
transition: color var(--transition-default), background-color var(--transition-default);
margin: 1rem 0;
&:hover {
background-color: transparent;
color: var(--secondary-color);
box-shadow: none;
}
;
}
}
}
}
}
.footer__ide {
width: 100%;
background-color: var(--surface-color);
border-top: 1px solid var(--border-color);
padding: 0.5rem 1rem;
a {
text-decoration: none;
display: flex;
max-width: 300px;
width: 100%;
margin: 0 auto;
align-items: center;
justify-content: center;
img {
width: 27px;
margin-right: 0.5rem;
}
color: var(--light-color);
}
}
/*
###################################################################################
DEFINICIONES DE PÁGINAS, CATEGORÍAS Y ENTRADAS
###################################################################################
*/
.entry {
width: 100%;
padding: 2rem;
background-color: var(--primary-color);
color: var(--text-muted);
.breadcrumbs {
font-weight: 700;
margin: 0;
a {
color: var(--secondary-color);
text-decoration: none;
}
.breadcrumb_last {
color: var(--text-muted);
}
}
.entry__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: none;
padding: 2rem;
.entry__box:first-child {
width: 65%;
padding: 0 0.5rem;
.entry__header {
width: 100%;
.entry__att-image {
width: 100%;
height: calc((1200px - (1200px * 0.4)) / 1.5);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.entry__date {
margin-bottom: 2rem;
}
.entry__title {
color: var(--terciary-color);
margin-bottom: 0;
margin-top: 2rem;
}
}
.entry__excerpt {
p {
width: 100%;
padding: 1.5rem;
border-left: 2px solid var(--secondary-color);
background-color: rgba(200, 166, 106, 0.08);
color: var(--terciary-color);
font-size: 1.25em;
border-radius: 0;
margin: 2rem 0;
}
}
.entry__body {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--terciary-color);
margin: 2rem 0 0.7rem 0;
}
}
.entry-tags {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
.entry-tags__title {
margin-right: 1rem;
color: var(--terciary-color);
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
li {
margin: 0.3rem;
a {
display: block;
color: var(--terciary-color);
text-decoration: none;
border: 1px solid var(--border-color);
background-color: transparent;
padding: 0.3rem 0.5rem;
border-radius: 0;
font-size: 0.8em;
&:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
}
}
}
}
}
.entry__box:last-child {
width: 35%;
padding: 0 0.5rem;
.entry-box__content {
.entry-search {
position: relative;
width: 100%;
.entry-search__form {
display: flex;
align-items: center;
justify-content: flex-start;
.entry-search__field {
padding: 0.5rem 1rem;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
color: var(--text-color);
width: 100%;
&:focus-visible {
outline: 2px solid var(--secondary-color);
}
}
.entry-search__submit {
width: 3rem;
height: 2.7rem;
font-size: 1.2em;
border: 1px solid var(--secondary-color);
background-color: var(--secondary-color);
color: var(--primary-color);
}
}
}
.entry-related {
width: 100%;
margin: 1rem 0;
.entry-related__title {
color: var(--terciary-color);
margin-bottom: 1rem;
}
.entry-related__body {
li {
a {
color: var(--text-color);
text-decoration: none;
display: block;
padding: 0.4rem;
border-bottom: 1px solid var(--border-color);
&:hover {
background-color: var(--surface-color);
color: var(--secondary-color);
}
}
}
}
}
}
.entry-follow {
width: 100%;
.entry-follow__content {
width: 100%;
.entry-follow__title {
color: var(--terciary-color);
}
.entry-follow__list {
display: flex;
align-items: center;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
.entry-follow__item {
margin: 0 0.3rem;
a {
text-decoration: none;
color: var(--primary-color);
display: flex;
background-color: var(--secondary-color);
border-radius: 99px;
width: 3.5rem;
height: 3.5rem;
font-size: 1.6em;
justify-content: center;
align-items: center;
border: 1px solid var(--secondary-color);
transition: var(--transition);
&:hover {
background-color: transparent;
color: var(--secondary-color);
}
}
}
}
}
}
}
}
}
.entry-activity {
width: 100%;
padding: 2rem 2rem 5rem;
color: var(--dark-gray-color);
background-color: var(--primary-color);
.entry-activity__content {
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
}
.entry-activity__header {
width: 100%;
}
.entry-activity__title {
width: 100%;
margin-bottom: 1.5rem;
h1 {
color: var(--terciary-color);
}
.breadcrumbs {
color: var(--dark-gray-color);
font-weight: 600;
a {
color: var(--secondary-color);
text-decoration: none;
}
}
.entry-activity__info {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 720px;
flex-wrap: wrap;
}
}
.entry-activity__info-item {
width: 33.333%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 1rem;
h5 {
margin: 0;
}
}
.entry-activity__info-item:not(:last-child) {
border-right: 1px solid var(--border-color);
}
.entry-activity__metainfo {
background-color: var(--surface-color);
border-radius: 0;
border: 1px solid var(--border-color);
box-shadow: none;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 1rem;
overflow: hidden;
}
.entry-activity__metainfo--row {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.entry-activity__metainfo--row:last-child {
margin-bottom: 0;
}
.entry-time {
background-color: var(--surface-color);
width: 220px;
/* height: 260px; */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-wrap: wrap;
border: 1px solid var(--border-color);
border-radius: 0;
}
.entry-time__digits {
span {
text-align: center;
display: block;
font-size: 2.5em;
font-weight: 300;
}
p {
margin: 0;
text-align: center;
color: var(--terciary-color);
font-size: 1.1em;
font-weight: 600;
&::after {
content: '';
display: block;
width: 35%;
height: 3px;
background-color: var(--secondary-color);
margin: 0.5rem auto 0;
}
}
}
.entry-speakers {
padding: 0 0 0 1rem;
}
.entry-speakers__title {
margin-top: 0;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--secondary-color);
margin: 0.5rem auto 0 0;
}
}
.entry-speakers__group {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 3rem;
flex-wrap: wrap;
}
.entry-speakers__item {
width: 150px;
.entry-speakers__thumbnail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 99px;
border: 1px solid var(--secondary-color);
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.entry-speakers__name {
text-align: center;
h6 {
color: var(--dark-gray-color);
}
}
}
.entry-excerpt {
padding: 0 0 0 1.5rem;
display: flex;
flex-direction: column;
.entry-excerpt__title {
margin-top: 0;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--secondary-color);
margin: 0.5rem auto 0 0;
}
}
.entry-excerpt__content {
overflow-y: auto;
flex: 1;
min-height: 0;
}
}
.entry-activity__presidents,
.entry-activity__coordinators {
h4 {
color: var(--dark-gray-color);
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--secondary-color);
margin: 0.5rem auto 0 0;
}
}
}
.entry-activity__body {
background-color: var(--surface-color);
border-radius: 0;
border: 1px solid var(--border-color);
box-shadow: none;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 1rem;
overflow: hidden;
margin-top: 2rem;
}
/* Categorías */
.categories {
width: 100%;
padding: 2rem;
.categories__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
.categories__header {
width: 100%;
.categories__title {
color: var(--terciary-color);
margin-bottom: 1rem;
}
.categories__description {
color: var(--dark-gray-color);
margin-bottom: 2rem;
width: 100%;
}
}
.categories__body {
width: 100%;
.categories__loop {
width: 100%;
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-wrap: wrap;
}
}
}
}
.entry-speaker-flag {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.entry-speaker-flag__content {
width: 100%;
border-radius: 15px;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
}
/* Disertante: listado de actividades */
.speaker-activities__title {
color: var(--terciary-color);
margin-bottom: 1rem;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--secondary-color);
margin: 0.5rem 0 0;
}
}
.speaker-activities__list {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 1rem 0;
}
.speaker-activity-card {
display: flex;
align-items: center;
text-decoration: none;
color: var(--dark-color);
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-radius: 0;
padding: 0.75rem 1rem;
gap: 1rem;
transition: var(--transition);
&:hover {
border-color: var(--secondary-color);
box-shadow: none;
transform: translateX(2px);
color: var(--dark-color);
}
.speaker-activity-card__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--secondary-color);
color: var(--primary-color);
border-radius: 0;
padding: 0.5rem 0.75rem;
min-width: 60px;
text-align: center;
flex-shrink: 0;
.speaker-activity-card__day {
font-size: 1.6em;
font-weight: 800;
line-height: 1;
}
.speaker-activity-card__month {
font-size: 0.75em;
text-transform: uppercase;
font-weight: 600;
}
.speaker-activity-card__time {
font-size: 0.7em;
margin-top: 0.25rem;
color: var(--primary-color);
}
}
.speaker-activity-card__info {
flex: 1;
min-width: 0;
.speaker-activity-card__title {
margin: 0 0 0.3rem;
color: var(--dark-color);
font-size: 0.95em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
}
.speaker-activity-card__type {
font-size: 0.78em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.6rem;
border-radius: 99px;
&.videoconference {
background-color: rgba(200, 166, 106, 0.12);
color: var(--primary-color);
}
&.presencial {
background-color: rgba(243, 232, 211, 0.12);
color: var(--dark-color);
}
}
}
.speaker-activity-card__arrow {
color: var(--gray-color);
flex-shrink: 0;
transition: var(--transition);
}
&:hover .speaker-activity-card__arrow {
color: var(--secondary-color);
transform: translateX(3px);
}
}
/* Estilos específicos para categorías de disertantes */
.category-entry-speakers {
.news-item {
min-height: 425px;
.news-item__content {
height: 100%;
display: flex;
flex-direction: column;
.news-item__info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.news-item__footer {
margin-top: auto;
}
}
}
}
/* Categoría: Actividades */
.activities {
width: 100%;
.activities__content {
width: 100%;
padding: 1rem 1.5rem;
}
}
.activities__group {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid var(--border-color);
padding-left: 4rem;
}
.activity-item {
width: 100%;
margin: 5rem 0;
position: relative;
.activity-item__box {
width: 100%;
padding: 1rem 2rem;
border-radius: 0;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
color: var(--text-color);
box-shadow: none;
transition: var(--transition);
h3 {
color: var(--terciary-color);
transition: var(--transition);
}
}
}
.activity-item:hover .activity-item__box {
transform: translateX(1rem);
h3 {
color: var(--secondary-color);
}
}
.activity-item__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 15px;
}
.activity-item__header > a.text-decoration-none {
flex: 1 1 auto;
min-width: 0;
}
.activity-item__button {
color: var(--dark-gray-color);
flex: 0 0 auto;
white-space: nowrap;
}
.activity-item:hover .activity-item__time {
background-color: var(--terciary-color);
color: var(--dark-color);
left: -9.1rem;
.activity-item__button {
color: var(--primary-color);
}
}
.activity-item__time {
position: absolute;
left: -7.1rem;
top: 50%;
transform: translateY(-50%);
background-color: var(--surface-color);
color: var(--terciary-color);
width: 6rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
border-radius: 99px;
clip-path: polygon(0 0, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
transition: var(--transition);
}
.activity-item__footer {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.activity-item__inner:first-child {
width: 75%;
display: flex;
align-items: center;
justify-content: flex-start;
span {
font-weight: 700;
margin-right: 1rem;
color: var(--dark-gray-color);
font-style: italic;
letter-spacing: 0.04em;
font-size: 1.15em;
}
}
.activity-item__inner:last-child {
width: 25%;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 127px;
}
.activity-item__speakers {
display: flex;
align-items: center;
justify-content: flex-start;
}
.activity-item__speaker-thumbnail {
width: 38px;
height: 38px;
border-radius: 99px;
overflow: hidden;
border: 2px solid var(--light-color);
position: relative;
background-color: var(--surface-color);
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.activity-item__speaker-thumbnail:not(:first-child) {
margin-left: -10px;
}
.videoconference-label {
background-color: var(--secondary-color);
color: var(--primary-color);
font-size: 0.75em;
padding: 0.2rem 0.5rem;
border-radius: 99px;
}
.categories__footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
div {
width: 33.333%;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
a {
text-decoration: none;
font-weight: 700;
color: var(--dark-gray-color);
transition: var(--transition);
&:hover {
color: var(--secondary-color);
}
}
}
.categories__current {
border-left: 1px solid var(--light-gray-color);
border-right: 1px solid var(--light-gray-color);
a {
font-size: 1.3em;
}
}
}
/* Pages */
.page {
width: 100%;
background-color: var(--primary-color);
.page__content {
width: 100%;
.page-header {
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
height: 100%;
position: relative;
.page-header__overlay {
position: absolute;
z-index: 2;
padding: 2rem;
top: 0;
height: 0;
width: 100%;
height: 100%;
background: transparent;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 11%, rgba(0, 0, 0, 0.6194852941176471) 77%);
}
.page-header__content {
position: relative;
z-index: 3;
width: 100%;
max-width: 1200px;
padding: 2rem;
margin: 0 auto;
.page__title {
color: var(--terciary-color);
}
#breadcrumbs {
font-weight: 700;
a {
color: var(--secondary-color);
text-decoration: none;
}
.breadcrumb_last {
color: var(--light-color);
}
}
#breadcrumbs.primary-color-last .breadcrumb_last {
color: var(--dark-color);
}
}
}
.page__body {
width: 100%;
margin-bottom: 5rem;
.page__content {
background-color: var(--surface-color);
box-shadow: none;
border: 1px solid var(--border-color);
border-radius: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
}
}
}
.not-found {
width: 100%;
.not-found__content {
width: 100%;
max-width: 1200px;
padding: 2rem;
margin: 0 auto;
color: var(--dark-gray-color);
.not-found__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
.not-found__box {
width: calc(50% - 10px);
}
.not-found__box:first-child {
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
.error-page {
width: 100%;
min-height: 62vh;
display: grid;
place-items: center;
padding: var(--section-spacing) clamp(1.25rem, 5vw, 5rem);
background:
radial-gradient(ellipse at 50% 40%, rgba(200, 166, 106, 0.08), transparent 48%),
var(--primary-color);
}
.error-page__content {
width: 100%;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.error-page__eyebrow,
.search-results-page__eyebrow {
margin: 0 auto 1rem;
color: var(--secondary-color);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.error-page__code {
display: block;
color: var(--secondary-color);
font-family: var(--font-heading);
font-size: clamp(8rem, 25vw, 17rem);
font-weight: 400;
letter-spacing: -0.08em;
line-height: 0.78;
}
.error-page__content h1 {
margin: 1.5rem 0 1rem;
color: var(--terciary-color);
font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.error-page__description {
margin: 0 auto 2rem;
font-size: 1.05rem;
}
.error-page__search,
.search-results-page__form {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
}
.error-page__search .search-field,
.search-results-page__form .search-field {
flex: 1 1 auto;
min-width: 0;
padding: 0.9rem 1rem;
border: 0;
background: transparent;
color: var(--text-color);
font: inherit;
}
.error-page__search .search-field::placeholder,
.search-results-page__form .search-field::placeholder {
color: var(--text-muted);
}
.error-page__search .search-field:focus-visible,
.search-results-page__form .search-field:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: -2px;
}
.error-page__search .search-submit,
.search-results-page__form .search-submit {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.25rem;
border: 0;
background-color: var(--secondary-color);
color: var(--primary-color);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: color var(--transition-default), background-color var(--transition-default);
}
.error-page__search .search-submit:hover,
.error-page__search .search-submit:focus-visible,
.search-results-page__form .search-submit:hover,
.search-results-page__form .search-submit:focus-visible {
background-color: var(--terciary-color);
color: var(--primary-color);
}
.error-page__home {
display: inline-block;
margin-top: 1.5rem;
color: var(--text-muted);
text-decoration-color: var(--border-color);
text-underline-offset: 0.25em;
}
.error-page__home:hover {
color: var(--secondary-color);
}
.search-results-page {
min-height: 60vh;
padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem);
background-color: var(--primary-color);
}
.search-results-page__content {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
}
.search-results-page__header {
margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
text-align: center;
}
.search-results-page__header .entry-title {
margin: 0;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(2.75rem, 6vw, 5.5rem);
font-weight: 500;
}
.search-results-page__query {
margin: 0.5rem auto 1.75rem;
color: var(--secondary-color);
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2.4rem);
overflow-wrap: anywhere;
}
.search-results-page__form {
max-width: 520px;
text-align: left;
}
.search-results-page__list .loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 280px));
justify-content: center;
align-items: stretch;
gap: 1rem;
}
.search-results-page .tarjeta-categoria {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
transition: border-color var(--transition-default);
}
.search-results-page .tarjeta-categoria:hover {
border-color: var(--secondary-color);
}
.search-results-page .tarjeta-categoria__imagen {
display: grid;
aspect-ratio: 16 / 10;
max-height: 175px;
overflow: hidden;
place-items: center;
background-color: #1A1816;
text-decoration: none;
}
.search-results-page .tarjeta-categoria__imagen img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.search-results-page .tarjeta-categoria:hover .tarjeta-categoria__imagen img {
transform: scale(1.025);
}
.search-results-page .tarjeta-categoria__placeholder {
color: var(--secondary-color);
font-family: var(--font-heading);
font-size: 3rem;
}
.search-results-page .tarjeta-categoria__info {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}
.search-results-page .tarjeta-categoria__h6 {
margin: 0 0 0.5rem;
color: var(--terciary-color);
font-family: var(--font-heading);
font-size: clamp(1.25rem, 1.6vw, 1.5rem);
font-weight: 500;
line-height: 1.1;
}
.search-results-page .tarjeta-categoria__h6 a {
color: inherit;
text-decoration: none;
}
.search-results-page .tarjeta-categoria__h6 a:hover {
color: var(--secondary-color);
}
.search-results-page .tarjeta-categoria__info > p {
display: -webkit-box;
overflow: hidden;
margin: 0 0 1.25rem;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.55;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.search-results-page .tarjeta-categoria__a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
align-self: center;
margin: auto 0 0.25rem;
padding: 0.65rem 1.1rem;
border: 1px solid var(--secondary-color);
color: var(--secondary-color);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-default), background-color var(--transition-default);
}
.search-results-page .tarjeta-categoria__a:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
.search-results-page .tarjeta-categoria__a span {
transition: transform 200ms ease;
}
.search-results-page .tarjeta-categoria__a:hover span {
transform: none;
}
.search-results-page .wp-pagenavi {
margin-top: 2.5rem;
grid-column: 1 / -1;
}
.search-results-page .not-found {
max-width: 760px;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--border-color);
background-color: var(--surface-color);
}
.search-results-page .not-found__content {
padding: 0;
}
.search-results-page .not-found__inner {
display: block;
text-align: center;
}
.search-results-page .not-found__box:first-child {
display: none;
}
.search-results-page .not-found__box:last-child {
width: 100%;
}
.search-results-page .not-found__box h1 {
color: var(--terciary-color);
font-family: var(--font-heading);
}
.search-results-page .not-found__box h6 {
color: var(--text-muted);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
}
.search-results-page #search.search {
margin-top: 2rem;
}
.search-results-page #search .search__form {
display: flex;
max-width: 600px;
margin: 0 auto;
}
.search-results-page #search .search__field {
flex: 1 1 auto;
min-width: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--border-color);
background-color: var(--primary-color);
color: var(--text-color);
font: inherit;
}
.search-results-page #search .search__submit {
padding: 0.9rem 1.25rem;
border: 1px solid var(--secondary-color);
background-color: var(--secondary-color);
color: var(--primary-color);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.search-results-page #search .ps-4 {
margin: 1rem auto 0;
padding: 0 !important;
text-align: center;
}
@media (max-width: 600px) {
.error-page__search .search-submit span,
.search-results-page__form .search-submit span {
display: none;
}
.search-results-page #search .search__form {
flex-wrap: wrap;
}
.search-results-page #search .search__field,
.search-results-page #search .search__submit {
width: 100%;
}
}
.wp-pagenavi {
margin: 2rem auto 0;
width: max-content;
transform: scale(1.02);
.pages,
.current,
.page,
.nextpostslink,
.previouspostslink {
border: 1px solid var(--border-color);
color: var(--terciary-color);
}
.pages {
border-radius: 10px 0 0 10px;
}
.current {
background-color: var(--secondary-color);
color: var(--primary-color);
border-color: var(--secondary-color) !important;
}
.page {
background-color: transparent;
}
}
.wp-pagenavi> :last-child {
border-radius: 0 10px 10px 0;
}
.wp-pagenavi.category-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
width: fit-content;
max-width: 100%;
transform: none;
}
.wp-pagenavi.category-pagination .page-numbers {
display: inline-flex;
min-width: 2.5rem;
min-height: 2.5rem;
align-items: center;
justify-content: center;
padding: 0.45rem 0.7rem;
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--terciary-color);
text-decoration: none;
}
.wp-pagenavi.category-pagination .page-numbers.current {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
color: var(--primary-color);
}
.wp-pagenavi.category-pagination a.page-numbers:hover,
.wp-pagenavi.category-pagination a.page-numbers:focus-visible {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
/* Estilos de entradas de la categoría "Posters" */
.entry-posters {
width: 100%;
padding: 3.5rem 0;
background-color: var(--primary-color);
}
.entry-posters__content {
width: 100%;
max-width: 1300px;
margin: 0 auto;
border: 1px solid var(--border-color);
box-shadow: none;
background-color: var(--surface-color);
}
.posters {
width: 100%;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap-reverse;
.posters__h1 {
color: var(--terciary-color);
text-transform: uppercase;
padding-left: 1rem;
border-left: 1px solid var(--secondary-color);
}
.posters__box {
padding: 1.5rem;
}
.posters__box:first-child {
width: 50%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.posters__box:last-child {
width: 50%;
}
}
/*
###################################################################################
DEFINICIONES VARIAS
###################################################################################
*/
/* Form Presentación de Posters */
/* Contenedor general del formulario */
.form__posters.wpcf7-form {
margin-top: 15px;
background-color: var(--surface-color);
color: var(--text-color);
padding: 30px;
border: 1px solid var(--border-color);
border-radius: 0;
}
/* Filas de dos columnas */
.form__content-col {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 24px;
}
.form__content-col > .col-sm-6 {
flex: 1 1 calc(50% - 12px);
min-width: 250px;
}
/* Filas de una sola columna */
.form__posters .col-sm-12 {
margin-bottom: 24px;
}
/* Labels */
.form__posters label,
.form__posters .form__content,
.form__posters .form__content-trabajos {
display: block;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 8px;
font-size: 1rem;
}
/* Inputs, selects, textarea */
.form__posters input[type="text"],
.form__posters input[type="tel"],
.form__posters input[type="email"],
.form__posters select,
.form__posters textarea {
width: 100%;
background-color: var(--primary-color);
border: 1px solid var(--border-color);
border-radius: 0;
padding: 14px 16px;
font-size: 0.95rem;
color: var(--text-color);
box-sizing: border-box;
}
.form__posters textarea {
min-height: 100px;
resize: vertical;
}
/* Select con flecha personalizada */
.form__posters select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
/* Focus */
.form__posters input:focus,
.form__posters select:focus,
.form__posters textarea:focus {
outline: 2px solid var(--terciary-color);
outline-offset: -2px;
}
/* Botón Enviar */
.form__posters input[type="submit"],
.form__posters .wpcf7-submit {
width: 100%;
background-color: var(--terciary-color);
color: var(--primary-color);
border: none;
border-radius: 0;
padding: 14px 28px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.6s ease;
}
.form__posters input[type="submit"]:hover,
.form__posters .wpcf7-submit:hover {
background-color: transparent;
color: var(--secondary-color);
border: 1px solid var(--secondary-color);
}
/* Botón Upload */
.form__posters .wpcf7-form-control-wrap input[type="button"].button,
.form__posters #mfcf7_zl_add_file {
width: 100%;
background-color: var(--terciary-color);
color: var(--primary-color);
border: none;
border-radius: 0;
padding: 14px 24px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
box-shadow: none;
text-shadow: none;
transition: background-color 0.6s ease;
}
.form__posters .wpcf7-form-control-wrap input[type="button"].button:hover,
.form__posters #mfcf7_zl_add_file:hover {
background-color: transparent;
color: var(--secondary-color);
border: 1px solid var(--secondary-color);
}
/* Formulario de bolsa de trabajo (Contact Form 7) */
/* CONTENEDOR DE LA PÁGINA */
.potencia-talento-page {
width: 100%;
max-width: 900px;
margin: 35px auto 65px;
font-family: inherit;
color: var(--text-color);
line-height: 1.7;
}
.potencia-talento-page *,
.potencia-talento-page *::before,
.potencia-talento-page *::after {
box-sizing: border-box;
}
/* INTRODUCCIÓN */
.potencia-talento-intro {
margin-bottom: 28px;
}
.potencia-talento-intro h2 {
font-size: 28px;
font-weight: 700;
color: var(--terciary-color);
margin: 0 0 15px;
line-height: 1.3;
}
.potencia-talento-intro p {
font-size: 15px;
line-height: 1.8;
color: var(--text-muted);
margin: 0;
}
/* ========================================
CONTENEDOR DEL FORMULARIO
======================================== */
.form__potencia-talento {
--form-accent: var(--secondary-color);
--form-accent-hover: var(--terciary-color);
--form-border: var(--border-color);
width: 100%;
max-width: 850px;
margin: 0 auto;
padding: 35px;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0;
box-sizing: border-box;
box-shadow: none;
}
.form__potencia-talento *,
.form__potencia-talento *::before,
.form__potencia-talento *::after {
box-sizing: border-box;
}
/* TÍTULOS */
.form__potencia-talento h3 {
font-size: 21px;
font-weight: 700;
color: var(--terciary-color);
margin: 0 0 12px;
line-height: 1.3;
}
.form__potencia-talento h4 {
font-size: 17px;
font-weight: 700;
color: var(--terciary-color);
margin: 30px 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
/* TEXTOS */
.form__potencia-talento p {
font-size: 15px;
line-height: 1.7;
margin: 0 0 22px;
color: var(--text-muted);
}
.form__potencia-talento .form-group {
margin: 0 0 25px;
width: 100%;
}
.form__potencia-talento .form-group > label {
display: block;
margin-bottom: 9px;
color: var(--text-color);
font-size: 15px;
font-weight: 600;
}
/* CONTENEDORES CONTACT FORM 7 */
.form__potencia-talento .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* ========================================
CAMPOS DE TEXTO Y SELECTOR
======================================== */
.form__potencia-talento input[type="text"],
.form__potencia-talento input[type="email"],
.form__potencia-talento input[type="tel"],
.form__potencia-talento select {
display: block;
width: 100% !important;
max-width: 100% !important;
min-height: 48px;
padding: 12px 15px !important;
background: var(--primary-color) !important;
color: var(--text-color) !important;
border: 1px solid var(--form-border) !important;
border-radius: 0 !important;
font-family: inherit;
font-size: 15px !important;
line-height: 1.5;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s;
}
.form__potencia-talento input:focus,
.form__potencia-talento select:focus {
outline: none;
border-color: var(--form-accent) !important;
box-shadow: 0 0 0 2px var(--border-color) !important;
}
.form__potencia-talento input::placeholder {
color: var(--text-muted);
}
/* Campo para adjuntar CV */
.form__potencia-talento input[type="file"] {
display: block;
width: 100%;
max-width: 100%;
min-height: 65px;
padding: 16px !important;
background: var(--primary-color) !important;
border: 1px dashed var(--form-accent) !important;
border-radius: 0 !important;
font-family: inherit;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
box-shadow: none !important;
}
/* BOTÓN SELECCIONAR ARCHIVO */
.form__potencia-talento input[type="file"]::file-selector-button {
padding: 9px 14px;
margin-right: 14px;
border: 1px solid var(--form-border);
border-radius: 0;
color: var(--primary-color);
background: var(--secondary-color);
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
/* COMPATIBILIDAD WEBKIT */
.form__potencia-talento input[type="file"]::-webkit-file-upload-button {
padding: 9px 14px;
margin-right: 14px;
border: 1px solid var(--form-border);
border-radius: 0;
color: var(--primary-color);
background: var(--secondary-color);
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
/* TEXTOS DE AYUDA */
.form__potencia-talento small {
display: block;
color: var(--text-muted);
font-size: 13px;
line-height: 1.6;
margin-top: 8px;
}
/* ========================================
CONSENTIMIENTO
======================================== */
.form__potencia-talento .form-consentimiento {
padding: 18px;
background: var(--primary-color);
border: 1px solid var(--border-color);
border-radius: 0;
margin-top: 32px;
}
.form__potencia-talento .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
cursor: pointer;
}
.form__potencia-talento .wpcf7-list-item {
margin: 0;
}
.form__potencia-talento .wpcf7-list-item-label {
font-size: 14px;
color: var(--text-color);
line-height: 1.6;
}
/* CHECKBOX */
.form__potencia-talento input[type="checkbox"] {
width: 17px;
height: 17px;
min-width: 17px;
flex-shrink: 0;
margin: 3px 0 0;
accent-color: var(--form-accent);
cursor: pointer;
}
/* COMUNICACIONES OPCIONALES */
.form__potencia-talento .form-comunicaciones {
margin-top: 20px;
}
.form__potencia-talento .form-comunicaciones label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
/* ========================================
AVISO DE CAMPOS OBLIGATORIOS
======================================== */
.form__potencia-talento .form-aviso {
font-size: 13px;
color: var(--text-muted);
margin: 20px 0 25px;
}
/* Botón de envío */
.form__potencia-talento .form-submit {
margin-top: 20px;
}
.form__potencia-talento input[type="submit"] {
display: inline-block;
width: auto;
min-height: 50px;
padding: 14px 32px !important;
border: none !important;
border-radius: 0 !important;
background: var(--form-accent) !important;
color: var(--primary-color) !important;
font-family: inherit;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4;
text-align: center;
cursor: pointer;
box-shadow: none !important;
text-transform: none !important;
transition: background-color var(--transition-default);
}
.form__potencia-talento input[type="submit"]:hover {
background: var(--form-accent-hover) !important;
}
/* ========================================
ERRORES Y CONFIRMACIÓN DE CF7
======================================== */
.form__potencia-talento .wpcf7-not-valid-tip {
font-size: 13px;
margin-top: 6px;
color: var(--secondary-color);
}
.form__potencia-talento .wpcf7-response-output {
padding: 15px !important;
border-radius: 6px;
font-size: 14px;
}
.form__potencia-talento .wpcf7-spinner {
vertical-align: middle;
margin-left: 12px;
}
/* ========================================
MENSAJE INFORMATIVO FINAL
======================================== */
.potencia-talento-nota {
width: 100%;
max-width: 850px;
margin: 24px auto 0;
padding-top: 18px;
border-top: 1px solid var(--border-color);
}
.potencia-talento-nota p {
display: block;
margin: 0 !important;
padding: 0 !important;
font-size: 13px;
line-height: 1.7;
color: var(--text-muted);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 768px) {
.potencia-talento-page {
margin: 20px auto 45px;
}
.potencia-talento-intro h2 {
font-size: 23px;
}
.form__potencia-talento {
padding: 22px 18px;
}
.form__potencia-talento h3 {
font-size: 19px;
}
.form__potencia-talento h4 {
font-size: 17px;
}
.form__potencia-talento input[type="submit"] {
width: 100%;
}
.form__potencia-talento input[type="file"] {
font-size: 12px;
}
}
/* =====================================================
FASHION LIFE — INSCRIPCIONES PARA MODELOS
===================================================== */
.fl-insc {
--fl-gold: var(--primary-color);
--fl-dark: var(--secondary-color);
--fl-dark-alt: var(--terciary-color);
--fl-white: #ffffff;
--fl-muted: #777;
--fl-border: rgba(0, 0, 0, .12);
width: 100%;
max-width: 1380px;
margin: 0 auto;
color: var(--fl-dark);
font-family: 'DM Sans', sans-serif;
}
.fl-insc *,
.fl-insc *::before,
.fl-insc *::after {
box-sizing: border-box;
}
.fl-insc h1,
.fl-insc h2,
.fl-insc h3,
.fl-insc p {
margin: 0;
padding: 0;
}
.fl-insc h1,
.fl-insc h2 {
font-family: 'Montserrat', sans-serif;
letter-spacing: -.045em;
line-height: 1.12;
color: inherit;
}
.fl-insc h1 em,
.fl-insc h2 em {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 400;
letter-spacing: -.04em;
}
.fl-insc p {
font-size: 16px;
line-height: 1.85;
}
/* ETIQUETAS */
.fl-insc-eyebrow,
.fl-insc-overline,
.fl-insc-counter {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.fl-insc-overline {
color: var(--terciary-color);
}
.fl-insc-counter {
color: var(--fl-muted);
white-space: nowrap;
}
/* BOTONES */
.fl-insc .fl-insc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
width: fit-content;
max-width: 100%;
padding: 18px 26px;
border: 1px solid transparent;
border-radius: 3px;
font-size: 11px;
font-weight: 800;
line-height: 1.4;
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease;
}
.fl-insc .fl-insc-btn:hover {
transform: translateY(-3px);
text-decoration: none;
}
.fl-insc-btn span:last-child {
font-size: 20px;
font-weight: 400;
line-height: 1;
}
.fl-insc .fl-insc-btn--primary {
background: var(--fl-dark);
color: var(--fl-white);
}
.fl-insc .fl-insc-btn--primary:hover {
background: var(--fl-gold);
color: var(--fl-dark);
}
.fl-insc .fl-insc-btn--gold {
background: var(--fl-gold);
color: var(--fl-dark);
}
.fl-insc .fl-insc-btn--gold:hover {
background: var(--fl-white);
color: var(--fl-dark);
}
.fl-insc .fl-insc-btn--outline {
color: var(--fl-dark);
border-color: var(--fl-gold);
background: transparent;
}
.fl-insc .fl-insc-btn--outline:hover {
background: var(--fl-gold);
color: var(--fl-dark);
}
/* HERO */
.fl-insc-hero {
display: grid;
grid-template-columns: 1.15fr .85fr;
min-height: 510px;
overflow: hidden;
background: #f8f7f4;
}
.fl-insc-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(35px, 6vw, 90px);
}
.fl-insc-eyebrow {
display: block;
color: var(--fl-gold);
margin-bottom: 32px;
}
.fl-insc-eyebrow span {
margin: 0 8px;
}
.fl-insc-hero h1 {
font-size: clamp(36px, 4.3vw, 68px);
font-weight: 700;
margin-bottom: 25px;
}
.fl-insc-hero h1 em {
color: var(--fl-gold);
}
.fl-insc-hero p {
max-width: 460px;
color: #666;
margin-bottom: 35px;
}
/* ARTE EDITORIAL DEL HERO */
.fl-insc-hero__art {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 460px;
padding: 45px;
overflow: hidden;
background:
radial-gradient(
ellipse at 80% 15%,
rgba(255,255,255,.10),
transparent 42%
),
linear-gradient(
145deg,
var(--fl-dark),
var(--fl-dark-alt)
);
color: var(--fl-gold);
}
.fl-insc-hero__art::before {
content: "";
position: absolute;
inset: 22px;
border: 1px solid var(--fl-gold);
opacity: .32;
}
.fl-insc-art-label {
position: relative;
z-index: 1;
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(66px, 8vw, 120px);
font-weight: 400;
line-height: .9;
letter-spacing: -.075em;
text-align: center;
}
.fl-insc-art-line {
width: 65px;
height: 1px;
background: var(--fl-gold);
margin: 30px auto;
}
.fl-insc-art-caption {
font-size: 10px;
letter-spacing: .3em;
text-align: center;
}
/* INTRODUCCIÓN */
.fl-insc-intro {
padding: 110px 25px 100px;
text-align: center;
}
.fl-insc-intro h2 {
font-size: clamp(32px, 4vw, 53px);
margin: 20px 0 25px;
}
.fl-insc-intro h2 em {
color: var(--terciary-color);
}
.fl-insc-intro p {
max-width: 670px;
margin: 0 auto;
color: #666;
}
/* BLOQUE DESCARGA */
.fl-insc-download {
background:
radial-gradient(
ellipse at 90% 100%,
rgba(255,255,255,.06),
transparent 45%
),
var(--fl-dark);
color: var(--fl-white);
padding: clamp(30px, 5vw, 65px);
}
.fl-insc-download__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255,255,255,.14);
}
.fl-insc-download .fl-insc-counter {
color: #aaa;
}
.fl-insc-download__body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 65px 15px 35px;
}
.fl-insc-download__icon {
display: flex;
align-items: center;
justify-content: center;
width: 82px;
height: 82px;
border: 1px solid var(--fl-gold);
color: var(--fl-gold);
border-radius: 50%;
margin-bottom: 35px;
}
.fl-insc-download h2 {
font-size: clamp(32px, 4.5vw, 59px);
font-weight: 700;
margin-bottom: 23px;
color: #fff;
}
.fl-insc-download h2 em {
color: var(--fl-gold);
}
.fl-insc-download p {
max-width: 590px;
margin-bottom: 37px;
color: #fff;
}
.fl-insc-download__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 13px;
margin-top: 24px;
font-size: 10px;
letter-spacing: .12em;
}
.fl-insc-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--fl-gold);
}
/* PROCESO */
.fl-insc-steps {
padding: 105px 25px;
}
.fl-insc-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 25px;
margin-bottom: 45px;
}
.fl-insc-section-head h2 {
font-size: clamp(29px, 3.5vw, 48px);
margin-top: 17px;
}
/* .fl-insc-section-head h2 em {
color: var(--fl-gold);
} */
.fl-insc-steps__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px;
}
.fl-insc-step {
position: relative;
padding: 45px;
background: #f8f7f4;
border-top: 2px solid var(--fl-gold);
transition: transform .25s ease;
}
.fl-insc-step:hover {
transform: translateY(-5px);
}
.fl-insc-step__number {
display: block;
font-family: Georgia, serif;
font-size: 50px;
line-height: 1;
color: var(--fl-gold);
margin-bottom: 35px;
}
.fl-insc-step h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 14px;
}
.fl-insc-step p {
max-width: 440px;
/* color: #666; */
font-size: 14px;
}
/* CONTACTO FINAL */
.fl-insc-contact {
padding: 95px 25px 115px;
text-align: center;
border-top: 1px solid var(--fl-border);
}
.fl-insc-contact h2 {
font-size: clamp(35px, 4.5vw, 60px);
margin: 23px 0;
}
/* .fl-insc-contact h2 em {
color: var(--fl-gold);
} */
.fl-insc-contact p {
max-width: 520px;
margin: 0 auto 32px;
color: #666;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.fl-insc-hero {
grid-template-columns: 1fr;
}
.fl-insc-hero__content {
padding: 65px 35px;
}
.fl-insc-hero__art {
min-height: 320px;
}
.fl-insc-art-label {
font-size: clamp(66px, 12vw, 100px);
}
}
@media (max-width: 600px) {
.fl-insc-hero__content {
padding: 55px 24px;
}
.fl-insc-eyebrow {
font-size: 9px;
line-height: 1.8;
margin-bottom: 22px;
}
.fl-insc-hero h1 {
font-size: clamp(35px, 9vw, 48px);
}
.fl-insc-hero p,
.fl-insc-intro p {
font-size: 14px;
}
.fl-insc-hero__art {
min-height: 260px;
}
.fl-insc-hero__art::before {
inset: 15px;
}
.fl-insc-intro {
padding: 75px 22px;
}
.fl-insc-download {
padding: 27px 20px;
}
.fl-insc-download__body {
padding: 55px 0 35px;
}
.fl-insc-download h2 {
font-size: 34px;
}
.fl-insc-download p {
font-size: 14px;
}
.fl-insc-steps {
padding: 75px 20px;
}
.fl-insc-steps__grid {
grid-template-columns: 1fr;
gap: 17px;
}
.fl-insc-step {
padding: 35px 28px;
}
.fl-insc-step__number {
margin-bottom: 23px;
}
.fl-insc-section-head {
align-items: flex-start;
}
.fl-insc-contact {
padding: 75px 20px 90px;
}
.fl-insc .fl-insc-btn {
width: 100%;
padding: 17px 15px;
text-align: center;
font-size: 10px;
}
.fl-insc-btn span:last-child {
margin-left: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.fl-insc *,
.fl-insc *::before,
.fl-insc *::after {
transition: none !important;
}
}
/* Fin Form Inscripciones para modelos */
/*
###################################################################################
DEFINICIONES DE OPTIMIZACIÓN Y ADAPTABILIDAD DEL SITIO EN DIFERENTES PANTALLAS
###################################################################################
*/
@media (width < 1441px) {
.entry {
.entry__content {
max-width: 1024px;
.entry__box:first-child {
.entry__header {
.entry__att-image {
height: calc((1024px - (1024px * 0.4)) / 1.5);
}
}
}
}
}
}
@media (max-width: 1099px) {
#header .header__menu {
display: none;
}
#header .header__tickets--desktop {
display: none;
}
#header .header__mobile-button {
display: flex !important;
align-items: center;
justify-content: center;
}
#header .header__content {
justify-content: space-between;
}
.entry {
.entry__content {
.entry__box:first-child {
.entry__header {
.entry__att-image {
height: 37vw;
}
}
}
}
}
#beneficios {
.beneficios__content {
.beneficios__group {
justify-content: space-evenly;
}
}
}
.beneficios-item {
margin: 0.5rem;
}
.beneficios-item:first-child {
.beneficios-item__info {
padding-right: 1.5rem;
}
}
.beneficios-item:nth-child(2) {
transform: scale(1);
}
.beneficios-item:last-child {
.beneficios-item__info {
padding-left: 1.5rem;
}
}
.entry-time {
display: none;
}
.entry-speakers {
width: 100% !important;
padding: 0;
margin-bottom: 2rem !important;
}
.entry-excerpt {
width: 100% !important;
padding: 0;
}
}
@media (max-width: 767px) {
.where .where__location-layout {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.where .where__venue-brand {
min-height: 180px;
padding: 1.5rem;
}
.where .where__venue-brand img {
max-width: 260px;
max-height: 130px;
}
.where .where__map,
.where .where__map iframe {
min-height: 300px;
}
.where .where__map {
border-top: 1px solid #F3E8D3;
border-left: 0;
}
.where .where__maps-link {
max-width: 100%;
padding-inline: 1rem;
font-size: 0.76rem;
}
}
@media (width < 900px) {
.entry {
.entry__content {
.entry__box:first-child {
width: 100%;
.entry__header {
.entry__att-image {
height: 53vw;
}
}
}
.entry__box:last-child {
width: 100%;
padding-top: 3rem;
border-top: 3px dashed var(--primary-color);
}
}
}
}
@media (width < 768px) {
.congreso-card {
.congreso-card__thumbnail {
display: none;
}
.congreso-card__info {
width: 100%;
padding-bottom: 5rem;
}
}
.activities {
.activities__content {
padding: 1rem 0.5rem;
}
}
.activity-item__time {
left: -6.3rem;
}
.activity-item:hover .activity-item__time {
left: -6.9rem;
}
.activity-item:hover .activity-item__box {
transform: translateX(0.4rem);
}
.activity-item {
.activity-item__box {
h3 {
font-size: 1.3em;
}
}
}
.activity-item__inner:first-child {
span {
font-size: 0.9em;
}
}
}
@media (width < 720px) {
/*
#supports {
.supports__cat {
.supports__title,
.supports__slider {
width: 100%;
margin: 0.5rem;
}
.supports__title {
height: auto;
padding: 1rem;
border-radius: 15px 15px 0 0;
}
.supports__slider {
border-radius: 0 0 15px 15px;
}
}
}*/
.posters {
.posters__box {
width: 100% !important;
}
}
}
@media (width < 620px) {
.services-menu {
.services-submenu__nav {
.nav {
.nav-link {
width: calc(50% - 1rem);
}
}
}
}
.service-item {
.service-item__image {
width: 200px;
}
.service-item__info {
width: calc(100% - 100px);
p {
-webkit-line-clamp: 3;
line-clamp: 3;
}
}
}
#footer {
.footer__content {
gap: 0;
.footer__inner {
width: 100%;
margin: 1rem 0;
}
}
}
.entry-activity__presidents,
.entry-activity__coordinators {
width: 100% !important;
}
.entry-activity__info-item {
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
display: flex;
align-items: center;
justify-content: flex-start;
h5 {
font-size: 1em;
}
}
}
@media (width < 576px) {
#nav-tab .congreso__button {
height: 58px;
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.c-social-media {
display: none;
}
}
@media (width < 512px) {
.activity-item {
.activity-item__box {
h3 {
font-size: 1.15em;
}
}
}
.activity-item__inner:first-child {
span {
font-size: 0.8em;
letter-spacing: normal;
}
}
.activity-item__time {
font-weight: 400;
font-size: 0.9em;
width: 5rem;
height: 2rem;
left: -3.3rem;
transform: rotateZ(270deg);
transform-origin: top;
clip-path: none;
}
.activities__group {
padding-left: 0;
}
.activity-item:hover .activity-item__time {
left: -3.3rem;
}
.activity-item:hover .activity-item__box {
transform: translateX(0);
}
.categories {
padding: 2rem 0.6rem;
}
}
@media (width < 480px) {
.services-menu {
.services-submenu__nav,
.services-menu__nav {
.nav {
.nav-link {
width: calc(100% - 1rem);
}
}
}
}
.service-item {
.service-item__image {
width: 0;
}
.service-item__info {
width: 100%;
}
}
.entry {
padding: 0;
.entry__content {
width: 100%;
max-width: none;
margin: 0;
padding: 1rem;
}
}
.activity-item__button {
display: none;
}
.activity-item__inner:last-child {
display: none;
}
}