/* Preset: Landing Alcázar completa */
.visual-layout-page .alc-page,
.visual-layout-page .alc-section,
.visual-layout-page .alc-footer-section {
font-family: Inter, Arial, sans-serif;
color: #24211d;
}
.visual-layout-page .alc-hero {
color: #fff;
min-height: 520px;
display: flex;
align-items: center;
}
.visual-layout-page .alc-hero .ve-section-inner {
width: min(1180px, calc(100% - 48px));
}
.visual-layout-page .alc-hero-copy {
max-width: 680px;
}
.visual-layout-page .alc-kicker {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
opacity: .92;
}
.visual-layout-page .alc-kicker.dark {
color: #a98a22;
opacity: 1;
}
.visual-layout-page .alc-hero h1 {
margin: 0 0 22px;
font-size: clamp(40px, 6vw, 76px);
line-height: .98;
font-weight: 800;
letter-spacing: -.045em;
}
.visual-layout-page .alc-lead {
max-width: 520px;
font-size: 22px;
line-height: 1.34;
margin: 0 0 18px;
}
.visual-layout-page .alc-lead-small {
font-size: 18px;
opacity: .9;
}
.visual-layout-page .alc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 20px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
margin-top: 10px;
}
.visual-layout-page .alc-btn-light {
background: #fff;
color: #1f1e1b;
}
.visual-layout-page .alc-section .ve-section-inner,
.visual-layout-page .alc-footer-section .ve-section-inner {
width: min(1180px, calc(100% - 48px));
}
.visual-layout-page .alc-section-title,
.visual-layout-page .alc-heading-block h2 {
margin: 0 0 30px;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -.035em;
}
.visual-layout-page .alc-section-title.center,
.visual-layout-page .center {
text-align: center;
}
.visual-layout-page .alc-section-title.small {
font-size: clamp(24px, 3vw, 34px);
}
.visual-layout-page .alc-tour-card {
position: relative;
background: #fff;
overflow: hidden;
border: 1px solid #e6dfd1;
}
.visual-layout-page .alc-card-badge-wrap {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
}
.visual-layout-page .alc-badge {
display: inline-block;
border-radius: 999px;
padding: 7px 12px;
background: #1f1e1b;
color: #fff;
font-size: 12px;
font-weight: 700;
}
.visual-layout-page .alc-card-body {
padding: 22px 24px 24px;
}
.visual-layout-page .alc-card-body h3 {
font-size: 22px;
line-height: 1.05;
letter-spacing: -.025em;
margin: 0 0 12px;
}
.visual-layout-page .alc-card-body .alc-meta {
font-size: 13px;
color: #746b5c;
margin-bottom: 12px;
}
.visual-layout-page .alc-card-body .alc-meta span {
display: block;
margin-top: 4px;
}
.visual-layout-page .alc-card-body ul {
list-style: none;
padding: 0;
margin: 0 0 18px;
background: #f6f1e8;
border-radius: 12px;
padding: 13px 15px;
}
.visual-layout-page .alc-card-body li {
font-size: 14px;
margin: 7px 0;
}
.visual-layout-page .alc-card-body li:before {
content: '✓';
color: #ae8f22;
font-weight: 800;
margin-right: 8px;
}
.visual-layout-page .alc-card-bottom {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.visual-layout-page .alc-card-bottom small {
display: block;
font-size: 12px;
color: #786e5d;
}
.visual-layout-page .alc-card-bottom strong {
display: inline-block;
font-size: 22px;
margin-right: 8px;
}
.visual-layout-page .alc-old-price {
color: #8f877b;
text-decoration: line-through;
font-size: 14px;
}
.visual-layout-page .alc-card-bottom a {
display: inline-flex;
background: #1f1e1b;
color: #fff;
border-radius: 999px;
padding: 10px 16px;
text-decoration: none;
font-weight: 700;
font-size: 13px;
}
.visual-layout-page .alc-info-card,
.visual-layout-page .alc-plan-card,
.visual-layout-page .alc-benefit-card {
background: #fff;
border: 1px solid #e5ddcd;
}
.visual-layout-page .alc-info-content {
display: flex;
gap: 14px;
align-items: flex-start;
color: #4d463b;
font-size: 15px;
line-height: 1.45;
}
.visual-layout-page .alc-info-content span,
.visual-layout-page .alc-benefit-content span {
font-size: 24px;
line-height: 1;
}
.visual-layout-page .alc-heading-block {
margin-bottom: 16px;
}
.visual-layout-page .alc-article-card {
background: transparent;
}
.visual-layout-page .alc-article-body h3,
.visual-layout-page .alc-benefit-content h3,
.visual-layout-page .alc-step-content h3,
.visual-layout-page .alc-plan-card-content h3 {
margin: 14px 0 10px;
font-size: 20px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -.02em;
}
.visual-layout-page .alc-article-body p,
.visual-layout-page .alc-benefit-content p,
.visual-layout-page .alc-step-content p,
.visual-layout-page .alc-plan-card-content p,
.visual-layout-page .alc-plan-intro p,
.visual-layout-page .alc-location-copy p {
color: #5b5348;
line-height: 1.55;
font-size: 15px;
}
.visual-layout-page .alc-article-body a,
.visual-layout-page .alc-text-link {
color: #a98a22;
font-weight: 800;
text-decoration: none;
}
.visual-layout-page .alc-plan-intro {
font-size: 18px;
}
.visual-layout-page .alc-plan-card {
background: #fbf8f2;
}
.visual-layout-page .alc-hours {
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.visual-layout-page .alc-hours span {
color: #8a7b61;
font-size: 13px;
}
.visual-layout-page .alc-hours strong {
font-size: 18px;
}
.visual-layout-page .alc-hours small {
color: #746b5c;
}
.visual-layout-page .alc-address {
margin: 18px 0;
padding: 18px;
background: #f7f2e8;
border-radius: 14px;
}
.visual-layout-page .alc-map {
min-height: 360px;
border-radius: 18px;
background: linear-gradient(135deg, #dfd7c5, #f7f2e8);
border: 1px solid #e0d7c5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #2a251f;
}
.visual-layout-page .alc-map span {
background: #fff;
border-radius: 999px;
padding: 8px 14px;
margin-bottom: 10px;
font-size: 13px;
}
.visual-layout-page .alc-map strong {
font-size: 32px;
letter-spacing: -.03em;
}
.visual-layout-page .alc-step-grid {
position: relative;
}
.visual-layout-page .alc-step-card {
text-align: center;
background: transparent;
}
.visual-layout-page .alc-step-number {
width: 42px;
height: 42px;
border-radius: 999px;
margin: 0 auto 14px;
display: grid;
place-items: center;
background: #1f1e1b;
color: #fff;
font-weight: 800;
}
.visual-layout-page .alc-benefit-card {
background: #fff;
}
.visual-layout-page .alc-reviews-head .alc-rating {
margin: 10px 0 0;
font-size: 42px;
line-height: 1;
font-weight: 800;
color: #1f1e1b;
}
.visual-layout-page .alc-review-card {
background: #fff;
border: 1px solid #e6dfd1;
}
.visual-layout-page .alc-stars {
color: #b79723;
letter-spacing: 2px;
margin: 0 0 14px;
}
.visual-layout-page .alc-review-content blockquote {
margin: 0 0 18px;
color: #51493e;
line-height: 1.55;
}
.visual-layout-page .alc-review-content small {
color: #827768;
}
.visual-layout-page .alc-review-note {
margin-top: 22px;
color: #6d6253;
font-size: 14px;
}
.visual-layout-page .alc-faq-list details {
border-top: 1px solid #e3dccd;
padding: 18px 0;
}
.visual-layout-page .alc-faq-list details:last-of-type {
border-bottom: 1px solid #e3dccd;
}
.visual-layout-page .alc-faq-list summary {
cursor: pointer;
font-weight: 800;
font-size: 17px;
}
.visual-layout-page .alc-faq-list p {
color: #5d5448;
line-height: 1.5;
}
.visual-layout-page .alc-more-faqs {
text-align: center;
margin-top: 22px;
color: #a98a22;
font-weight: 800;
}
.visual-layout-page .alc-footer-section,
.visual-layout-page .alc-footer-section p,
.visual-layout-page .alc-footer-section h3 {
color: #f8f3e8;
}
.visual-layout-page .alc-footer-section h3 {
margin: 0 0 14px;
font-size: 16px;
}
.visual-layout-page .alc-footer-section p {
color: #cfc6b5;
line-height: 1.7;
font-size: 14px;
}
.visual-layout-page .alc-payments {
letter-spacing: .08em;
font-weight: 800;
}
.visual-layout-page .alc-footer-legal {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 34px;
padding-top: 22px;
}
.visual-layout-page .alc-footer-legal p {
font-size: 12px;
color: #b9ad9a;
}
@media (max-width: 980px) {
.visual-layout-page .alc-tour-grid,
.visual-layout-page .alc-article-grid,
.visual-layout-page .alc-plan-cards,
.visual-layout-page .alc-benefits-grid,
.visual-layout-page .alc-review-grid,
.visual-layout-page .alc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.visual-layout-page .alc-plan-layout,
.visual-layout-page .alc-location-layout {
grid-template-columns: 1fr !important;
}
.visual-layout-page .alc-step-grid,
.visual-layout-page .alc-info-strip {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 640px) {
.visual-layout-page .alc-tour-grid,
.visual-layout-page .alc-article-grid,
.visual-layout-page .alc-plan-cards,
.visual-layout-page .alc-benefits-grid,
.visual-layout-page .alc-review-grid,
.visual-layout-page .alc-footer-grid,
.visual-layout-page .alc-step-grid,
.visual-layout-page .alc-info-strip {
grid-template-columns: 1fr !important;
}
.visual-layout-page .alc-hero {
min-height: 440px;
}
.visual-layout-page .alc-card-bottom {
align-items: flex-start;
flex-direction: column;
}
}
/* Fuente oculta del formulario real de reserva que usa el modal de las cards dinámicas. */
.visual-layout-page .alc-booking-source {
position: absolute !important;
left: -100000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.visual-layout-page .alc-hidden-tour-radios {
display: none !important;
}
/* Cuando el formulario se mueve al modal, deja de depender del contenedor oculto. */
.tour-modal #form_reserva {
position: static !important;
width: 100% !important;
height: auto !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.visual-layout-page .alc-dynamic-tour-grid {
margin-top: 8px;
}
.visual-layout-page .alc-dynamic-tour-grid .titulo_tours_principal {
display: none;
}
/* Fase 7: formulario legacy real dentro del modal de tarjetas dinámicas. */
#modal-form-container #form_reserva.booking-modal-mode {
display: block !important;
width: 100% !important;
}
#modal-form-container #form_reserva.booking-modal-mode .booking-form-container {
max-width: 100% !important;
width: 100% !important;
}
#modal-form-container #form_reserva.booking-modal-mode .booking-form-row {
display: flex !important;
gap: 32px;
align-items: flex-start;
}
#modal-form-container #form_reserva.booking-modal-mode .booking-form-left,
#modal-form-container #form_reserva.booking-modal-mode .booking-form-right {
display: block !important;
}
#modal-form-container #form_reserva.booking-modal-mode .alc-hidden-tour-radios {
display: none !important;
}
#modal-form-container #form_reserva.booking-modal-mode #bloque_calendario,
#modal-form-container #form_reserva.booking-modal-mode #bloque_hora,
#modal-form-container #form_reserva.booking-modal-mode #bloque_personas,
#modal-form-container #form_reserva.booking-modal-mode #client_form_container,
#modal-form-container #form_reserva.booking-modal-mode #payment_button_container {
opacity: 1 !important;
visibility: visible !important;
}
#modal-form-container #loader {
position: relative;
margin-bottom: 18px;
}
@media (max-width: 900px) {
#modal-form-container #form_reserva.booking-modal-mode .booking-form-row {
flex-direction: column;
}
}
/* ─── Fase 21: páginas internas y bloques reutilizables ──────────────────── */
.visual-layout-page .alc-inner-hero,
.visual-layout-page .alc-faq-page-section,
.visual-layout-page .alc-help-section,
.visual-layout-page .alc-related-experiences,
.visual-layout-page .alc-article-hero,
.visual-layout-page .alc-article-body-section,
.visual-layout-page .alc-legal-body-section,
.visual-layout-page .alc-page-footer {
font-family: Inter, Arial, sans-serif;
color: #202633;
}
.visual-layout-page .alc-inner-hero .ve-section-inner,
.visual-layout-page .alc-faq-page-section .ve-section-inner,
.visual-layout-page .alc-help-section .ve-section-inner,
.visual-layout-page .alc-related-experiences .ve-section-inner,
.visual-layout-page .alc-article-hero .ve-section-inner,
.visual-layout-page .alc-article-body-section .ve-section-inner,
.visual-layout-page .alc-legal-body-section .ve-section-inner,
.visual-layout-page .alc-page-footer .ve-section-inner {
width: min(1180px, calc(100% - 48px));
}
.visual-layout-page .alc-inner-hero-copy h1,
.visual-layout-page .alc-article-hero-copy h1 {
margin: 0 0 18px;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1.06;
color: #1f2533;
}
.visual-layout-page .alc-inner-hero-copy h1 {
font-size: clamp(38px, 5vw, 58px);
}
.visual-layout-page .alc-inner-hero-copy p {
max-width: 700px;
margin: 0;
color: #667085;
font-size: 18px;
line-height: 1.55;
}
.visual-layout-page .alc-faq-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 32px;
}
.visual-layout-page .alc-faq-filters button {
border: 0;
background: #f1f2f4;
color: #5b6473;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
.visual-layout-page .alc-faq-filters button.active {
background: #17191d;
color: #fff;
}
.visual-layout-page .alc-faq-page-list details {
border: 1px solid #e4e7ec;
border-radius: 10px;
background: #fff;
margin: 0 0 14px;
overflow: hidden;
}
.visual-layout-page .alc-faq-page-list summary {
cursor: pointer;
list-style: none;
padding: 18px 22px;
font-weight: 700;
color: #202633;
position: relative;
}
.visual-layout-page .alc-faq-page-list summary::-webkit-details-marker {
display: none;
}
.visual-layout-page .alc-faq-page-list summary:after {
content: '⌄';
position: absolute;
right: 22px;
color: #8b94a3;
}
.visual-layout-page .alc-faq-page-list details[open] summary:after {
content: '⌃';
}
.visual-layout-page .alc-faq-page-list details p {
border-top: 1px solid #eef0f3;
margin: 0;
padding: 20px 22px;
color: #667085;
line-height: 1.65;
}
.visual-layout-page .alc-faq-page-list.compact {
max-width: 680px;
margin: 0 auto;
}
.visual-layout-page .alc-help-section .ve-section-inner {
border-top: 1px solid #e6e8ec;
padding-top: 34px;
}
.visual-layout-page .alc-help-card {
text-align: center;
max-width: 520px;
margin: 0 auto;
}
.visual-layout-page .alc-help-icon {
width: 34px;
height: 34px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid #cfd5de;
color: #7c8797;
}
.visual-layout-page .alc-help-card h3 {
margin: 0 0 10px;
font-size: 18px;
color: #1f2533;
}
.visual-layout-page .alc-help-card p {
color: #667085;
margin: 0 0 18px;
line-height: 1.55;
}
.visual-layout-page .alc-help-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.visual-layout-page .alc-help-actions a {
border: 1px solid #d5dae2;
border-radius: 8px;
padding: 10px 18px;
text-decoration: none;
color: #202633;
font-weight: 700;
background: #fff;
}
.visual-layout-page .alc-related-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 28px;
}
.visual-layout-page .alc-related-head h2 {
margin: 0;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.1;
letter-spacing: -.035em;
color: #1f2533;
}
.visual-layout-page .alc-related-head a {
color: #202633;
border: 1px solid #d8dde5;
background: #fff;
border-radius: 8px;
padding: 10px 16px;
text-decoration: none;
font-weight: 700;
font-size: 13px;
}
.visual-layout-page .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page .alc-related-experiences .tour-cards-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.visual-layout-page .alc-article-hero {
text-align: center;
}
.visual-layout-page .alc-article-hero-copy {
max-width: 980px;
margin: 0 auto 32px;
}
.visual-layout-page .alc-article-hero-copy h1 {
font-size: clamp(42px, 6vw, 72px);
}
.visual-layout-page .alc-article-hero-copy p {
color: #667085;
font-size: 18px;
line-height: 1.6;
max-width: 980px;
margin: 0 auto;
}
.visual-layout-page .alc-article-layout,
.visual-layout-page .alc-legal-layout {
align-items: start;
}
.visual-layout-page .alc-article-index,
.visual-layout-page .alc-legal-index {
position: sticky;
top: 86px;
color: #667085;
font-size: 13px;
line-height: 1.5;
}
.visual-layout-page .alc-article-index strong,
.visual-layout-page .alc-legal-index strong {
display: block;
color: #202633;
margin-bottom: 16px;
font-size: 15px;
}
.visual-layout-page .alc-article-index a,
.visual-layout-page .alc-legal-index a {
display: block;
color: #8b94a3;
text-decoration: none;
padding: 8px 0 8px 14px;
border-left: 2px solid #eef0f3;
}
.visual-layout-page .alc-article-content,
.visual-layout-page .alc-legal-content {
max-width: 760px;
color: #4d5665;
line-height: 1.72;
font-size: 16px;
}
.visual-layout-page .alc-article-content h2,
.visual-layout-page .alc-legal-content h2 {
margin: 28px 0 10px;
color: #1f2533;
font-size: 27px;
line-height: 1.16;
letter-spacing: -.025em;
}
.visual-layout-page .alc-article-content p,
.visual-layout-page .alc-legal-content p,
.visual-layout-page .alc-legal-content li {
color: #596374;
}
.visual-layout-page .alc-legal-content ul {
padding-left: 22px;
}
.visual-layout-page .alc-legal-content li {
margin: 10px 0;
}
.visual-layout-page .alc-page-footer .ve-section-inner {
color: #d7d7d7;
}
.visual-layout-page .alc-footer-logo {
display: flex;
justify-content: center;
margin-bottom: 58px;
}
.visual-layout-page .alc-footer-logo div {
background: #fff;
color: #303030;
min-width: 120px;
text-align: center;
padding: 12px 24px;
font-weight: 700;
}
.visual-layout-page .alc-footer-disclaimer {
margin-top: 38px;
padding: 22px;
background: rgba(255,255,255,.08);
color: #cfcfcf;
font-size: 13px;
line-height: 1.7;
}
.visual-layout-page .alc-footer-bottom {
display: flex;
justify-content: space-between;
gap: 24px;
margin-top: 40px;
border-top: 1px solid rgba(255,255,255,.12);
padding-top: 26px;
color: #aaa;
font-size: 13px;
}
.palette-category-page-templates .palette-item {
border-color: #cdbb88;
background: #fffdf8;
}
.palette-category-help {
margin: -4px 12px 12px;
color: var(--ve-muted);
font-size: 12px;
line-height: 1.35;
text-align: center;
}
@media (max-width: 980px) {
.visual-layout-page .alc-article-layout,
.visual-layout-page .alc-legal-layout {
grid-template-columns: 1fr !important;
}
.visual-layout-page .alc-article-index,
.visual-layout-page .alc-legal-index {
position: static;
}
.visual-layout-page .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page .alc-related-experiences .tour-cards-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page .alc-footer-bottom,
.visual-layout-page .alc-related-head {
flex-direction: column;
align-items: flex-start;
}
}
/* ─── Fase 27: Home oficial Alcázar Desktop/Mobile ───────────────────────── */
/* Estilo de cabecera del tema componentes. No toca la landing legacy porque este CSS solo se carga en styles/componentes. */
header .pre-header {
display: none !important;
}
#header-floating-bar {
background: #fff !important;
border-bottom: 1px solid #e9e2d6 !important;
box-shadow: none !important;
min-height: 72px;
display: flex;
align-items: center;
margin: 0 !important;
top: 0 !important;
}
#header-floating-bar .container {
width: min(1180px, calc(100% - 48px));
max-width: none;
}
#header-floating-bar figure.logo,
#header-floating-bar .navbar-brand {
margin: 0 !important;
}
#header-floating-bar figure.logo img {
max-height: 42px;
width: auto;
}
#header-floating-bar .nav-link {
color: #39204d !important;
font-weight: 600 !important;
letter-spacing: .01em;
font-size: 14px !important;
padding: 12px 18px !important;
text-transform: none !important;
}
#header-floating-bar .nav-link:hover {
color: #6f3f8f !important;
}
.visual-layout-page {
--ftc-purple: #3d214d;
--ftc-purple-2: #6f3f8f;
--ftc-blue: #0d4152;
--ftc-cream: #f5f0e7;
--ftc-cream-2: #eee8dd;
--ftc-text: #202633;
--ftc-muted: #687083;
--ftc-line: #e4ded1;
--ftc-card: #ffffff;
background: #fff;
}
.visual-layout-page .ftc-home-section,
.visual-layout-page .ftc-home-section * {
box-sizing: border-box;
}
.visual-layout-page .ftc-home-section,
.visual-layout-page .ftc-home-section h1,
.visual-layout-page .ftc-home-section h2,
.visual-layout-page .ftc-home-section h3,
.visual-layout-page .ftc-home-section p,
.visual-layout-page .ftc-home-section a,
.visual-layout-page .ftc-home-section li {
font-family: Inter, Arial, sans-serif;
}
.visual-layout-page .ftc-home-section .ve-section-inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.visual-layout-page .ftc-home-section h1,
.visual-layout-page .ftc-home-section h2,
.visual-layout-page .ftc-home-section h3,
.visual-layout-page .ftc-home-section p {
margin-top: 0;
}
/* Hero oficial: desktop split, mobile stacked */
.visual-layout-page .ftc-home-hero .ve-section-inner {
width: min(1180px, calc(100% - 48px));
}
.visual-layout-page .ftc-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.18fr) !important;
align-items: center;
}
.visual-layout-page .ftc-hero-copy {
color: var(--ftc-purple);
padding: 18px 0 20px;
}
.visual-layout-page .ftc-hero-copy h1 {
font-size: clamp(46px, 6.4vw, 78px);
line-height: .96;
letter-spacing: -.06em;
font-weight: 850;
margin: 0 0 26px;
color: var(--ftc-purple);
}
.visual-layout-page .ftc-hero-copy p {
color: #4d3a5d;
font-size: 17px;
line-height: 1.62;
max-width: 480px;
margin: 0 0 12px;
}
.visual-layout-page .ftc-hero-image {
display: block;
box-shadow: 0 18px 38px rgba(40, 30, 18, .12);
}
/* Títulos generales */
.visual-layout-page .ftc-section-title {
color: var(--ftc-text);
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.08;
letter-spacing: -.04em;
font-weight: 850;
margin: 0 0 34px;
}
.visual-layout-page .ftc-section-title-left { text-align: left; }
.visual-layout-page .ftc-section-title-center { text-align: center; }
.visual-layout-page .ftc-section-head h2 {
color: var(--ftc-text);
font-size: clamp(30px, 4vw, 46px);
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 850;
margin: 0 0 14px;
}
.visual-layout-page .ftc-section-head p {
color: var(--ftc-muted);
font-size: 16px;
line-height: 1.6;
max-width: 640px;
margin: 0 auto;
}
.visual-layout-page .ftc-section-head-center {
text-align: center;
margin-bottom: 38px;
}
.visual-layout-page .ftc-section-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 34px;
}
.visual-layout-page .ftc-slider-dots {
display: inline-flex;
gap: 10px;
}
.visual-layout-page .ftc-slider-dots span {
width: 10px;
height: 10px;
border-radius: 99px;
background: rgba(61, 33, 77, .22);
}
.visual-layout-page .ftc-slider-dots span:first-child {
background: var(--ftc-purple);
}
/* Tarjetas dinámicas de experiencias: mismo HTML real, estilo oficial */
.visual-layout-page .ftc-dynamic-experience-grid {
width: 100%;
}
.visual-layout-page .ftc-dynamic-experience-grid .titulo_tours_principal {
display: none;
}
.visual-layout-page .ftc-tour-grid.tour-cards-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px 42px;
align-items: stretch;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card {
border: 1px solid #e0d8c9;
border-radius: 10px;
box-shadow: none;
background: #fff;
overflow: hidden;
cursor: default;
transform: none !important;
min-height: 100%;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card:hover,
.visual-layout-page .ftc-dynamic-experience-grid .tour-card.selected {
border-color: #c8b8a2;
box-shadow: 0 8px 24px rgba(37, 25, 10, .08);
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-image {
height: 205px;
border-bottom: 1px solid #e7dfd1;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-image img {
filter: none;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-badge {
left: 14px;
bottom: 12px;
top: auto;
background: #fff;
color: var(--ftc-purple);
border-radius: 6px;
font-size: 12px;
padding: 7px 10px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-body {
padding: 22px 24px 20px;
gap: 12px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-title {
font-size: 22px;
line-height: 1.13;
letter-spacing: -.035em;
color: var(--ftc-text);
font-weight: 850;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-subtitle {
color: var(--ftc-muted);
font-size: 14px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-meta {
color: #77707f;
font-size: 13px;
display: flex;
gap: 14px;
align-items: center;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-meta span:before {
color: #9aa0aa;
margin-right: 6px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-meta span:first-child:before {
content: '◷';
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-meta span:last-child:before {
content: '▣';
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-meta strong {
color: var(--ftc-muted);
font-weight: 600;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-features {
background: #f1f0ee;
border-radius: 9px;
padding: 14px 16px;
gap: 8px;
color: #5a5f6c;
font-size: 14px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-features li {
padding-left: 21px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-features li:before {
color: #9298a4;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-footer {
padding-top: 12px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-price small {
color: #8d8d93;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-price strong {
color: var(--ftc-purple);
font-size: 22px;
font-weight: 850;
}
.visual-layout-page .ftc-dynamic-experience-grid .btn-select-tour {
background: var(--ftc-purple);
color: #fff;
border-radius: 999px;
padding: 10px 19px;
font-size: 13px;
line-height: 1;
min-width: 108px;
}
.visual-layout-page .ftc-dynamic-experience-grid .btn-select-tour:hover {
background: var(--ftc-purple-2);
}
/* Avisos tras reserva */
.visual-layout-page .ftc-notes-grid {
border-top: 1px solid #ddd4c5;
padding-top: 34px;
}
.visual-layout-page .ftc-note-item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
align-items: start;
color: #67606d;
line-height: 1.45;
font-size: 14px;
}
.visual-layout-page .ftc-note-item span {
width: 32px;
height: 32px;
border-radius: 999px;
display: grid;
place-items: center;
color: #a69578;
border: 1px solid #cfc5b7;
font-size: 15px;
}
.visual-layout-page .ftc-note-item p {
margin: 0;
}
/* Galería */
.visual-layout-page .ftc-gallery-grid {
display: grid;
grid-template-columns: 1.08fr 1fr 1fr;
grid-template-rows: 190px 190px;
gap: 18px;
}
.visual-layout-page .ftc-gallery-grid img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
}
.visual-layout-page .ftc-gallery-grid .ftc-gallery-main {
grid-row: 1 / 3;
height: 100%;
}
/* Artículos */
.visual-layout-page .ftc-article-card {
background: transparent;
border: 0;
box-shadow: none;
}
.visual-layout-page .ftc-article-content h3 {
color: var(--ftc-text);
margin: 18px 0 10px;
font-size: 21px;
line-height: 1.15;
font-weight: 850;
letter-spacing: -.03em;
}
.visual-layout-page .ftc-article-content p {
color: var(--ftc-muted);
font-size: 14px;
line-height: 1.58;
margin-bottom: 20px;
}
.visual-layout-page .ftc-article-content a {
color: var(--ftc-purple);
text-decoration: none;
font-weight: 800;
font-size: 14px;
}
/* Planifica */
.visual-layout-page .ftc-plan,
.visual-layout-page .ftc-plan h2,
.visual-layout-page .ftc-plan h3,
.visual-layout-page .ftc-plan p,
.visual-layout-page .ftc-plan strong,
.visual-layout-page .ftc-plan small {
color: #fff;
}
.visual-layout-page .ftc-plan-intro {
max-width: 560px;
margin-bottom: 48px;
}
.visual-layout-page .ftc-plan-intro h2,
.visual-layout-page .ftc-benefits-head h2 {
font-size: clamp(30px, 4.6vw, 48px);
line-height: 1.08;
letter-spacing: -.045em;
font-weight: 850;
margin-bottom: 18px;
}
.visual-layout-page .ftc-plan-intro p,
.visual-layout-page .ftc-benefits-head p {
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.62;
}
.visual-layout-page .ftc-plan-card {
border-top: 1px solid rgba(255,255,255,.22);
padding-top: 20px;
}
.visual-layout-page .ftc-plan-card h3 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 850;
}
.visual-layout-page .ftc-plan-card p,
.visual-layout-page .ftc-plan-card small {
color: rgba(255,255,255,.75);
display: block;
margin: 0 0 8px;
}
.visual-layout-page .ftc-plan-card strong {
display: block;
padding: 8px 0;
border-top: 1px solid rgba(255,255,255,.16);
border-bottom: 1px solid rgba(255,255,255,.16);
margin-bottom: 8px;
}
/* Localización */
.visual-layout-page .ftc-location .ve-section-inner {
width: 100%;
max-width: none !important;
}
.visual-layout-page .ftc-location-grid {
grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.25fr) !important;
min-height: 520px;
}
.visual-layout-page .ftc-location-copy {
padding: 72px min(8vw, 96px) 68px max(48px, calc((100vw - 1180px)/2));
max-width: 620px;
justify-self: end;
}
.visual-layout-page .ftc-location-copy h2 {
font-size: clamp(28px, 4vw, 43px);
line-height: 1.08;
font-weight: 850;
letter-spacing: -.04em;
margin-bottom: 26px;
color: var(--ftc-text);
}
.visual-layout-page .ftc-location-copy p {
color: var(--ftc-muted);
line-height: 1.62;
font-size: 15px;
}
.visual-layout-page .ftc-location-copy hr {
border: 0;
border-top: 1px solid #e0d9cc;
margin: 28px 0;
}
.visual-layout-page .ftc-address {
background: #f1eee8;
border-radius: 10px;
padding: 22px 24px;
margin-top: 22px;
color: #596071;
}
.visual-layout-page .ftc-address strong {
color: var(--ftc-text);
display: block;
margin-bottom: 8px;
}
.visual-layout-page .ftc-address a {
color: var(--ftc-purple);
display: inline-block;
margin-top: 12px;
font-weight: 800;
text-decoration: none;
}
.visual-layout-page .ftc-map-box {
min-height: 520px;
background:
radial-gradient(circle at 50% 50%, rgba(61,33,77,.18) 0 42px, transparent 43px),
linear-gradient(35deg, transparent 0 47%, rgba(0,0,0,.08) 48% 49%, transparent 50% 100%),
linear-gradient(120deg, transparent 0 47%, rgba(0,0,0,.07) 48% 49%, transparent 50% 100%),
linear-gradient(#efefed, #dadad8);
background-size: auto, 220px 220px, 180px 180px, auto;
display: grid;
place-items: center;
filter: grayscale(1);
}
.visual-layout-page .ftc-map-pin {
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--ftc-purple);
color: #fff;
display: grid;
place-items: center;
font-size: 34px;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
/* Cómo funciona */
.visual-layout-page .ftc-how-grid {
align-items: start;
}
.visual-layout-page .ftc-how-intro h2 {
color: var(--ftc-text);
font-size: clamp(30px, 4vw, 44px);
letter-spacing: -.04em;
font-weight: 850;
margin-bottom: 18px;
}
.visual-layout-page .ftc-how-intro p {
color: var(--ftc-muted);
line-height: 1.62;
max-width: 320px;
}
.visual-layout-page .ftc-steps-list > div {
display: grid;
grid-template-columns: 70px 1fr;
gap: 26px;
padding: 0 0 34px;
margin-bottom: 34px;
border-bottom: 1px solid #e5ddce;
}
.visual-layout-page .ftc-steps-list > div:last-child {
margin-bottom: 0;
}
.visual-layout-page .ftc-steps-list strong {
color: #a58f67;
font-size: 30px;
letter-spacing: -.04em;
}
.visual-layout-page .ftc-steps-list h3 {
color: var(--ftc-text);
font-size: 20px;
font-weight: 850;
margin: 0 0 8px;
}
.visual-layout-page .ftc-steps-list p {
color: var(--ftc-muted);
margin: 0;
line-height: 1.58;
}
/* Beneficios */
.visual-layout-page .ftc-benefits,
.visual-layout-page .ftc-benefits h2,
.visual-layout-page .ftc-benefits h3,
.visual-layout-page .ftc-benefits p {
color: #fff;
}
.visual-layout-page .ftc-benefits-head {
max-width: 600px;
margin-bottom: 48px;
}
.visual-layout-page .ftc-benefit-item span {
color: #b4a56a;
font-size: 26px;
display: inline-block;
margin-bottom: 16px;
}
.visual-layout-page .ftc-benefit-item h3 {
font-size: 20px;
line-height: 1.16;
letter-spacing: -.025em;
font-weight: 850;
margin-bottom: 10px;
}
.visual-layout-page .ftc-benefit-item p {
color: rgba(255,255,255,.76);
line-height: 1.58;
font-size: 14px;
}
/* Opiniones */
.visual-layout-page .ftc-reviews-head {
text-align: center;
margin-bottom: 36px;
}
.visual-layout-page .ftc-reviews-head h2 {
color: var(--ftc-text);
font-size: clamp(28px, 4vw, 42px);
line-height: 1.08;
letter-spacing: -.04em;
font-weight: 850;
margin-bottom: 12px;
}
.visual-layout-page .ftc-stars {
color: #f5a623;
letter-spacing: 2px;
}
.visual-layout-page .ftc-review-card {
border: 0;
background: #fff;
box-shadow: none;
}
.visual-layout-page .ftc-review-content blockquote {
margin: 12px 0 20px;
color: #606878;
line-height: 1.58;
}
.visual-layout-page .ftc-review-content strong {
color: var(--ftc-text);
}
.visual-layout-page .ftc-review-content small {
color: #8a92a0;
}
/* FAQs */
.visual-layout-page .ftc-faq-list details {
border-top: 1px solid #e3e6eb;
padding: 18px 0;
}
.visual-layout-page .ftc-faq-list details:last-of-type {
border-bottom: 1px solid #e3e6eb;
}
.visual-layout-page .ftc-faq-list summary {
cursor: pointer;
color: var(--ftc-text);
font-weight: 750;
list-style: none;
position: relative;
padding-right: 26px;
}
.visual-layout-page .ftc-faq-list summary::-webkit-details-marker { display: none; }
.visual-layout-page .ftc-faq-list summary:after {
content: '+';
position: absolute;
right: 0;
top: 0;
color: #878f9d;
}
.visual-layout-page .ftc-faq-list details[open] summary:after { content: '−'; }
.visual-layout-page .ftc-faq-list p {
color: var(--ftc-muted);
line-height: 1.58;
}
.visual-layout-page .ftc-more {
text-align: center;
margin-top: 30px;
}
.visual-layout-page .ftc-more a {
display: inline-flex;
border: 1px solid #d7dce4;
border-radius: 999px;
padding: 12px 22px;
color: var(--ftc-text);
font-weight: 800;
text-decoration: none;
}
/* Footer oficial */
.visual-layout-page .ftc-footer,
.visual-layout-page .ftc-footer .ve-section-inner {
background: #fff;
}
.visual-layout-page .ftc-footer-logo {
display: flex;
justify-content: center;
margin-bottom: 58px;
}
.visual-layout-page .ftc-footer-logo div {
color: var(--ftc-purple);
border: 1px solid #e1d8e6;
min-width: 126px;
padding: 14px 28px;
text-align: center;
font-weight: 800;
}
.visual-layout-page .ftc-footer-grid {
border-top: 1px solid #e6e0d8;
padding-top: 34px;
}
.visual-layout-page .ftc-footer-col h3,
.visual-layout-page .ftc-payment-row h3 {
color: var(--ftc-purple);
font-size: 15px;
margin-bottom: 16px;
font-weight: 850;
}
.visual-layout-page .ftc-footer-col p,
.visual-layout-page .ftc-footer-disclaimer p,
.visual-layout-page .ftc-footer-bottom p {
color: #6a6470;
line-height: 1.7;
font-size: 14px;
}
.visual-layout-page .ftc-payment-row {
margin-top: 42px;
border-top: 1px solid #e6e0d8;
padding-top: 28px;
}
.visual-layout-page .ftc-payment-row p {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.visual-layout-page .ftc-payment-row span {
min-width: 42px;
min-height: 28px;
display: inline-grid;
place-items: center;
border-radius: 4px;
background: #eeeaf1;
color: #605768;
font-size: 12px;
font-weight: 800;
}
.visual-layout-page .ftc-footer-disclaimer {
margin-top: 34px;
background: #f5f1ea;
padding: 24px 28px;
}
.visual-layout-page .ftc-footer-bottom {
border-top: 1px solid #e6e0d8;
margin-top: 36px;
padding-top: 28px;
display: flex;
justify-content: space-between;
gap: 24px;
}
/* Editor: en modo edición, que los bloques oficiales sigan siendo manejables. */
.editor-mode .ftc-location .ve-section-inner {
width: 100%;
}
.editor-mode .ftc-gallery-mosaic,
.editor-mode .ftc-steps-list,
.editor-mode .ftc-map-box {
min-height: 80px;
}
@media (max-width: 1024px) {
.visual-layout-page .ftc-tour-grid.tour-cards-grid,
.visual-layout-page .ftc-article-grid,
.visual-layout-page .ftc-plan-grid,
.visual-layout-page .ftc-benefits-grid,
.visual-layout-page .ftc-review-grid,
.visual-layout-page .ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.visual-layout-page .ftc-hero-grid,
.visual-layout-page .ftc-how-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page .ftc-hero-copy {
max-width: 720px;
}
}
@media (max-width: 720px) {
#header-floating-bar {
min-height: 64px;
}
#header-floating-bar .container {
width: calc(100% - 28px);
}
#header-floating-bar figure.logo img {
max-height: 34px;
}
#header-floating-bar .navbar-collapse {
background: #fff;
padding: 12px 0 16px;
}
.visual-layout-page .ftc-home-section .ve-section-inner {
width: calc(100% - 34px);
}
.visual-layout-page .ftc-home-hero {
padding-top: 34px !important;
padding-bottom: 44px !important;
}
.visual-layout-page .ftc-hero-grid {
gap: 28px !important;
}
.visual-layout-page .ftc-hero-copy {
order: 1;
text-align: left;
}
.visual-layout-page .ftc-hero-grid .component-wrapper:has(.ftc-hero-image),
.visual-layout-page .ftc-hero-image {
order: 2;
}
.visual-layout-page .ftc-hero-copy h1 {
font-size: clamp(40px, 15vw, 66px);
}
.visual-layout-page .ftc-hero-copy p {
font-size: 15px;
max-width: none;
}
.visual-layout-page .ftc-hero-image {
height: 280px !important;
}
.visual-layout-page .ftc-experiences {
padding-top: 54px !important;
}
.visual-layout-page .ftc-section-title-left {
text-align: left;
}
.visual-layout-page .ftc-tour-grid.tour-cards-grid,
.visual-layout-page .ftc-article-grid,
.visual-layout-page .ftc-plan-grid,
.visual-layout-page .ftc-benefits-grid,
.visual-layout-page .ftc-review-grid,
.visual-layout-page .ftc-footer-grid,
.visual-layout-page .ftc-notes-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-image {
height: 196px;
}
.visual-layout-page .ftc-dynamic-experience-grid .tour-card-footer {
flex-direction: row;
align-items: end;
}
.visual-layout-page .ftc-gallery-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 190px 130px 130px;
gap: 10px;
}
.visual-layout-page .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / 3;
grid-row: auto;
}
.visual-layout-page .ftc-location-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page .ftc-location-copy {
padding: 54px 24px;
max-width: none;
justify-self: stretch;
}
.visual-layout-page .ftc-map-box {
min-height: 340px;
}
.visual-layout-page .ftc-steps-list > div {
grid-template-columns: 54px 1fr;
gap: 18px;
}
.visual-layout-page .ftc-footer-bottom,
.visual-layout-page .ftc-section-head-row {
flex-direction: column;
align-items: flex-start;
}
}
/* ─── Fase 29: Localización dinámica real desde meeting_points ──────────────
Importante: este bloque solo corrige el componente dinámico location_access.
No modifica el hero ni el resto de secciones de la Home oficial. */
.visual-layout-page .ftc-location-shell .ve-section-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.visual-layout-page .location-access-grid.ftc-location-grid,
.visual-layout-page .ftc-location-shell .location-access-grid {
display: grid !important;
grid-template-columns: minmax(420px, 42%) minmax(0, 58%) !important;
gap: 0 !important;
min-height: 620px !important;
align-items: stretch !important;
background: #fff !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy,
.visual-layout-page .ftc-location-shell .location-access-copy {
width: 100% !important;
max-width: 560px !important;
justify-self: end !important;
padding: 92px 74px 88px 24px !important;
text-align: left !important;
color: #6a5f4f !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy *,
.visual-layout-page .ftc-location-shell .location-access-copy * {
text-align: left !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy h2,
.visual-layout-page .ftc-location-shell .location-access-copy h2 {
margin: 0 0 34px !important;
max-width: 460px !important;
font-size: clamp(36px, 4vw, 50px) !important;
line-height: 1.08 !important;
font-weight: 850 !important;
letter-spacing: -0.045em !important;
color: #6a5f4f !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy p,
.visual-layout-page .ftc-location-shell .location-access-copy p {
margin: 0 0 18px !important;
font-size: 16px !important;
line-height: 1.62 !important;
color: #5f6474 !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy strong,
.visual-layout-page .ftc-location-shell .location-access-copy strong {
color: #282c38 !important;
font-weight: 850 !important;
text-transform: uppercase;
letter-spacing: .02em;
}
.visual-layout-page .location-access-copy.ftc-location-copy hr,
.visual-layout-page .ftc-location-shell .location-access-copy hr {
border: 0 !important;
border-top: 1px solid #ddd4c5 !important;
margin: 30px 0 !important;
}
.visual-layout-page .location-access-copy .ftc-address,
.visual-layout-page .location-access-copy .alc-address,
.visual-layout-page .ftc-location-shell .ftc-address,
.visual-layout-page .ftc-location-shell .alc-address {
margin-top: 26px !important;
padding: 28px 32px !important;
border-radius: 10px !important;
background: #f1eee8 !important;
color: #5f6474 !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
.visual-layout-page .location-access-copy .ftc-address strong,
.visual-layout-page .location-access-copy .alc-address strong,
.visual-layout-page .ftc-location-shell .ftc-address strong,
.visual-layout-page .ftc-location-shell .alc-address strong {
display: block !important;
margin-bottom: 18px !important;
color: #6a5f4f !important;
font-size: 24px !important;
line-height: 1.15 !important;
text-transform: none !important;
letter-spacing: -0.025em !important;
}
.visual-layout-page .location-access-copy .ftc-address a,
.visual-layout-page .location-access-copy .alc-address a,
.visual-layout-page .ftc-location-shell .ftc-address a,
.visual-layout-page .ftc-location-shell .alc-address a,
.visual-layout-page .ftc-location-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 18px !important;
color: #3d214d !important;
font-weight: 850 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
font-size: 13px !important;
text-decoration: none !important;
}
.visual-layout-page .location-access-map.ftc-map-box,
.visual-layout-page .ftc-location-shell .location-access-map {
position: relative !important;
width: 100% !important;
min-height: 620px !important;
overflow: hidden !important;
background: #e7e5df !important;
display: block !important;
place-items: initial !important;
filter: none !important;
}
.visual-layout-page .location-access-map .ftc-map-embed,
.visual-layout-page .ftc-location-shell .ftc-map-embed {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.visual-layout-page .location-access-map .ftc-map-embed iframe,
.visual-layout-page .ftc-location-shell .ftc-map-embed iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 620px !important;
border: 0 !important;
display: block !important;
filter: grayscale(1) contrast(.92) opacity(.82) !important;
}
.visual-layout-page .location-access-map .ftc-map-embed::after,
.visual-layout-page .ftc-location-shell .ftc-map-embed::after {
content: "";
position: absolute;
inset: 0;
background: rgba(245, 240, 231, .16);
pointer-events: none;
z-index: 1;
}
.visual-layout-page .location-access-map .ftc-map-pin,
.visual-layout-page .ftc-location-shell .ftc-map-pin {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 74px !important;
height: 74px !important;
transform: translate(-50%, -50%) !important;
border-radius: 999px !important;
background: #3d214d !important;
color: #fff !important;
display: grid !important;
place-items: center !important;
z-index: 2 !important;
box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
pointer-events: none !important;
font-size: 0 !important;
filter: none !important;
}
.visual-layout-page .location-access-map .ftc-map-pin::before,
.visual-layout-page .ftc-location-shell .ftc-map-pin::before {
content: "";
position: absolute;
inset: -12px;
border-radius: inherit;
background: rgba(61, 33, 77, .16);
z-index: -1;
}
.visual-layout-page .location-access-map-placeholder {
min-height: 620px !important;
display: grid !important;
place-items: center !important;
color: #6a5f4f !important;
background: #e7e5df !important;
}
.editor-mode .visual-layout-page .ftc-location-shell .component-wrapper[data-type="location_access"],
.editor-mode .visual-layout-page .ftc-location-shell .component-content {
min-height: 620px;
}
@media (max-width: 900px) {
.visual-layout-page .location-access-grid.ftc-location-grid,
.visual-layout-page .ftc-location-shell .location-access-grid {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.visual-layout-page .location-access-copy.ftc-location-copy,
.visual-layout-page .ftc-location-shell .location-access-copy {
max-width: 620px !important;
justify-self: stretch !important;
margin: 0 auto !important;
padding: 56px 24px !important;
}
.visual-layout-page .location-access-map.ftc-map-box,
.visual-layout-page .ftc-location-shell .location-access-map,
.visual-layout-page .location-access-map .ftc-map-embed iframe,
.visual-layout-page .ftc-location-shell .ftc-map-embed iframe,
.visual-layout-page .location-access-map-placeholder {
min-height: 420px !important;
}
}
/* ─── Fase 39.1: ajuste Header/Hero contra Figma + Design System ───────
El contexto correcto para el diseño entregado es FTC + warm.
- brand=ftc aporta el morado de Figma y la familia display Signika.
- temperature=warm se mantiene para fondos/beiges.
Importante: añadimos fallback sans-serif para evitar que, si la fuente no está cargada,
el navegador caiga a una serif genérica. */
.visual-layout-page {
--ftc-brand-primary: var(--foreground-base-brand-mid, #5f3a78);
--ftc-brand-strong: var(--foreground-base-brand-emphasis, #362145);
--ftc-page-bg: var(--background-base-default-soft, #faf8f3);
--ftc-page-bg-mid: var(--background-base-default-mid, #f0ebe1);
--ftc-text-strong: var(--foreground-base-primary-strong, #2a2218);
--ftc-text-muted: var(--foreground-base-secondary-strong, #665c48);
--ftc-border-soft: var(--border-base-secondary-soft, #f0ebe1);
--ftc-radius-hero: var(--radius-lg, 16px);
}
#header-floating-bar {
background: var(--white-100, #fff) !important;
border-bottom: 1px solid var(--ftc-border-soft) !important;
}
#header-floating-bar .nav-link,
#header-floating-bar .dropdown-toggle,
#header-floating-bar .selector-idioma,
#header-floating-bar .selector-moneda {
color: var(--ftc-brand-strong) !important;
font-family: var(--font-action-nav-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
}
#header-floating-bar .nav-link:hover,
#header-floating-bar .dropdown-toggle:hover {
color: var(--ftc-brand-primary) !important;
}
.visual-layout-page .ftc-home-section,
.visual-layout-page .ftc-home-section p,
.visual-layout-page .ftc-home-section li,
.visual-layout-page .ftc-home-section a {
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif;
}
.visual-layout-page .ftc-home-hero {
background: var(--white-100, #fff) !important;
padding-top: clamp(64px, 6vw, 92px) !important;
padding-bottom: clamp(64px, 6vw, 92px) !important;
}
.visual-layout-page .ftc-home-hero .ve-section-inner {
width: min(1180px, calc(100% - 48px));
}
.visual-layout-page .ftc-hero-grid {
grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.22fr) !important;
gap: clamp(52px, 6vw, 88px) !important;
align-items: center !important;
}
.visual-layout-page .ftc-hero-copy {
max-width: 420px;
color: var(--ftc-brand-primary) !important;
padding: 0 !important;
}
.visual-layout-page .ftc-hero-copy h1 {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-display-hero-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: clamp(46px, 4.15vw, 62px) !important;
line-height: 1.08 !important;
letter-spacing: -.035em !important;
font-weight: 700 !important;
margin: 0 0 24px !important;
}
.visual-layout-page .ftc-hero-copy p {
color: var(--ftc-text-muted) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: 1.45 !important;
max-width: 390px !important;
margin: 0 0 12px !important;
}
.visual-layout-page .ftc-hero-image {
border-radius: var(--ftc-radius-hero) !important;
border: 1px solid var(--ftc-border-soft) !important;
box-shadow: none !important;
height: 390px !important;
object-fit: cover !important;
}
.visual-layout-page .ftc-experiences {
background: var(--ftc-page-bg) !important;
}
.visual-layout-page .ftc-section-title,
.visual-layout-page .ftc-section-head h2 {
color: var(--ftc-text-strong) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
letter-spacing: -.02em !important;
}
@media (max-width: 1024px) {
.visual-layout-page .ftc-hero-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page .ftc-hero-copy {
max-width: 640px;
}
}
@media (max-width: 720px) {
.visual-layout-page .ftc-home-hero {
padding-top: 40px !important;
padding-bottom: 48px !important;
}
.visual-layout-page .ftc-hero-grid {
gap: 28px !important;
}
.visual-layout-page .ftc-hero-copy h1 {
font-size: clamp(40px, 13vw, 56px) !important;
line-height: 1.04 !important;
}
.visual-layout-page .ftc-hero-copy p {
max-width: none !important;
}
.visual-layout-page .ftc-hero-image {
height: 280px !important;
}
}
/* ─── Fase 40: Home Desktop completa según Figma + Design System ───────────
Capa final de ajuste visual. No modifica lógica, textos, mapa ni reservas.
Usa los tokens oficiales como base y corrige composición/espaciados de la home. */
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-home-container: min(1180px, calc(100% - 64px));
--ftc-hero-container: min(1050px, calc(100% - 64px));
--ftc-brand-primary: var(--foreground-base-brand-mid, #5f3a78);
--ftc-brand-strong: var(--foreground-base-brand-emphasis, #362145);
--ftc-brand-soft: var(--background-base-brand-soft, #f8f0fc);
--ftc-page-bg: var(--background-base-default-soft, #faf8f3);
--ftc-page-bg-mid: var(--background-base-default-mid, #f0ebe1);
--ftc-text-strong: var(--foreground-base-primary-strong, #2a2218);
--ftc-text-default: var(--foreground-base-primary-mid, #484132);
--ftc-text-muted: var(--foreground-base-secondary-strong, #665c48);
--ftc-border-soft: var(--border-base-secondary-soft, #f0ebe1);
--ftc-radius-sm: var(--radius-sm, 8px);
--ftc-radius-md: var(--radius-md, 12px);
--ftc-radius-lg: var(--radius-lg, 16px);
--ftc-shadow-card: 0 18px 45px rgba(42, 34, 24, .07);
background: var(--white-100, #fff) !important;
color: var(--ftc-text-default) !important;
}
/* Header desktop */
#header-floating-bar {
min-height: 74px !important;
padding: 0 !important;
background: var(--white-100, #fff) !important;
border: 0 !important;
box-shadow: none !important;
}
#header-floating-bar .container {
width: min(1180px, calc(100% - 64px)) !important;
max-width: 1180px !important;
min-height: 74px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 !important;
}
#header-floating-bar .navbar-brand {
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
#header-floating-bar figure.logo {
margin: 0 !important;
line-height: 1 !important;
}
#header-floating-bar figure.logo img {
max-height: 36px !important;
width: auto !important;
object-fit: contain !important;
}
#header-floating-bar .navbar-collapse {
flex-grow: 0 !important;
align-items: center !important;
gap: 22px !important;
}
#header-floating-bar .navbar-nav {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 24px !important;
margin: 0 !important;
}
#header-floating-bar .navbar-nav .nav-item {
width: auto !important;
flex: 0 0 auto !important;
padding: 0 !important;
}
#header-floating-bar .nav-link,
#header-floating-bar .dropdown-toggle,
#header-floating-bar .selector-idioma,
#header-floating-bar .selector-moneda,
#header-floating-bar .select-selected {
color: var(--ftc-brand-strong) !important;
font-family: var(--font-action-nav-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
#header-floating-bar .nav-link {
padding: 0 !important;
}
#header-floating-bar .nav-link:hover,
#header-floating-bar .select-selected:hover {
color: var(--ftc-brand-primary) !important;
}
#header-floating-bar .componentes-header-selectors,
#header-floating-bar .header-selectors {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-left: 18px !important;
}
#header-floating-bar .custom-select {
min-width: auto !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
#header-floating-bar .select-selected {
background: transparent !important;
border: 0 !important;
padding: 0 8px !important;
min-height: auto !important;
}
/* Contenedores y tipografía base */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section .ve-section-inner {
width: var(--ftc-home-container) !important;
max-width: 1180px !important;
margin: 0 auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section li,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section summary,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section small {
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section h1,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section h3 {
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
color: var(--ftc-text-strong) !important;
letter-spacing: var(--font-display-section-letter-spacing, 0) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2 {
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
font-weight: 700 !important;
margin: 0 0 32px !important;
}
/* Hero */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero {
background: var(--white-100, #fff) !important;
padding-top: 74px !important;
padding-bottom: 74px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero .ve-section-inner {
width: var(--ftc-hero-container) !important;
max-width: 1050px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
display: grid !important;
grid-template-columns: minmax(260px, 340px) minmax(420px, 560px) !important;
justify-content: space-between !important;
align-items: center !important;
gap: clamp(72px, 8vw, 116px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy {
max-width: 330px !important;
padding: 0 !important;
color: var(--ftc-brand-primary) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy .editable-html {
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-display-hero-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: clamp(40px, 3.55vw, 50px) !important;
line-height: 1.08 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
margin: 0 0 22px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
color: var(--ftc-text-muted) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: 1.45 !important;
max-width: 285px !important;
margin: 0 0 10px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-wrapper:has(.ftc-hero-image),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-content:has(.ftc-hero-image) {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
width: 100% !important;
max-width: 560px !important;
height: 335px !important;
object-fit: cover !important;
border-radius: var(--radius-lg, 16px) !important;
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
box-shadow: none !important;
display: block !important;
}
/* Experiencias */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews {
background: var(--ftc-page-bg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences {
padding-top: 78px !important;
padding-bottom: 34px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left {
text-align: left !important;
color: var(--ftc-text-strong) !important;
position: relative !important;
padding-bottom: 14px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 1px;
background: var(--temperature-500, #a89275);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 32px !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card {
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
border-radius: var(--radius-lg, 16px) !important;
background: var(--white-100, #fff) !important;
box-shadow: none !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card.selected {
box-shadow: var(--ftc-shadow-card) !important;
border-color: var(--border-base-secondary-mid, #ded9d0) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-image {
height: 178px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-badge {
background: var(--white-100, #fff) !important;
color: var(--ftc-text-strong) !important;
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
border-radius: var(--radius-sm, 8px) !important;
box-shadow: none !important;
font-size: var(--font-body-caption-size, 12px) !important;
line-height: var(--font-body-caption-line-height, 16px) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-body {
padding: 20px 20px 22px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-title {
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 20px) !important;
line-height: var(--font-title-card-line-height, 28px) !important;
color: var(--ftc-text-strong) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-subtitle,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-meta,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-features {
color: var(--ftc-text-muted) !important;
font-size: var(--font-body-support-size, 14px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-features {
background: var(--background-base-secondary-soft, #f0ebe1) !important;
border-radius: var(--radius-sm, 8px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-price strong {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-display-price-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-price-size, 32px) !important;
line-height: var(--font-display-price-line-height, 40px) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .btn-select-tour,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-more a {
background: var(--background-action-primary-default, #9858cc) !important;
color: var(--foreground-action-primary-default, #fff) !important;
border: 1px solid var(--border-action-primary-default, #9858cc) !important;
border-radius: var(--radius-full, 999px) !important;
font-family: var(--font-action-primary-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-secondary-size, 14px) !important;
line-height: var(--font-action-secondary-line-height, 20px) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .btn-select-tour:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-more a:hover {
background: var(--background-action-primary-hover, #7840b0) !important;
border-color: var(--border-action-primary-hover, #7840b0) !important;
}
/* Notas */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes {
padding-top: 8px !important;
padding-bottom: 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
border-top: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
padding-top: 30px !important;
gap: 40px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item {
color: var(--ftc-text-muted) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item span {
color: var(--ftc-brand-primary) !important;
border-color: var(--border-base-brand-soft, #9858cc) !important;
background: var(--background-base-brand-soft, #f8f0fc) !important;
}
/* Descubre / galería */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
background: var(--white-100, #fff) !important;
padding-top: 88px !important;
padding-bottom: 90px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head-center {
max-width: 680px !important;
margin: 0 auto 38px !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head p {
color: var(--ftc-text-muted) !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid {
display: grid !important;
grid-template-columns: 1.05fr 1fr 1fr !important;
grid-template-rows: 210px 210px !important;
gap: 16px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid img {
border-radius: var(--radius-lg, 16px) !important;
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid .ftc-gallery-main {
grid-row: 1 / 3 !important;
}
/* Artículos / Explora */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
background: var(--ftc-page-bg-mid) !important;
padding-top: 84px !important;
padding-bottom: 92px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head-row {
margin-bottom: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid {
gap: 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card .ftc-article-image {
border-radius: var(--radius-lg, 16px) !important;
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content h3 {
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 20px) !important;
line-height: var(--font-title-card-line-height, 28px) !important;
font-weight: 700 !important;
color: var(--ftc-text-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content p {
color: var(--ftc-text-muted) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-text-link {
color: var(--ftc-brand-primary) !important;
}
/* Planea tu visita */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan {
background: var(--background-base-brand-emphasis, #362145) !important;
padding-top: 86px !important;
padding-bottom: 92px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan small {
color: var(--foreground-base-inverse-strong, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro {
max-width: 560px !important;
margin-bottom: 52px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2 {
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head p {
color: var(--foreground-base-inverse-soft, rgba(255,255,255,.75)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid {
gap: 34px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card {
border-top: 1px solid rgba(255,255,255,.22) !important;
padding-top: 22px !important;
}
/* Location */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ve-section-inner {
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-grid.ftc-location-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-grid {
grid-template-columns: minmax(320px, .82fr) minmax(520px, 1.18fr) !important;
min-height: 560px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-copy.ftc-location-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy {
padding: 78px min(6vw, 88px) 78px max(40px, calc((100vw - 1180px)/2)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-copy h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-copy h2 {
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
font-weight: 700 !important;
color: var(--ftc-text-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-copy p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-copy p {
color: var(--ftc-text-muted) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-map.ftc-map-box,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map {
min-height: 560px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-map .ftc-map-embed iframe,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-map-embed iframe {
min-height: 560px !important;
}
/* Cómo funciona */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--white-100, #fff) !important;
padding-top: 90px !important;
padding-bottom: 96px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid {
grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr) !important;
gap: 88px !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list p {
color: var(--ftc-text-muted) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div {
grid-template-columns: 64px 1fr !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list strong {
color: var(--temperature-500, #a89275) !important;
font-family: var(--font-display-price-family, Signika), Signika, Inter, Arial, sans-serif !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list h3 {
color: var(--ftc-text-strong) !important;
font-family: var(--font-title-step-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-step-size, 18px) !important;
line-height: var(--font-title-step-line-height, 24px) !important;
}
/* Beneficios */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits {
background: var(--support-900, #11374d) !important;
padding-top: 88px !important;
padding-bottom: 92px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits p {
color: var(--foreground-base-inverse-strong, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid {
gap: 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item span {
color: var(--accent-500, #f0930a) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item p {
color: var(--foreground-base-inverse-soft, rgba(255,255,255,.75)) !important;
}
/* Reviews / FAQ */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews {
padding-top: 86px !important;
padding-bottom: 92px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid {
gap: 28px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-card {
border: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
border-radius: var(--radius-lg, 16px) !important;
background: var(--white-100, #fff) !important;
padding: 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq {
background: var(--white-100, #fff) !important;
padding-top: 88px !important;
padding-bottom: 88px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ve-section-inner {
width: min(760px, calc(100% - 64px)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details {
border-top: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details:last-of-type {
border-bottom: 1px solid var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary {
color: var(--ftc-text-strong) !important;
font-weight: 700 !important;
}
/* Footer */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo div {
font-size: 0 !important;
color: transparent !important;
border: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo div::before {
content: "REAL ALCÁZAR\A DE SEVILLA";
white-space: pre-line;
display: block;
color: var(--ftc-brand-primary);
font-family: var(--font-action-nav-family, Inter), Inter, Arial, sans-serif;
font-size: 14px;
line-height: 1.05;
font-weight: 800;
letter-spacing: .035em;
text-align: center;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom {
border-color: var(--border-base-secondary-soft, #f0ebe1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row h3 {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-title-notice-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-title-notice-size, 14px) !important;
line-height: var(--font-title-notice-line-height, 20px) !important;
font-weight: 800 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p {
color: var(--ftc-text-muted) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer {
background: var(--ftc-page-bg) !important;
border-radius: var(--radius-md, 12px) !important;
}
/* Editor: evita que los handles deformen la comparación visual */
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section.editable-section {
outline-offset: -1px;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-home-container: min(672px, calc(100% - 48px));
--ftc-hero-container: min(672px, calc(100% - 48px));
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-grid.ftc-location-grid {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
max-width: 520px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-home-container: min(350px, calc(100% - 32px));
--ftc-hero-container: min(350px, calc(100% - 32px));
}
#header-floating-bar .container {
width: min(350px, calc(100% - 32px)) !important;
min-height: 64px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero {
padding-top: 44px !important;
padding-bottom: 50px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
font-size: var(--font-display-page-size, 48px) !important;
line-height: var(--font-display-page-line-height, 56px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
height: 260px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 190px 130px 130px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / 3 !important;
grid-row: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-copy.ftc-location-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy {
padding: 54px 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-map.ftc-map-box,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map,
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-map .ftc-map-embed iframe,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-map-embed iframe {
min-height: 390px !important;
}
}
/* Fase 40.1 - Header propio como componente + ajustes Desktop Figma */
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-home-container: min(1440px, calc(100% - 80px));
--ftc-hero-container: min(1440px, calc(100% - 80px));
--ftc-brand-primary: var(--foreground-base-brand-emphasis, #5f3a78);
--ftc-page-bg: #f6f2ea;
--ftc-text-strong: #3c342b;
--ftc-text-muted: #655e54;
background: #ffffff !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
}
/* El header legacy solo se oculta cuando la plantilla ya tiene el header nuevo dentro del layout. */
body:has(.visual-layout-page .ftc-site-header) > header,
body:has(.visual-layout-page .ftc-site-header) > #header-floating-bar {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
background: #ffffff !important;
padding: 32px 0 24px !important;
border: 0 !important;
position: relative;
z-index: 5;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
width: var(--ftc-home-container) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 175px 1fr auto !important;
align-items: center !important;
gap: 48px !important;
min-height: 44px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo:hover {
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 175px !important;
height: auto !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 54px !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-action-nav-family, Inter), Inter, Arial, sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
text-decoration: none !important;
text-transform: none !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav a span {
margin-left: 6px !important;
font-size: 12px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 22px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__divider {
display: block !important;
width: 1px !important;
height: 16px !important;
background: var(--border-base-secondary-mid, #ded7ca) !important;
margin: 0 2px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select {
position: relative !important;
min-width: auto !important;
width: auto !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
z-index: 30 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select:hover {
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 13px 0 0 !important;
min-height: 18px !important;
cursor: pointer !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected::after {
content: "⌄" !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-54%) !important;
font-size: 12px !important;
color: var(--ftc-brand-primary) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select img {
width: 13px !important;
height: 13px !important;
object-fit: contain !important;
display: inline-block !important;
}
/* Fase 40.3: los SVG exportados de idioma/moneda contienen icono + texto + flecha completos.
No se usan como ![]()
dentro del select para evitar que queden microscópicos y duplicados. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected.active,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select.open .select-selected {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: transparent !important;
outline: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__icon {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
background: currentColor !important;
opacity: .95 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__icon--language {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.5 3.6 5.5 3.6 9S14.4 18.5 12 21M12 3c-2.4 2.5-3.6 5.5-3.6 9S9.6 18.5 12 21'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.5 3.6 5.5 3.6 9S14.4 18.5 12 21M12 3c-2.4 2.5-3.6 5.5-3.6 9S9.6 18.5 12 21'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__icon--currency {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h9M5 15h9'/%3E%3Cpath d='M18 6.6A7 7 0 1 0 18 17.4'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h9M5 15h9'/%3E%3Cpath d='M18 6.6A7 7 0 1 0 18 17.4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items .ftc-site-header__icon {
width: 13px !important;
height: 13px !important;
flex-basis: 13px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items {
position: absolute !important;
top: calc(100% + 10px) !important;
right: 0 !important;
left: auto !important;
min-width: 110px !important;
max-height: min(320px, calc(100vh - 120px)) !important;
background: #ffffff !important;
border: 1px solid var(--border-base-secondary-soft, #eee7dc) !important;
border-radius: 10px !important;
box-shadow: 0 16px 40px rgba(54, 33, 69, .12) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
display: none !important;
z-index: 9999 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items.active {
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 9px 12px !important;
color: var(--ftc-brand-primary) !important;
font-size: 12px !important;
line-height: 16px !important;
cursor: pointer !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items div:hover {
background: var(--background-base-brand-soft, #f8f0fc) !important;
color: var(--ftc-brand-primary) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency .select-selected span:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency .select-items div span:last-child {
min-width: 26px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items::-webkit-scrollbar {
width: 6px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items::-webkit-scrollbar-thumb {
background: rgba(95, 58, 120, .28) !important;
border-radius: 999px !important;
}
/* Fase 69 - Header componentes: la divisa usa el símbolo real configurado en exchange_rates.
Antes se pintaba un icono fijo con forma de euro, por eso USD aparecía como "€ USD". */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency-symbol {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 10px !important;
width: auto !important;
height: auto !important;
flex: 0 0 auto !important;
background: transparent !important;
color: currentColor !important;
font-family: var(--font-action-nav-family, Inter), Inter, Arial, sans-serif !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency .select-items div .ftc-site-header__currency-symbol,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector--currency .select-items div .ftc-site-header__currency-symbol {
min-width: 12px !important;
text-align: center !important;
}
/* Hero exacto base desktop */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero,
.visual-layout-page[data-design-system="ftc-foundations"] #inicio.ftc-home-hero {
background: #ffffff !important;
padding-top: 72px !important;
padding-bottom: 82px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero .ve-section-inner {
width: var(--ftc-hero-container) !important;
max-width: 1440px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
display: grid !important;
grid-template-columns: minmax(310px, 390px) minmax(680px, 961px) !important;
gap: 88px !important;
align-items: center !important;
justify-content: space-between !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy {
max-width: 390px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy .editable-html {
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
margin: 0 0 36px !important;
max-width: 390px !important;
color: var(--ftc-brand-primary) !important;
font-family: var(--font-display-hero-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 64px !important;
line-height: 1.03 !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
margin: 0 0 17px !important;
max-width: 330px !important;
color: var(--ftc-text-muted) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.38 !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-wrapper:has(.ftc-hero-image),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-content:has(.ftc-hero-image) {
max-width: 961px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
width: 100% !important;
max-width: 961px !important;
height: auto !important;
aspect-ratio: 961 / 546 !important;
object-fit: cover !important;
border-radius: 18px !important;
display: block !important;
}
/* Sección experiencias según export Figma */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences {
background: var(--ftc-page-bg) !important;
padding-top: 92px !important;
padding-bottom: 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
width: var(--ftc-home-container) !important;
max-width: 1440px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left {
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 42px !important;
line-height: 1.1 !important;
font-weight: 600 !important;
margin: 0 0 40px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left::after {
content: "";
display: block;
width: 44px;
height: 2px;
background: var(--border-base-secondary-mid, #d8d0c2);
margin-top: 18px;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 34px 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card {
border: 1px solid var(--border-base-secondary-soft, #e8e0d4) !important;
border-radius: 18px !important;
box-shadow: none !important;
background: #ffffff !important;
overflow: hidden !important;
transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card.selected {
transform: none !important;
border-color: var(--border-base-secondary-soft, #e8e0d4) !important;
box-shadow: 0 14px 38px rgba(54, 33, 69, .08) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-image {
height: 280px !important;
border-radius: 18px 18px 0 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-badge {
top: 238px !important;
left: 18px !important;
background: #ffffff !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
border-radius: 999px !important;
padding: 7px 12px !important;
font-size: 11px !important;
line-height: 14px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-body {
padding: 28px 24px 24px !important;
gap: 16px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-title {
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-meta,
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-features {
color: var(--ftc-text-muted) !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-features li::before {
content: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-features li {
padding-left: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-footer {
border-top: 1px solid var(--border-base-secondary-soft, #eee8df) !important;
padding-top: 24px !important;
align-items: end !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-price small {
color: var(--foreground-base-secondary-soft, #8a7f71) !important;
font-size: 11px !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-price strong {
color: var(--ftc-brand-primary) !important;
font-family: var(--font-display-price-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 28px !important;
line-height: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .btn-select-tour {
background: var(--background-action-primary-default, #5f3a78) !important;
color: #ffffff !important;
border-radius: 999px !important;
min-width: 118px !important;
min-height: 34px !important;
padding: 9px 18px !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
text-transform: none !important;
}
@media (max-width: 1280px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-home-container: min(1120px, calc(100% - 56px));
--ftc-hero-container: min(1120px, calc(100% - 56px));
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
grid-template-columns: 150px 1fr auto !important;
gap: 28px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 150px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav {
gap: 30px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
gap: 14px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
grid-template-columns: minmax(300px, 390px) minmax(560px, 1fr) !important;
gap: 64px !important;
}
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
display: flex !important;
justify-content: space-between !important;
gap: 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__divider {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
grid-template-columns: 1fr !important;
gap: 38px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
max-width: 520px !important;
}
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
padding: 22px 0 16px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 132px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero {
padding-top: 44px !important;
padding-bottom: 58px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
font-size: 48px !important;
line-height: 1.08 !important;
margin-bottom: 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
font-size: 15px !important;
line-height: 1.45 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-image {
height: 220px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-badge {
top: 178px !important;
}
}
/* Fase 40.5 - Experiencias + notas según Figma */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-image img {
object-fit: cover !important;
object-position: center center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes {
padding-top: 6px !important;
padding-bottom: 74px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-title {
grid-column: 1 / -1;
width: 100%;
margin: 0 0 26px 0;
color: var(--foreground-base-primary-strong, #2f2a21);
font-size: 20px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0;
text-align: center;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
border-top: 0 !important;
padding-top: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 72px !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item {
display: grid !important;
grid-template-columns: 48px 1fr !important;
gap: 22px !important;
align-items: center !important;
color: var(--foreground-base-secondary, #665c48) !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item .ftc-note-icon,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item > span:first-child {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 48px 48px !important;
color: transparent !important;
font-size: 0 !important;
overflow: hidden !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item .ftc-note-icon img {
width: 48px !important;
height: 48px !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item:nth-child(1) > span:first-child { background-image: url('/styles/componentes/assets/icon-note-1.svg'); }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item:nth-child(2) > span:first-child { background-image: url('/styles/componentes/assets/icon-note-2.svg'); }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item:nth-child(3) > span:first-child { background-image: url('/styles/componentes/assets/icon-note-3.svg'); }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item p {
margin: 0 !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
}
/* Fase 40.7 - bloque “Tras realizar tu reserva” editable y fiel al Figma */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ve-section-inner {
border-top: 1px solid var(--border-base-default-subtle, #ddd7c9) !important;
padding-top: 44px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .component-wrapper[data-type="heading"] {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ftc-notes-title {
display: block !important;
width: 100% !important;
margin: 0 0 34px 0 !important;
color: var(--foreground-base-primary-strong, #2f2a21) !important;
font-family: var(--font-family-body, Inter, system-ui, sans-serif) !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ftc-notes-grid {
border-top: 0 !important;
padding-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .component-wrapper[data-type="rich_text"] {
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .editable-rich-text.ftc-note-item {
cursor: text !important;
}
/* Fase 40.8 - Descubre el Alcázar ajustado al export Figma */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
background: #ffffff !important;
padding-top: 86px !important;
padding-bottom: 96px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner {
width: min(1440px, calc(100% - 96px)) !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center {
max-width: 520px !important;
margin: 0 auto 72px !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2 {
margin: 0 !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 40px !important;
line-height: 1.1 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: 18px auto 28px;
background: var(--border-base-secondary-strong, #8f8576);
opacity: .9;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center p {
max-width: 468px !important;
margin: 0 auto !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-mosaic {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
display: grid !important;
grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: 282px 282px !important;
gap: 24px !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
display: block !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / 2 !important;
grid-row: 1 / 3 !important;
}
@media (max-width: 1199px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner {
width: min(100% - 48px, 960px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / 3 !important;
grid-row: auto !important;
aspect-ratio: 16 / 10 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img:not(.ftc-gallery-main) {
aspect-ratio: 4 / 3 !important;
}
}
@media (max-width: 767px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
padding-top: 56px !important;
padding-bottom: 64px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner {
width: min(100% - 32px, 520px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center {
margin-bottom: 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2 {
font-size: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
grid-column: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
aspect-ratio: 16 / 10 !important;
}
}
/* Fase 40.9 - Explora el Alcázar: carrusel y estilo Figma */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
background: #f0ebe1 !important;
padding-top: 86px !important;
padding-bottom: 100px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner {
max-width: 1180px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row {
align-items: flex-start !important;
margin-bottom: 52px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2 {
position: relative;
color: #5b554b !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: clamp(34px, 3.1vw, 48px) !important;
line-height: 1.04 !important;
letter-spacing: -0.035em !important;
font-weight: 700 !important;
margin: 0 !important;
padding-bottom: 20px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 38px;
height: 1px;
background: #8d846f;
opacity: .9;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-slider-dots {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrows {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
flex: 0 0 auto;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow {
width: 32px;
height: 32px;
border: 0;
border-radius: 999px;
background: #fff;
color: #6a6258;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
font-family: Arial, sans-serif;
box-shadow: 0 2px 8px rgba(44, 35, 24, .06);
cursor: pointer;
transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(44, 35, 24, .12);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow:disabled {
opacity: .42;
cursor: default;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrows.is-static .ftc-carousel-arrow {
opacity: .75;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - 84px) / 4) !important;
grid-template-columns: none !important;
gap: 28px !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding-bottom: 4px;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid::-webkit-scrollbar {
display: none;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid > .ve-card,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid > .component-wrapper {
scroll-snap-align: start;
min-width: 0;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
min-height: 100%;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card .ftc-article-img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card img.ftc-article-img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card img {
width: 100% !important;
height: auto !important;
aspect-ratio: 374 / 280 !important;
object-fit: cover !important;
border-radius: 16px !important;
border: 0 !important;
display: block;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content {
padding-top: 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content h3 {
color: #463f37 !important;
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 23px !important;
line-height: 1.16 !important;
letter-spacing: -0.025em !important;
font-weight: 700 !important;
margin: 0 0 22px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content p {
color: #6d665d !important;
font-family: var(--font-body-family, Inter), Inter, Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.68 !important;
margin: 0 0 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content a {
color: #3b194f !important;
font-family: var(--font-body-family, Inter), Inter, Arial, sans-serif !important;
font-size: 12px !important;
line-height: 1 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
text-decoration: none !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid {
grid-auto-columns: calc((100% - 28px) / 2) !important;
}
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
padding-top: 64px !important;
padding-bottom: 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row {
margin-bottom: 34px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid {
grid-auto-columns: min(82vw, 320px) !important;
gap: 20px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content h3 {
font-size: 21px !important;
}
}
/* Fase 40.10 - ftc_article_carousel componente real y escalable */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel.ftc-explore,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore.ftc-article-carousel {
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: var(--layout-section-y-spacing, 88px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-carousel-inner {
max-width: var(--layout-container-max, 1180px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--spacing-lg, 32px) !important;
margin-bottom: var(--spacing-3xl, 52px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head h2 {
position: relative !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, 48px) !important;
line-height: var(--font-display-section-line-height, 56px) !important;
letter-spacing: var(--font-display-section-letter-spacing, 0) !important;
font-weight: 700 !important;
margin: 0 !important;
padding-bottom: var(--spacing-md, 20px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head h2::after {
content: '' !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 38px !important;
height: 1px !important;
background: var(--border-base-primary-strong) !important;
opacity: .9 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrows {
display: inline-flex !important;
align-items: center !important;
gap: var(--spacing-xs, 8px) !important;
margin-top: var(--spacing-md, 18px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow {
width: 32px !important;
height: 32px !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--background-action-ghost-default, #fff) !important;
color: var(--foreground-base-secondary-mid) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
line-height: 1 !important;
box-shadow: 0 2px 8px rgba(44, 35, 24, .06) !important;
cursor: pointer !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow:disabled {
opacity: .42 !important;
cursor: default !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - (var(--spacing-xl, 28px) * (var(--ftc-visible-items, 4) - 1))) / var(--ftc-visible-items, 4)) !important;
grid-template-columns: none !important;
gap: var(--spacing-xl, 28px) !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid::-webkit-scrollbar {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-card {
scroll-snap-align: start !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-media,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-media img {
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-media img {
width: 100% !important;
height: auto !important;
aspect-ratio: 374 / 280 !important;
object-fit: cover !important;
border-radius: var(--radius-lg, 16px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content {
padding-top: var(--spacing-lg, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content h3 {
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 23px) !important;
line-height: var(--font-title-card-line-height, 30px) !important;
letter-spacing: var(--font-title-card-letter-spacing, 0) !important;
font-weight: 700 !important;
margin: 0 0 var(--spacing-md, 22px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content p {
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
margin: 0 0 var(--spacing-xl, 32px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-link {
color: var(--foreground-action-link-default) !important;
font-family: var(--font-action-secondary-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-secondary-size, 12px) !important;
line-height: var(--font-action-secondary-line-height, 16px) !important;
text-transform: uppercase !important;
font-weight: 800 !important;
text-decoration: none !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
--ftc-visible-items: 2;
}
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel {
padding-block: 64px 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head {
margin-bottom: 34px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
grid-auto-columns: min(82vw, 320px) !important;
gap: 20px !important;
}
}
/* Fase 40.12 - Explora como sección compuesta editable por piezas.
Mantiene diseño oficial, pero cada imagen/título/texto/enlace vuelve a ser componente editable. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore.ftc-article-carousel-editable > .ve-section-inner {
position: relative !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-heading {
position: relative !important;
color: var(--foreground-base-primary-strong, #463f37) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, clamp(34px, 3.1vw, 48px)) !important;
line-height: var(--font-display-section-line-height, 1.04) !important;
letter-spacing: var(--font-display-section-letter-spacing, -0.035em) !important;
font-weight: 700 !important;
margin: 0 0 var(--spacing-3xl, 52px) !important;
padding-bottom: var(--spacing-md, 20px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-heading::after {
content: '' !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 38px !important;
height: 1px !important;
background: var(--border-base-primary-strong, #8d846f) !important;
opacity: .9 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-controls-slot,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper[data-type="rich_text"] .ftc-carousel-controls-slot {
position: absolute !important;
top: 18px !important;
right: 0 !important;
margin: 0 !important;
width: auto !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-title {
color: var(--foreground-base-primary-strong, #463f37) !important;
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 23px) !important;
line-height: var(--font-title-card-line-height, 30px) !important;
letter-spacing: var(--font-title-card-letter-spacing, -0.02em) !important;
font-weight: 700 !important;
text-align: left !important;
margin: var(--spacing-lg, 24px) 0 var(--spacing-md, 22px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-text {
color: var(--foreground-base-secondary-mid, #6d665d) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
text-align: left !important;
margin: 0 0 var(--spacing-xl, 32px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-text p {
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-link {
align-self: flex-start !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--foreground-action-link-default, #3b194f) !important;
font-family: var(--font-action-secondary-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-secondary-size, 12px) !important;
line-height: var(--font-action-secondary-line-height, 16px) !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
text-decoration: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-controls-slot {
position: static !important;
margin: -18px 0 28px auto !important;
}
}
/* Fase 40.13 - Explore section aligned to Figma + DS tokens */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
background: var(--background-base-default-soft, #f0ebe1) !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
padding-block: clamp(76px, 6vw, 104px) clamp(84px, 7vw, 116px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-carousel-inner {
width: min(var(--layout-container-content, 1440px), calc(100vw - (var(--layout-section-x-spacing, 64px) * 2))) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose, 24px) !important;
margin: 0 0 clamp(42px, 4vw, 56px) !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2 {
position: relative !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: clamp(36px, 2.55vw, var(--font-display-section-size, 48px)) !important;
line-height: var(--font-display-section-line-height, 56px) !important;
letter-spacing: var(--font-display-section-letter-spacing, 0) !important;
font-weight: 700 !important;
margin: 0 !important;
padding-bottom: var(--layout-elements-inset-cozy, 16px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2::after {
content: '' !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 42px !important;
height: 1px !important;
background: var(--border-base-primary-soft, var(--foreground-base-tertiary-mid, #8d846f)) !important;
opacity: .95 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrows,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrows {
display: inline-flex !important;
align-items: center !important;
gap: var(--layout-elements-gap-tight, 8px) !important;
margin-top: clamp(10px, 1.2vw, 18px) !important;
flex: 0 0 auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow {
width: 32px !important;
height: 32px !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--background-action-ghost-default, #fff) !important;
color: transparent !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 1 !important;
box-shadow: 0 2px 8px rgba(44, 35, 24, .06) !important;
cursor: pointer !important;
transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow::before {
color: var(--foreground-base-secondary-mid, #6a6258) !important;
font-family: Inter, Arial, sans-serif !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: translateY(-1px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-prev::before { content: '\2039' !important; }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-next::before { content: '\203A' !important; }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow:hover:not(:disabled),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow:hover:not(:disabled) {
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(44, 35, 24, .12) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-arrow:disabled,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-carousel-arrow:disabled {
opacity: .42 !important;
cursor: default !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - (var(--layout-elements-gap-loose, 28px) * 3)) / 4) !important;
grid-template-columns: none !important;
gap: var(--layout-elements-gap-loose, 28px) !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid::-webkit-scrollbar,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid::-webkit-scrollbar {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid > .ve-card,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-card {
scroll-snap-align: start !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card .ftc-article-img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card img.ftc-article-img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-card img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-media img {
width: 100% !important;
height: auto !important;
aspect-ratio: 374 / 280 !important;
object-fit: cover !important;
border-radius: var(--radius-lg, 16px) !important;
border: 0 !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content {
padding-top: var(--layout-elements-inset-spacious, 24px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content h3 {
color: var(--foreground-base-primary-strong, #2d2924) !important;
font-family: var(--font-title-card-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 24px) !important;
line-height: var(--font-title-card-line-height, 32px) !important;
letter-spacing: var(--font-title-card-letter-spacing, 0) !important;
font-weight: 700 !important;
margin: 0 0 var(--layout-elements-inset-spacious, 24px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-content p {
color: var(--foreground-base-secondary-mid, #6d665d) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
margin: 0 0 var(--layout-elements-inset-expanded, 32px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-link {
color: var(--foreground-action-secondary-default, var(--foreground-base-brand-emphasis, #3b194f)) !important;
font-family: var(--font-action-secondary-family, Inter), Inter, Arial, sans-serif !important;
font-size: var(--font-action-secondary-size, 12px) !important;
line-height: var(--font-action-secondary-line-height, 16px) !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-content a::after {
content: '\203A' !important;
font-size: 14px !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-read-more-icon,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-link span[aria-hidden="true"] {
font-size: 14px !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
@media (max-width: 1180px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
grid-auto-columns: calc((100% - var(--layout-elements-gap-loose, 28px)) / 2) !important;
}
}
@media (max-width: 720px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
padding-block: 64px 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-carousel-inner {
width: min(var(--layout-container-content, 350px), calc(100vw - (var(--layout-section-x-spacing, 24px) * 2))) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head {
margin-bottom: 34px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-grid {
grid-auto-columns: min(82vw, 320px) !important;
gap: 20px !important;
}
}
/* Fase 40.14 - Explora: alineacion final y tokens Design System
Este bloque NO cambia la estructura editable. Solo normaliza el layout visual.
Usa tokens semanticos del Design System: color, font, layout, radius. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: var(--layout-section-y-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: calc(var(--layout-elements-gap-loose) * 2) !important;
margin-bottom: calc(var(--layout-elements-inset-expanded) * 1.45) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > h2 {
position: relative !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-display-section-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 700 !important;
margin: 0 !important;
padding-bottom: var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > h2::after {
content: '' !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 44px !important;
height: 1px !important;
background: var(--border-base-primary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrows {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--layout-elements-gap-tight) !important;
margin-top: var(--layout-elements-inset-cozy) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow {
inline-size: 32px !important;
block-size: 32px !important;
padding: 0 !important;
border: 0 !important;
border-radius: var(--radius-full) !important;
background: var(--background-action-ghost-default) !important;
color: var(--foreground-action-ghost-default) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--font-action-compact-size) !important;
line-height: var(--font-action-compact-line-height) !important;
box-shadow: 0 2px 8px rgba(44, 35, 24, .06) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-template-columns: none !important;
grid-auto-columns: calc((100% - (calc(var(--layout-elements-gap-loose) * 6))) / 4) !important;
gap: calc(var(--layout-elements-gap-loose) * 2) !important;
align-items: stretch !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
padding-bottom: var(--layout-elements-inset-compact) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid::-webkit-scrollbar {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid > .ve-card,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card {
min-width: 0 !important;
height: 100% !important;
scroll-snap-align: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card {
display: flex !important;
flex-direction: column !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card .sortable-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card img.ftc-article-img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card .ftc-article-img {
width: 100% !important;
aspect-ratio: 374 / 280 !important;
object-fit: cover !important;
border-radius: var(--radius-lg) !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
padding-top: var(--layout-elements-inset-spacious) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card h3 {
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-title-card-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: var(--font-title-card-line-height) !important;
letter-spacing: var(--font-title-card-letter-spacing) !important;
font-weight: 700 !important;
margin: 0 0 var(--layout-elements-inset-spacious) !important;
min-height: calc(var(--font-title-card-line-height) * 2.4) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card p {
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-support-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
letter-spacing: var(--font-body-support-letter-spacing) !important;
margin: 0 0 var(--layout-elements-inset-expanded) !important;
min-height: calc(var(--font-body-support-line-height) * 4.2) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-link {
color: var(--foreground-action-link-default) !important;
font-family: var(--font-action-secondary-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-secondary-size) !important;
line-height: var(--font-action-secondary-line-height) !important;
letter-spacing: var(--font-action-secondary-letter-spacing) !important;
text-transform: uppercase !important;
font-weight: 800 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--layout-elements-gap-tight) !important;
margin-top: auto !important;
width: fit-content !important;
}
/* Si la flecha ya viene del texto en theme_texts, no añadimos otra por CSS. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content a::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-link::after {
content: none !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
grid-auto-columns: calc((100% - (calc(var(--layout-elements-gap-loose) * 2))) / 2) !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row {
margin-bottom: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
grid-auto-columns: 86% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card p {
min-height: 0 !important;
}
}
/* Fase 40.15 - Corrección flechas carrusel Explora
El HTML guardado puede traer el carácter ‹/› dentro del botón y el CSS añade
el icono mediante ::before. Para evitar doble flecha, se oculta el texto
interno y se deja una única flecha visual controlada por el CSS. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrows,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-controls-slot {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--layout-elements-gap-tight) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-controls-slot .ftc-carousel-arrow {
inline-size: 28px !important;
block-size: 28px !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border: 0 !important;
border-radius: var(--radius-full) !important;
background: var(--background-action-ghost-default) !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground-base-primary-strong) 8%, transparent) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-controls-slot .ftc-carousel-arrow::before {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-action-compact-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-compact-size) !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: translateY(-1px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-prev::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-controls-slot .ftc-carousel-prev::before {
content: "‹" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-next::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-controls-slot .ftc-carousel-next::before {
content: "›" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow:disabled,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-carousel-controls-slot .ftc-carousel-arrow:disabled {
opacity: .42 !important;
cursor: default !important;
}
/* Fase 40.16 - Explore title/image spacing
Fix only for the editable-composed Explore section.
The title underline must not collide with the first article image. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child {
margin-bottom: calc(var(--layout-elements-inset-expanded) * 1.55) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2 {
padding-bottom: var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child + .component-wrapper.ftc-carousel-controls-slot,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child + .ftc-carousel-controls-slot {
margin-top: calc(-1 * var(--layout-elements-inset-expanded)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
margin-top: 0 !important;
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child {
margin-bottom: var(--layout-elements-inset-expanded) !important;
}
}
/* Fase 40.17 - Explora: separación real entre título/línea e imágenes
Mantiene el bloque compuesto editable. Solo corrige el gap visual del grid
usando tokens del Design System cuando están disponibles. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
margin-top: calc(var(--layout-elements-inset-expanded, 32px) * 1.45) !important;
}
/* Si el bloque incluye controles de carrusel entre el título y el grid, los
dejamos flotando arriba a la derecha sin ocupar el espacio vertical del grid. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-controls-slot,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrows {
margin-bottom: 0 !important;
}
/* En modo editor, mantenemos algo de aire aunque los wrappers de edición añadan
bordes/handles alrededor de los componentes internos. */
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
margin-top: calc(var(--layout-elements-inset-expanded, 32px) * 1.25) !important;
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
margin-top: var(--layout-elements-inset-expanded, 32px) !important;
}
}
/* Fase 40.18 - Token cleanup upper home blocks
Objetivo: Header, Hero, Experiencias, Tras reserva, Descubre y Explora
usan tokens oficiales del Design System para color, tipografía, radios,
bordes, fondos, containers y espaciados. Los valores fijos restantes son
composición del bloque (ratios, columnas, alturas de imagen) para igualar Figma. */
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-color-page: var(--white-100);
--ftc-color-section-soft: var(--background-base-default-soft);
--ftc-color-section-mid: var(--background-base-default-mid);
--ftc-color-text: var(--foreground-base-primary-strong);
--ftc-color-text-muted: var(--foreground-base-secondary-mid);
--ftc-color-brand: var(--foreground-base-brand-emphasis);
--ftc-color-link: var(--foreground-action-link-default);
--ftc-color-line: var(--border-base-secondary-strong);
--ftc-color-card: var(--white-100);
--ftc-color-card-soft: var(--background-base-default-mid);
--ftc-color-inverse: var(--foreground-base-inverse-strong);
--ftc-radius-image: var(--radius-lg);
--ftc-radius-card: var(--radius-xl);
--ftc-radius-pill: var(--radius-full);
--ftc-container: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2)));
--ftc-container-compact: min(calc(var(--layout-container-content) - 260px), calc(100% - (var(--layout-section-x-spacing) * 2)));
--ftc-shadow-soft: 0 2px 8px color-mix(in srgb, var(--foreground-base-primary-strong) 8%, transparent);
--ftc-shadow-card: 0 14px 36px color-mix(in srgb, var(--foreground-base-primary-strong) 8%, transparent);
background: var(--ftc-color-page) !important;
color: var(--ftc-color-text) !important;
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
}
/* Header propio FTC */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
background: var(--ftc-color-page) !important;
padding-block: var(--layout-elements-inset-spacious) var(--layout-elements-inset-loose) !important;
border: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
width: var(--ftc-container) !important;
margin-inline: auto !important;
grid-template-columns: 175px 1fr auto !important;
gap: calc(var(--layout-elements-inset-expanded) * 1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 175px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
gap: calc(var(--layout-elements-gap-loose) * 2) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected {
color: var(--ftc-color-brand) !important;
font-family: var(--font-action-nav-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-action-nav-size) !important;
line-height: var(--font-action-nav-line-height) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__divider {
background: var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items {
background: var(--ftc-color-card) !important;
border: 1px solid var(--border-base-secondary-soft) !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--ftc-shadow-card) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-items div:hover {
background: var(--background-action-ghost-hover) !important;
}
/* Hero */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero,
.visual-layout-page[data-design-system="ftc-foundations"] #inicio.ftc-home-hero {
background: var(--ftc-color-page) !important;
padding-block: calc(var(--layout-section-y-spacing) * .67) calc(var(--layout-section-y-spacing) * .66) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero .ve-section-inner {
width: var(--ftc-container) !important;
max-width: var(--layout-container-content) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
gap: calc(var(--layout-elements-inset-expanded) * 2.5) !important;
grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
align-items: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
color: var(--ftc-color-brand) !important;
font-family: var(--font-display-hero-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-hero-size) !important;
line-height: var(--font-display-hero-line-height) !important;
letter-spacing: var(--font-display-hero-letter-spacing) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
color: var(--ftc-color-text) !important;
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
border-radius: var(--radius-xl) !important;
border: 1px solid var(--border-base-secondary-soft) !important;
box-shadow: 0 0 0 var(--layout-elements-inset-dense) var(--white-100), var(--ftc-shadow-soft) !important;
height: calc(var(--layout-section-y-spacing) * 4.25) !important;
}
/* Experiencias */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences {
background: var(--ftc-color-section-soft) !important;
padding-block: calc(var(--layout-section-y-spacing) * .61) var(--layout-elements-inset-spacious) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid {
width: var(--ftc-container-compact) !important;
max-width: calc(var(--layout-container-content) - 260px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences .ftc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left {
color: var(--ftc-color-text) !important;
font-family: var(--font-display-section-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences .ftc-section-title::after {
background: var(--ftc-color-line) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card {
background: var(--ftc-color-card) !important;
border: 1px solid var(--border-base-secondary-soft) !important;
border-radius: var(--ftc-radius-card) !important;
box-shadow: var(--ftc-shadow-soft) !important;
color: var(--ftc-color-text) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-image img {
border-radius: var(--ftc-radius-card) var(--ftc-radius-card) 0 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-badge {
background: var(--background-base-surface, var(--white-100)) !important;
color: var(--ftc-color-text-muted) !important;
border-radius: var(--ftc-radius-pill) !important;
border: 1px solid var(--border-base-secondary-soft) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-title {
color: var(--ftc-color-text) !important;
font-family: var(--font-title-card-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: var(--font-title-card-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-subtitle,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-meta,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-features {
color: var(--ftc-color-text-muted) !important;
font-family: var(--font-body-support-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-features {
background: var(--ftc-color-card-soft) !important;
border-radius: var(--radius-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-footer {
border-top: 1px solid var(--border-base-secondary-soft) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-price small {
color: var(--ftc-color-text-muted) !important;
font-family: var(--font-field-title-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-field-title-size) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-card-price strong {
color: var(--ftc-color-brand) !important;
font-family: var(--font-display-price-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-price-size) !important;
line-height: var(--font-display-price-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .btn-select-tour {
background: var(--background-action-primary-default) !important;
color: var(--foreground-action-primary-default) !important;
border-radius: var(--ftc-radius-pill) !important;
font-family: var(--font-action-primary-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-action-secondary-size) !important;
line-height: var(--font-action-secondary-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .btn-select-tour:hover {
background: var(--background-action-primary-hover) !important;
}
/* Tras realizar tu reserva */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes {
background: var(--ftc-color-section-soft) !important;
padding-block: var(--layout-elements-inset-compact) calc(var(--layout-section-y-spacing) * .56) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ve-section-inner {
width: var(--ftc-container-compact) !important;
max-width: calc(var(--layout-container-content) - 260px) !important;
border-top: 1px solid var(--border-base-secondary-soft) !important;
padding-top: calc(var(--layout-elements-inset-expanded) - var(--layout-elements-inset-dense)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes .ftc-notes-title {
color: var(--ftc-color-text) !important;
font-family: var(--font-title-notice-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-title-notice-size) !important;
line-height: var(--font-title-notice-line-height) !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
gap: calc(var(--layout-elements-gap-loose) * 2) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item {
color: var(--ftc-color-text) !important;
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-icon {
border: 1px solid var(--border-base-secondary-soft) !important;
background-color: var(--background-action-ghost-default) !important;
border-radius: var(--ftc-radius-pill) !important;
}
/* Descubre */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
background: var(--ftc-color-page) !important;
padding-block: calc(var(--layout-section-y-spacing) * .67) calc(var(--layout-section-y-spacing) * .75) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner {
width: var(--ftc-container) !important;
max-width: var(--layout-container-content) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center p {
color: var(--ftc-color-text) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2 {
font-family: var(--font-display-section-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2::after {
background: var(--ftc-color-line) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center p {
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
gap: var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img {
border-radius: var(--ftc-radius-image) !important;
}
/* Explora */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
background: var(--ftc-color-section-soft) !important;
color: var(--ftc-color-text) !important;
padding-block: calc(var(--layout-section-y-spacing) * .67) calc(var(--layout-section-y-spacing) * .78) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner {
width: var(--ftc-container-compact) !important;
max-width: calc(var(--layout-container-content) - 260px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-heading,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2 {
color: var(--ftc-color-text) !important;
font-family: var(--font-display-section-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-heading::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2::after {
background: var(--ftc-color-line) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
gap: var(--layout-elements-inset-spacious) !important;
grid-auto-columns: calc((100% - (var(--layout-elements-inset-spacious) * 3)) / 4) !important;
margin-top: calc(var(--layout-elements-inset-expanded) * 1.45) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-img {
border-radius: var(--ftc-radius-image) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card h3 {
color: var(--ftc-color-text) !important;
font-family: var(--font-title-card-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: var(--font-title-card-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card p {
color: var(--ftc-color-text-muted) !important;
font-family: var(--font-body-support-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-link,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card a {
color: var(--ftc-color-link) !important;
font-family: var(--font-action-secondary-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-action-secondary-size) !important;
line-height: var(--font-action-secondary-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow {
background: var(--background-base-surface, var(--white-100)) !important;
border-radius: var(--ftc-radius-pill) !important;
box-shadow: var(--ftc-shadow-soft) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow::before {
color: var(--foreground-base-secondary-mid) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-container: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2)));
--ftc-container-compact: var(--ftc-container);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid {
gap: var(--layout-elements-inset-expanded) !important;
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
height: auto !important;
aspect-ratio: 16 / 9 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-container: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2)));
--ftc-container-compact: var(--ftc-container);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
grid-template-columns: auto 1fr !important;
gap: var(--layout-elements-gap-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
font-size: var(--font-display-page-size) !important;
line-height: var(--font-display-page-line-height) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
grid-auto-columns: 86% !important;
gap: var(--layout-elements-gap-loose) !important;
margin-top: var(--layout-elements-inset-expanded) !important;
}
}
/* Fase 40.19 - Plan visit block aligned to Figma + Design System tokens */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan {
background: var(--background-base-brand-emphasis) !important;
color: var(--foreground-base-inverse-strong) !important;
padding-block: calc(var(--layout-section-y-spacing) * .66) calc(var(--layout-section-y-spacing) * .70) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan > .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: calc(var(--layout-container-content) - (var(--layout-section-x-spacing) * 2)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan small {
font-family: var(--font-body-family), system-ui, sans-serif !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro {
max-width: var(--layout-container-reading) !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded) * 1.35) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2 {
color: var(--foreground-base-inverse-strong) !important;
font-family: var(--font-display-section-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 700 !important;
margin: 0 0 var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro p {
color: var(--foreground-base-inverse-soft) !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: var(--layout-section-x-spacing) !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card {
border-top: 1px solid var(--white-25) !important;
padding-top: var(--layout-elements-inset-loose) !important;
text-align: left !important;
color: var(--foreground-base-inverse-soft) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card h3 {
color: var(--foreground-base-inverse-strong) !important;
font-family: var(--font-title-block-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-title-block-size) !important;
line-height: var(--font-title-block-line-height) !important;
letter-spacing: var(--font-title-block-letter-spacing) !important;
font-weight: 700 !important;
text-align: center !important;
margin: 0 0 var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card small {
color: var(--foreground-base-inverse-soft) !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
margin: 0 0 var(--layout-elements-inset-cozy) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card strong {
color: var(--foreground-base-inverse-strong) !important;
display: block !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 700 !important;
margin: 0 0 var(--layout-elements-inset-compact) !important;
padding: 0 !important;
border: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-schedule {
display: grid !important;
gap: var(--layout-elements-inset-cozy) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
column-gap: var(--layout-elements-gap-loose) !important;
row-gap: var(--layout-elements-inset-dense) !important;
padding-block: var(--layout-elements-inset-tight) !important;
border-top: 1px solid var(--white-25) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row:first-child {
border-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row small {
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row strong {
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row small {
grid-column: 1 / -1 !important;
color: var(--white-75) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-closed {
border-top: 1px solid var(--white-25) !important;
padding-top: var(--layout-elements-inset-tight) !important;
margin-top: 0 !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-expanded) !important;
}
}
/* Fase 40.20 - Plan visit final Figma alignment + official Design System tokens
Este override mantiene el bloque como piezas editables y evita colores/fuentes hardcodeados. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan {
background: var(--background-base-brand-emphasis) !important;
color: var(--foreground-base-inverse-strong) !important;
padding-block: calc(var(--layout-section-y-spacing) * .74) calc(var(--layout-section-y-spacing) * .82) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan > .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan small {
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro {
max-width: calc(var(--layout-container-reading) * .86) !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded) * 1.45) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2 {
color: var(--foreground-base-inverse-strong) !important;
font-family: var(--font-display-section-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 700 !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2::after {
content: "";
display: block;
inline-size: calc(var(--layout-elements-inset-expanded) * .72);
block-size: 1px;
background: var(--white-75);
margin-block: var(--layout-elements-inset-compact) var(--layout-elements-inset-spacious);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro p {
color: var(--foreground-base-inverse-soft) !important;
font-family: var(--font-body-default-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
letter-spacing: var(--font-body-default-letter-spacing) !important;
margin: 0 !important;
max-width: 100% !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: calc(var(--layout-section-x-spacing) * .78) !important;
align-items: start !important;
padding-top: calc(var(--layout-elements-inset-expanded) * 1.12) !important;
margin-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 1px;
background: var(--white-50);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card {
border-top: 0 !important;
padding-top: 0 !important;
text-align: left !important;
color: var(--foreground-base-inverse-soft) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card h3 {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: var(--layout-elements-gap-tight) !important;
color: var(--foreground-base-inverse-strong) !important;
font-family: var(--font-title-block-family), var(--font-display-family), system-ui, sans-serif !important;
font-size: var(--font-title-block-size) !important;
line-height: var(--font-title-block-line-height) !important;
letter-spacing: var(--font-title-block-letter-spacing) !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 0 var(--layout-elements-inset-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card h3::before {
content: "";
flex: 0 0 var(--font-title-block-line-height);
inline-size: var(--font-title-block-line-height);
block-size: var(--font-title-block-line-height);
background: currentColor;
-webkit-mask: var(--ftc-plan-icon) center / contain no-repeat;
mask: var(--ftc-plan-icon) center / contain no-repeat;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card-hours {
--ftc-plan-icon: url('/styles/componentes/assets/plan-hours.svg');
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card-tickets {
--ftc-plan-icon: url('/styles/componentes/assets/plan-tickets.svg');
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card-accessibility {
--ftc-plan-icon: url('/styles/componentes/assets/plan-accessibility.svg');
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card small {
color: var(--foreground-base-inverse-soft) !important;
font-family: var(--font-body-support-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
letter-spacing: var(--font-body-support-letter-spacing) !important;
margin: 0 0 var(--layout-elements-inset-cozy) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card strong {
color: var(--foreground-base-inverse-strong) !important;
display: block !important;
font-family: var(--font-body-support-family), var(--font-body-family), system-ui, sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-schedule {
display: grid !important;
gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
column-gap: var(--layout-elements-gap-loose) !important;
row-gap: var(--layout-elements-inset-dense) !important;
padding-block: var(--layout-elements-inset-cozy) !important;
border-top: 1px solid var(--white-50) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row:first-child {
border-top: 0 !important;
padding-block-start: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row small {
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row strong {
color: var(--foreground-base-inverse-strong) !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row small {
grid-column: 2 !important;
color: var(--white-75) !important;
font-style: italic !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-closed {
border-top: 1px solid var(--white-50) !important;
color: var(--foreground-base-inverse-soft) !important;
font-style: italic !important;
padding-top: var(--layout-elements-inset-cozy) !important;
margin-top: 0 !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan > .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-expanded) !important;
}
}
/* ─── Fase 40.21b: Localización y acceso - ajuste seguro sobre estado recuperado ───
Mantiene el mapa dinámico desde meeting_points. Solo corrige composición/texto y usa tokens DS. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ve-section-inner {
background: var(--white-100, #ffffff) !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-grid.ftc-location-grid {
display: grid !important;
grid-template-columns: minmax(430px, 38%) minmax(0, 62%) !important;
gap: 0 !important;
align-items: stretch !important;
min-height: 680px !important;
background: var(--white-100, #ffffff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy {
box-sizing: border-box !important;
width: 100% !important;
max-width: 360px !important;
justify-self: end !important;
padding: var(--layout-section-y-spacing, 96px) var(--layout-elements-inset-loose, 40px) var(--layout-section-y-spacing, 96px) var(--layout-elements-inset-cozy, 24px) !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy *::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy *::after {
box-sizing: border-box !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy h2 {
max-width: 320px !important;
margin: 0 0 var(--layout-elements-inset-loose, 40px) !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, clamp(40px, 4vw, 56px)) !important;
line-height: var(--font-display-section-line-height, 1.06) !important;
letter-spacing: var(--font-display-section-letter-spacing, -0.04em) !important;
font-weight: 700 !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy h2::after {
content: "";
display: block;
width: 42px;
height: 1px;
margin-top: var(--layout-elements-inset-tight, 16px);
background: var(--border-base-secondary-strong, #b7aa93);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy p {
max-width: 310px !important;
margin: 0 0 var(--layout-elements-inset-cozy, 24px) !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 1.55) !important;
letter-spacing: var(--font-body-default-letter-spacing, 0) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy strong {
display: block !important;
margin: 0 0 var(--layout-elements-inset-dense, 8px) !important;
color: var(--foreground-base-primary-strong, #211b16) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-action-nav-size, 14px) !important;
line-height: var(--font-action-nav-line-height, 1.25) !important;
letter-spacing: var(--font-action-nav-letter-spacing, .02em) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy hr {
width: 100% !important;
max-width: 310px !important;
margin: var(--layout-elements-inset-loose, 40px) 0 !important;
border: 0 !important;
border-top: 1px solid var(--border-base-secondary-soft, #ddd4c5) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .meeting-point-html,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-address,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .alc-address {
width: 100% !important;
max-width: 310px !important;
margin: var(--layout-elements-inset-loose, 40px) 0 0 !important;
padding: var(--layout-elements-inset-cozy, 24px) !important;
border-radius: var(--radius-md, 12px) !important;
background: var(--background-base-default-soft, #f1eee8) !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 1.5) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .meeting-point-html strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-address strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .alc-address strong {
display: block !important;
margin-bottom: var(--layout-elements-inset-tight, 16px) !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
font-family: var(--font-title-card-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 20px) !important;
line-height: var(--font-title-card-line-height, 1.2) !important;
letter-spacing: var(--font-title-card-letter-spacing, -0.02em) !important;
text-transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-link,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .meeting-point-html a {
display: inline-flex !important;
align-items: center !important;
gap: var(--layout-elements-inset-dense, 8px) !important;
margin-top: var(--layout-elements-inset-tight, 16px) !important;
color: var(--foreground-base-brand-emphasis, #3d214d) !important;
font-family: var(--font-action-primary-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-action-primary-size, 13px) !important;
line-height: var(--font-action-primary-line-height, 1.2) !important;
letter-spacing: var(--font-action-primary-letter-spacing, .04em) !important;
font-weight: 800 !important;
text-decoration: none !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-link::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .meeting-point-html a::after {
content: "›";
font-size: 1.25em;
line-height: 1;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-map-embed iframe,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map-placeholder {
min-height: 680px !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-grid.ftc-location-grid {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy.ftc-location-copy {
max-width: 640px !important;
justify-self: stretch !important;
margin: 0 auto !important;
padding: var(--layout-section-y-spacing, 64px) var(--layout-section-x-spacing, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-map-embed iframe,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map-placeholder {
min-height: 460px !important;
}
}
/* ─── Fase 40.22: Location text card from theme_texts, map stays dynamic ───
Solo corrige la columna editable de texto; el iframe/mapa sigue saliendo de meeting_points. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-text-block {
max-width: 310px !important;
margin: 0 0 var(--layout-elements-inset-cozy, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-text-block strong {
display: block !important;
margin: 0 0 var(--layout-elements-inset-dense, 8px) !important;
color: var(--foreground-base-primary-strong, #211b16) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-action-nav-size, 14px) !important;
line-height: var(--font-action-nav-line-height, 1.25) !important;
letter-spacing: var(--font-action-nav-letter-spacing, .02em) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-text-block p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-arrival-notice {
max-width: 310px !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 1.55) !important;
letter-spacing: var(--font-body-default-letter-spacing, 0) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card {
position: relative !important;
width: 100% !important;
max-width: 310px !important;
margin: var(--layout-elements-inset-loose, 40px) 0 0 !important;
padding: var(--layout-elements-inset-cozy, 24px) !important;
border-radius: var(--radius-md, 12px) !important;
background: var(--background-base-default-soft, #f1eee8) !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 1.5) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card-title {
display: flex !important;
align-items: center !important;
gap: var(--layout-elements-inset-dense, 8px) !important;
margin: 0 0 var(--layout-elements-inset-tight, 16px) !important;
color: var(--foreground-base-primary-strong, #2d2924) !important;
font-family: var(--font-title-card-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-card-size, 20px) !important;
line-height: var(--font-title-card-line-height, 1.2) !important;
letter-spacing: var(--font-title-card-letter-spacing, -0.02em) !important;
font-weight: 700 !important;
text-transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card-title::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 1.8px solid currentColor;
border-radius: 999px 999px 999px 0;
transform: rotate(-45deg);
opacity: .75;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card-address {
margin: 0 0 var(--layout-elements-inset-tight, 16px) !important;
padding-bottom: var(--layout-elements-inset-tight, 16px) !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c5) !important;
color: var(--foreground-base-secondary-strong, #5f554a) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card-link {
margin-top: 0 !important;
}
/* Fase 40.23 - Icono oficial Figma en tarjeta Location */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .ftc-location-card-title::before {
content: "" !important;
flex: 0 0 20px !important;
width: 20px !important;
height: 24px !important;
border: 0 !important;
border-radius: 0 !important;
transform: none !important;
opacity: 1 !important;
background: url('/styles/componentes/assets/location-card-pin.svg') center center / contain no-repeat !important;
}
/* Fase 40.24 - Cómo funciona según Figma + tokens DS */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--background-base-surface, var(--white-100)) !important;
color: var(--foreground-base-primary-strong) !important;
padding-top: var(--layout-section-y-spacing) !important;
padding-bottom: var(--layout-section-y-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-section-inner {
width: min(calc(100% - (var(--layout-section-x-spacing) * 2)), var(--layout-container-content)) !important;
max-width: var(--layout-container-content) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid {
display: grid !important;
grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr) !important;
gap: calc(var(--layout-elements-inset-spacious) * 2.75) !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro {
max-width: var(--layout-container-reading) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2 {
margin: 0 0 var(--layout-elements-inset-loose) !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-display-section-family) !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p {
max-width: 420px !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong) !important;
font-family: var(--font-body-support-family) !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
letter-spacing: var(--font-body-support-letter-spacing) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step {
display: grid !important;
grid-template-columns: minmax(72px, 112px) minmax(0, 1fr) !important;
column-gap: calc(var(--layout-elements-inset-spacious) * 1.85) !important;
row-gap: var(--layout-elements-inset-compact) !important;
padding: calc(var(--layout-elements-inset-spacious) * 1.22) 0 !important;
margin: 0 !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-soft) !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:first-child {
padding-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
margin: 0 !important;
color: var(--temperature-600) !important;
font-family: var(--font-display-price-family) !important;
font-size: var(--font-display-price-size) !important;
line-height: var(--font-display-price-line-height) !important;
letter-spacing: var(--font-display-price-letter-spacing) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step h3 {
grid-column: 2 !important;
margin: 0 0 var(--layout-elements-inset-tight) !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-title-step-family) !important;
font-size: var(--font-title-step-size) !important;
line-height: var(--font-title-step-line-height) !important;
letter-spacing: var(--font-title-step-letter-spacing) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step p {
grid-column: 2 !important;
margin: 0 !important;
max-width: none !important;
color: var(--foreground-base-secondary-strong) !important;
font-family: var(--font-body-support-family) !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
letter-spacing: var(--font-body-support-letter-spacing) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div {
grid-column: 2 !important;
min-width: 0 !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step {
grid-template-columns: minmax(56px, 72px) minmax(0, 1fr) !important;
column-gap: var(--layout-elements-inset-loose) !important;
}
}
/* Fase 40.25 - Cómo funciona: ajuste real Figma + tokens DS
Mantiene estructura editable por piezas y corrige la compresión del texto. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--white-100, #ffffff) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
padding-block: calc(var(--layout-section-y-spacing, 112px) * .92) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-section-inner {
width: min(calc(100% - (var(--layout-section-x-spacing, 64px) * 2)), var(--layout-container-content, 1280px)) !important;
max-width: var(--layout-container-content, 1280px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
display: grid !important;
grid-template-columns: minmax(280px, 360px) minmax(680px, 1fr) !important;
gap: clamp(var(--layout-elements-inset-expanded, 48px), 7vw, calc(var(--layout-elements-inset-spacious, 64px) * 1.75)) !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro {
width: 100% !important;
max-width: var(--layout-container-reading, 420px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text h2 {
margin: 0 0 var(--layout-elements-inset-loose, 24px) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
letter-spacing: var(--font-display-section-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text p {
margin: 0 !important;
max-width: var(--layout-container-reading, 420px) !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
letter-spacing: var(--font-body-support-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-steps-list {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div.component-wrapper {
min-width: 0 !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step {
display: grid !important;
grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) !important;
column-gap: clamp(var(--layout-elements-inset-loose, 32px), 4.2vw, var(--layout-elements-inset-spacious, 64px)) !important;
row-gap: var(--layout-elements-inset-tight, 12px) !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: calc(var(--layout-elements-inset-expanded, 48px) * .76) 0 !important;
border-bottom: var(--stroke-sm, 1px) solid var(--border-base-secondary-soft, rgba(95, 85, 75, .18)) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:first-child {
padding-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-price-size, 32px) !important;
line-height: var(--font-display-price-line-height, 40px) !important;
letter-spacing: var(--font-display-price-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div {
grid-column: 2 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > h3 {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 0 var(--layout-elements-inset-tight, 12px) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-step-size, 18px) !important;
line-height: var(--font-title-step-line-height, 28px) !important;
letter-spacing: var(--font-title-step-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > p {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
letter-spacing: var(--font-body-support-letter-spacing, 0) !important;
text-align: left !important;
white-space: normal !important;
}
@media (max-width: 1180px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
gap: var(--layout-elements-inset-expanded, 48px) !important;
}
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-expanded, 48px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step {
grid-template-columns: minmax(52px, 64px) minmax(0, 1fr) !important;
column-gap: var(--layout-elements-inset-loose, 24px) !important;
}
}
/* Fase 40.26 - Cómo funciona final Figma + tokens DS
Objetivo: forzar la estructura real del PDF sin romper el editor por piezas.
Diseño: intro izquierda + timeline derecha con número, línea vertical, título y descripción. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--white-100, #ffffff) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
padding-block: calc(var(--layout-section-y-spacing, 112px) * .95) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-section-inner {
width: min(calc(100% - (var(--layout-section-x-spacing, 64px) * 2)), var(--layout-container-content, 1440px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
display: grid !important;
grid-template-columns: minmax(300px, 420px) minmax(0, 1fr) !important;
column-gap: clamp(var(--layout-elements-inset-spacious, 64px), 8vw, calc(var(--layout-elements-inset-spacious, 64px) * 2.1)) !important;
row-gap: var(--layout-elements-inset-expanded, 48px) !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-intro {
width: 100% !important;
max-width: var(--layout-container-reading, 720px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text h2 {
position: relative !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded, 40px) * 1.08) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
letter-spacing: var(--font-display-section-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: calc(var(--layout-elements-inset-loose, 24px) * -1) !important;
width: calc(var(--layout-elements-inset-expanded, 40px) * 1.05) !important;
height: var(--stroke-sm, 1px) !important;
background: var(--border-base-secondary-strong, var(--temperature-500, #a89275)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text p {
margin: 0 !important;
width: 100% !important;
max-width: var(--layout-container-reading, 420px) !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
letter-spacing: var(--font-body-support-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-steps-list {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div.component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step {
position: relative !important;
display: grid !important;
grid-template-columns: clamp(76px, 6vw, 112px) minmax(0, 1fr) !important;
column-gap: clamp(var(--layout-elements-inset-loose, 32px), 4vw, var(--layout-elements-inset-spacious, 64px)) !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0 calc(var(--layout-elements-inset-spacious, 64px) * 1.02) !important;
border: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step + .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper + .component-wrapper .ftc-how-step {
padding-top: calc(var(--layout-elements-inset-spacious, 64px) * .48) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:not(:last-child) .ftc-how-step::after {
content: "" !important;
position: absolute !important;
left: clamp(37px, 3vw, 56px) !important;
top: calc(var(--font-display-price-line-height, 40px) + var(--layout-elements-inset-loose, 24px)) !important;
bottom: calc(var(--layout-elements-inset-loose, 24px) * -1) !important;
width: var(--stroke-sm, 1px) !important;
background: var(--border-base-secondary-soft, rgba(95, 85, 75, .18)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:last-child .ftc-how-step {
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: calc(var(--font-display-price-size, 32px) * 1.62) !important;
line-height: calc(var(--font-display-price-line-height, 40px) * 1.42) !important;
letter-spacing: var(--font-display-price-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div {
grid-column: 2 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > h3 {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: calc(var(--layout-elements-inset-tight, 12px) * .15) 0 var(--layout-elements-inset-tight, 12px) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-step-size, 18px) !important;
line-height: var(--font-title-step-line-height, 28px) !important;
letter-spacing: var(--font-title-step-letter-spacing, 0) !important;
font-weight: 700 !important;
text-align: left !important;
text-transform: uppercase !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > p {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 24px) !important;
letter-spacing: var(--font-body-default-letter-spacing, 0) !important;
text-align: left !important;
white-space: normal !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
grid-template-columns: 1fr !important;
row-gap: var(--layout-elements-inset-expanded, 48px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step {
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: var(--layout-elements-inset-loose, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:not(:last-child) .ftc-how-step::after {
left: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
font-size: var(--font-display-price-size, 32px) !important;
line-height: var(--font-display-price-line-height, 40px) !important;
}
}
/* Fase 40.27 - Cómo funciona: alineación real en landing pública + editor
Causa: la landing pública no siempre tiene los wrappers del editor y el timeline podía heredar anchuras estrechas.
Este bloque fuerza la estructura oficial del PDF sin convertirlo en componente cerrado. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--white-100, #ffffff) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
padding-block: calc(var(--layout-section-y-spacing, 112px) * .92) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner {
width: min(1440px, calc(100vw - (var(--layout-section-x-spacing, 64px) * 2))) !important;
max-width: min(1440px, calc(100vw - (var(--layout-section-x-spacing, 64px) * 2))) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
display: grid !important;
grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
column-gap: clamp(72px, 8vw, 132px) !important;
row-gap: var(--layout-elements-inset-expanded, 48px) !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-intro {
width: 100% !important;
max-width: 390px !important;
min-width: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2 {
position: relative !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded, 40px) * 1.08) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: calc(var(--layout-elements-inset-loose, 24px) * -1) !important;
width: calc(var(--layout-elements-inset-expanded, 40px) * 1.05) !important;
height: var(--stroke-sm, 1px) !important;
background: var(--border-base-secondary-strong, var(--temperature-500, #a89275)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p {
margin: 0 !important;
max-width: 390px !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-support-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 22px) !important;
text-align: left !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-steps-list {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: min(100%, 720px) !important;
gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div.ftc-how-step {
position: relative !important;
display: grid !important;
grid-template-columns: clamp(72px, 6vw, 112px) minmax(420px, 1fr) !important;
column-gap: clamp(var(--layout-elements-inset-loose, 32px), 4vw, var(--layout-elements-inset-spacious, 64px)) !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0 calc(var(--layout-elements-inset-spacious, 64px) * 1.02) !important;
border: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step + .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper + .component-wrapper .ftc-how-step {
padding-top: calc(var(--layout-elements-inset-spacious, 64px) * .48) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:not(:last-child) .ftc-how-step::after {
content: "" !important;
position: absolute !important;
left: clamp(36px, 3vw, 56px) !important;
top: calc(var(--font-display-price-line-height, 40px) + var(--layout-elements-inset-loose, 24px)) !important;
bottom: calc(var(--layout-elements-inset-loose, 24px) * -1) !important;
width: var(--stroke-sm, 1px) !important;
background: var(--border-base-secondary-soft, rgba(95, 85, 75, .18)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:last-child .ftc-how-step {
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: auto !important;
margin: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: calc(var(--font-display-price-size, 32px) * 1.62) !important;
line-height: calc(var(--font-display-price-line-height, 40px) * 1.42) !important;
font-weight: 700 !important;
text-align: left !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > p {
grid-column: 2 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin-left: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > h3 {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: calc(var(--layout-elements-inset-tight, 12px) * .15) 0 var(--layout-elements-inset-tight, 12px) !important;
color: var(--foreground-base-primary-strong, #2a2118) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-step-size, 18px) !important;
line-height: var(--font-title-step-line-height, 28px) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > p {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 24px) !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
@media (max-width: 1100px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner {
width: min(100% - (var(--layout-section-x-spacing, 32px) * 2), 860px) !important;
max-width: min(100% - (var(--layout-section-x-spacing, 32px) * 2), 860px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
grid-template-columns: 1fr !important;
row-gap: var(--layout-elements-inset-expanded, 48px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step {
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: var(--layout-elements-inset-loose, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:not(:last-child) .ftc-how-step::after {
left: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong {
font-size: var(--font-display-price-size, 32px) !important;
line-height: var(--font-display-price-line-height, 40px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > p {
grid-column: 2 !important;
}
}
/* Fase 40.28b - Why us Figma safe block
Solo afecta a .ftc-benefits. No toca header, hero, mapa, reservas ni compra.
Mantiene estructura por piezas: head + grid + rich_text items. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits {
background: var(--background-base-support-emphasis, #11374D) !important;
color: var(--foreground-base-inverse-strong, #FFFFFF) !important;
padding-block: calc(var(--layout-section-y-spacing, 112px) * .86) calc(var(--layout-section-y-spacing, 112px) * .92) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits > .ve-section-inner {
width: min(var(--layout-container-content, 1440px), calc(100vw - (var(--layout-section-x-spacing, 64px) * 2))) !important;
max-width: min(var(--layout-container-content, 1440px), calc(100vw - (var(--layout-section-x-spacing, 64px) * 2))) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-benefits-head,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-benefits-head {
max-width: var(--layout-container-reading, 720px) !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded, 48px) * 1.22) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2 {
position: relative !important;
margin: 0 0 calc(var(--layout-elements-inset-expanded, 48px) * 1.10) !important;
color: var(--foreground-base-inverse-strong, #FFFFFF) !important;
font-family: var(--font-display-page-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-display-page-size, 48px) !important;
line-height: var(--font-display-page-line-height, 56px) !important;
font-weight: 700 !important;
letter-spacing: var(--font-display-page-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: calc(var(--layout-elements-inset-loose, 24px) * -1) !important;
width: calc(var(--layout-elements-inset-expanded, 48px) * .95) !important;
height: var(--stroke-sm, 1px) !important;
background: var(--foreground-base-inverse-soft, rgba(255,255,255,.70)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head p {
margin: 0 !important;
max-width: var(--layout-container-reading, 720px) !important;
color: var(--foreground-base-inverse-soft, rgba(255,255,255,.72)) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 24px) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-benefits-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: calc(var(--layout-elements-inset-expanded, 48px) * 1.72) !important;
row-gap: calc(var(--layout-elements-inset-expanded, 48px) * 1.25) !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-benefit-item,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-benefit-item {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
text-align: left !important;
color: var(--foreground-base-inverse-strong, #FFFFFF) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item > span:first-child {
display: block !important;
width: var(--layout-elements-inset-expanded, 40px) !important;
height: var(--layout-elements-inset-expanded, 40px) !important;
margin: 0 0 var(--layout-elements-inset-loose, 24px) !important;
padding: 0 !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(1) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(1) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/audioguia.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(2) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(2) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/reserva.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(3) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(3) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/experiencia.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(4) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(4) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/ajustes.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(5) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(5) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/informacion.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .ftc-benefit-item:nth-child(6) > span:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid > .component-wrapper:nth-child(6) .ftc-benefit-item > span:first-child {
background-image: url('/styles/componentes/assets/benefits/soporte.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item h3 {
margin: 0 0 var(--layout-elements-inset-cozy, 16px) !important;
color: var(--foreground-base-inverse-strong, #FFFFFF) !important;
font-family: var(--font-title-block-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-block-size, 24px) !important;
line-height: var(--font-title-block-line-height, 32px) !important;
font-weight: 700 !important;
letter-spacing: var(--font-title-block-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item p {
margin: 0 !important;
color: var(--foreground-base-inverse-soft, rgba(255,255,255,.72)) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size, 16px) !important;
line-height: var(--font-body-default-line-height, 24px) !important;
font-weight: 400 !important;
text-align: left !important;
}
@media (max-width: 1100px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits {
padding-block: var(--layout-section-y-spacing, 56px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-benefits-grid {
grid-template-columns: 1fr !important;
row-gap: var(--layout-elements-inset-expanded, 40px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2 {
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
}
}
/* Fase 40.29 - Benefits icons public/editor robust fix
Motivo: en la vista pública el icono no debe depender del interno,
porque el contenido guardado/renderizado puede no conservarlo igual que en el editor.
Se pinta el icono desde el item, manteniendo textos editables y assets por componente. */
.visual-layout-page .ftc-benefits .ftc-benefit-item > span:first-child,
.visual-layout-page .ftc-benefits .editable-rich-text.ftc-benefit-item > span:first-child,
.visual-layout-page .ftc-benefits .ve-rich-text.ftc-benefit-item > span:first-child {
display: none !important;
}
.visual-layout-page .ftc-benefits .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits .editable-rich-text.ftc-benefit-item::before,
.visual-layout-page .ftc-benefits .ve-rich-text.ftc-benefit-item::before {
content: "" !important;
display: block !important;
width: var(--layout-elements-inset-expanded, 40px) !important;
height: var(--layout-elements-inset-expanded, 40px) !important;
margin: 0 0 var(--layout-elements-inset-loose, 24px) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
flex: 0 0 auto !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(1)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(1)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(1)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(1) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/audioguia.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(2)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(2)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(2)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(2) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/reserva.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(3)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(3)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(3)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(3) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/experiencia.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(4)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(4)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(4)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(4) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/ajustes.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(5)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(5)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(5)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(5) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/informacion.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .ftc-benefit-item:nth-child(6)::before,
.visual-layout-page .ftc-benefits-grid > .ve-rich-text.ftc-benefit-item:nth-child(6)::before,
.visual-layout-page .ftc-benefits-grid > .editable-rich-text.ftc-benefit-item:nth-child(6)::before,
.visual-layout-page .ftc-benefits-grid > .component-wrapper:nth-child(6) .ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/soporte.svg') !important;
}
/* Fase 40.30 - Benefits icons public .cmp-rich_text fix
En vista pública, los componentes rich_text con CSS propio se envuelven en .cmp-rich_text.
El editor usa .component-wrapper, por eso los nth-child anteriores sólo funcionaban dentro del editor.
Esta capa añade el caso público sin tocar estructura ni JS. */
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text .ve-rich-text.ftc-benefit-item::before {
content: "" !important;
display: block !important;
width: var(--layout-elements-inset-expanded, 40px) !important;
height: var(--layout-elements-inset-expanded, 40px) !important;
margin: 0 0 var(--layout-elements-inset-loose, 24px) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
flex: 0 0 auto !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(1) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(1) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/audioguia.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(2) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(2) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/reserva.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(3) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(3) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/experiencia.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(4) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(4) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/ajustes.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(5) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(5) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/informacion.svg') !important;
}
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(6) .ftc-benefit-item::before,
.visual-layout-page .ftc-benefits-grid > .cmp-rich_text:nth-child(6) .ve-rich-text.ftc-benefit-item::before {
background-image: url('/styles/componentes/assets/benefits/soporte.svg') !important;
}
/* Fase 40.33 - Reviews / Opiniones ajustado a estructura Figma + Design System v0.1
Bloque limitado a .ftc-reviews.
Mantiene tokens semánticos de color, tipografía, radios y layout.
La estructura desktop usa el container content del DS para replicar el ancho real del Figma. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews {
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: calc(var(--layout-section-y-spacing) * .75) calc(var(--layout-section-y-spacing) * .72) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-reviews-head,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-reviews-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
text-align: center !important;
margin: 0 0 calc(var(--layout-section-y-spacing) * .72) !important;
color: var(--foreground-base-primary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head h2 {
margin: 0 !important;
color: var(--foreground-base-primary-mid) !important;
font-family: var(--font-display-section-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
font-weight: 600 !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head h2::after {
content: "" !important;
display: block !important;
width: var(--layout-elements-inset-expanded) !important;
height: 1px !important;
margin: var(--layout-elements-inset-cozy) auto 0 !important;
background: var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head > .ftc-stars {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--layout-elements-gap-tight) !important;
margin: calc(var(--layout-elements-inset-expanded) * .85) 0 0 !important;
padding: 0 !important;
color: var(--foreground-action-secondary-default) !important;
font-family: var(--font-title-card-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: var(--font-title-card-line-height) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
background: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head > .ftc-stars strong {
display: inline !important;
color: inherit !important;
font: inherit !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head > .ftc-stars::after {
content: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-subtitle {
margin: var(--layout-elements-inset-compact) 0 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-review-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: var(--layout-elements-gap-loose) !important;
align-items: stretch !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper > .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .cmp-card {
display: block !important;
min-width: 0 !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-card,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-card.ftc-review-card {
display: flex !important;
flex-direction: column !important;
min-height: calc(var(--layout-elements-inset-expanded) * 6.8) !important;
height: 100% !important;
padding: calc(var(--layout-elements-inset-spacious) + var(--layout-elements-inset-compact)) !important;
border: 1px solid var(--border-base-tertiary-mid) !important;
border-radius: var(--radius-lg) !important;
background: var(--background-base-surface, var(--white-100)) !important;
box-shadow: 0 2px 0 var(--border-base-secondary-soft) !important;
color: var(--foreground-base-primary-strong) !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-review-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-review-content {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
color: var(--foreground-base-primary-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content > .ftc-stars {
display: block !important;
margin: 0 0 var(--layout-elements-inset-spacious) !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
color: var(--foreground-base-accent-soft) !important;
font-family: var(--font-title-card-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: var(--font-title-card-line-height) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
background: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote {
margin: 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-support-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 400 !important;
font-style: italic !important;
border: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-author,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p {
display: grid !important;
grid-template-columns: var(--layout-elements-inset-expanded) minmax(0, 1fr) !important;
column-gap: var(--layout-elements-inset-cozy) !important;
align-items: center !important;
margin: auto 0 0 !important;
padding: var(--layout-elements-inset-loose) 0 0 !important;
border-top: 1px solid var(--border-base-secondary-soft) !important;
color: var(--foreground-base-primary-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-avatar {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--layout-elements-inset-expanded) !important;
height: var(--layout-elements-inset-expanded) !important;
border-radius: var(--radius-full) !important;
background: var(--background-base-default-mid) !important;
color: var(--foreground-base-primary-mid) !important;
font-family: var(--font-title-card-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: 1 !important;
font-weight: 700 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-author p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p {
margin: 0 !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-author strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p strong {
grid-column: 2 !important;
display: block !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-body-default-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-author small,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p small {
grid-column: 2 !important;
display: block !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
}
/* Compatibilidad con bloques ya guardados en BD antes de añadir .ftc-review-author. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p::before {
content: "C" !important;
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--layout-elements-inset-expanded) !important;
height: var(--layout-elements-inset-expanded) !important;
border-radius: var(--radius-full) !important;
background: var(--background-base-default-mid) !important;
color: var(--foreground-base-primary-mid) !important;
font-family: var(--font-title-card-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: 1 !important;
font-weight: 700 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .ve-card:nth-child(2) .ftc-review-content blockquote + p::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .cmp-card:nth-child(2) .ftc-review-content blockquote + p::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper:nth-child(2) .ftc-review-content blockquote + p::before {
content: "T" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .ve-card:nth-child(3) .ftc-review-content blockquote + p::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .cmp-card:nth-child(3) .ftc-review-content blockquote + p::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper:nth-child(3) .ftc-review-content blockquote + p::before {
content: "E" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p small {
font-size: 0 !important;
line-height: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-content blockquote + p small::after {
content: "Barcelona, España • Hace 2 semanas" !important;
display: block !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .ve-card:nth-child(2) .ftc-review-content blockquote + p small::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .cmp-card:nth-child(2) .ftc-review-content blockquote + p small::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper:nth-child(2) .ftc-review-content blockquote + p small::after {
content: "Londres, UK • Hace 1 mes" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .ve-card:nth-child(3) .ftc-review-content blockquote + p small::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .cmp-card:nth-child(3) .ftc-review-content blockquote + p small::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid > .component-wrapper:nth-child(3) .ftc-review-content blockquote + p small::after {
content: "Madrid, España • Hace 2 meses" !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head:not(:has(.ftc-reviews-subtitle)) > .ftc-stars {
flex-wrap: wrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head:not(:has(.ftc-reviews-subtitle)) > .ftc-stars::after {
content: "Basado en 2.847 reseñas verificadas" !important;
display: block !important;
flex-basis: 100% !important;
width: 100% !important;
margin-top: var(--layout-elements-inset-compact) !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews .ve-section-inner:not(:has(.ftc-review-note))::after {
content: "Todas las reseñas provienen de clientes verificados que han completado su visita al Real Alcázar de Sevilla." !important;
display: block !important;
margin: calc(var(--layout-elements-inset-expanded) * 1.15) auto 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-note,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-review-note,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-review-note {
display: block !important;
margin: calc(var(--layout-elements-inset-expanded) * 1.15) auto 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-note p {
margin: 0 !important;
}
@media (max-width: 1100px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-review-grid {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-gap-loose) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-card,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-card.ftc-review-card {
min-height: 0 !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews {
padding-block: var(--layout-section-y-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
}
}
/* Fase 40.34 - FAQs / Preguntas Frecuentes ajustado a Figma + Design System v0.1
Bloque limitado a .ftc-faq.
Replica la estructura desktop del Figma usando tokens semánticos de layout,
color, tipografía, bordes y radios del Design System. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq {
background: var(--white-100) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: calc(var(--layout-section-y-spacing) * .64) calc(var(--layout-section-y-spacing) * .76) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq h2.ftc-section-title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 0 calc(var(--layout-section-y-spacing) * .56) !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-display-section-family), var(--font-display-family), sans-serif !important;
font-size: var(--font-display-section-size) !important;
line-height: var(--font-display-section-line-height) !important;
letter-spacing: var(--font-display-section-letter-spacing) !important;
font-weight: 600 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-section-title::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq h2.ftc-section-title::after {
content: "" !important;
display: block !important;
width: var(--layout-elements-inset-expanded) !important;
height: var(--stroke-sm) !important;
margin: var(--layout-elements-inset-cozy) auto 0 !important;
background: var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-faq-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-faq-list {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
color: var(--foreground-base-primary-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details:first-of-type {
border-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details:last-of-type {
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: calc(var(--layout-elements-inset-expanded) + var(--layout-elements-inset-spacious)) !important;
padding: var(--layout-elements-inset-loose) calc(var(--layout-elements-inset-spacious) + var(--layout-elements-inset-loose)) var(--layout-elements-inset-loose) 0 !important;
cursor: pointer !important;
list-style: none !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-default-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary::-webkit-details-marker {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary::after {
content: "⌄" !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--layout-elements-inset-spacious) !important;
height: var(--layout-elements-inset-spacious) !important;
border: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
border-radius: var(--radius-full) !important;
background: var(--white-100) !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-action-secondary-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-secondary-size) !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: translateY(-50%) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details[open] summary::after {
content: "⌄" !important;
transform: translateY(-50%) rotate(180deg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list p:not(.ftc-more) {
max-width: var(--layout-container-reading) !important;
margin: calc(var(--layout-elements-inset-compact) * -1) 0 var(--layout-elements-inset-loose) !important;
padding: 0 !important;
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-default-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more {
display: flex !important;
justify-content: center !important;
width: 100% !important;
margin: calc(var(--layout-elements-inset-expanded) * 1.3) 0 0 !important;
padding: 0 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: calc(var(--layout-elements-inset-expanded) + var(--layout-elements-inset-compact)) !important;
padding: var(--layout-elements-inset-cozy) calc(var(--layout-elements-inset-expanded) * 1.35) !important;
border: var(--stroke-sm) solid var(--border-action-secondary-hover) !important;
border-radius: var(--radius-full) !important;
background: var(--background-action-ghost-default) !important;
color: var(--foreground-base-primary-soft) !important;
box-shadow: none !important;
font-family: var(--font-action-secondary-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-secondary-size) !important;
line-height: var(--font-action-secondary-line-height) !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more a:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more a:focus-visible {
background: var(--background-action-ghost-hover) !important;
border-color: var(--border-action-secondary-pressed) !important;
color: var(--foreground-action-ghost-hover) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq {
padding-block: var(--layout-section-y-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq h2.ftc-section-title {
margin-bottom: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary {
min-height: calc(var(--layout-elements-inset-expanded) * 2) !important;
padding-right: calc(var(--layout-elements-inset-expanded) + var(--layout-elements-inset-cozy)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary::after {
width: var(--layout-elements-inset-expanded) !important;
height: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more a {
width: 100% !important;
padding-inline: var(--layout-elements-inset-loose) !important;
}
}
/* Fase 40.35 - Footer oficial Figma + Design System v0.1
El footer nuevo vive dentro del layout de componentes. El footer legacy de lang/footer.php
se deja de cargar desde styles/componentes/index_lang.php. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: calc(var(--layout-section-y-spacing) * .46) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
column-gap: var(--layout-section-x-spacing) !important;
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
margin-inline: auto !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
grid-column: 1 / -1 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 calc(var(--layout-elements-inset-expanded) * .92) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo div {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link {
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link img {
display: block !important;
width: min(175px, calc(var(--space-8xl) - var(--space-md))) !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-top-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--icon-xl) !important;
height: var(--icon-xl) !important;
color: var(--foreground-action-ghost-default) !important;
font-family: var(--font-action-secondary-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-title-card-size) !important;
line-height: 1 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: 1.15fr 1.15fr .85fr 1.05fr !important;
gap: var(--layout-section-x-spacing) !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: calc(var(--layout-elements-inset-expanded) * .92) 0 calc(var(--layout-elements-inset-expanded) * 1.14) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3 {
margin: 0 0 var(--layout-elements-inset-cozy) !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-action-nav-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-nav-size) !important;
line-height: var(--font-action-nav-line-height) !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
margin: 0 !important;
color: var(--foreground-action-link-default) !important;
font-family: var(--font-body-default-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: calc(var(--font-body-default-line-height) * 1.08) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a:focus-visible {
color: var(--foreground-action-link-hover) !important;
text-decoration: underline !important;
text-underline-offset: var(--space-3xs) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-cozy) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list li {
display: grid !important;
grid-template-columns: var(--icon-lg) minmax(0, 1fr) !important;
gap: var(--layout-elements-inset-tight) !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list img {
display: block !important;
width: var(--icon-lg) !important;
height: var(--icon-lg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
grid-column: 1 / 2 !important;
grid-row: 3 !important;
max-width: var(--layout-container-reading) !important;
margin: 0 !important;
padding: calc(var(--layout-elements-inset-expanded) * .9) 0 calc(var(--layout-elements-inset-expanded) * 1.25) !important;
border-radius: 0 !important;
background: transparent !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer p {
margin: 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-body-caption-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
grid-column: 2 / 3 !important;
grid-row: 3 !important;
align-self: center !important;
justify-self: end !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row span {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: min(239px, 34vw) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose) !important;
width: 100% !important;
margin: 0 !important;
padding: calc(var(--layout-elements-inset-expanded) * .9) 0 !important;
border: 0 !important;
background: var(--white-100) !important;
box-shadow: 0 0 0 100vmax var(--white-100) !important;
clip-path: inset(0 -100vmax) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom a {
margin: 0 !important;
color: var(--foreground-base-primary-soft) !important;
font-family: var(--font-action-nav-family), var(--font-body-family), sans-serif !important;
font-size: var(--font-action-nav-size) !important;
line-height: var(--font-action-nav-line-height) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: calc(var(--layout-elements-inset-expanded) * .65) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a {
color: var(--foreground-action-link-default) !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a:hover,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a:focus-visible {
color: var(--foreground-action-link-hover) !important;
text-decoration: underline !important;
text-underline-offset: var(--space-3xs) !important;
}
/* Failsafe de visualización si por caché aún llegase el footer legacy antiguo tras la home nueva. */
body:has(.visual-layout-page[data-design-system="ftc-foundations"]) > footer#contacto {
display: none !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row {
grid-row: 4 !important;
padding-bottom: calc(var(--layout-elements-inset-expanded) * .9) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom {
grid-row: 5 !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-content: flex-start !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
padding-top: var(--layout-section-y-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo {
padding-bottom: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: 1fr !important;
gap: calc(var(--layout-elements-gap-loose) * 1.35) !important;
padding-block: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer h3 {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer {
padding-block: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
width: min(239px, 100%) !important;
}
}
/* Fase 40.36 - Footer: estructura Figma precisa con Design System
Corrige el exceso de ancho del contenedor, alinea la flecha con la línea superior,
coloca disclaimer e imagen de pagos en la misma fila y estabiliza el editor visual. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: calc(var(--layout-container-content) - var(--space-7xl));
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: var(--layout-section-y-spacing) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
column-gap: var(--layout-elements-gap-loose) !important;
row-gap: 0 !important;
width: min(var(--ftc-footer-content-width), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--ftc-footer-content-width) !important;
margin-inline: auto !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-logo) {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
justify-self: stretch !important;
width: 100% !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose) !important;
margin: 0 !important;
padding: 0 0 var(--space-xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-logo) .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-logo) .editable-rich-text {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link img {
width: calc(var(--space-8xl) - var(--space-md)) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-top-link {
flex: 0 0 auto !important;
width: var(--icon-xl) !important;
height: var(--icon-xl) !important;
margin: 0 !important;
transform: translateY(var(--space-xs)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-grid) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: calc(var(--layout-section-x-spacing) + var(--space-lg)) !important;
row-gap: var(--layout-elements-gap-loose) !important;
align-items: start !important;
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3 {
margin-bottom: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
line-height: calc(var(--font-body-default-line-height) * 1.05) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list {
gap: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-disclaimer) {
grid-column: 1 / 2 !important;
grid-row: 3 !important;
justify-self: start !important;
align-self: center !important;
width: 100% !important;
max-width: var(--layout-container-reading) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
background: transparent !important;
border-radius: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-payment-row) {
grid-column: 2 / 3 !important;
grid-row: 3 !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border: 0 !important;
background: transparent !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: calc(var(--space-8xl) + var(--space-xl)) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-bottom) {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: var(--space-5xl) !important;
margin: 0 !important;
padding: var(--space-xl) 0 !important;
border: 0 !important;
background: var(--white-100) !important;
box-shadow: 0 0 0 100vmax var(--white-100) !important;
clip-path: inset(0 -100vmax) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p {
justify-self: start !important;
margin: 0 !important;
max-width: calc(var(--space-8xl) + var(--space-xl)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-self: end !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--space-xl) !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a {
display: inline-flex !important;
white-space: nowrap !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: var(--layout-container-content);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--layout-section-x-spacing) !important;
padding-bottom: var(--space-3xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-disclaimer) {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-payment-row) {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
justify-self: start !important;
text-align: left !important;
padding-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
justify-content: flex-start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
grid-row: 5 !important;
grid-template-columns: 1fr !important;
row-gap: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-self: start !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: var(--space-md) var(--space-xl) !important;
white-space: normal !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
padding-bottom: var(--space-lg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link img {
width: calc(var(--space-7xl) + var(--space-sm)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: 1fr !important;
padding-block: var(--space-lg) var(--space-2xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer h3 {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
padding-block: var(--space-lg) var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
padding-bottom: var(--space-lg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
width: min(calc(var(--space-8xl) + var(--space-xl)), 100%) !important;
}
}
/* Fase 40.37 - Footer: sincronización real editor / landing publicada
Motivo: el editor muestra drafts con wrappers (.component-wrapper / .section-content-wrapper),
pero la landing publicada renderiza HTML limpio. Además, una sección top-level ftc-footer
podía salir sin .ve-section-inner. Estas reglas estabilizan ambas salidas. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: calc(var(--layout-container-content) - var(--space-7xl));
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: var(--layout-section-y-spacing) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
column-gap: var(--layout-elements-gap-loose) !important;
row-gap: 0 !important;
width: min(var(--ftc-footer-content-width), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--ftc-footer-content-width) !important;
margin-inline: auto !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Fallback para layouts publicados muy antiguos donde el footer se renderizase sin inner. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--ftc-footer-content-width)) minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > * {
grid-column: 2 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-footer-logo,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-logo) {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-footer-grid,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-grid) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-footer-disclaimer,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer) {
grid-column: 1 / 2 !important;
grid-row: 3 !important;
justify-self: start !important;
align-self: center !important;
width: 100% !important;
max-width: var(--layout-container-reading) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-payment-row,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) {
grid-column: 2 / 3 !important;
grid-row: 3 !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-footer-bottom,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-bottom) {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-logo) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-grid) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-bottom) > .component-content {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 var(--space-xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: calc(var(--layout-section-x-spacing) + var(--space-lg)) !important;
row-gap: var(--layout-elements-gap-loose) !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
background: transparent !important;
border-radius: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border: 0 !important;
background: transparent !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: calc(var(--space-8xl) + var(--space-xl)) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: var(--space-5xl) !important;
margin: 0 !important;
padding: var(--space-xl) 0 !important;
border: 0 !important;
background: var(--white-100) !important;
box-shadow: 0 0 0 100vmax var(--white-100) !important;
clip-path: inset(0 -100vmax) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p {
justify-self: start !important;
margin: 0 !important;
max-width: calc(var(--space-8xl) + var(--space-xl)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-self: end !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--space-xl) !important;
white-space: nowrap !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: var(--layout-container-content);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
grid-template-columns: minmax(0, 1fr) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--layout-section-x-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-footer-disclaimer,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > .ftc-payment-row,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) {
grid-column: 1 / -1 !important;
justify-self: start !important;
max-width: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
justify-content: flex-start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
grid-template-columns: 1fr !important;
row-gap: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-self: start !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: var(--space-md) var(--space-xl) !important;
white-space: normal !important;
}
}
/* Fase 40.38 - Footer público/editor: grid-item real con wrappers cmp-rich_text
Causa corregida: en público, rich_text se envuelve en .cmp-rich_text por el CSS de componente.
El editor usa .component-wrapper. Sin estas reglas, el footer público auto-colocaba logo,
disclaimer y pagos en posiciones distintas al Figma. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: calc(var(--layout-container-content) - var(--space-7xl));
background: var(--background-base-default-soft) !important;
color: var(--foreground-base-primary-strong) !important;
padding-block: var(--layout-section-y-spacing) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
column-gap: var(--layout-elements-gap-loose) !important;
row-gap: 0 !important;
width: min(var(--ftc-footer-content-width), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--ftc-footer-content-width) !important;
margin-inline: auto !important;
background: transparent !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-logo),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-logo) {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ve-grid.ftc-footer-grid,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-grid) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-disclaimer),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer) {
grid-column: 1 / 2 !important;
grid-row: 3 !important;
justify-self: start !important;
align-self: center !important;
width: 100% !important;
max-width: var(--layout-container-reading) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-payment-row),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) {
grid-column: 2 / 3 !important;
grid-row: 3 !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-bottom),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-bottom) {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-logo > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-disclaimer > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-payment-row > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-bottom > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-logo) > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-disclaimer) > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-payment-row) > .ve-rich-text,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-bottom) > .ve-rich-text,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-logo) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-grid) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) > .component-content,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-bottom) > .component-content {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--layout-elements-gap-loose) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 var(--space-xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: calc(var(--layout-section-x-spacing) + var(--space-lg)) !important;
row-gap: var(--layout-elements-gap-loose) !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border-bottom: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
background: transparent !important;
border-radius: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: var(--space-xl) 0 var(--space-4xl) !important;
border: 0 !important;
background: transparent !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: calc(var(--space-8xl) + var(--space-xl)) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: var(--space-5xl) !important;
margin: 0 !important;
padding: var(--space-xl) 0 !important;
border: 0 !important;
background: var(--white-100) !important;
box-shadow: 0 0 0 100vmax var(--white-100) !important;
clip-path: inset(0 -100vmax) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-content-width: var(--layout-container-content);
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
grid-template-columns: minmax(0, 1fr) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--layout-section-x-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-footer-disclaimer),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > .cmp-rich_text:has(> .ftc-payment-row),
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) {
grid-column: 1 / -1 !important;
justify-self: start !important;
max-width: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
justify-content: flex-start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
grid-template-columns: 1fr !important;
row-gap: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
justify-self: start !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: var(--space-md) var(--space-xl) !important;
white-space: normal !important;
}
}
/* ─── Fase 40.42: páginas independientes Artículo / Legal (Design System) ─── */
.visual-layout-page .alc-inner-hero,
.visual-layout-page .alc-article-hero,
.visual-layout-page .alc-article-body-section,
.visual-layout-page .alc-legal-body-section {
font-family: var(--font-body-family);
color: var(--foreground-base-primary-strong);
}
.visual-layout-page .alc-inner-hero,
.visual-layout-page .alc-article-hero {
background: var(--background-base-default-soft) !important;
}
.visual-layout-page .alc-inner-hero .ve-section-inner,
.visual-layout-page .alc-article-hero .ve-section-inner,
.visual-layout-page .alc-article-body-section .ve-section-inner,
.visual-layout-page .alc-legal-body-section .ve-section-inner {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2)));
}
.visual-layout-page .alc-inner-hero-copy,
.visual-layout-page .alc-article-hero-copy {
max-width: var(--layout-container-reading);
}
.visual-layout-page .alc-inner-hero-copy h1,
.visual-layout-page .alc-article-hero-copy h1 {
color: var(--foreground-base-brand-emphasis);
font-family: var(--font-title-block-family);
font-size: clamp(var(--font-2xl), 4vw, var(--font-4xl));
line-height: 1.05;
letter-spacing: var(--font-title-block-letter-spacing);
margin: 0 0 var(--layout-elements-gap-cozy);
}
.visual-layout-page .alc-inner-hero-copy p,
.visual-layout-page .alc-article-hero-copy p {
color: var(--foreground-base-secondary-mid);
font-family: var(--font-body-family);
font-size: var(--font-body-default-size);
line-height: var(--font-body-default-line-height);
max-width: var(--layout-container-reading);
}
.visual-layout-page .alc-article-hero {
text-align: center;
}
.visual-layout-page .alc-article-hero-copy {
margin: 0 auto var(--layout-elements-inset-spacious);
}
.visual-layout-page .alc-article-hero-image {
display: block;
width: 100%;
border-radius: var(--radius-lg);
box-shadow: 0 var(--space-2xs) var(--space-sm) rgba(42, 13, 69, .12);
}
.visual-layout-page .alc-article-layout,
.visual-layout-page .alc-legal-layout {
display: grid;
grid-template-columns: minmax(160px, 220px) minmax(0, var(--layout-container-reading)) !important;
justify-content: center;
gap: var(--space-4xl) !important;
align-items: start;
}
.visual-layout-page .alc-article-index,
.visual-layout-page .alc-legal-index {
position: sticky;
top: var(--space-4xl);
color: var(--foreground-base-tertiary-strong);
font-family: var(--font-body-family);
font-size: var(--font-body-support-size);
line-height: 1.55;
}
.visual-layout-page .alc-article-index strong,
.visual-layout-page .alc-legal-index strong {
display: block;
margin-bottom: var(--layout-elements-gap-cozy);
color: var(--foreground-base-primary-strong);
font-family: var(--font-title-notice-family);
font-size: var(--font-title-notice-size);
line-height: var(--font-title-notice-line-height);
text-transform: uppercase;
letter-spacing: .08em;
}
.visual-layout-page .alc-article-index a,
.visual-layout-page .alc-legal-index a {
display: block;
color: var(--foreground-base-secondary-mid);
text-decoration: none;
padding: var(--space-3xs) 0;
border-left: 0;
}
.visual-layout-page .alc-article-content,
.visual-layout-page .alc-legal-content {
max-width: var(--layout-container-reading);
color: var(--foreground-base-secondary-mid);
font-family: var(--font-body-family);
font-size: var(--font-body-default-size);
line-height: var(--font-body-default-line-height);
}
.visual-layout-page .alc-article-content p,
.visual-layout-page .alc-legal-content p,
.visual-layout-page .alc-legal-content li {
color: var(--foreground-base-secondary-mid);
margin: 0 0 var(--layout-elements-gap-cozy);
}
.visual-layout-page .alc-article-content h2,
.visual-layout-page .alc-legal-content h2 {
color: var(--foreground-base-primary-strong);
font-family: var(--font-title-card-family);
font-size: var(--font-title-card-size);
line-height: var(--font-title-card-line-height);
margin: var(--layout-elements-inset-spacious) 0 var(--layout-elements-gap-tight);
}
.visual-layout-page .alc-legal-content ul {
margin: 0 0 var(--layout-elements-gap-loose);
padding-left: var(--layout-elements-inset-spacious);
}
@media (max-width: 1024px) {
.visual-layout-page .alc-article-layout,
.visual-layout-page .alc-legal-layout {
grid-template-columns: 1fr !important;
gap: var(--layout-elements-inset-expanded) !important;
}
.visual-layout-page .alc-article-index,
.visual-layout-page .alc-legal-index {
position: static;
display: none;
}
}
/* ─── Fase 40.43: Article Detail ajustado al Figma + Design System ───
Mantiene header/footer existentes, pero corrige hero, imagen y lectura del artículo.
Se escribe al final para sobreescribir layouts antiguos guardados en BD/editor. */
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero {
background: var(--white-100) !important;
padding: var(--space-2xl) 0 var(--space-2xl) !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero.editable-section > .section-content-wrapper {
width: min(1768px, calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: 1768px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-article-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.alc-article-hero-copy {
width: min(var(--layout-container-reading), 100%) !important;
max-width: var(--layout-container-reading) !important;
margin: 0 auto var(--space-xl) !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero-copy h1 {
max-width: 760px !important;
margin: 0 auto var(--space-sm) !important;
color: var(--foreground-base-brand-emphasis) !important;
font-family: var(--font-display-page-family) !important;
font-size: clamp(var(--font-3xl), 2.65vw, var(--font-5xl)) !important;
line-height: 1.08 !important;
letter-spacing: var(--font-display-page-letter-spacing) !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero-copy p {
max-width: 920px !important;
margin: 0 auto !important;
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-default-family) !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero-image {
display: block !important;
width: 100% !important;
height: clamp(260px, 23vw, 380px) !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: var(--radius-lg) !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section {
background: var(--white-100) !important;
padding: var(--space-3xl) 0 var(--space-7xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section.editable-section > .section-content-wrapper {
width: min(1120px, calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: 1120px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-layout {
display: grid !important;
grid-template-columns: minmax(150px, 210px) minmax(0, var(--layout-container-reading)) !important;
justify-content: center !important;
align-items: start !important;
gap: var(--space-3xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-article-index,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.alc-article-index {
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-caption-family) !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index strong {
display: block !important;
margin-bottom: var(--space-xs) !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-title-notice-family) !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index a {
display: block !important;
padding: var(--space-3xs) 0 !important;
color: var(--foreground-base-brand-mid) !important;
text-decoration: none !important;
border-left: 0 !important;
font-weight: 500 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.alc-article-content {
max-width: var(--layout-container-reading) !important;
color: var(--foreground-base-secondary-mid) !important;
font-family: var(--font-body-support-family) !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content p {
margin: 0 0 var(--space-sm) !important;
color: var(--foreground-base-secondary-mid) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content h2 {
margin: var(--space-md) 0 var(--space-2xs) !important;
color: var(--foreground-base-primary-strong) !important;
font-family: var(--font-title-step-family) !important;
font-size: var(--font-title-step-size) !important;
line-height: var(--font-title-step-line-height) !important;
font-weight: 700 !important;
letter-spacing: var(--font-title-step-letter-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-related-experiences {
background: var(--background-base-default-soft) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero.editable-section > .section-content-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index {
display: none !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero {
padding: var(--space-xl) 0 var(--space-lg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-hero-image {
height: clamp(220px, 52vw, 320px) !important;
}
}
/* ─── Fase 40.44: Article Detail - sincronía real con tokens Figma/DS ───
Motivo: las foundations traen nombres de fuentes, pero no los ficheros;
además el CSS legacy de la landing impone body{text-align:center}. Este bloque
fuerza composición de componente con tokens semánticos y fallbacks. */
.visual-layout-page[data-design-system="ftc-foundations"][data-brand="ftc"] {
--font-display-family: "Signika", Inter, Arial, sans-serif;
--font-body-family: "Inter", Arial, sans-serif;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-brand="alcazar"] {
/* Mantener Alcázar alineado con el Design System entregado para la landing: Signika + Inter self-hosted. */
--font-display-family: "Signika", Inter, Arial, sans-serif;
--font-body-family: "Inter", Arial, sans-serif;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-layout,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index {
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section {
background: var(--white-100) !important;
padding: var(--space-3xl) 0 var(--space-7xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-article-body-section.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2))) !important;
max-width: var(--layout-container-content) !important;
margin-right: auto !important;
margin-left: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-layout {
display: grid !important;
grid-template-columns: 220px minmax(0, var(--layout-container-reading)) !important;
justify-content: center !important;
align-items: start !important;
column-gap: var(--space-3xl) !important;
row-gap: var(--space-xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-article-index,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.alc-article-index,
.visual-layout-page[data-design-system="ftc-foundations"] .cmp-rich_text.alc-article-index {
max-width: 220px !important;
padding-left: var(--space-sm) !important;
border-left: var(--stroke-sm) solid var(--border-base-secondary-mid) !important;
color: var(--foreground-base-brand-mid) !important;
font-family: var(--font-body-family), Inter, Arial, sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 600 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index strong {
margin: 0 0 var(--space-xs) calc(var(--space-sm) * -1) !important;
color: var(--foreground-base-secondary-soft) !important;
font-family: var(--font-body-family), Inter, Arial, sans-serif !important;
font-size: var(--font-body-support-size) !important;
line-height: var(--font-body-support-line-height) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index a {
display: block !important;
padding: var(--space-3xs) 0 !important;
color: var(--foreground-base-brand-mid) !important;
font-family: var(--font-body-family), Inter, Arial, sans-serif !important;
font-size: var(--font-body-caption-size) !important;
line-height: var(--font-body-caption-line-height) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.alc-article-content,
.visual-layout-page[data-design-system="ftc-foundations"] .cmp-rich_text.alc-article-content {
max-width: var(--layout-container-reading) !important;
color: var(--foreground-base-primary-mid) !important;
font-family: var(--font-body-family), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content p {
margin: 0 0 var(--space-md) !important;
color: var(--foreground-base-primary-mid) !important;
font-family: var(--font-body-family), Inter, Arial, sans-serif !important;
font-size: var(--font-body-default-size) !important;
line-height: var(--font-body-default-line-height) !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content > p:first-child,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content > p:nth-child(2) {
color: var(--foreground-base-primary-mid) !important;
font-size: var(--font-body-lead-size) !important;
line-height: var(--font-body-lead-line-height) !important;
margin-bottom: var(--space-md) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content h2 {
margin: var(--space-lg) 0 var(--space-xs) !important;
color: var(--foreground-base-secondary-soft) !important;
font-family: var(--font-title-block-family), Signika, Inter, Arial, sans-serif !important;
font-size: var(--font-title-block-size) !important;
line-height: var(--font-title-block-line-height) !important;
font-weight: 700 !important;
letter-spacing: var(--font-title-block-letter-spacing) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-content h2:first-of-type {
margin-top: var(--space-md) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .alc-article-index {
display: none !important;
}
}
/* ─── Fase 40.48: Home mobile Figma sync (Design System)
Objetivo: corregir SOLO la vista móvil sin tocar desktop.
Motivo principal: varias secciones conservan max-width calculado para desktop
(p.ej. calc(var(--layout-container-content) - 260px)); en mobile eso se convierte
en contenedores demasiado estrechos. Este bloque normaliza contenedores,
grids y composición mobile al final del CSS para que gane a reglas anteriores. */
@media (max-width: 768px) {
html,
body {
overflow-x: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-mobile-container: min(390px, calc(100vw - 48px));
--ftc-home-container: var(--ftc-mobile-container);
--ftc-hero-container: var(--ftc-mobile-container);
--layout-container-content: 390px;
--layout-container-reading: 390px;
--layout-section-x-spacing: 24px;
--layout-section-y-spacing: 56px;
background: var(--white-100, #fff) !important;
overflow-x: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] *,
.visual-layout-page[data-design-system="ftc-foundations"] *::before,
.visual-layout-page[data-design-system="ftc-foundations"] *::after {
box-sizing: border-box;
}
.visual-layout-page[data-design-system="ftc-foundations"] img,
.visual-layout-page[data-design-system="ftc-foundations"] svg,
.visual-layout-page[data-design-system="ftc-foundations"] iframe {
max-width: 100%;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-section-block.ftc-home-section {
width: 100% !important;
overflow-x: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-section.editable-section > .section-content-wrapper {
width: var(--ftc-mobile-container) !important;
max-width: var(--ftc-mobile-container) !important;
min-width: 0 !important;
margin-right: auto !important;
margin-left: auto !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-html,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns,
.visual-layout-page[data-design-system="ftc-foundations"] .sortable-container {
min-width: 0 !important;
max-width: 100% !important;
}
/* Header mobile: logo + accesos compactos como en Figma. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
padding: 24px 0 42px !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
width: var(--ftc-mobile-container) !important;
max-width: var(--ftc-mobile-container) !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
margin: 0 auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 132px !important;
height: auto !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__language,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__currency,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__divider {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
display: inline-flex !important;
align-items: center !important;
gap: 18px !important;
margin-top: 2px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions::after {
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-family: Inter, Arial, sans-serif !important;
font-size: 26px !important;
line-height: 1 !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a[href="#contacto"]::before { content: "☎" !important; }
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a[href="#faq"]::before {
content: "?" !important;
width: 25px !important;
height: 25px !important;
border: 2px solid currentColor !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
font-weight: 800 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions::after {
content: "☰" !important;
font-size: 31px !important;
font-weight: 500 !important;
transform: translateY(-2px) !important;
}
/* Hero mobile. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-home-hero {
padding: 0 0 56px !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 28px !important;
width: 100% !important;
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
max-width: 100% !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy h1 {
margin: 0 0 26px !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: clamp(46px, 12.5vw, 56px) !important;
line-height: 1.13 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-copy p {
margin: 0 0 16px !important;
color: var(--foreground-base-secondary-mid, #6d6254) !important;
font-size: 18px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-wrapper:has(.ftc-hero-image),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-grid .component-content:has(.ftc-hero-image) {
width: 100% !important;
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-hero-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1.46 / 1 !important;
object-fit: cover !important;
border: 1px solid var(--border-base-secondary-soft, #e8e0d4) !important;
border-radius: 20px !important;
box-shadow: 0 4px 10px rgba(44,35,24,.10) !important;
}
/* Experiencias mobile. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-experiences {
padding: 56px 0 42px !important;
background: var(--background-base-default-soft, #f6f2ea) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2 {
position: relative !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 32px !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 0 32px !important;
padding: 0 0 18px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-title-left::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 52px !important;
height: 2px !important;
margin: 0 !important;
background: var(--border-base-secondary-mid, #cdbfae) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-dynamic-experience-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid {
width: 100% !important;
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-tour-grid.tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .tour-cards-grid.ftc-tour-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 34px !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card {
width: 100% !important;
min-width: 0 !important;
border-radius: 20px !important;
overflow: hidden !important;
background: var(--white-100, #fff) !important;
border: 1px solid var(--border-base-secondary-soft, #e8e0d4) !important;
box-shadow: 0 4px 12px rgba(44,35,24,.09) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-image {
height: auto !important;
aspect-ratio: 1.76 / 1 !important;
border-radius: 20px 20px 0 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-badge {
top: auto !important;
right: auto !important;
bottom: 16px !important;
left: 18px !important;
padding: 10px 16px !important;
border-radius: 999px !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-size: 13px !important;
line-height: 16px !important;
font-weight: 800 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
box-shadow: 0 4px 14px rgba(44,35,24,.12) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-body {
padding: 28px 24px 24px !important;
gap: 18px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-title {
position: relative !important;
margin: 0 !important;
padding-bottom: 18px !important;
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-size: 28px !important;
line-height: 1.16 !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-title::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 56px !important;
height: 1px !important;
background: var(--border-base-secondary-mid, #cdbfae) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-meta,
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-features,
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-subtitle {
color: var(--foreground-base-secondary-mid, #6d6254) !important;
font-size: 17px !important;
line-height: 1.5 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-meta {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px 10px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-features {
display: grid !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
margin-top: 6px !important;
padding-top: 22px !important;
border-top: 1px solid var(--border-base-secondary-soft, #e8e0d4) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-price small {
font-size: 13px !important;
letter-spacing: .28em !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-price strong {
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 40px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .btn-select-tour {
width: auto !important;
min-width: 142px !important;
min-height: 58px !important;
padding: 16px 24px !important;
border-radius: 999px !important;
background: var(--background-action-primary-default, #5f3a78) !important;
color: var(--foreground-action-primary-default, #fff) !important;
font-size: 14px !important;
line-height: 18px !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
}
/* Reserva realizada / notas. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reservation-notes {
padding: 8px 0 54px !important;
background: var(--background-base-default-soft, #f6f2ea) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-title {
margin: 0 0 28px !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-size: 20px !important;
line-height: 1.25 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-notes-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 30px !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 22px !important;
align-items: center !important;
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-size: 18px !important;
line-height: 1.45 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item .ftc-note-icon,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-note-item > span:first-child {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
border: 1px solid var(--border-base-secondary-mid, #cdbfae) !important;
border-radius: 999px !important;
background: transparent !important;
}
/* Discover + galería. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
padding: 54px 0 62px !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head-center,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head-center * {
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-section-head p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head p {
margin: 0 0 34px !important;
max-width: 100% !important;
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-size: 22px !important;
line-height: 1.38 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto !important;
gap: 18px !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid .ftc-gallery-main {
width: 100% !important;
height: auto !important;
aspect-ratio: 1.48 / 1 !important;
object-fit: cover !important;
border-radius: 18px !important;
grid-column: auto !important;
grid-row: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / -1 !important;
}
/* Explore carousel mobile. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore {
padding: 58px 0 0 !important;
background: var(--background-base-default-soft, #f0ebe1) !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel .ftc-article-carousel-inner {
width: var(--ftc-mobile-container) !important;
max-width: var(--ftc-mobile-container) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-article-carousel-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: end !important;
gap: 16px !important;
margin-bottom: 42px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-section-head-row h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child h2 {
font-size: 32px !important;
line-height: 1.15 !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrows,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-controls-slot {
position: static !important;
justify-self: end !important;
margin: 0 0 14px !important;
display: inline-flex !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: min(342px, calc(100vw - 86px)) !important;
grid-template-columns: none !important;
gap: 20px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
padding-bottom: 56px !important;
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
margin-right: calc((var(--ftc-mobile-container) - 100vw + 24px) / 2) !important;
-webkit-overflow-scrolling: touch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
scroll-snap-align: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card .ftc-article-img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1.25 / 1 !important;
border-radius: 16px !important;
object-fit: cover !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content h3 {
font-size: 30px !important;
line-height: 1.18 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-card p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-article-content p {
font-size: 18px !important;
line-height: 1.42 !important;
}
/* Plan, location, how, benefits, reviews, FAQ. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan {
padding: 60px 0 64px !important;
background: var(--background-base-brand-emphasis, #362145) !important;
color: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-grid.ftc-location-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card small,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card strong {
color: rgba(255,255,255,.92) !important;
font-size: 18px !important;
line-height: 1.45 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card {
padding: 34px 0 !important;
border-top: 1px solid rgba(255,255,255,.55) !important;
background: transparent !important;
border-radius: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-card h3 {
color: var(--white-100, #fff) !important;
font-size: 26px !important;
line-height: 1.2 !important;
margin-bottom: 28px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-plan-row {
grid-template-columns: 1fr auto !important;
gap: 16px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq {
padding: 58px 0 !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-copy.ftc-location-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-copy {
padding: 0 !important;
color: var(--foreground-base-primary-mid, #3c342b) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .location-access-map.ftc-map-box,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-location-shell .location-access-map {
margin-top: 28px !important;
width: 100% !important;
min-height: 330px !important;
border-radius: 20px !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits-head p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews-head p {
font-size: 18px !important;
line-height: 1.45 !important;
text-align: left !important;
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step {
display: grid !important;
grid-template-columns: 70px minmax(0, 1fr) !important;
gap: 18px !important;
padding: 30px 0 !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #e8e0d4) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list strong {
color: var(--foreground-base-secondary-soft, #8a7f71) !important;
font-size: 24px !important;
line-height: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list h3 {
font-size: 18px !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list p {
font-size: 18px !important;
line-height: 1.45 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits {
padding: 58px 0 !important;
background: var(--support-900, #11374d) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefits p {
color: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 12px 18px !important;
padding: 22px 0 !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item span {
grid-row: 1 / span 2 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item h3 {
margin: 0 !important;
font-size: 18px !important;
line-height: 1.35 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-benefit-item p {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.45 !important;
color: rgba(255,255,255,.82) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-reviews {
background: var(--background-base-default-soft, #f6f2ea) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-grid {
gap: 20px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-review-card {
width: 100% !important;
padding: 22px !important;
border-radius: 16px !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list details {
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq-list summary {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 16px !important;
text-align: left !important;
font-size: 17px !important;
line-height: 1.35 !important;
padding: 20px 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-more,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-faq .ftc-more {
text-align: left !important;
margin-top: 28px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-more a {
min-width: 0 !important;
padding: 13px 22px !important;
border-radius: 999px !important;
font-size: 12px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
/* Footer mobile. */
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
padding: 40px 0 0 !important;
background: var(--background-base-default-soft, #f6f2ea) !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
padding: 0 0 36px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #e0d8ce) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo img {
width: 174px !important;
max-width: 70% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-main-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 28px 24px !important;
width: 100% !important;
padding: 34px 0 !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #e0d8ce) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col * {
min-width: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3 {
color: var(--foreground-base-secondary-soft, #6d6254) !important;
font-size: 13px !important;
line-height: 17px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
margin: 0 0 18px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list li,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 17px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list {
display: grid !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list li {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row {
grid-column: auto !important;
width: 100% !important;
max-width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer {
padding: 34px 0 12px !important;
background: transparent !important;
border-radius: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer p {
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-align: left !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row {
padding: 0 0 26px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
justify-content: flex-start !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
width: 190px !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc((100vw - var(--ftc-mobile-container)) / -2) !important;
padding: 24px calc((100vw - var(--ftc-mobile-container)) / 2) 30px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
background: var(--white-100, #fff) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a {
color: var(--foreground-base-primary-mid, #3c342b) !important;
font-size: 13px !important;
line-height: 18px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
justify-items: start !important;
justify-content: start !important;
}
}
@media (max-width: 390px) {
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-mobile-container: calc(100vw - 32px);
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-body {
padding: 24px 20px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-title {
font-size: 25px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .tour-card-footer {
gap: 12px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .btn-select-tour {
min-width: 124px !important;
padding-inline: 18px !important;
}
}
/* ─── Fase 40.49: Header mobile menu + icon exacto (solo mobile). */
@media (min-width: 769px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__mobile-menu-toggle,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu {
display: none !important;
}
}
@media (max-width: 768px) {
body.ftc-mobile-menu-open {
overflow: hidden !important;
touch-action: none;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
position: sticky !important;
top: 0 !important;
z-index: 10000 !important;
padding: 24px 0 !important;
border-bottom: 1px solid rgba(95, 58, 120, 0.08) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
align-items: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
gap: 18px !important;
margin-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions::after {
content: none !important;
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__contact-link::before {
content: "" !important;
width: 26px !important;
height: 26px !important;
display: block !important;
background: center / contain no-repeat url('/styles/componentes/assets/header/contact.svg') !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__mobile-menu-toggle {
display: inline-flex !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
appearance: none !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__mobile-menu-toggle span {
display: block !important;
width: 26px !important;
height: 3px !important;
border-radius: 999px !important;
background: var(--foreground-base-brand-emphasis, #2a0d45) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
display: none !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-strong, #18171f) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu.is-open {
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__panel {
width: 100% !important;
min-height: 100vh !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__top {
height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 0 24px !important;
border: 2px solid #1296ff !important;
border-bottom-width: 1px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__close {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #5f6673 !important;
font-size: 34px !important;
line-height: 1 !important;
font-weight: 300 !important;
cursor: pointer !important;
appearance: none !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__nav {
padding: 18px 24px 48px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__eyebrow {
margin: 0 0 18px !important;
color: #a7adbb !important;
font-size: 14px !important;
line-height: 20px !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__group {
display: grid !important;
margin: 0 0 28px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__item,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__simple {
color: var(--foreground-base-primary-strong, #18171f) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 500 !important;
text-decoration: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__item {
min-height: 50px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 16px !important;
border-bottom: 1px solid rgba(24, 23, 31, 0.08) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__item span:last-child {
color: #c5cad3 !important;
font-size: 26px !important;
font-weight: 300 !important;
line-height: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__simple {
display: block !important;
margin: 0 0 30px !important;
color: #535968 !important;
font-weight: 500 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selectors {
display: flex !important;
align-items: center !important;
gap: 24px !important;
padding-top: 12px !important;
color: #535968 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
color: #535968 !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 22px !important;
font-weight: 500 !important;
}
}
/* ─── Fase 40.50: Fix mobile header contact icon overlap.
Motivo: una regla mobile anterior seguía pintando el icono como texto (☎)
sobre el nuevo SVG de contacto. Esta capa final neutraliza ese pseudo-icono
heredado sin tocar desktop ni el menú. */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a[href="#contacto"].ftc-site-header__contact-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-decoration: none !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a[href="#contacto"].ftc-site-header__contact-link::before {
content: "" !important;
display: block !important;
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
flex: 0 0 26px !important;
border: 0 !important;
border-radius: 0 !important;
background: center / contain no-repeat url('/styles/componentes/assets/header/contact.svg') !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
font-family: initial !important;
font-weight: normal !important;
text-decoration: none !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a[href="#contacto"].ftc-site-header__contact-link::after {
content: none !important;
display: none !important;
}
}
/* ─── Fase 40.51: Selector de idioma/moneda funcional dentro del menú mobile.
Antes eran spans estáticos; ahora son custom-selects como en desktop y necesitan
estilos propios para no heredar el fondo oscuro/global del header legacy. */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector.custom-select {
position: relative !important;
display: inline-block !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector.custom-select:hover {
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-selected {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 0 14px 8px 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #535968 !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 22px !important;
font-weight: 500 !important;
cursor: pointer !important;
box-shadow: none !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-selected::after {
content: "⌄" !important;
position: static !important;
transform: none !important;
margin-left: 0 !important;
font-size: 13px !important;
line-height: 1 !important;
color: #535968 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-selected > span:last-child {
color: #535968 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-items {
position: absolute !important;
left: 0 !important;
right: auto !important;
top: calc(100% + 4px) !important;
z-index: 100010 !important;
min-width: 112px !important;
max-height: 220px !important;
display: none !important;
overflow-y: auto !important;
background: #ffffff !important;
border: 1px solid rgba(24, 23, 31, 0.10) !important;
border-radius: 10px !important;
box-shadow: 0 16px 40px rgba(24, 23, 31, 0.12) !important;
padding: 6px 0 !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-items.active {
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-items div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 8px 12px !important;
color: #535968 !important;
background: #ffffff !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 500 !important;
cursor: pointer !important;
white-space: nowrap !important;
border: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-mobile-menu__selector .select-items div:hover {
background: var(--background-base-brand-soft, #f8f0fc) !important;
color: var(--foreground-base-brand-emphasis, #2a0d45) !important;
}
}
/* ======================================================================
Fase 40.53 - Mobile Discover Figma DS
Scope: solo mobile. Corrige la galería de "Descubre el Alcázar" para
evitar que las reglas desktop/tablet fuercen una sola columna.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover {
padding-top: 48px !important;
padding-bottom: 56px !important;
background: var(--white-100, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ve-section-inner {
width: calc(100% - 52px) !important;
max-width: 430px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center {
max-width: none !important;
margin: 0 0 32px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2 {
margin: 0 !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-display-section-family, Signika), Signika, Inter, Arial, sans-serif !important;
font-size: 30px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2::after {
content: "" !important;
display: block !important;
width: 54px !important;
height: 1px !important;
margin: 18px 0 28px !important;
background: var(--border-base-secondary-strong, #8f8576) !important;
opacity: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center p {
max-width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-body-default-family, Inter), Inter, Arial, sans-serif !important;
font-size: 22px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-mosaic {
width: 100% !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto !important;
gap: 18px !important;
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
grid-column: 1 / -1 !important;
grid-row: auto !important;
width: 100% !important;
aspect-ratio: 1.73 / 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img:not(.ftc-gallery-main) {
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
aspect-ratio: 1.55 / 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-gallery-grid .ftc-gallery-main {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: none !important;
}
}
/* ======================================================================
Fase 40.54 - Mobile Discover Heading Line Fix
Scope: solo mobile. Resetea la línea del título Descubre para evitar
que herede position:absolute de reglas mobile globales.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2 {
position: relative !important;
padding: 0 !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-discover .ftc-section-head-center h2::after {
content: "" !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: block !important;
width: 54px !important;
height: 1px !important;
margin: 18px 0 28px !important;
background: var(--border-base-secondary-strong, #8f8576) !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ======================================================================
Fase 40.55 - Mobile Explore arrows alignment
Scope: solo mobile. Los controles del carrusel "Explora el Alcázar"
deben ir a la derecha del título como en Figma, no centrados bajo la línea.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore.ftc-article-carousel-editable > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner {
position: relative !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .ftc-article-heading,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper:first-child .ftc-article-heading {
display: block !important;
max-width: calc(100% - 96px) !important;
margin: 0 0 42px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .ftc-carousel-controls-slot,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore > .ve-section-inner > .component-wrapper .ftc-carousel-controls-slot,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrows.ftc-carousel-controls-slot {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
z-index: 2 !important;
width: auto !important;
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-explore .ftc-carousel-arrow {
flex: 0 0 32px !important;
}
}
/* ======================================================================
Fase 40.56 - Mobile How it works timeline sync
Scope: solo mobile. Recompone "Cómo funciona" como timeline vertical
del Figma: número grande + línea + contenido ancho, sin afectar desktop.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--background-base-default-soft, #f7f3ec) !important;
padding: 48px 0 66px !important;
color: var(--foreground-base-primary-mid, #3c342b) !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner {
width: var(--ftc-mobile-container, min(390px, calc(100vw - 48px))) !important;
max-width: var(--ftc-mobile-container, min(390px, calc(100vw - 48px))) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-columns-1-2.ftc-how-grid {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-intro {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 42px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text h2 {
position: relative !important;
margin: 0 0 34px !important;
padding: 0 0 18px !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 26px !important;
line-height: 1.18 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 48px !important;
height: 1px !important;
background: var(--border-base-secondary-strong, #a89275) !important;
transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-intro .ve-rich-text p {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: 18px !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-steps-list {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > div.ftc-how-step {
position: relative !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
column-gap: 16px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 54px !important;
border: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-steps-list > .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:last-child {
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .component-wrapper:not(:last-child) .ftc-how-step::after {
content: "" !important;
position: absolute !important;
left: 25px !important;
top: 54px !important;
bottom: 12px !important;
width: 1px !important;
background: var(--border-base-secondary-soft, rgba(109, 98, 84, .22)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: 52px !important;
max-width: 52px !important;
min-width: 52px !important;
margin: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 42px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-align: left !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step > div {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step h3 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 2px 0 18px !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 22px !important;
line-height: 1.16 !important;
letter-spacing: .02em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-step > div > p,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-how-step p {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: 17px !important;
line-height: 1.42 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
}
/* ======================================================================
Fase 40.57 - Mobile How it works spacing sync
Scope: solo mobile. Ajusta la separación vertical del timeline para
acercarlo al Figma sin alterar desktop.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div.ftc-how-step {
min-height: 188px !important;
padding: 0 0 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:not(:last-child) {
margin-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:last-child {
min-height: 0 !important;
padding-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .component-wrapper:not(:last-child) .ftc-how-step::after {
top: 56px !important;
bottom: 18px !important;
left: 25px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step h3 {
margin-bottom: 20px !important;
}
}
/* ======================================================================
Fase 40.58 - Mobile How it works spacing legacy markup fix
Scope: solo mobile. La versión publicada puede tener los pasos como
divs directos dentro de .ftc-steps-list sin clase .ftc-how-step; por eso
la fase 40.57 no alcanzaba el layout guardado en BD. Este bloque cubre
tanto el marcado antiguo como el nuevo sin tocar desktop.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page .ftc-how .ftc-steps-list {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
background: transparent !important;
}
/* Caso real publicado: .ftc-steps-list > div sin clase ftc-how-step */
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) {
position: relative !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
column-gap: 16px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 188px !important;
margin: 0 !important;
padding: 0 0 34px !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child {
min-height: 0 !important;
padding-bottom: 0 !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after {
content: "" !important;
position: absolute !important;
left: 25px !important;
top: 54px !important;
bottom: 18px !important;
width: 1px !important;
background: var(--border-base-secondary-soft, rgba(109, 98, 84, .22)) !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
margin: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 42px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: nowrap !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3 {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 2px 0 20px !important;
color: var(--foreground-base-primary-mid, #6d6254) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 22px !important;
line-height: 1.16 !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: 17px !important;
line-height: 1.42 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* Caso nuevo por componentes: .component-wrapper ... .ftc-how-step */
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) {
min-height: 188px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.visual-layout-page .ftc-how .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step {
min-height: 188px !important;
padding-bottom: 34px !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step {
min-height: 0 !important;
padding-bottom: 0 !important;
}
}
/* ======================================================================
Fase 40.59 - Mobile How it works final alignment fix
Scope: solo mobile. Corrige el layout real publicado del bloque
"Cómo funciona" sin tocar desktop: anchura completa mobile, timeline
vertical con número + línea + contenido ancho.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page .ftc-how,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
background: var(--background-base-default-soft, #f7f3ec) !important;
padding: 54px 0 70px !important;
color: var(--foreground-base-primary-mid, #4c453b) !important;
overflow: hidden !important;
}
.visual-layout-page .ftc-how > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner {
width: min(390px, calc(100vw - 52px)) !important;
max-width: min(390px, calc(100vw - 52px)) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
}
.visual-layout-page .ftc-how .ftc-how-grid,
.visual-layout-page .ftc-how .ve-columns.ftc-how-grid,
.visual-layout-page .ftc-how .ve-columns-1-2.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-columns-1-2.ftc-how-grid {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 0 !important;
}
.visual-layout-page .ftc-how .ftc-how-grid > *,
.visual-layout-page .ftc-how .ftc-how-grid > .component-wrapper,
.visual-layout-page .ftc-how .ftc-how-grid > .component-wrapper > .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.visual-layout-page .ftc-how .ftc-how-intro,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-intro,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-intro {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 58px !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page .ftc-how .ftc-how-intro h2,
.visual-layout-page .ftc-how .ftc-how-intro .ve-rich-text h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro .ve-rich-text h2 {
position: relative !important;
margin: 0 0 44px !important;
padding: 0 !important;
color: var(--foreground-base-primary-mid, #5f554b) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 24px !important;
line-height: 1.18 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page .ftc-how .ftc-how-intro h2::after,
.visual-layout-page .ftc-how .ftc-how-intro .ve-rich-text h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro h2::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro .ve-rich-text h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: auto !important;
bottom: -17px !important;
width: 48px !important;
height: 1px !important;
background: var(--border-base-secondary-strong, #8c7b57) !important;
transform: none !important;
}
.visual-layout-page .ftc-how .ftc-how-intro p,
.visual-layout-page .ftc-how .ftc-how-intro .ve-rich-text p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro .ve-rich-text p {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.52 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
}
.visual-layout-page .ftc-how .ftc-steps-list,
.visual-layout-page .ftc-how .ve-grid.ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-grid.ftc-steps-list {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
background: transparent !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper > .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper > .component-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper),
.visual-layout-page .ftc-how .ftc-how-step,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step {
position: relative !important;
display: grid !important;
grid-template-columns: 52px minmax(0, calc(100% - 70px)) !important;
column-gap: 18px !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 188px !important;
margin: 0 !important;
padding: 0 0 50px !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child,
.visual-layout-page .ftc-how .ftc-how-step:last-child,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step {
min-height: 0 !important;
padding-bottom: 0 !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after,
.visual-layout-page .ftc-how .ftc-how-step:not(:last-child)::after,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) .ftc-how-step::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) .ftc-how-step::after {
content: "" !important;
position: absolute !important;
left: 25px !important;
top: 58px !important;
bottom: -18px !important;
width: 1px !important;
background: var(--border-base-secondary-soft, rgba(109, 98, 84, .22)) !important;
transform: none !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong,
.visual-layout-page .ftc-how .ftc-how-step > strong,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step > strong,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
margin: 0 !important;
padding: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-family: var(--font-display-price-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 42px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-align: left !important;
white-space: nowrap !important;
}
.visual-layout-page .ftc-how .ftc-how-step > div,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step > div,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step > div {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3,
.visual-layout-page .ftc-how .ftc-how-step h3,
.visual-layout-page .ftc-how .ftc-how-step > div > h3,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step h3,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step h3 {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 4px 0 20px !important;
padding: 0 !important;
color: var(--foreground-base-primary-mid, #5f554b) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika)), Signika, Inter, Arial, sans-serif !important;
font-size: 22px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p,
.visual-layout-page .ftc-how .ftc-how-step p,
.visual-layout-page .ftc-how .ftc-how-step > div > p,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step p,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step p {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
/* ======================================================================
Fase 40.60 - Mobile How it works text column hard fix
Scope: solo mobile. Corrige la causa real vista en local: el layout
publicado conserva wrappers/grid antiguos que estrechan el bloque derecho
y parten los textos palabra a palabra. Este bloque fuerza el contenedor,
la lista y cada paso a tener ancho mobile real, manteniendo desktop intacto.
====================================================================== */
@media (max-width: 768px) {
.visual-layout-page .ftc-how,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how {
--ftc-how-mobile-width: min(390px, calc(100vw - 48px));
--ftc-how-number-width: 54px;
--ftc-how-gap: 22px;
background: var(--background-base-default-soft, #f7f3ec) !important;
padding: 48px 0 72px !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how > .ve-section-inner {
width: var(--ftc-how-mobile-width) !important;
max-width: var(--ftc-how-mobile-width) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Reseteo amplio: cubre el columns/grid inline del editor y layouts ya publicados. */
.visual-layout-page .ftc-how-grid,
.visual-layout-page .ftc-how .ftc-how-grid,
.visual-layout-page .ftc-how .ve-columns,
.visual-layout-page .ftc-how .ve-columns.ftc-how-grid,
.visual-layout-page .ftc-how .ve-columns-1-2.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-columns,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-columns.ftc-how-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-columns-1-2.ftc-how-grid {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
width: var(--ftc-how-mobile-width) !important;
max-width: var(--ftc-how-mobile-width) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how-grid > *,
.visual-layout-page .ftc-how .ftc-how-grid > *,
.visual-layout-page .ftc-how .component-wrapper,
.visual-layout-page .ftc-how .component-wrapper > .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how-grid > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-grid > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .component-wrapper > .component-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
float: none !important;
}
.visual-layout-page .ftc-how .ftc-how-intro,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-intro,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-intro,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-intro {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 54px !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page .ftc-how .ftc-how-intro h2,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro h2 {
margin: 0 0 34px !important;
padding: 0 0 18px !important;
font-size: 26px !important;
line-height: 1.18 !important;
text-align: left !important;
}
.visual-layout-page .ftc-how .ftc-how-intro p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-intro p {
width: 100% !important;
max-width: 100% !important;
font-size: 18px !important;
line-height: 1.45 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.visual-layout-page .ftc-how .ftc-steps-list,
.visual-layout-page .ftc-how .ve-grid.ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-grid.ftc-steps-list {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
width: var(--ftc-how-mobile-width) !important;
max-width: var(--ftc-how-mobile-width) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper > .component-content,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper > .component-content {
width: var(--ftc-how-mobile-width) !important;
max-width: var(--ftc-how-mobile-width) !important;
min-width: 0 !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-how .ftc-how-step,
.visual-layout-page .ftc-how .editable-rich-text.ftc-how-step,
.visual-layout-page .ftc-how .ve-rich-text.ftc-how-step,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .editable-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ve-rich-text.ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) {
position: relative !important;
display: grid !important;
grid-template-columns: var(--ftc-how-number-width) minmax(0, calc(var(--ftc-how-mobile-width) - var(--ftc-how-number-width) - var(--ftc-how-gap))) !important;
column-gap: var(--ftc-how-gap) !important;
row-gap: 0 !important;
align-items: start !important;
width: var(--ftc-how-mobile-width) !important;
max-width: var(--ftc-how-mobile-width) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 66px !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.visual-layout-page .ftc-how .ftc-how-step:last-child,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:last-child .ftc-how-step,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):last-child {
padding-bottom: 0 !important;
}
.visual-layout-page .ftc-how .ftc-how-step:not(:last-child)::after,
.visual-layout-page .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) .ftc-how-step::after,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step:not(:last-child)::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > .component-wrapper:not(:last-child) .ftc-how-step::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper):not(:last-child)::after {
content: "" !important;
position: absolute !important;
left: 27px !important;
top: 58px !important;
bottom: 18px !important;
width: 1px !important;
background: var(--border-base-secondary-soft, rgba(109, 98, 84, .22)) !important;
transform: none !important;
}
.visual-layout-page .ftc-how .ftc-how-step > strong,
.visual-layout-page .ftc-how .ftc-how-step__number,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > strong,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step__number,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > strong {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: var(--ftc-how-number-width) !important;
min-width: var(--ftc-how-number-width) !important;
max-width: var(--ftc-how-number-width) !important;
margin: 0 !important;
padding: 0 !important;
color: var(--temperature-600, #8c7b57) !important;
font-size: 42px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: nowrap !important;
}
.visual-layout-page .ftc-how .ftc-how-step > div,
.visual-layout-page .ftc-how .ftc-how-step__body,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step__body,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > div {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
display: block !important;
width: calc(var(--ftc-how-mobile-width) - var(--ftc-how-number-width) - var(--ftc-how-gap)) !important;
max-width: calc(var(--ftc-how-mobile-width) - var(--ftc-how-number-width) - var(--ftc-how-gap)) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-how .ftc-how-step h3,
.visual-layout-page .ftc-how .ftc-how-step > div > h3,
.visual-layout-page .ftc-how .ftc-how-step__body > h3,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step__body > h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > h3 {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 2px 0 20px !important;
padding: 0 !important;
color: var(--foreground-base-primary-mid, #5f554b) !important;
font-size: 22px !important;
line-height: 1.16 !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .ftc-how .ftc-how-step p,
.visual-layout-page .ftc-how .ftc-how-step > div > p,
.visual-layout-page .ftc-how .ftc-how-step__body > p,
.visual-layout-page .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step > div > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-how-step__body > p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-how .ftc-steps-list > div:not(.component-wrapper) > p {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-strong, #5f554b) !important;
font-size: 16px !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
/* ─── Fase 40.61: Footer mobile Figma sync (solo mobile)
Corrige la composición mobile del footer sin tocar desktop:
- una sola columna de navegación,
- métodos de pago antes del aviso legal,
- bloque legal inferior blanco con enlaces apilados y copyright al final.
*/
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-mobile-width: var(--ftc-mobile-container, min(390px, calc(100vw - 48px)));
padding: 48px 0 0 !important;
background: var(--background-base-default-soft, #f7f3ec) !important;
color: var(--foreground-base-primary-mid, #5f554b) !important;
overflow: hidden !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
grid-template-columns: none !important;
width: var(--ftc-footer-mobile-width) !important;
max-width: var(--ftc-footer-mobile-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
width: 100% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) > *,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper {
grid-column: auto !important;
grid-row: auto !important;
justify-self: stretch !important;
align-self: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-logo) {
order: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-grid) {
order: 2 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-payment-row) {
order: 3 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-disclaimer) {
order: 4 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper > .component-wrapper:has(.ftc-footer-bottom) {
order: 5 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 24px !important;
margin: 0 !important;
padding: 0 0 30px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link {
display: inline-flex !important;
align-items: flex-start !important;
width: auto !important;
max-width: 74% !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo img {
display: block !important;
width: 188px !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-top-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
flex: 0 0 32px !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 34px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
display: block !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 34px 0 30px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 36px !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col-spacer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col-spacer {
margin-top: -20px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col:last-child {
margin-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3 {
margin: 0 0 24px !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 14px !important;
line-height: 18px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer h3 {
display: none !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p br {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 20px !important;
line-height: 1.42 !important;
font-weight: 700 !important;
text-align: left !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 15px !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a:last-child {
margin-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list li {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
gap: 18px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list img {
width: 31px !important;
height: 31px !important;
object-fit: contain !important;
align-self: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
display: block !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 34px 0 22px !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: 230px !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 0 56px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer p {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 16px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 32px !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc((100vw - var(--ftc-footer-mobile-width)) / -2) !important;
margin-right: 0 !important;
padding: 54px calc((100vw - var(--ftc-footer-mobile-width)) / 2) 44px !important;
border: 0 !important;
background: var(--white-100, #fff) !important;
box-shadow: none !important;
clip-path: none !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 24px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 17px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p {
order: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 18px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
text-align: center !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* Fase 40.62 - Footer mobile: orden final y layout Figma
Refuerza el footer mobile sin afectar desktop. Cubre el layout público limpio
y el editor con component-wrapper. */
@media (max-width: 768px) {
.visual-layout-page .ftc-footer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
--ftc-footer-mobile-width: min(390px, calc(100vw - 52px));
padding: 48px 0 0 !important;
background: var(--background-base-default-soft, #f7f3ec) !important;
overflow: hidden !important;
}
.visual-layout-page .ftc-footer > .ve-section-inner,
.visual-layout-page .ftc-footer > .section-content-wrapper,
.editor-mode .visual-layout-page .ftc-footer.editable-section > .section-content-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer.editable-section > .section-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
grid-template-columns: none !important;
width: var(--ftc-footer-mobile-width) !important;
max-width: var(--ftc-footer-mobile-width) !important;
min-width: 0 !important;
margin-inline: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
}
.visual-layout-page .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer:not(.editable-section):not(:has(> .ve-section-inner)) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
width: 100% !important;
}
.visual-layout-page .ftc-footer .component-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-logo,
.visual-layout-page .ftc-footer .component-wrapper:has(.ftc-footer-logo),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-logo) {
order: 10 !important;
}
.visual-layout-page .ftc-footer-grid,
.visual-layout-page .ftc-footer .component-wrapper:has(.ftc-footer-grid),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-grid) {
order: 20 !important;
}
.visual-layout-page .ftc-payment-row,
.visual-layout-page .ftc-footer .component-wrapper:has(.ftc-payment-row),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-payment-row) {
order: 30 !important;
}
.visual-layout-page .ftc-footer-disclaimer,
.visual-layout-page .ftc-footer .component-wrapper:has(.ftc-footer-disclaimer),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-disclaimer) {
order: 40 !important;
}
.visual-layout-page .ftc-footer-bottom,
.visual-layout-page .ftc-footer .component-wrapper:has(.ftc-footer-bottom),
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer .component-wrapper:has(.ftc-footer-bottom) {
order: 50 !important;
}
.visual-layout-page .ftc-footer-logo,
.visual-layout-page .editable-rich-text.ftc-footer-logo,
.visual-layout-page .ve-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-logo,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-logo {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 24px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 31px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
background: transparent !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-logo-link img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-logo-link img {
width: min(218px, 72vw) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page .ftc-footer-top-link,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-top-link {
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 36px !important;
line-height: 1 !important;
text-decoration: none !important;
}
.visual-layout-page .ftc-footer-grid,
.visual-layout-page .ve-grid.ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 34px 0 34px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
background: transparent !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-grid > *,
.visual-layout-page .ve-grid.ftc-footer-grid > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-grid > *,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-grid.ftc-footer-grid > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-col,
.visual-layout-page .editable-rich-text.ftc-footer-col,
.visual-layout-page .ve-rich-text.ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 32px !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
.visual-layout-page .ftc-footer-col-spacer,
.visual-layout-page .editable-rich-text.ftc-footer-col-spacer,
.visual-layout-page .ve-rich-text.ftc-footer-col-spacer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-col-spacer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-col-spacer {
margin-top: -12px !important;
}
.visual-layout-page .ftc-footer-col:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col:last-child {
margin-bottom: 0 !important;
}
.visual-layout-page .ftc-footer-col h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col h3 {
display: block !important;
margin: 0 0 24px !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 16px !important;
line-height: 20px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page .ftc-footer-col-spacer h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col-spacer h3 {
display: none !important;
}
.visual-layout-page .ftc-footer-col p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page .ftc-footer-col p br,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col p br {
display: none !important;
}
.visual-layout-page .ftc-footer-col a,
.visual-layout-page .ftc-footer-contact-list span,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-col a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 24px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
text-decoration: none !important;
}
.visual-layout-page .ftc-footer-contact-list,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page .ftc-footer-contact-list li,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list li {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
gap: 22px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page .ftc-footer-contact-list img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list img {
display: block !important;
width: 31px !important;
height: 31px !important;
object-fit: contain !important;
}
.visual-layout-page .ftc-footer-contact-list span,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-contact-list span {
margin: 0 !important;
overflow-wrap: anywhere !important;
}
.visual-layout-page .ftc-payment-row,
.visual-layout-page .editable-rich-text.ftc-payment-row,
.visual-layout-page .ve-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-payment-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-payment-row {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 36px 0 24px !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}
.visual-layout-page .ftc-payment-row p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-row p {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page .ftc-payment-icons,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-payment-icons {
display: block !important;
width: 238px !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.visual-layout-page .ftc-footer-disclaimer,
.visual-layout-page .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page .ve-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-disclaimer {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 56px !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}
.visual-layout-page .ftc-footer-disclaimer p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-disclaimer p {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 20px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .ftc-footer-bottom,
.visual-layout-page .editable-rich-text.ftc-footer-bottom,
.visual-layout-page .ve-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.ftc-footer-bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ve-rich-text.ftc-footer-bottom {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 34px !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
margin-left: calc((100vw - var(--ftc-footer-mobile-width)) / -2) !important;
margin-right: 0 !important;
padding: 56px calc((100vw - var(--ftc-footer-mobile-width)) / 2) 48px !important;
border: 0 !important;
background: var(--white-100, #fff) !important;
box-shadow: none !important;
clip-path: none !important;
text-align: center !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-legal-links,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 29px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page .ftc-footer-legal-links a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-legal-links a {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-size: 18px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.visual-layout-page .ftc-footer-bottom p,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-bottom p {
order: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 22px 0 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-size: 20px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
text-align: center !important;
}
}
/* Fase 40.63 - Footer mobile dedicado Figma
El orden del footer publicado puede venir contaminado por layouts antiguos guardados.
Para mobile se usa un render limpio (.ftc-footer-mobile) y se oculta el inner desktop solo en <=768px.
Desktop queda intacto. */
.visual-layout-page .ftc-footer-mobile,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile {
display: none !important;
}
@media (max-width: 768px) {
.visual-layout-page .ftc-footer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer {
padding: 0 !important;
background: var(--background-base-default-soft, #f7f3ec) !important;
overflow: hidden !important;
}
.visual-layout-page .ftc-footer > .ve-section-inner,
.visual-layout-page .ftc-footer > .section-content-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer > .section-content-wrapper {
display: none !important;
}
.visual-layout-page .ftc-footer-mobile,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile {
--ftc-footer-mobile-width: min(390px, calc(100vw - 52px));
display: block !important;
width: var(--ftc-footer-mobile-width) !important;
max-width: var(--ftc-footer-mobile-width) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 48px 0 0 !important;
background: transparent !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-mobile *,
.visual-layout-page .ftc-footer-mobile *::before,
.visual-layout-page .ftc-footer-mobile *::after,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile *,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile *::before,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile *::after {
box-sizing: border-box !important;
}
.visual-layout-page .ftc-footer-mobile__top,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__top {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 24px !important;
width: 100% !important;
padding: 0 0 30px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
}
.visual-layout-page .ftc-footer-mobile__top .ftc-footer-logo-link,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__top .ftc-footer-logo-link {
display: inline-flex !important;
width: auto !important;
max-width: calc(100% - 58px) !important;
text-decoration: none !important;
}
.visual-layout-page .ftc-footer-mobile__top .ftc-footer-logo-link img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__top .ftc-footer-logo-link img {
display: block !important;
width: min(218px, 100%) !important;
max-width: 100% !important;
height: auto !important;
}
.visual-layout-page .ftc-footer-mobile__top .ftc-footer-top-link,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__top .ftc-footer-top-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
margin: 0 !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 36px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-decoration: none !important;
transform: none !important;
}
.visual-layout-page .ftc-footer-mobile__nav,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__nav {
display: block !important;
width: 100% !important;
padding: 34px 0 34px !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #ddd4c8) !important;
}
.visual-layout-page .ftc-footer-mobile__group,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__group {
display: block !important;
width: 100% !important;
margin: 0 0 34px !important;
padding: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__group:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__group:last-child {
margin-bottom: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__group h3,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__group h3 {
display: block !important;
margin: 0 0 22px !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page .ftc-footer-mobile__group a,
.visual-layout-page .ftc-footer-mobile__contact-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__group a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__contact-row {
display: block !important;
width: 100% !important;
margin: 0 0 21px !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-align: left !important;
text-decoration: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .ftc-footer-mobile__group a:last-child,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__group a:last-child {
margin-bottom: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__contact a,
.visual-layout-page .ftc-footer-mobile__contact-row,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__contact a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__contact-row {
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
gap: 22px !important;
align-items: center !important;
margin-bottom: 28px !important;
}
.visual-layout-page .ftc-footer-mobile__contact img,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__contact img {
display: block !important;
width: 31px !important;
height: 31px !important;
object-fit: contain !important;
}
.visual-layout-page .ftc-footer-mobile__contact span,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__contact span {
min-width: 0 !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
overflow-wrap: anywhere !important;
}
.visual-layout-page .ftc-footer-mobile__legal-block,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__legal-block {
display: block !important;
width: 100% !important;
padding: 34px 0 56px !important;
background: transparent !important;
}
.visual-layout-page .ftc-footer-mobile__payments,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__payments {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 0 26px !important;
padding: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__payments .ftc-payment-icons,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__payments .ftc-payment-icons {
display: block !important;
width: 238px !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__disclaimer,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__disclaimer {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.visual-layout-page .ftc-footer-mobile__bottom,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__bottom {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 34px !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc((100vw - var(--ftc-footer-mobile-width)) / -2) !important;
padding: 56px calc((100vw - var(--ftc-footer-mobile-width)) / 2) 48px !important;
background: var(--white-100, #fff) !important;
text-align: center !important;
}
.visual-layout-page .ftc-footer-mobile__legal-links,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__legal-links {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 29px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page .ftc-footer-mobile__legal-links a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__legal-links a {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-brand-emphasis, #5f3a78) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.visual-layout-page .ftc-footer-mobile__copy,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-footer-mobile__copy {
display: block !important;
width: 100% !important;
margin: 22px 0 0 !important;
padding: 0 !important;
color: var(--foreground-base-secondary-soft, #7c7162) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
text-align: center !important;
}
}
/* ─── Fase 40.66: Página Legal - sincronía real con Figma + Design System ───
Motivo: la plantilla legal usaba el hero interno genérico y heredaba centrados
del CSS legacy. Este bloque acota la corrección a page=legal y no toca Home,
FAQs ni Artículo. */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] {
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero {
background: var(--background-base-default-soft, #FAF8F3) !important;
padding: 56px 0 66px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero.editable-section > .section-content-wrapper,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - (var(--layout-section-x-spacing, 72px) * 2))) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-right: auto !important;
margin-left: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"] .editable-rich-text.alc-legal-hero-copy {
width: min(760px, 100%) !important;
max-width: 760px !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero-copy h1 {
margin: 0 0 var(--space-sm, 16px) !important;
color: var(--foreground-base-brand-emphasis, #5F3A78) !important;
font-family: var(--font-display-page-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: var(--font-display-page-size, 48px) !important;
line-height: var(--font-display-page-line-height, 56px) !important;
letter-spacing: var(--font-display-page-letter-spacing, 0) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy p,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero-copy p {
max-width: 720px !important;
margin: 0 0 var(--space-3xs, 4px) !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-support-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 20px) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section {
background: var(--white-100, #fff) !important;
padding: var(--space-5xl, 96px) 0 var(--space-6xl, 128px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section.editable-section > .section-content-wrapper {
width: min(1120px, calc(100% - (var(--layout-section-x-spacing, 72px) * 2))) !important;
max-width: 1120px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-layout {
display: grid !important;
grid-template-columns: 220px minmax(0, var(--layout-container-reading, 720px)) !important;
justify-content: center !important;
align-items: start !important;
column-gap: var(--space-4xl, 88px) !important;
row-gap: var(--space-xl, 40px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-index {
position: sticky !important;
top: var(--space-4xl, 88px) !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-caption-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-caption-size, 12px) !important;
line-height: var(--font-body-caption-line-height, 16px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index strong {
display: block !important;
margin: 0 0 var(--space-xs, 12px) !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-family: var(--font-title-notice-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-caption-size, 12px) !important;
line-height: var(--font-body-caption-line-height, 16px) !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index a {
display: block !important;
margin: 0 !important;
padding: var(--space-3xs, 4px) 0 var(--space-3xs, 4px) var(--space-sm, 16px) !important;
border-left: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
font-family: var(--font-body-caption-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-caption-size, 12px) !important;
line-height: var(--font-body-caption-line-height, 16px) !important;
font-weight: 500 !important;
text-align: left !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-content {
width: 100% !important;
max-width: var(--layout-container-reading, 720px) !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-support-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 20px) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content li {
margin: 0 0 var(--space-sm, 16px) !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-support-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 20px) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content > p:first-child {
margin-bottom: var(--space-md, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content strong {
color: inherit !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2 {
margin: var(--space-md, 24px) 0 var(--space-xs, 12px) !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-family: var(--font-title-card-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: var(--font-title-card-size, 20px) !important;
line-height: var(--font-title-card-line-height, 28px) !important;
font-weight: 700 !important;
letter-spacing: var(--font-title-card-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2:first-of-type {
margin-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content ul {
margin: 0 0 var(--space-sm, 16px) !important;
padding-left: var(--space-md, 24px) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content li::marker {
color: var(--foreground-base-secondary-mid, #665C48) !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl, 40px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index {
display: none !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero {
padding: var(--space-2xl, 48px) 0 var(--space-4xl, 88px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"] .alc-legal-hero-copy h1 {
font-size: var(--font-display-page-size, 32px) !important;
line-height: var(--font-display-page-line-height, 40px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section {
padding: var(--space-3xl, 72px) 0 var(--space-5xl, 96px) !important;
}
}
/* ─── Fase 40.67: Legal Desktop - tokens reales de Figma ───────────────────
Corrige la plantilla legal sin tocar Home/Artículo/FAQs:
- el H1 legal en Figma es Signika 400, 48/48 y color text/brand (#5F3A78),
no brand-emphasis ni max-width de lectura.
- el cuerpo legal usa Inter 16/24 en text/primary (#484132).
- los epígrafes legales usan Signika bold 24/32 en text/tertiary (#84775D).
*/
@media (min-width: 769px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero {
background: var(--background-base-default-soft, #FAF8F3) !important;
padding-top: 52px !important;
padding-bottom: 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero.editable-section > .section-content-wrapper,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - 144px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-hero-copy {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy h1 {
max-width: 1344px !important;
margin: 0 0 16px !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
font-family: var(--font-display-page-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: 48px !important;
line-height: 48px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy p {
max-width: 760px !important;
margin: 0 !important;
color: var(--foreground-base-primary-soft, #665C48) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section {
background: #fff !important;
padding-top: 128px !important;
padding-bottom: 128px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section.editable-section > .section-content-wrapper {
width: min(1048px, calc(100% - 144px)) !important;
max-width: 1048px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-layout {
display: grid !important;
grid-template-columns: 280px minmax(0, 720px) !important;
column-gap: 48px !important;
row-gap: 0 !important;
justify-content: start !important;
align-items: start !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-index {
max-width: 280px !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index strong {
margin-bottom: 20px !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index a {
padding: 0 0 0 18px !important;
margin: 0 0 20px !important;
border-left: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
text-align: left !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-content {
width: 720px !important;
max-width: 720px !important;
color: var(--foreground-base-primary-mid, #484132) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content li {
margin: 0 0 16px !important;
color: var(--foreground-base-primary-mid, #484132) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content > p:first-child {
margin-bottom: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content strong,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content b {
color: inherit !important;
font-weight: 700 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2 {
margin: 32px 0 16px !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-family: var(--font-title-block-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: 24px !important;
line-height: 32px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2:first-of-type {
margin-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content ul {
margin: 0 0 16px !important;
padding-left: 20px !important;
list-style-position: outside !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content li::marker {
color: var(--foreground-base-primary-mid, #484132) !important;
}
}
/* ─── Fase 40.68: Página FAQs desktop - ajuste real a Figma + Design System ──
Acotado a page=faqs y solo desktop. La página FAQ guardada venía de estilos
genéricos: hero centrado, acordeón en cajas y bloque de relacionadas con títulos
fuera de escala. Aquí se fuerza la lectura de tokens FTC sin tocar Home/Legal/
Artículo ni mobile. */
@media (min-width: 769px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] {
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-mid, #484132) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero {
background: var(--background-base-default-soft, #FAF8F3) !important;
padding: 52px 0 64px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - 144px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .editable-rich-text.alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .ve-rich-text.alc-inner-hero-copy {
width: min(720px, 100%) !important;
max-width: 720px !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy h1 {
margin: 0 0 12px !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
font-family: var(--font-display-section-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: var(--font-display-section-size, 40px) !important;
line-height: var(--font-display-section-line-height, 48px) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy p {
max-width: 560px !important;
margin: 0 !important;
color: var(--foreground-base-primary-soft, #665C48) !important;
font-family: var(--font-body-support-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 20px) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section {
background: var(--white-100, #fff) !important;
padding: 40px 0 72px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section.editable-section > .section-content-wrapper {
width: min(1128px, calc(100% - 144px)) !important;
max-width: 1128px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-filters {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 16px !important;
margin: 0 0 88px !important;
padding: 0 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-filters button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 28px !important;
margin: 0 !important;
padding: 6px 18px !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--background-base-brand-soft, #F8F0FC) !important;
color: var(--foreground-base-brand-mid, #5F3A78) !important;
font-family: var(--font-action-compact-family, "Inter", Arial, sans-serif) !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-filters button.active {
background: var(--background-base-brand-emphasis, #2A0D45) !important;
color: var(--foreground-base-inverse-strong, #fff) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .editable-rich-text.alc-faq-page-list,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .ve-rich-text.alc-faq-page-list {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-primary-mid, #484132) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list details {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list summary {
display: block !important;
width: 100% !important;
min-height: 54px !important;
padding: 19px 48px 19px 0 !important;
list-style: none !important;
cursor: pointer !important;
position: relative !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-body-support-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-support-size, 14px) !important;
line-height: var(--font-body-support-line-height, 20px) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list summary::-webkit-details-marker {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list summary::after {
content: '⌄' !important;
position: absolute !important;
top: 50% !important;
right: 0 !important;
width: 24px !important;
height: 24px !important;
display: inline-grid !important;
place-items: center !important;
transform: translateY(-50%) !important;
border: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-family: var(--font-body-family, "Inter", Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 1 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list details[open] summary::after {
content: '⌃' !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list details p {
margin: -4px 0 0 !important;
padding: 0 48px 24px 0 !important;
border: 0 !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-caption-family, "Inter", Arial, sans-serif) !important;
font-size: var(--font-body-caption-size, 12px) !important;
line-height: var(--font-body-caption-line-height, 16px) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-section {
background: var(--white-100, #fff) !important;
padding: 0 0 76px !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-section.editable-section > .section-content-wrapper {
width: min(1128px, calc(100% - 144px)) !important;
max-width: 1128px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 58px !important;
border-top: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-card {
max-width: 560px !important;
margin: 0 auto !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-icon {
width: 32px !important;
height: 32px !important;
margin: 0 auto 14px !important;
border: 1px solid var(--border-base-secondary-soft, #F0EBE1) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-secondary-soft, #84775D) !important;
font-size: 14px !important;
line-height: 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-card h3 {
margin: 0 0 12px !important;
color: var(--foreground-base-primary-mid, #484132) !important;
font-family: var(--font-body-caption-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-card p {
max-width: 520px !important;
margin: 0 auto 24px !important;
color: var(--foreground-base-secondary-mid, #665C48) !important;
font-family: var(--font-body-caption-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-actions {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-help-actions a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
padding: 8px 22px !important;
border: 1px solid var(--border-base-secondary-mid, #DED9D0) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-action-compact-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-experiences {
background: var(--background-base-default-mid, #F0EBE1) !important;
padding: 48px 0 72px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-experiences > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-experiences.editable-section > .section-content-wrapper {
width: min(1180px, calc(100% - 144px)) !important;
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
margin: 0 0 32px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-head h2 {
margin: 0 !important;
color: var(--foreground-base-primary-soft, #665C48) !important;
font-family: var(--font-display-price-family, "Signika", Inter, Arial, sans-serif) !important;
font-size: var(--font-display-price-size, 32px) !important;
line-height: var(--font-display-price-line-height, 40px) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-head a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 10px 24px !important;
border: 1px solid var(--border-base-secondary-mid, #DED9D0) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-action-compact-family, "Inter", Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-related-experiences .tour-cards-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 32px !important;
}
}
/* ─── Fase 40.69: Capa común de roles tipográficos para páginas internas ─────
El Design System no dibuja una plantilla por sí solo: define tokens.
Esta capa mapea los roles reales del Figma (page title, section title,
legal content, FAQ list, help block) a esos tokens para que Legal y FAQs
sigan el mismo enfoque que Article, sin depender de estilos genéricos legacy.
Scope: solo tema componentes + FTC foundations. Desktop únicamente salvo
ajustes seguros de tipografía de rol. */
.visual-layout-page[data-design-system="ftc-foundations"] {
--ftc-role-page-title-family: var(--font-display-page-family, var(--font-display-family, "Signika"));
--ftc-role-page-title-size: var(--font-display-page-size, 48px);
--ftc-role-page-title-line-height: var(--font-display-page-line-height, 56px);
--ftc-role-page-title-letter-spacing: var(--font-display-page-letter-spacing, 0);
--ftc-role-section-title-family: var(--font-display-section-family, var(--font-display-family, "Signika"));
--ftc-role-section-title-size: var(--font-display-section-size, 40px);
--ftc-role-section-title-line-height: var(--font-display-section-line-height, 48px);
--ftc-role-section-title-letter-spacing: var(--font-display-section-letter-spacing, 0);
--ftc-role-body-family: var(--font-body-default-family, var(--font-body-family, "Inter"));
--ftc-role-body-size: var(--font-body-default-size, 16px);
--ftc-role-body-line-height: var(--font-body-default-line-height, 24px);
--ftc-role-support-family: var(--font-body-support-family, var(--font-body-family, "Inter"));
--ftc-role-support-size: var(--font-body-support-size, 14px);
--ftc-role-support-line-height: var(--font-body-support-line-height, 20px);
--ftc-role-caption-family: var(--font-body-caption-family, var(--font-body-family, "Inter"));
--ftc-role-caption-size: var(--font-body-caption-size, 12px);
--ftc-role-caption-line-height: var(--font-body-caption-line-height, 16px);
--ftc-page-bg-soft: var(--background-base-default-soft, #FAF8F3);
--ftc-page-text: var(--foreground-base-primary-mid, #484132);
--ftc-page-text-soft: var(--foreground-base-primary-soft, #665C48);
--ftc-page-text-tertiary: var(--foreground-base-secondary-soft, #84775D);
--ftc-page-brand: var(--foreground-base-brand-mid, #5F3A78);
--ftc-page-border: var(--border-base-secondary-soft, #F0EBE1);
}
@media (min-width: 769px) {
/* LEGAL: page title role del Figma: Signika regular 48/48, brand. */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero {
background: var(--ftc-page-bg-soft) !important;
padding: 52px 0 72px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero > .ve-section-inner,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero.editable-section > .section-content-wrapper,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - 144px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-hero-copy {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy h1 {
max-width: 1344px !important;
margin: 0 0 16px !important;
color: var(--ftc-page-brand) !important;
font-family: var(--ftc-role-page-title-family), "Signika", Inter, Arial, sans-serif !important;
font-size: 48px !important;
line-height: 48px !important;
font-weight: 400 !important;
letter-spacing: var(--ftc-role-page-title-letter-spacing) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-inner-hero-copy p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-hero-copy p {
max-width: 760px !important;
margin: 0 !important;
color: var(--ftc-page-text-soft) !important;
font-family: var(--ftc-role-body-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-body-size) !important;
line-height: var(--ftc-role-body-line-height) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section {
background: var(--white-100, #fff) !important;
padding: 128px 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-body-section.editable-section > .section-content-wrapper {
width: min(1048px, calc(100% - 144px)) !important;
max-width: 1048px !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-layout {
display: grid !important;
grid-template-columns: 280px minmax(0, 720px) !important;
gap: 0 48px !important;
justify-content: start !important;
align-items: start !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-index,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-index {
width: 280px !important;
max-width: 280px !important;
position: sticky !important;
top: 88px !important;
color: var(--ftc-page-brand) !important;
font-family: var(--ftc-role-caption-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-caption-size) !important;
line-height: var(--ftc-role-caption-line-height) !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index strong {
display: block !important;
margin: 0 0 20px !important;
color: var(--ftc-page-text-tertiary) !important;
font-family: var(--ftc-role-support-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-support-size) !important;
line-height: var(--ftc-role-caption-line-height) !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-index a {
display: block !important;
margin: 0 0 20px !important;
padding: 0 0 0 18px !important;
border-left: 1px solid var(--ftc-page-border) !important;
color: var(--ftc-page-brand) !important;
font-family: var(--ftc-role-caption-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-caption-size) !important;
line-height: var(--ftc-role-caption-line-height) !important;
font-weight: 700 !important;
text-align: left !important;
text-decoration: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .editable-rich-text.alc-legal-content,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .ve-rich-text.alc-legal-content {
width: 720px !important;
max-width: 720px !important;
color: var(--ftc-page-text) !important;
font-family: var(--ftc-role-body-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-body-size) !important;
line-height: var(--ftc-role-body-line-height) !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content li {
margin: 0 0 16px !important;
color: var(--ftc-page-text) !important;
font-family: var(--ftc-role-body-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-body-size) !important;
line-height: var(--ftc-role-body-line-height) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2 {
margin: 32px 0 16px !important;
color: var(--ftc-page-text-tertiary) !important;
font-family: var(--font-title-block-family, var(--ftc-role-section-title-family)), "Signika", Inter, Arial, sans-serif !important;
font-size: var(--font-title-block-size, 24px) !important;
line-height: var(--font-title-block-line-height, 32px) !important;
font-weight: 700 !important;
letter-spacing: var(--font-title-block-letter-spacing, 0) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="legal"] .alc-legal-content h2:first-of-type {
margin-top: 0 !important;
}
/* FAQs: section title role del Figma: Signika regular 40/48, brand. */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero {
background: var(--ftc-page-bg-soft) !important;
padding: 52px 0 64px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - 144px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .editable-rich-text.alc-inner-hero-copy,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .ve-rich-text.alc-inner-hero-copy {
width: min(720px, 100%) !important;
max-width: 720px !important;
margin: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy h1 {
margin: 0 0 12px !important;
color: var(--ftc-page-brand) !important;
font-family: var(--ftc-role-section-title-family), "Signika", Inter, Arial, sans-serif !important;
font-size: var(--ftc-role-section-title-size) !important;
line-height: var(--ftc-role-section-title-line-height) !important;
font-weight: 400 !important;
letter-spacing: var(--ftc-role-section-title-letter-spacing) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-inner-hero-copy p {
max-width: 560px !important;
margin: 0 !important;
color: var(--ftc-page-text-soft) !important;
font-family: var(--ftc-role-support-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-support-size) !important;
line-height: var(--ftc-role-support-line-height) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section {
background: var(--white-100, #fff) !important;
padding: 40px 0 72px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-section.editable-section > .section-content-wrapper {
width: min(1128px, calc(100% - 144px)) !important;
max-width: 1128px !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-filters {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 16px !important;
margin: 0 0 88px !important;
padding: 0 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list details {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--ftc-page-border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list summary {
display: block !important;
width: 100% !important;
min-height: 54px !important;
padding: 19px 48px 19px 0 !important;
list-style: none !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--ftc-role-support-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-support-size) !important;
line-height: var(--ftc-role-support-line-height) !important;
font-weight: 700 !important;
text-align: left !important;
white-space: normal !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="faqs"] .alc-faq-page-list details p {
margin: -4px 0 0 !important;
padding: 0 48px 24px 0 !important;
border: 0 !important;
color: var(--ftc-page-text-soft) !important;
font-family: var(--ftc-role-caption-family), "Inter", Arial, sans-serif !important;
font-size: var(--ftc-role-caption-size) !important;
line-height: var(--ftc-role-caption-line-height) !important;
font-weight: 400 !important;
text-align: left !important;
}
}
/* ─── Fase 40.70: Article Detail final sync Figma ───────────────────────────
El DS aporta tokens; aquí se mapean los roles concretos del artículo Figma.
Scope: solo page=article para no tocar Home, Legal ni FAQs completas. */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] {
--article-figma-brand: var(--foreground-base-brand-mid, #5F3A78);
--article-figma-text: var(--foreground-base-primary-mid, #484132);
--article-figma-text-soft: var(--foreground-base-primary-soft, #665C48);
--article-figma-muted: var(--foreground-base-secondary-soft, #84775D);
--article-figma-bg-soft: var(--background-base-default-soft, #FAF8F3);
--article-figma-border: var(--border-base-secondary-soft, #F0EBE1);
--article-figma-border-strong: var(--border-base-secondary-mid, #DED9D0);
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-article-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .editable-rich-text.alc-article-hero-copy h1,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .ve-rich-text.alc-article-hero-copy h1 {
color: var(--article-figma-brand) !important;
font-family: var(--font-display-page-family, var(--font-display-family, "Signika")), "Signika", Inter, Arial, sans-serif !important;
font-weight: 500 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences {
background: var(--article-figma-bg-soft) !important;
padding: 56px 0 72px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences.editable-section > .section-content-wrapper {
width: min(1180px, calc(100% - 144px)) !important;
max-width: 1180px !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .editable-rich-text.alc-related-head,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .ve-rich-text.alc-related-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 32px !important;
width: 100% !important;
margin: 0 0 28px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head h2 {
margin: 0 !important;
color: var(--article-figma-text-soft) !important;
font-family: var(--font-display-section-family, var(--font-display-family, "Signika")), "Signika", Inter, Arial, sans-serif !important;
font-size: 32px !important;
line-height: 40px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head h2::after {
content: "" !important;
display: block !important;
width: 44px !important;
height: 1px !important;
margin-top: 14px !important;
background: var(--article-figma-border-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 196px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 11px 22px !important;
border: 1px solid var(--article-figma-border-strong) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-action-compact-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-tour-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-dynamic-tour-grid {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-cards-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 32px !important;
align-items: stretch !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card {
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
min-height: 100% !important;
border: 1px solid var(--article-figma-border-strong) !important;
border-radius: var(--radius-lg, 16px) !important;
background: var(--white-100, #fff) !important;
box-shadow: none !important;
cursor: pointer !important;
transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card:hover,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card.selected {
border-color: var(--article-figma-border-strong) !important;
box-shadow: 0 12px 30px rgba(42, 34, 24, .08) !important;
transform: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-image {
position: relative !important;
height: auto !important;
aspect-ratio: 374 / 214 !important;
overflow: hidden !important;
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0 !important;
background: var(--article-figma-border) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
border-radius: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-badge {
position: absolute !important;
left: 14px !important;
bottom: 10px !important;
top: auto !important;
z-index: 1 !important;
display: inline-flex !important;
align-items: center !important;
min-height: 24px !important;
padding: 5px 10px !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--article-figma-text-soft) !important;
box-shadow: 0 5px 14px rgba(42, 34, 24, .10) !important;
font-family: var(--font-body-caption-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 10px !important;
line-height: 12px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-body {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: 14px !important;
padding: 22px 20px 20px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-title {
margin: 0 !important;
color: var(--article-figma-text) !important;
font-family: var(--font-title-card-family, var(--font-display-family, "Signika")), "Signika", Inter, Arial, sans-serif !important;
font-size: 20px !important;
line-height: 24px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-meta {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px 12px !important;
margin: 0 !important;
color: var(--article-figma-text-soft) !important;
font-family: var(--font-body-caption-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-features {
display: grid !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
color: var(--article-figma-text-soft) !important;
font-family: var(--font-body-caption-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 400 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-features li {
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-features li::before {
content: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-details-link {
align-self: flex-start !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 2px 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--article-figma-brand) !important;
box-shadow: none !important;
font-family: var(--font-action-compact-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-footer {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 16px !important;
margin-top: auto !important;
padding-top: 18px !important;
border-top: 1px solid var(--article-figma-border-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-price small {
display: block !important;
color: var(--article-figma-muted) !important;
font-family: var(--font-field-title-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 10px !important;
line-height: 12px !important;
font-weight: 700 !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-price strong {
display: block !important;
color: var(--article-figma-brand) !important;
font-family: var(--font-display-price-family, var(--font-display-family, "Signika")), "Signika", Inter, Arial, sans-serif !important;
font-size: 28px !important;
line-height: 32px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card-footer .btn-select-tour {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 96px !important;
min-height: 32px !important;
padding: 8px 18px !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--background-action-primary-default, #5F3A78) !important;
color: var(--foreground-action-primary-default, #fff) !important;
font-family: var(--font-action-compact-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 10px !important;
line-height: 16px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section {
background: var(--white-100, #fff) !important;
padding: 80px 0 96px !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section.editable-section > .section-content-wrapper {
width: min(1128px, calc(100% - 144px)) !important;
max-width: 1128px !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section .alc-section-title,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section h2.alc-section-title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
margin: 0 0 44px !important;
color: var(--article-figma-text-soft) !important;
font-family: var(--font-title-block-family, var(--font-display-family, "Signika")), "Signika", Inter, Arial, sans-serif !important;
font-size: 24px !important;
line-height: 32px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-align: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section .alc-section-title::after {
content: "" !important;
display: block !important;
width: 44px !important;
height: 1px !important;
margin: 12px auto 0 !important;
background: var(--article-figma-border-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .editable-rich-text.alc-faq-page-list.compact,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .ve-rich-text.alc-faq-page-list.compact {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact details {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--article-figma-border-strong) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact details:first-of-type {
border-top: 1px solid var(--article-figma-border-strong) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact summary {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: 56px !important;
padding: 18px 56px 18px 0 !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-body-caption-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
text-align: left !important;
list-style: none !important;
cursor: pointer !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact summary::-webkit-details-marker {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact summary::after {
content: "⌄" !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border: 1px solid var(--article-figma-border-strong) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--article-figma-text-soft) !important;
font-size: 12px !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact details[open] summary::after {
transform: translateY(-50%) rotate(180deg) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact details p {
margin: -4px 0 0 !important;
padding: 0 56px 20px 0 !important;
border: 0 !important;
color: var(--article-figma-text-soft) !important;
font-family: var(--font-body-caption-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 12px !important;
line-height: 18px !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-page-list.compact .alc-more-faqs {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: max-content !important;
min-height: 40px !important;
margin: 48px auto 0 !important;
padding: 11px 24px !important;
border: 1px solid var(--article-figma-border-strong) !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--white-100, #fff) !important;
color: var(--foreground-base-primary-strong, #2A2218) !important;
font-family: var(--font-action-compact-family, var(--font-body-family, "Inter")), "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
text-align: center !important;
}
@media (max-width: 1024px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences.editable-section > .section-content-wrapper,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section.editable-section > .section-content-wrapper {
width: min(720px, calc(100% - 48px)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-cards-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-article-hero-copy h1 {
color: var(--article-figma-brand) !important;
font-size: var(--font-display-page-size, 32px) !important;
line-height: var(--font-display-page-line-height, 40px) !important;
font-weight: 500 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences {
padding: 48px 0 56px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head {
flex-direction: row !important;
align-items: flex-start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head h2 {
font-size: 28px !important;
line-height: 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-head a {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-tour-grid .tour-cards-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-cards-grid {
display: flex !important;
overflow-x: auto !important;
gap: 24px !important;
scroll-snap-type: x mandatory !important;
padding-bottom: 4px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-related-experiences .tour-card {
flex: 0 0 min(330px, 82vw) !important;
scroll-snap-align: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="article"] .alc-faq-compact-section {
padding: 56px 0 72px !important;
}
}
/* ─── Fase 40.71: Header desktop sync con Figma.
Solo afecta a desktop. Mobile conserva los ajustes específicos ya aplicados.
El PDF del header define una barra de 96px aprox., textos en mayúsculas
y navegación compacta sobre un contenedor centrado de 1440px. */
@media (min-width: 769px) {
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header {
height: 96px !important;
min-height: 96px !important;
padding: 0 !important;
background: var(--white-100, #fff) !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__inner {
width: min(var(--layout-container-content, 1440px), calc(100% - 160px)) !important;
max-width: var(--layout-container-content, 1440px) !important;
min-height: 96px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 175px minmax(420px, 1fr) auto !important;
align-items: center !important;
gap: 56px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__logo img {
width: 175px !important;
height: auto !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 72px !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 24px !important;
min-width: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__actions a,
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected {
color: var(--foreground-base-brand-mid, var(--ftc-brand-primary, #5F3A78)) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter)), Inter, Arial, sans-serif !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__nav a span {
margin-left: 8px !important;
font-size: 12px !important;
line-height: 1 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected {
gap: 6px !important;
padding: 0 18px 0 0 !important;
min-height: 18px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__select .select-selected::after {
right: 0 !important;
font-size: 12px !important;
color: var(--foreground-base-brand-mid, var(--ftc-brand-primary, #5F3A78)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__icon {
width: 14px !important;
height: 14px !important;
flex-basis: 14px !important;
background: currentColor !important;
}
.visual-layout-page[data-design-system="ftc-foundations"] .ftc-site-header__divider {
width: 1px !important;
height: 16px !important;
margin: 0 4px !important;
background: var(--border-base-secondary-mid, #DED7CA) !important;
}
}
/* =========================================================
Fase 40.73b - Página detalle de experiencia por componentes
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
background: var(--white-100);
color: var(--foreground-base-primary, #484132);
font-family: var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-hero,
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs-section,
.visual-layout-page[data-page-key="experience"] .alc-exp-detail-section,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs {
overflow: visible;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-hero > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-hero.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-tabs-section.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-detail-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-detail-section.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content), calc(100% - (var(--layout-section-x-spacing) * 2)));
margin-inline: auto;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-hero-grid {
align-items: center;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-hero-copy {
display: flex;
flex-direction: column;
gap: 20px;
align-self: end;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-title {
max-width: 720px;
margin: 0;
color: var(--foreground-base-brand, #5F3A78);
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif);
font-size: clamp(42px, 4.8vw, 72px);
line-height: .94;
font-weight: 600;
letter-spacing: -0.02em;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-lead p {
max-width: 650px;
margin: 0;
color: var(--foreground-base-primary, #484132);
font: 400 18px/1.55 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stats {
max-width: 690px;
border-top: 1px solid var(--border-base-default, rgba(72,65,50,.16));
border-bottom: 1px solid var(--border-base-default, rgba(72,65,50,.16));
margin-top: 14px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat {
padding: 18px 28px 18px 0;
border-right: 1px solid var(--border-base-default, rgba(72,65,50,.16));
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat:last-child { border-right: 0; padding-left: 28px; }
.visual-layout-page[data-page-key="experience"] .alc-exp-stat small {
display: block;
color: var(--foreground-base-tertiary, #84775D);
font: 700 12px/1.15 var(--font-body-family, Inter, Arial, sans-serif);
text-transform: uppercase;
letter-spacing: .28em;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat strong {
display: block;
margin-top: 8px;
color: var(--foreground-base-brand, #5F3A78);
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif);
font-size: 24px;
line-height: 1;
font-weight: 700;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat--duration {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__grid {
display: grid;
grid-template-columns: 1.28fr 1fr;
grid-template-rows: repeat(2, minmax(0, 190px));
gap: 14px;
width: min(520px, 100%);
margin-left: auto;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 14px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__main {
grid-row: 1 / span 2;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__tile {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__tile::after {
content: "";
position: absolute;
inset: 0;
background: rgba(34, 16, 45, .26);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__tile b {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 7px 12px;
border-radius: 999px;
background: var(--foreground-base-brand, #5F3A78);
color: #fff;
font: 700 12px/1 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs-section {
border-top: 1px solid var(--border-base-default, rgba(72,65,50,.15));
border-bottom: 1px solid var(--border-base-default, rgba(72,65,50,.15));
}
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs {
display: flex;
align-items: center;
gap: 54px;
min-height: 68px;
overflow-x: auto;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs a {
position: relative;
color: var(--foreground-base-tertiary, #84775D);
text-decoration: none;
font: 700 12px/1 var(--font-body-family, Inter, Arial, sans-serif);
text-transform: uppercase;
letter-spacing: .18em;
white-space: nowrap;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs a.active {
color: var(--foreground-base-brand, #5F3A78);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -26px;
height: 3px;
border-radius: 999px;
background: var(--foreground-base-brand, #5F3A78);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-detail-grid {
align-items: start;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content {
display: grid;
gap: 64px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content h2,
.visual-layout-page[data-page-key="experience"] .alc-exp-section-title,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation h2 {
margin: 0 0 24px;
color: var(--foreground-base-primary, #484132);
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif);
font-size: 30px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.01em;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content h2::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-section-title::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation h2::after {
content: "";
display: block;
width: 58px;
height: 1px;
margin-top: 16px;
background: var(--foreground-base-tertiary, #84775D);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content p,
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content li,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation p,
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list p {
color: var(--foreground-base-primary, #484132);
font: 400 16px/1.65 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-main-content p { margin: 0 0 18px; }
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split {
display: grid;
grid-template-columns: 1fr 330px;
gap: 34px;
align-items: center;
margin-top: 28px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split img {
width: 100%;
border-radius: 14px;
object-fit: cover;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split ul,
.visual-layout-page[data-page-key="experience"] .alc-exp-includes ul,
.visual-layout-page[data-page-key="experience"] .alc-exp-know ul,
.visual-layout-page[data-page-key="experience"] .alc-exp-important ul {
list-style: none;
padding: 0;
margin: 22px 0 0;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split li,
.visual-layout-page[data-page-key="experience"] .alc-exp-includes li,
.visual-layout-page[data-page-key="experience"] .alc-exp-know li,
.visual-layout-page[data-page-key="experience"] .alc-exp-important li {
position: relative;
padding-left: 22px;
margin: 10px 0;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split li::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-includes li::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-know li::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-important li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--foreground-base-brand, #5F3A78);
font-weight: 800;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-includes-grid,
.visual-layout-page[data-page-key="experience"] .alc-exp-location-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-includes-grid h3,
.visual-layout-page[data-page-key="experience"] .alc-exp-location-grid h3,
.visual-layout-page[data-page-key="experience"] .alc-exp-important h3 {
margin: 0 0 14px;
color: var(--foreground-base-primary-strong, #22102D);
font: 700 13px/1.1 var(--font-body-family, Inter, Arial, sans-serif);
text-transform: uppercase;
letter-spacing: .18em;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-includes-grid > div + div,
.visual-layout-page[data-page-key="experience"] .alc-exp-location-grid > div + div {
border-left: 1px solid var(--border-base-default, rgba(72,65,50,.16));
padding-left: 36px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital {
margin-inline: calc(var(--layout-section-x-spacing) * -0.25);
padding: 46px 54px;
border-radius: 10px;
background: var(--background-base-brand-emphasis, #22102D);
color: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital h2,
.visual-layout-page[data-page-key="experience"] .alc-exp-digital p,
.visual-layout-page[data-page-key="experience"] .alc-exp-digital strong,
.visual-layout-page[data-page-key="experience"] .alc-exp-digital span {
color: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 54px;
margin-top: 32px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital-grid div {
display: grid;
gap: 8px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital-grid strong {
font: 700 15px/1.2 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital-grid span {
opacity: .82;
font: 400 14px/1.5 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-lang-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-lang-list span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 18px;
border: 1px solid var(--border-base-default, rgba(72,65,50,.14));
border-radius: 6px;
background: #fff;
font: 600 13px/1 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-map {
width: 100%;
height: 175px;
display: block;
object-fit: cover;
border-radius: 6px;
margin-bottom: 24px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know {
margin-top: 28px;
padding: 26px 32px;
border-radius: 10px;
background: var(--background-base-default-soft, #F0EBE1);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 30px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar {
position: sticky;
top: 118px;
align-self: start;
display: grid;
gap: 14px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-head {
border-radius: 12px 12px 0 0;
padding: 18px 22px;
background: var(--foreground-base-brand, #5F3A78);
color: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-head small {
display: block;
opacity: .82;
font: 700 11px/1 var(--font-body-family, Inter, Arial, sans-serif);
text-transform: uppercase;
letter-spacing: .18em;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-head strong {
display: block;
margin-top: 6px;
font: 700 24px/1 var(--font-display-family, Signika, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form {
margin: -14px 0 0 !important;
padding: 0 !important;
background: #fff;
border: 1px solid var(--border-base-default, rgba(72,65,50,.16));
border-top: 0;
border-radius: 0 0 12px 12px;
box-shadow: 0 18px 44px rgba(34, 16, 45, .12);
overflow: hidden;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .haz_tu_reserva,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form #form_reserva,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .booking-form-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .booking-form-row {
display: block !important;
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .booking-form-left,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .booking-form-right {
width: 100% !important;
max-width: none !important;
flex: none !important;
padding: 18px 22px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .booking-form-right {
border-top: 1px solid var(--border-base-default, rgba(72,65,50,.12));
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .alc-hidden-tour-radios,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form #client_form_container,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .completar .terminos {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .titulo_formulario {
margin: 0 0 10px !important;
color: var(--foreground-base-primary-strong, #22102D) !important;
font: 700 13px/1.2 var(--font-body-family, Inter, Arial, sans-serif) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form #datepicker,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .ui-datepicker {
max-width: 100%;
width: 100%;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form #payment_button_container button,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form #payment_button_container a,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .payment_button,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-form .btn_pago {
width: 100% !important;
border-radius: 999px !important;
background: var(--foreground-base-brand, #5F3A78) !important;
color: #fff !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-important {
padding: 18px 20px;
border: 1px solid var(--border-base-default, rgba(72,65,50,.14));
border-radius: 12px;
background: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-important li {
font-size: 13px;
line-height: 1.45;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer {
background: var(--background-base-support-emphasis, #00394A) !important;
color: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-offer.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-cancellation.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-faqs.editable-section > .section-content-wrapper {
width: min(calc(var(--layout-container-content) - 260px), calc(100% - (var(--layout-section-x-spacing) * 2)));
margin-inline: auto;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer .alc-exp-section-title,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer .alc-exp-section-title::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer strong,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer p {
color: #fff;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid {
margin-top: 34px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item strong {
display: block;
margin-bottom: 12px;
font: 700 16px/1.25 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item p {
margin: 0;
opacity: .82;
font: 400 14px/1.5 var(--font-body-family, Inter, Arial, sans-serif);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation {
background: var(--background-base-default-soft, #F0EBE1) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation-copy {
max-width: 940px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list {
max-width: 850px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details {
border-top: 1px solid var(--border-base-default, rgba(72,65,50,.16));
padding: 18px 0;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details:last-of-type {
border-bottom: 1px solid var(--border-base-default, rgba(72,65,50,.16));
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list summary {
cursor: pointer;
color: var(--foreground-base-primary-strong, #22102D);
font: 700 16px/1.4 var(--font-body-family, Inter, Arial, sans-serif);
list-style: none;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list summary::-webkit-details-marker { display: none; }
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list summary::after {
content: "⌄";
float: right;
color: var(--foreground-base-tertiary, #84775D);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details[open] summary::after { content: "⌃"; }
.visual-layout-page[data-page-key="experience"] .alc-exp-more-faqs a {
display: inline-flex;
margin-top: 18px;
min-height: 40px;
align-items: center;
justify-content: center;
padding: 0 18px;
border: 1px solid var(--border-base-default, rgba(72,65,50,.22));
border-radius: 4px;
color: var(--foreground-base-primary-strong, #22102D);
text-decoration: none;
font: 700 12px/1 var(--font-body-family, Inter, Arial, sans-serif);
text-transform: uppercase;
letter-spacing: .08em;
}
@media (max-width: 1100px) {
.visual-layout-page[data-page-key="experience"] .alc-exp-hero-grid,
.visual-layout-page[data-page-key="experience"] .alc-exp-detail-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__grid {
margin-left: 0;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar {
position: static;
}
}
@media (max-width: 680px) {
.visual-layout-page[data-page-key="experience"] .alc-exp-hero > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-tabs-section > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-detail-section > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs > .ve-section-inner {
width: min(100% - 48px, 430px);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-title {
font-size: 42px;
line-height: .96;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px 150px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-gallery__main {
grid-column: 1 / span 2;
grid-row: auto;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stats {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat,
.visual-layout-page[data-page-key="experience"] .alc-exp-stat:last-child {
border-right: 0;
border-bottom: 1px solid var(--border-base-default, rgba(72,65,50,.16));
padding: 16px 0;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-stat:last-child { border-bottom: 0; }
.visual-layout-page[data-page-key="experience"] .alc-exp-about-split,
.visual-layout-page[data-page-key="experience"] .alc-exp-includes-grid,
.visual-layout-page[data-page-key="experience"] .alc-exp-location-grid,
.visual-layout-page[data-page-key="experience"] .alc-exp-digital-grid,
.visual-layout-page[data-page-key="experience"] .alc-exp-know ul,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-includes-grid > div + div,
.visual-layout-page[data-page-key="experience"] .alc-exp-location-grid > div + div {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--border-base-default, rgba(72,65,50,.16));
padding-top: 24px;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-digital {
margin-inline: 0;
padding: 36px 28px;
}
}
/* =========================================================
Fase 40.74 - Experience detail: lower blocks synced to Figma
Scope: only page=experience. Keeps the componentized layout and uses DS tokens.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
--alc-exp-content-width: min(calc(var(--layout-container-content, 1440px) - 260px), calc(100% - (var(--layout-section-x-spacing, 72px) * 2)));
--alc-exp-ink: var(--foreground-base-primary, #484132);
--alc-exp-muted: var(--foreground-base-tertiary, #84775D);
--alc-exp-line: var(--border-base-secondary-mid, #DED7CA);
--alc-exp-soft: var(--background-base-default-soft, #F0EBE1);
--alc-exp-navy: var(--background-base-support-emphasis, #07384A);
--alc-exp-gold: var(--accent-500, #F0930A);
}
/* Debes saber que... */
.visual-layout-page[data-page-key="experience"] .alc-exp-know {
margin: 34px 0 0 !important;
padding: 34px 42px 38px !important;
border: 0 !important;
border-radius: 12px !important;
background: var(--alc-exp-soft, #F0EBE1) !important;
color: var(--alc-exp-ink, #484132) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know h3 {
margin: 0 0 28px !important;
color: var(--alc-exp-muted, #84775D) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
column-gap: 74px !important;
row-gap: 24px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know li {
position: relative !important;
margin: 0 !important;
padding: 0 0 0 34px !important;
color: var(--alc-exp-ink, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: .72em !important;
width: 16px !important;
height: 1px !important;
background: var(--alc-exp-muted, #84775D) !important;
color: transparent !important;
}
/* Shared lower section container widths */
.visual-layout-page[data-page-key="experience"] .alc-exp-offer,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs {
background: transparent !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-offer.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-cancellation.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-faqs.editable-section > .section-content-wrapper {
width: var(--alc-exp-content-width) !important;
margin-inline: auto !important;
}
/* Qué te ofrecemos */
.visual-layout-page[data-page-key="experience"] .alc-exp-offer {
padding: 70px 0 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-offer.editable-section > .section-content-wrapper {
box-sizing: border-box !important;
padding: 58px 54px 52px !important;
border-radius: 12px 12px 0 0 !important;
background: var(--alc-exp-navy, #07384A) !important;
color: #fff !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer .alc-exp-section-title {
max-width: none !important;
margin: 0 !important;
color: #fff !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 34px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer .alc-exp-section-title::after {
content: "" !important;
display: block !important;
width: 58px !important;
height: 1px !important;
margin: 18px 0 0 !important;
background: #fff !important;
opacity: .95 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
margin-top: 58px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item {
position: relative !important;
min-height: 132px !important;
padding: 0 28px 0 0 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item + .alc-exp-offer-item {
padding-left: 34px !important;
border-left: 1px solid rgba(255,255,255,.16) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item::before {
content: "" !important;
display: block !important;
width: 24px !important;
height: 24px !important;
margin: 0 0 18px !important;
background-color: var(--alc-exp-gold, #F0930A) !important;
-webkit-mask: var(--alc-exp-offer-icon) center / 22px 22px no-repeat;
mask: var(--alc-exp-offer-icon) center / 22px 22px no-repeat;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item:nth-child(1) { --alc-exp-offer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item:nth-child(2) { --alc-exp-offer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item:nth-child(3) { --alc-exp-offer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 0 0 6v3a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3a3 3 0 0 0 0-6V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3Cpath d='M13 5v14'/%3E%3C/svg%3E"); }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item:nth-child(4) { --alc-exp-offer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
/* Fase 40.95: iconos específicos del bloque Qué te ofrecemos.
Se usan clases, no :nth-child, porque en el editor los componentes pueden renderizarse envueltos
y todos acababan tomando el primer icono. */
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item::before {
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
-webkit-mask: none !important;
mask: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item--pace::before { background-image: url('/styles/componentes/assets/alcazar/offer/headphones.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item--content::before { background-image: url('/styles/componentes/assets/alcazar/offer/image.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item--access::before { background-image: url('/styles/componentes/assets/alcazar/offer/ticket.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item--ready::before { background-image: url('/styles/componentes/assets/alcazar/offer/checklist.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > :nth-child(1) .alc-exp-offer-item:not(.alc-exp-offer-item--content):not(.alc-exp-offer-item--access):not(.alc-exp-offer-item--ready)::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > .alc-exp-offer-item:nth-child(1)::before { background-image: url('/styles/componentes/assets/alcazar/offer/headphones.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > :nth-child(2) .alc-exp-offer-item::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > .alc-exp-offer-item:nth-child(2)::before { background-image: url('/styles/componentes/assets/alcazar/offer/image.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > :nth-child(3) .alc-exp-offer-item::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > .alc-exp-offer-item:nth-child(3)::before { background-image: url('/styles/componentes/assets/alcazar/offer/ticket.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > :nth-child(4) .alc-exp-offer-item::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid > .alc-exp-offer-item:nth-child(4)::before { background-image: url('/styles/componentes/assets/alcazar/offer/checklist.svg') !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item strong {
display: block !important;
margin: 0 0 16px !important;
color: #fff !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item p {
max-width: 190px !important;
margin: 0 !important;
color: rgba(255,255,255,.78) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
text-align: left !important;
}
/* Política de cancelación */
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation {
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-cancellation.editable-section > .section-content-wrapper {
box-sizing: border-box !important;
padding: 58px 54px 64px !important;
border-radius: 0 0 12px 12px !important;
background: var(--alc-exp-soft, #F0EBE1) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation-copy {
max-width: none !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation-copy h2,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation h2 {
margin: 0 0 42px !important;
color: var(--alc-exp-ink, #484132) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 30px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation-copy h2::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation h2::after {
content: "" !important;
display: block !important;
width: 58px !important;
height: 1px !important;
margin: 18px 0 0 !important;
background: var(--alc-exp-muted, #84775D) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation-copy p,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation p {
max-width: 960px !important;
margin: 0 0 18px !important;
color: var(--alc-exp-ink, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
text-align: left !important;
}
/* Preguntas frecuentes */
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs {
padding: 86px 0 104px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-faqs.editable-section > .section-content-wrapper {
box-sizing: border-box !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs .alc-exp-section-title {
margin: 0 0 48px !important;
color: var(--alc-exp-ink, #484132) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 30px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs .alc-exp-section-title::after {
content: "" !important;
display: block !important;
width: 58px !important;
height: 1px !important;
margin: 18px 0 0 !important;
background: var(--alc-exp-muted, #84775D) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list {
max-width: none !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details {
position: relative !important;
border: 0 !important;
border-top: 1px solid var(--alc-exp-line, #DED7CA) !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details:last-of-type {
border-bottom: 1px solid var(--alc-exp-line, #DED7CA) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list summary {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
min-height: 78px !important;
padding: 0 0 !important;
color: var(--alc-exp-ink, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list summary::after {
content: "⌄" !important;
float: none !important;
flex: 0 0 auto !important;
width: 36px !important;
height: 36px !important;
border: 1px solid var(--alc-exp-line, #DED7CA) !important;
border-radius: 999px !important;
display: inline-grid !important;
place-items: center !important;
color: var(--alc-exp-muted, #84775D) !important;
background: var(--white-100, #fff) !important;
font-size: 18px !important;
line-height: 1 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details[open] summary::after {
content: "⌃" !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-faq-list details p {
max-width: 780px !important;
margin: -8px 0 30px !important;
color: var(--foreground-base-secondary-strong, #665C48) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 15px !important;
line-height: 1.65 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-more-faqs {
margin: 42px 0 0 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-more-faqs a {
display: inline-flex !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 28px !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid var(--alc-exp-line, #DED7CA) !important;
border-radius: 0 !important;
background: var(--white-100, #fff) !important;
color: var(--alc-exp-ink, #484132) !important;
text-decoration: none !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-page-key="experience"] .alc-exp-know ul,
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer-item + .alc-exp-offer-item {
margin-top: 26px !important;
padding-top: 26px !important;
padding-left: 0 !important;
border-left: 0 !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
}
}
@media (max-width: 680px) {
.visual-layout-page[data-page-key="experience"] {
--alc-exp-content-width: min(100% - 48px, 430px);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know {
padding: 28px 26px 30px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-offer.editable-section > .section-content-wrapper,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-cancellation.editable-section > .section-content-wrapper {
padding: 42px 26px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-offer .alc-exp-section-title,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation h2,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs .alc-exp-section-title {
font-size: 28px !important;
}
}
/* =========================================================
Fase 40.75 - Experience lower blocks: left column alignment
Scope: only page=experience. Keeps sidebar/calendar area free.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
--alc-exp-sidebar-width: 420px;
--alc-exp-detail-gap: 56px;
--alc-exp-left-column-width: min(
calc(var(--layout-container-content, 1440px) - var(--alc-exp-sidebar-width) - var(--alc-exp-detail-gap)),
calc(100% - (var(--layout-section-x-spacing, 72px) * 2))
);
--alc-exp-container-left: max(
var(--layout-section-x-spacing, 72px),
calc((100% - var(--layout-container-content, 1440px)) / 2)
);
}
/* El bloque vive dentro de la columna izquierda del grid: solo corregimos el título. */
.visual-layout-page[data-page-key="experience"] .alc-exp-know {
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-know h3 {
display: block !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: start !important;
text-align: left !important;
}
/* Los bloques inferiores ya no se centran en toda la página: se alinean con la columna izquierda. */
.visual-layout-page[data-page-key="experience"] .alc-exp-offer > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-offer.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-cancellation.editable-section > .section-content-wrapper,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs > .ve-section-inner,
.editor-mode .visual-layout-page[data-page-key="experience"] .alc-exp-faqs.editable-section > .section-content-wrapper {
width: var(--alc-exp-left-column-width) !important;
max-width: var(--alc-exp-left-column-width) !important;
margin-left: var(--alc-exp-container-left) !important;
margin-right: auto !important;
}
/* El fondo interno de cancelación debe continuar pegado al bloque azul y ocupar la misma columna. */
.visual-layout-page[data-page-key="experience"] .alc-exp-offer,
.visual-layout-page[data-page-key="experience"] .alc-exp-cancellation,
.visual-layout-page[data-page-key="experience"] .alc-exp-faqs {
width: 100% !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
--alc-exp-left-column-width: min(100% - 48px, 680px);
--alc-exp-container-left: max(24px, calc((100% - var(--alc-exp-left-column-width)) / 2));
}
}
/* =========================================================
Fase 40.76b - Experience languages: safe Figma sync
Scope: solo page=experience. No toca LayoutManager ni index_lang.
Corrige también layouts guardados con emojis/???? usando pseudo-elementos.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-languages {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-languages h2 {
margin: 0 0 24px !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 30px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-languages h2::after {
content: "" !important;
display: block !important;
width: 58px !important;
height: 1px !important;
margin: 18px 0 0 !important;
background: var(--foreground-base-tertiary, #84775D) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-languages p {
max-width: 960px !important;
margin: 0 0 30px !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 16px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list {
display: grid !important;
grid-template-columns: repeat(4, minmax(145px, 1fr)) !important;
gap: 14px 18px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
justify-content: start !important;
align-items: start !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 16px !important;
width: 100% !important;
min-height: 58px !important;
margin: 0 !important;
padding: 13px 20px !important;
border: 1px solid var(--border-base-default, rgba(72,65,50,.16)) !important;
border-radius: 8px !important;
background: var(--white-100, #fff) !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-align: left !important;
box-shadow: none !important;
white-space: nowrap !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span::before {
content: "" !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: block !important;
border-radius: 999px !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span::after {
color: var(--foreground-base-tertiary, #84775D) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(1)::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--es::before { background-image: url("assets/flags/es.svg") !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(1)::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--es::after { content: "ESPAÑOL" !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(2)::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--en::before { background-image: url("assets/flags/en.svg") !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(2)::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--en::after { content: "INGLÉS" !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(3)::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--fr::before { background-image: url("assets/flags/fr.svg") !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(3)::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--fr::after { content: "FRANCÉS" !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(4)::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--it::before { background-image: url("assets/flags/it.svg") !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(4)::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--it::after { content: "ITALIANO" !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(5)::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--de::before { background-image: url("assets/flags/de.svg") !important; }
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list span:nth-child(5)::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-item--de::after { content: "ALEMÁN" !important; }
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 480px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-lang-list {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
Fase 40.78 - Experience includes: DS scale adjustment
Scope: solo page=experience. No toca calendario/sidebar.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
color: var(--foreground-base-primary-strong, var(--warm-800, #484132)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes h2 {
margin: 0 0 var(--space-2xl, 48px) !important;
color: var(--foreground-base-primary-strong, var(--warm-800, #484132)) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: clamp(var(--font-3xl, 28px), 2vw, var(--font-4xl, 32px)) !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: var(--font-display-section-letter-spacing, -0.01em) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes h2::after {
content: "" !important;
display: block !important;
width: var(--space-3xl, 72px) !important;
max-width: 84px !important;
height: var(--stroke-sm, 1px) !important;
margin: var(--space-md, 24px) 0 0 !important;
background: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
opacity: .95 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 0 !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
color: var(--foreground-base-primary-strong, var(--warm-800, #484132)) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div {
min-width: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div:first-child {
padding-right: var(--space-3xl, 72px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div + div {
border-left: var(--stroke-sm, 1px) solid var(--border-base-secondary-mid, var(--warm-300, #DED9D0)) !important;
border-top: 0 !important;
padding-left: var(--space-3xl, 72px) !important;
padding-top: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid h3 {
margin: 0 0 var(--space-xl, 40px) !important;
color: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter, Arial, sans-serif)) !important;
font-size: var(--font-action-nav-size, var(--font-xs, 12px)) !important;
line-height: var(--font-action-nav-line-height, var(--font-md, 16px)) !important;
font-weight: 800 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes ul {
display: grid !important;
gap: var(--space-lg, 32px) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes li {
position: relative !important;
margin: 0 !important;
padding: 0 0 0 var(--space-lg, 32px) !important;
color: var(--foreground-base-primary-strong, var(--warm-800, #484132)) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: var(--font-title-step-size, var(--font-lg, 18px)) !important;
line-height: var(--font-title-step-line-height, var(--font-2xl, 24px)) !important;
font-weight: 600 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: .22em !important;
width: 14px !important;
height: 17px !important;
background: url("assets/includes/check.svg") center / contain no-repeat !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div:nth-child(2) li::before {
background-image: url("assets/includes/cross.svg") !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes strong {
display: inline !important;
color: var(--foreground-base-primary-strong, var(--warm-800, #484132)) !important;
font-family: var(--font-title-step-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: 700 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes span {
display: block !important;
margin-top: var(--space-2xs, 8px) !important;
color: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
font-family: var(--font-body-default-family, var(--font-body-family, Inter, Arial, sans-serif)) !important;
font-size: var(--font-body-default-size, var(--font-md, 16px)) !important;
line-height: var(--font-body-default-line-height, var(--font-2xl, 24px)) !important;
font-weight: 400 !important;
text-align: left !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes h2 {
margin-bottom: var(--space-xl, 40px) !important;
font-size: var(--font-display-section-size, var(--font-4xl, 32px)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes h2::after {
margin-top: var(--space-sm, 16px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid {
grid-template-columns: 1fr !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div:first-child {
padding-right: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid > div + div {
margin-top: var(--space-xl, 40px) !important;
padding-left: 0 !important;
padding-top: var(--space-xl, 40px) !important;
border-left: 0 !important;
border-top: var(--stroke-sm, 1px) solid var(--border-base-secondary-mid, var(--warm-300, #DED9D0)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes-grid h3 {
margin-bottom: var(--space-lg, 32px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes li {
padding-left: var(--space-lg, 32px) !important;
font-size: var(--font-title-card-size, var(--font-lg, 18px)) !important;
line-height: var(--font-title-card-line-height, var(--font-2xl, 24px)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-includes span {
font-size: var(--font-body-support-size, var(--font-sm, 14px)) !important;
line-height: var(--font-body-support-line-height, var(--font-xl, 20px)) !important;
}
}
/* =========================================================
Fase 40.79 - Experience tabs: Figma button style + active hash state
Scope: only page=experience. Uses FTC Design System tokens.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs-section {
border-top: 0 !important;
border-bottom: 0 !important;
background: var(--white-100, #FFFFFF) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--space-lg, 32px) !important;
min-height: 112px !important;
padding: var(--space-lg, 32px) 0 !important;
overflow-x: auto !important;
scrollbar-width: none;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs::-webkit-scrollbar {
display: none;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 56px !important;
padding: 0 clamp(var(--space-sm, 16px), 2.35vw, var(--space-xl, 40px)) !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: transparent !important;
color: var(--foreground-base-tertiary-strong, #84775D) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter, Arial, sans-serif)) !important;
font-size: var(--font-action-secondary-size, 14px) !important;
line-height: var(--font-action-secondary-line-height, 20px) !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background-color .18s ease, color .18s ease;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a::after {
display: none !important;
content: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.is-active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a[aria-current="true"] {
background: var(--background-action-primary-default, var(--brand-700, #5F3A78)) !important;
color: var(--foreground-action-primary-default, #FFFFFF) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a:not(.active):not(.is-active):not([aria-current="true"]):hover,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a:not(.active):not(.is-active):not([aria-current="true"]):focus-visible {
background: var(--background-action-ghost-hover, var(--brand-100, #F8F0FC)) !important;
color: var(--foreground-action-ghost-hover, var(--brand-800, #362145)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] #descripcion,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] #incluye,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] #localizacion,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] #cancelacion,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] #faqs {
scroll-margin-top: 112px;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs {
justify-content: flex-start !important;
gap: var(--space-sm, 16px) !important;
min-height: 88px !important;
padding: var(--space-sm, 16px) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a {
flex: 0 0 auto !important;
min-height: 48px !important;
padding: 0 var(--space-md, 24px) !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
letter-spacing: .14em !important;
}
}
/* =========================================================
Fase 40.80 - Experience tabs: anchura real de Figma
Scope: solo page=experience. Mantiene el estado activo por hash de Fase 40.79.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs-section {
border-top: 0 !important;
border-bottom: 0 !important;
background: var(--white-100, #FFFFFF) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs-section > .ve-section-inner,
.editor-mode .visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs-section.editable-section > .section-content-wrapper {
width: min(var(--layout-container-content, 1440px), calc(100% - (var(--layout-section-x-spacing, 72px) * 2))) !important;
max-width: min(var(--layout-container-content, 1440px), calc(100% - (var(--layout-section-x-spacing, 72px) * 2))) !important;
margin-inline: auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--space-lg, 32px) !important;
width: var(--alc-exp-left-column-width, calc(var(--layout-container-content, 1440px) - 420px - 56px)) !important;
max-width: 100% !important;
min-height: 82px !important;
margin: 0 !important;
padding: 21px 0 !important;
border-bottom: var(--stroke-sm, 1px) solid var(--border-base-secondary-mid, #DED7CA) !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs::-webkit-scrollbar {
display: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a {
box-sizing: border-box !important;
position: relative !important;
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
min-height: 38px !important;
padding: 0 var(--space-sm, 16px) !important;
border: 0 !important;
border-radius: var(--radius-full, 999px) !important;
background: transparent !important;
color: var(--foreground-base-tertiary-strong, #84775D) !important;
font-family: var(--font-action-nav-family, var(--font-body-family, Inter, Arial, sans-serif)) !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background-color .18s ease, color .18s ease !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a::after {
display: none !important;
content: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.is-active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a[aria-current="true"] {
min-width: 112px !important;
padding-inline: var(--space-sm, 16px) !important;
background: var(--background-action-primary-default, var(--brand-700, #5F3A78)) !important;
color: var(--foreground-action-primary-default, #FFFFFF) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a:not(.active):not(.is-active):not([aria-current="true"]):hover,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a:not(.active):not(.is-active):not([aria-current="true"]):focus-visible {
background: var(--background-action-ghost-hover, var(--brand-100, #F8F0FC)) !important;
color: var(--foreground-action-ghost-hover, var(--brand-800, #362145)) !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs {
justify-content: flex-start !important;
gap: var(--space-sm, 16px) !important;
width: 100% !important;
min-height: 72px !important;
padding: var(--space-sm, 16px) 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a.is-active,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-tabs a[aria-current="true"] {
min-width: auto !important;
min-height: 38px !important;
padding: 0 var(--space-sm, 16px) !important;
font-size: var(--font-action-nav-size, 12px) !important;
line-height: var(--font-action-nav-line-height, 16px) !important;
}
}
/* =========================================================
Fase 40.81 - Experience about: réplica Figma/PDF
Scope: solo page=experience. Usa tokens FTC Design System.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about h2,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about h2 {
max-width: none !important;
margin: 0 0 var(--space-lg, 32px) !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: clamp(var(--font-3xl, 28px), 2vw, var(--font-4xl, 32px)) !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: var(--font-display-section-letter-spacing, -0.01em) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about h2::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about h2::after {
content: "" !important;
display: block !important;
width: var(--space-3xl, 72px) !important;
max-width: 58px !important;
height: var(--stroke-sm, 1px) !important;
margin: var(--space-sm, 16px) 0 0 !important;
background: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about > p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about > p {
max-width: 100% !important;
margin: 0 0 var(--space-md, 24px) !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-lg-size, 18px) !important;
line-height: var(--font-body-lg-line-height, 1.45) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about > p:last-of-type {
margin-bottom: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 390px) !important;
gap: clamp(var(--space-xl, 40px), 5vw, 76px) !important;
align-items: start !important;
width: 100% !important;
margin: var(--space-2xl, 48px) 0 0 !important;
padding: var(--space-2xl, 48px) 0 0 !important;
border-top: var(--stroke-sm, 1px) solid var(--border-base-secondary-mid, #DED7CA) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split > div {
min-width: 0 !important;
max-width: 510px !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split p {
max-width: 510px !important;
margin: 0 0 var(--space-lg, 32px) !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-lg-size, 18px) !important;
line-height: var(--font-body-lg-line-height, 1.45) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split ul,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split ul {
display: grid !important;
gap: var(--space-sm, 16px) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split li,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split li {
position: relative !important;
margin: 0 !important;
padding: 0 0 0 var(--space-sm, 16px) !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-lg-size, 18px) !important;
line-height: 1.35 !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split li::before,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: .16em !important;
width: var(--stroke-md, 2px) !important;
height: 1.15em !important;
border-radius: var(--radius-xs, 1px) !important;
background: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
color: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split img,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split img {
justify-self: end !important;
display: block !important;
width: min(100%, 390px) !important;
height: auto !important;
aspect-ratio: 390 / 300 !important;
object-fit: cover !important;
object-position: center center !important;
border: 0 !important;
border-radius: var(--radius-md, 8px) !important;
box-shadow: none !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-about-split {
grid-template-columns: 1fr !important;
gap: var(--space-lg, 32px) !important;
padding-top: var(--space-xl, 40px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split > div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split p {
max-width: none !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-about-split img {
justify-self: start !important;
width: 100% !important;
max-width: 390px !important;
}
}
/* =========================================================
Fase 40.82 - Experience audioguide content: réplica Figma/PDF
Scope: solo page=experience. Usa tokens FTC Design System e iconos del bloque.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
--alc-exp-digital-width: 832px;
--alc-exp-digital-bg: var(--background-base-brand-strong, var(--brand-800, #362145));
--alc-exp-digital-icon: var(--accent-500, #F0930A);
--alc-exp-digital-fg: var(--foreground-base-inverse, #FFFFFF);
--alc-exp-digital-muted: rgba(255, 255, 255, .64);
--alc-exp-digital-line: rgba(255, 255, 255, .14);
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital {
box-sizing: border-box !important;
display: block !important;
width: min(100%, var(--alc-exp-digital-width)) !important;
max-width: var(--alc-exp-digital-width) !important;
min-height: 532px !important;
margin: 0 auto 0 0 !important;
padding: var(--space-xl, 48px) !important;
border: 0 !important;
border-radius: var(--radius-lg, 12px) !important;
background: var(--alc-exp-digital-bg) !important;
color: var(--alc-exp-digital-fg) !important;
box-shadow: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital h2,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital h2 {
max-width: 100% !important;
margin: 0 0 var(--space-xl, 48px) !important;
padding: 0 !important;
color: var(--alc-exp-digital-fg) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: var(--font-display-section-size, 28px) !important;
line-height: var(--font-display-section-line-height, 1.18) !important;
font-weight: 600 !important;
letter-spacing: var(--font-display-section-letter-spacing, -0.01em) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital h2::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital h2::after {
content: "" !important;
display: block !important;
width: var(--space-xl, 48px) !important;
height: var(--stroke-sm, 1px) !important;
margin: var(--space-xs, 12px) 0 0 !important;
background: rgba(255, 255, 255, .70) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital > p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital > p {
box-sizing: border-box !important;
max-width: 760px !important;
margin: 0 0 var(--space-xl, 48px) !important;
padding: 0 0 var(--space-xl, 48px) !important;
border-bottom: var(--stroke-sm, 1px) solid var(--alc-exp-digital-line) !important;
color: var(--alc-exp-digital-muted) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-md-size, 16px) !important;
line-height: var(--font-body-md-line-height, 1.55) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital-grid {
display: grid !important;
grid-auto-flow: column !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(3, auto) !important;
column-gap: clamp(var(--space-xl, 48px), 7vw, 78px) !important;
row-gap: var(--space-lg, 32px) !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-item,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital-item,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-grid > div {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr) !important;
gap: var(--space-sm, 16px) !important;
align-items: start !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-item img,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-grid > div > img {
display: block !important;
width: var(--space-md, 20px) !important;
height: var(--space-md, 20px) !important;
margin: 1px 0 0 !important;
object-fit: contain !important;
flex: 0 0 auto !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-item > div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-grid > div > div {
min-width: 0 !important;
display: block !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital strong,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital strong {
display: block !important;
margin: 0 0 var(--space-2xs, 8px) !important;
color: var(--alc-exp-digital-fg) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-md-size, 16px) !important;
line-height: 1.25 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital span,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital span {
display: block !important;
margin: 0 !important;
color: var(--alc-exp-digital-muted) !important;
opacity: 1 !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: var(--font-body-sm-size, 14px) !important;
line-height: var(--font-body-sm-line-height, 1.45) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital {
width: 100% !important;
min-height: 0 !important;
padding: var(--space-lg, 32px) var(--space-md, 24px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital h2,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital h2 {
margin-bottom: var(--space-lg, 32px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital > p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital > p {
margin-bottom: var(--space-lg, 32px) !important;
padding-bottom: var(--space-lg, 32px) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-digital-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-digital-grid {
grid-auto-flow: row !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
row-gap: var(--space-lg, 32px) !important;
}
}
/* =========================================================
Fase 40.83 - Experience location access: réplica Figma + mapa dinámico
Scope: solo page=experience. Mantiene el layout de columna izquierda y tokens DS.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location h2,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location h2 {
margin: 0 0 38px !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: clamp(30px, 2.1vw, 34px) !important;
line-height: 1.14 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location h2::after,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location h2::after {
content: "" !important;
display: block !important;
width: 52px !important;
height: 1px !important;
margin: 20px 0 0 !important;
background: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map-wrap,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-map-wrap {
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
height: 253px !important;
margin: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--background-base-default-soft, #F0EBE1) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map-iframe,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-map,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-map-iframe {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
filter: grayscale(1) saturate(.35) contrast(.88) brightness(1.08) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map-wrap::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background: rgba(255, 255, 255, .42) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map-wrap .alc-exp-map-pin {
position: absolute !important;
left: 50% !important;
top: 50% !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
border-radius: var(--radius-full, 999px) !important;
background: var(--foreground-base-brand-strong, var(--brand-800, #362145)) !important;
color: var(--foreground-base-inverse, #FFFFFF) !important;
transform: translate(-50%, -50%) !important;
box-shadow: 0 10px 26px rgba(34, 16, 45, .18) !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 42px 0 54px !important;
border: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid > div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid > div {
box-sizing: border-box !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 36px 0 0 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid > div + div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid > div + div {
border-left: 1px solid var(--border-base-secondary-mid, #DED7CA) !important;
padding: 0 0 0 36px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid h3,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid h3 {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin: 0 0 28px !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-display-section-family, var(--font-display-family, Signika, Inter, Arial, sans-serif)) !important;
font-size: 30px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
text-transform: none !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid h3 img {
display: block !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
flex: 0 0 24px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-card--address p,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-card--address p {
margin: 0 0 14px !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-row,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-hours-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 24px !important;
align-items: start !important;
margin: 0 !important;
padding: 0 0 22px !important;
border-bottom: 1px solid var(--border-base-secondary-mid, #DED7CA) !important;
color: var(--foreground-base-secondary-strong, var(--warm-700, #665C48)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1.35 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-row + .alc-exp-hours-row {
padding-top: 22px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-row > div:last-child {
min-width: 152px !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-row strong {
display: block !important;
margin: 0 !important;
color: var(--foreground-base-primary, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-row em {
display: block !important;
margin-top: 5px !important;
color: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-style: italic !important;
font-weight: 700 !important;
text-align: right !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-closed,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-hours-closed {
margin: 26px 0 0 !important;
color: var(--foreground-base-tertiary-strong, var(--warm-600, #84775D)) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1.35 !important;
font-style: italic !important;
font-weight: 400 !important;
text-align: left !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-hours-closed strong {
color: inherit !important;
font-weight: 800 !important;
}
@media (max-width: 900px) {
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-map-wrap,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-map-wrap {
height: 220px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid {
grid-template-columns: 1fr !important;
padding: 32px 0 44px !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid > div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid > div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid > div + div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid > div + div {
border-left: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-location-grid > div + div,
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] .alc-exp-main-content .alc-exp-location-grid > div + div {
margin-top: 32px !important;
padding-top: 32px !important;
border-top: 1px solid var(--border-base-secondary-mid, #DED7CA) !important;
}
}
/* =========================================================
Fase 40.84 - Experience booking sidebar real component
Scope: page=experience. Reuses BookingEngine/purchase_form_components.
========================================================= */
.visual-layout-page[data-design-system="ftc-foundations"][data-page-key="experience"] {
--alc-booking-brand: var(--surface-brand-strong, var(--background-base-brand-emphasis, #362145));
--alc-booking-brand-foreground: var(--foreground-base-inverse, #FFFFFF);
--alc-booking-ink: var(--foreground-base-primary, #484132);
--alc-booking-muted: var(--foreground-base-tertiary, #84775D);
--alc-booking-border: var(--border-base-default, #DED7CA);
--alc-booking-soft: var(--background-base-default-soft, #F8F4EC);
--alc-booking-card: var(--background-base-default, #FFFFFF);
--alc-booking-accent: var(--accent-500, #F0930A);
}
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar {
width: min(100%, 420px) !important;
justify-self: end !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar > .component-wrapper[data-type="booking_sidebar"],
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar > .component-wrapper[data-type="booking_sidebar"] > .component-content,
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar > .component-wrapper[data-type="booking_sidebar"] > .component-content > .cmp-booking_sidebar {
width: 100% !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget {
display: grid !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--alc-booking-ink) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-card {
overflow: hidden !important;
width: 100% !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 72%, transparent) !important;
border-radius: 24px !important;
background: var(--alc-booking-card) !important;
box-shadow: 0 16px 42px rgba(54, 33, 69, .10) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-price-head {
box-sizing: border-box !important;
min-height: 94px !important;
padding: 23px 34px 21px !important;
border-radius: 23px 23px 0 0 !important;
background: var(--alc-booking-brand) !important;
color: var(--alc-booking-brand-foreground) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-price-head small {
display: block !important;
margin: 0 0 7px !important;
color: rgba(255,255,255,.74) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-price-line {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-start-price {
display: inline-block !important;
color: #fff !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 24px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
letter-spacing: .01em !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-price-line del {
color: rgba(255,255,255,.48) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration-thickness: 1px !important;
}
.visual-layout-page[data-page-key="experience"] #form_reserva.alc-booking-form {
position: relative !important;
display: grid !important;
gap: 10px !important;
margin: 0 !important;
padding: 18px 16px 18px !important;
background: var(--alc-booking-card) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-hidden-sources {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-accordion,
.visual-layout-page[data-page-key="experience"] .alc-booking-step {
overflow: hidden !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 64%, transparent) !important;
border-radius: 14px !important;
background: var(--alc-booking-card) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-accordion-head,
.visual-layout-page[data-page-key="experience"] .alc-booking-step-head {
appearance: none !important;
width: 100% !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 17px !important;
border: 0 !important;
background: var(--alc-booking-soft) !important;
color: var(--alc-booking-ink) !important;
cursor: pointer !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-step:not(.is-open) .alc-booking-step-head,
.visual-layout-page[data-page-key="experience"] .alc-booking-accordion:not(.is-open) .alc-booking-accordion-head {
background: var(--alc-booking-card) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-step.is-disabled .alc-booking-step-head {
color: color-mix(in srgb, var(--alc-booking-muted) 45%, #fff) !important;
cursor: default !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-info-icon,
.visual-layout-page[data-page-key="experience"] .alc-booking-step-number {
flex: 0 0 auto !important;
width: 24px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: var(--alc-booking-ink) !important;
color: #fff !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
font-style: normal !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-step.is-disabled .alc-booking-step-number {
background: color-mix(in srgb, var(--alc-booking-border) 65%, #fff) !important;
color: #fff !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-chevron {
margin-left: auto !important;
width: 10px !important;
height: 10px !important;
border-right: 2px solid currentColor !important;
border-bottom: 2px solid currentColor !important;
transform: rotate(45deg) translateY(-2px) !important;
opacity: .72 !important;
}
.visual-layout-page[data-page-key="experience"] .is-open > .alc-booking-step-head .alc-booking-chevron,
.visual-layout-page[data-page-key="experience"] .is-open > .alc-booking-accordion-head .alc-booking-chevron {
transform: rotate(225deg) translate(-2px, -1px) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-accordion-body,
.visual-layout-page[data-page-key="experience"] .alc-booking-step-body {
padding: 18px 18px 20px !important;
background: var(--alc-booking-card) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-accordion-body p {
margin: 0 !important;
color: var(--alc-booking-muted) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .titulo_formulario,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .calendarios > p.titulo_formulario,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .hora > p.titulo_formulario,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .personas > p.titulo_formulario {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_calendario,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #datepicker,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker {
border: 0 !important;
padding: 0 !important;
background: transparent !important;
color: var(--alc-booking-ink) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 42px !important;
margin: 0 0 10px !important;
padding: 0 2px 12px !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--alc-booking-border) 70%, transparent) !important;
background: transparent !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-title {
margin: 0 !important;
color: var(--foreground-base-brand, #6A3E82) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1 !important;
font-weight: 800 !important;
text-align: left !important;
order: 1 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next {
position: static !important;
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--foreground-base-brand, #6A3E82) !important;
cursor: pointer !important;
text-decoration: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev { order: 2 !important; margin-left: auto !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next { order: 3 !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev span,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next span {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
content: "" !important;
display: block !important;
width: 10px !important;
height: 10px !important;
border-left: 3px solid currentColor !important;
border-bottom: 3px solid currentColor !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before { transform: rotate(45deg) !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before { transform: rotate(-135deg) !important; }
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 8px !important;
table-layout: fixed !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar th {
padding: 0 0 6px !important;
color: var(--alc-booking-ink) !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td {
height: 38px !important;
padding: 0 !important;
border: 0 !important;
text-align: center !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span {
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--foreground-base-brand, #6A3E82) !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-align: center !important;
text-decoration: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td.ui-state-disabled span,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td.disabled span,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td.disabled a {
color: color-mix(in srgb, var(--alc-booking-border) 54%, white) !important;
opacity: 1 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a.ui-state-active,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td.ui-datepicker-current-day a {
background: var(--foreground-base-brand, #6A3E82) !important;
color: #fff !important;
font-weight: 800 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_hora {
display: block !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_contenedor_selector,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_rango {
display: grid;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora:empty,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_contenedor_selector:empty,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_rango:empty {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora .col-auto,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora .col-auto {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora p,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_contenedor_selector select,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora_rango > div {
box-sizing: border-box !important;
width: 100% !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 75%, transparent) !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--alc-booking-ink) !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget input[name="hora"] {
margin-right: 9px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas {
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .linea {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
min-height: 54px !important;
margin: 0 !important;
padding: 12px 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--alc-booking-border) 58%, transparent) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .linea.d-none {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .linea:last-child {
border-bottom: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .linea p {
margin: 0 !important;
color: var(--alc-booking-ink) !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .precio_personas {
color: var(--alc-booking-muted) !important;
font-size: 13px !important;
font-weight: 700 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .personas_input input {
width: 34px !important;
height: 32px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--alc-booking-ink) !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-align: center !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .personas_input {
min-width: 122px !important;
padding: 4px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 62%, transparent) !important;
border-radius: 12px !important;
background: color-mix(in srgb, var(--surface-neutral-subtle, #F8F6F2) 90%, #fff) !important;
box-shadow: 0 1px 2px rgba(22, 18, 14, .04) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .personas_input .row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 7px !important;
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #bloque_personas .personas_input .col-auto {
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mas,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .menos {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 70%, transparent) !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(22, 18, 14, .08) !important;
color: var(--alc-booking-muted, #6E6478) !important;
cursor: pointer !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mas circle,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .menos circle {
fill: transparent !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mas line,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .menos line {
stroke: var(--alc-booking-muted, #6E6478) !important;
stroke-width: 3px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mas:hover,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .menos:hover {
border-color: color-mix(in srgb, var(--foreground-base-brand, #6A3E82) 35%, var(--alc-booking-border)) !important;
color: var(--foreground-base-brand, #6A3E82) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mas:hover line,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .menos:hover line {
stroke: var(--foreground-base-brand, #6A3E82) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer {
margin: 5px -16px -18px !important;
padding: 18px 20px 20px !important;
border-top: 1px solid color-mix(in srgb, var(--alc-booking-border) 68%, transparent) !important;
background: #fff !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer .precio_total {
width: 100% !important;
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
margin: 0 0 16px !important;
color: var(--alc-booking-ink) !important;
text-align: left !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer .precio_total.d-none {
display: flex !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer .precio_total > div:first-child {
color: var(--alc-booking-muted) !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer .precio_final {
color: var(--foreground-base-brand, #6A3E82) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 32px !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer #descuento_combo {
margin-right: 8px !important;
color: var(--alc-booking-muted) !important;
font-size: 14px !important;
text-decoration: line-through !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer #payment_button_container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer #payment_button_container .mensaje_custom,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .mensaje_dispo {
margin: 0 0 10px !important;
color: #9a3412 !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer #btn_comprar {
width: 100% !important;
min-height: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 24px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--foreground-base-brand, #6A3E82) !important;
color: #fff !important;
box-shadow: none !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-important {
box-sizing: border-box !important;
width: 100% !important;
padding: 23px 26px 24px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border) 72%, transparent) !important;
border-radius: 16px !important;
background: #fff !important;
color: var(--alc-booking-ink) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-important h3 {
margin: 0 0 22px !important;
color: var(--alc-booking-ink) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 900 !important;
letter-spacing: .24em !important;
text-align: center !important;
text-transform: uppercase !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-important ul {
display: grid !important;
gap: 15px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-important li {
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
gap: 11px !important;
align-items: start !important;
margin: 0 !important;
padding: 0 !important;
color: var(--alc-booking-muted) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-important-icon {
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 1px !important;
border: 1.5px solid currentColor !important;
border-radius: 999px !important;
color: var(--alc-booking-muted) !important;
font-size: 11px !important;
font-weight: 900 !important;
font-style: normal !important;
}
/* Desactiva los estilos del booking_form legacy en la página de experiencia cuando el render ya usa el nuevo componente. */
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .booking-form-container,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .booking-form-row,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .booking-form-left,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .booking-form-right {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 1100px) {
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar {
width: 100% !important;
justify-self: stretch !important;
position: static !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget {
max-width: 480px !important;
margin-inline: auto !important;
}
}
@media (max-width: 520px) {
.visual-layout-page[data-page-key="experience"] .alc-booking-price-head {
min-height: 82px !important;
padding: 20px 24px !important;
}
.visual-layout-page[data-page-key="experience"] #form_reserva.alc-booking-form {
padding-inline: 12px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer {
margin-inline: -12px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-footer .precio_final {
font-size: 28px !important;
}
}
/* =========================================================
Fase 40.85 - Correcciones booking sidebar real
- Editor seguro sin formulario/calendario legacy.
- Calendario Figma sin precios por día superpuestos.
- Chevrons mes correctos.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget[data-editor-preview="1"] {
pointer-events: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-preview-body {
display: grid !important;
gap: 10px !important;
padding: 18px 16px 18px !important;
background: var(--alc-booking-card, #fff) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-head {
display: flex !important;
align-items: center !important;
gap: 22px !important;
padding: 2px 2px 14px !important;
border-bottom: 1px solid color-mix(in srgb, var(--alc-booking-border, #DED7CA) 70%, transparent) !important;
color: var(--foreground-base-brand, #6A3E82) !important;
font-family: var(--font-display-family, Signika, Inter, Arial, sans-serif) !important;
font-size: 19px !important;
font-weight: 800 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-head strong {
margin-right: auto !important;
font: inherit !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-grid {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 8px 0 !important;
padding-top: 14px !important;
text-align: center !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-grid b {
color: var(--alc-booking-ink, #484132) !important;
font-size: 12px !important;
font-weight: 900 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-grid span {
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
justify-self: center !important;
border-radius: 999px !important;
color: var(--foreground-base-brand, #6A3E82) !important;
font-size: 17px !important;
line-height: 1 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-calendar-grid span.is-selected {
background: var(--foreground-base-brand, #6A3E82) !important;
color: #fff !important;
font-weight: 900 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-editor-footer {
margin: 5px -16px -18px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a[data-custom],
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span[data-custom] {
padding-bottom: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a[data-custom]::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span[data-custom]::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td::after {
display: none !important;
content: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
width: auto !important;
height: auto !important;
border: 0 !important;
display: block !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 34px !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before {
content: "‹" !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
content: "›" !important;
}
/* =========================================================
Fase 40.86 - Correcciones sidebar reserva/calendario
- El sidebar deja de ser sticky para no cortar el calendario.
- Los precios del calendario vuelven a mostrarse sin solaparse.
- Flechas de mes sin heredar transform/background legacy.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-exp-sidebar {
position: static !important;
top: auto !important;
align-self: start !important;
max-height: none !important;
overflow: visible !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next {
float: none !important;
text-indent: 0 !important;
overflow: visible !important;
background: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
width: auto !important;
height: auto !important;
border: 0 !important;
display: block !important;
color: var(--foreground-base-brand, #6A3E82) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 34px !important;
line-height: 1 !important;
font-weight: 800 !important;
transform: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before {
content: "‹" !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
content: "›" !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar {
border-spacing: 0 11px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td {
height: 56px !important;
position: relative !important;
vertical-align: top !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span {
box-sizing: border-box !important;
width: 48px !important;
min-width: 48px !important;
height: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 0 !important;
border-radius: 14px !important;
white-space: nowrap !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a[data-custom],
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span[data-custom] {
padding-bottom: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a[data-custom]::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span[data-custom]::after {
content: attr(data-custom) !important;
display: block !important;
margin: 0 !important;
color: var(--alc-booking-muted, #84775D) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 9px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
transform: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a.ui-state-active[data-custom]::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td.ui-datepicker-current-day a[data-custom]::after {
color: rgba(255, 255, 255, .86) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td::after {
display: none !important;
content: "" !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td:has(a[data-custom])::after {
display: block !important;
width: 5px !important;
height: 5px !important;
left: 50% !important;
bottom: 1px !important;
border-radius: 999px !important;
background: #02b18a !important;
transform: translateX(-50%) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-datepicker-current-day::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-state-disabled::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.disabled::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.pasado::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-datepicker-other-month::after {
display: none !important;
}
/* =========================================================
Fase 40.87 - Experience dynamic hero + calendar cleanup
- El calendario del sidebar no muestra precios dentro de los días.
- Mantiene el punto de disponibilidad y corrige flechas con iconos reales.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar {
border-spacing: 0 8px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td {
height: 38px !important;
vertical-align: middle !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td a[data-custom]::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-calendar td span[data-custom]::after {
display: none !important;
content: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td:has(a[data-custom])::after {
display: block !important;
width: 5px !important;
height: 5px !important;
left: 50% !important;
bottom: 0 !important;
border-radius: 999px !important;
background: #02b18a !important;
transform: translateX(-50%) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-datepicker-current-day::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-state-disabled::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.disabled::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.pasado::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .datepicker tbody td.ui-datepicker-other-month::after {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next {
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
text-indent: 0 !important;
background: transparent !important;
transform: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev span,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next span {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
content: "" !important;
width: 11px !important;
height: 18px !important;
display: block !important;
border: 0 !important;
background: var(--foreground-base-brand, #6A3E82) !important;
transform: none !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-prev::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget .ui-datepicker-next::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* =========================================================
Fase 40.89 - Experience booking sin precio tachado
El sidebar de reserva solo debe mostrar el precio desde real del tour.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-booking-price-line del {
display: none !important;
}
/* =========================================================
Fase 40.90 - Experience booking languages logic
Reproduce legacy checkin_unico behaviour inside booking_sidebar.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel {
display: block !important;
color: var(--alc-booking-ink, #484132) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .main_tour,
.visual-layout-page[data-page-key="experience"] .alc-booking-main-tour {
margin: 0 !important;
padding: 2px 0 !important;
color: var(--alc-booking-muted, #84775D) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-main-tour img,
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .main_tour img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
border-radius: 12px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios {
display: block;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios .row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios .col {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios p[class^="linea_"],
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios p[class*=" linea_"] {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"] + label {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: 48px !important;
width: 100% !important;
margin: 0 !important;
padding: 11px 14px 11px 42px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border, #DED7CA) 78%, transparent) !important;
border-radius: 12px !important;
background: var(--alc-booking-card, #FFFFFF) !important;
color: var(--alc-booking-ink, #484132) !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
cursor: pointer !important;
box-shadow: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"] + label::before {
content: "" !important;
position: absolute !important;
left: 15px !important;
top: 50% !important;
width: 18px !important;
height: 18px !important;
transform: translateY(-50%) !important;
border: 2px solid color-mix(in srgb, var(--alc-booking-muted, #84775D) 72%, #fff) !important;
border-radius: 999px !important;
background: #fff !important;
box-sizing: border-box !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label {
border-color: var(--alc-booking-brand, #362145) !important;
background: color-mix(in srgb, var(--alc-booking-brand, #362145) 7%, #fff) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label::before {
border-color: var(--alc-booking-brand, #362145) !important;
background: radial-gradient(circle at center, var(--alc-booking-brand, #362145) 0 42%, #fff 45% 100%) !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:disabled + label {
opacity: .45 !important;
cursor: default !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios label small,
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios label .agotadas {
color: var(--alc-booking-muted, #84775D) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios br {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios label::after {
display: none !important;
}
/* =========================================================
Fase 40.91 - Experience booking compact time/language selectors
Ajuste visual del sidebar: horarios en grid compacto y selector de idiomas
sin radio circular visible, manteniendo inputs legacy para la lógica real.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px 12px !important;
align-items: stretch !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora .col-auto,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora .col-auto {
width: auto !important;
max-width: none !important;
flex: none !important;
padding: 0 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora p.with_info,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora p.with_info {
display: block !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"] {
position: absolute !important;
opacity: 0 !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
pointer-events: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"] + label {
box-sizing: border-box !important;
width: 100% !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 12px 8px !important;
border: 1px solid color-mix(in srgb, var(--alc-booking-border, #DED7CA) 78%, transparent) !important;
border-radius: 10px !important;
background: var(--alc-booking-card, #FFFFFF) !important;
color: #374151 !important;
font-family: var(--font-body-family, Inter, Arial, sans-serif) !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-align: center !important;
cursor: pointer !important;
box-shadow: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"]:checked + label {
border-color: #343434 !important;
background: #343434 !important;
color: #FFFFFF !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"]:disabled + label {
opacity: .45 !important;
cursor: default !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora label br,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora label .agotadas {
display: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"] + label {
min-height: 54px !important;
justify-content: flex-start !important;
padding: 14px 24px !important;
border-radius: 10px !important;
font-size: 18px !important;
line-height: 1.15 !important;
font-weight: 500 !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"] + label::before {
display: none !important;
content: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label {
border-color: #343434 !important;
background: #343434 !important;
color: #FFFFFF !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label::before {
display: none !important;
content: none !important;
}
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label small,
.visual-layout-page[data-page-key="experience"] .alc-booking-language-panel .hora.servicios input[name="servicio"]:checked + label .agotadas {
color: rgba(255,255,255,.78) !important;
}
@media (max-width: 420px) {
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* =========================================================
Fase 40.92 - Experience booking time selector without radio dots
Mantiene los inputs legacy para la lógica real, pero elimina los
círculos visuales heredados de Materialize en las horas del sidebar.
========================================================= */
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"] + label,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora input[name="hora"] + label {
padding-left: 8px !important;
}
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"] + label::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #wrapper_hora input[name="hora"] + label::after,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora input[name="hora"] + label::before,
.visual-layout-page[data-page-key="experience"] .alc-exp-booking-widget #template_hora input[name="hora"] + label::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
border: 0 !important;
opacity: 0 !important;
}
/* =========================================================
Fase 40.93 - Experience booking: force compact time grid
El formulario legacy cambia a un