*/
.ss-contact-box ul { display: flex; flex-direction: column; gap: .55rem; }
.ss-contact-box li {
display: flex; align-items: center; gap: .65rem;
font-size: .94rem; color: var(--ss-text-mid);
}
.ss-contact-box li svg {
width: 16px; height: 16px;
stroke: var(--ss-accent); fill: none; stroke-width: 2;
flex: 0 0 auto;
}
.ss-contact-box li a {
color: var(--ss-primary);
font-weight: 700;
transition: color var(--ss-t-fast) var(--ss-ease);
}
.ss-contact-box li a:hover { color: var(--ss-secondary); }
/* ============================================================
21 · FAQ
============================================================ */
.ss-faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: .6rem;
}
.ss-faq-item {
background: var(--ss-white);
border: 1px solid var(--ss-border-soft);
border-radius: var(--ss-r-md);
overflow: hidden;
transition: box-shadow var(--ss-t-base) var(--ss-ease),
border-color var(--ss-t-base) var(--ss-ease);
}
.ss-faq-item:hover { box-shadow: var(--ss-shadow-sm); }
.ss-faq-item.open { border-color: rgba(200,169,122,.5); box-shadow: var(--ss-shadow-sm); }
.ss-faq-btn {
width: 100%;
padding: 1.15rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: left;
background: transparent;
font-size: 1rem;
font-weight: 700;
color: var(--ss-primary);
letter-spacing: -.005em;
line-height: 1.4;
}
.ss-faq-chevron {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--ss-border-mid);
color: var(--ss-primary);
display: grid;
place-items: center;
flex: 0 0 auto;
transition: transform var(--ss-t-base) var(--ss-ease),
background var(--ss-t-base) var(--ss-ease),
color var(--ss-t-base) var(--ss-ease),
border-color var(--ss-t-base) var(--ss-ease);
}
.ss-faq-chevron svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.ss-faq-item.open .ss-faq-chevron {
transform: rotate(180deg);
background: var(--ss-accent);
color: var(--ss-primary);
border-color: var(--ss-accent);
}
.ss-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--ss-t-slow) var(--ss-ease);
}
.ss-faq-answer-inner {
padding: 0 1.5rem 1.35rem;
color: var(--ss-text-mid);
font-size: .95rem;
line-height: 1.65;
font-weight: 300;
}
/* ============================================================
22 · STICKY CTA
Estructura framework:
SiteName — Oferta exclusiva
============================================================ */
.ss-sticky {
position: fixed;
inset: auto 1rem 1rem 1rem;
z-index: 90;
background: var(--ss-primary);
background-image: var(--ss-grad-brand);
color: var(--ss-white);
border-radius: var(--ss-r-lg);
padding: 1rem 1.25rem 1rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--ss-shadow-lg);
max-width: 760px;
margin: 0 auto;
transform: translateY(140%);
opacity: 0;
transition: transform var(--ss-t-slow) var(--ss-ease-out),
opacity var(--ss-t-base) var(--ss-ease);
pointer-events: none;
}
.ss-sticky.visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.ss-sticky-text {
flex: 1;
font-size: .94rem;
line-height: 1.35;
font-weight: 400;
color: rgba(255,255,255,.85);
}
.ss-sticky-text > span:first-child {
display: inline;
color: var(--ss-white);
font-weight: 900;
letter-spacing: -.01em;
}
.ss-sticky-text strong {
display: block;
font-weight: 900;
font-size: 1rem;
letter-spacing: -.01em;
margin-bottom: .1rem;
color: var(--ss-white);
}
.ss-sticky-btn {
padding: .75rem 1.35rem;
border-radius: var(--ss-r-pill);
background: var(--ss-accent);
color: var(--ss-primary);
font-weight: 700;
font-size: .88rem;
letter-spacing: .02em;
flex: 0 0 auto;
transition: background var(--ss-t-fast) var(--ss-ease), transform var(--ss-t-fast) var(--ss-ease);
}
.ss-sticky-btn:hover { background: var(--ss-accent-hover); transform: translateY(-2px); }
.ss-sticky-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.12);
display: grid;
place-items: center;
color: rgba(255,255,255,.85);
flex: 0 0 auto;
transition: background var(--ss-t-fast) var(--ss-ease);
}
.ss-sticky-close:hover { background: rgba(255,255,255,.22); }
.ss-sticky-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
/* ============================================================
23 · FOOTER
============================================================ */
.ss-footer {
background: var(--ss-primary);
color: rgba(255,255,255,.78);
padding: 4rem 2rem 2rem;
font-family: var(--ss-font-body);
position: relative;
overflow: hidden;
}
.ss-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(200,169,122,.4) 50%, transparent 100%);
}
.ss-footer-inner {
max-width: var(--ss-container);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-footer-logo {
display: flex;
align-items: center;
gap: .85rem;
margin-bottom: 1.25rem;
}
.ss-footer-logo-mark {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(200,169,122,.18);
display: grid;
place-items: center;
color: var(--ss-accent);
flex: 0 0 auto;
}
.ss-footer-logo-mark svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.ss-footer-brand-name {
display: block;
color: var(--ss-white);
font-weight: 900;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .15em;
line-height: 1.1;
}
.ss-footer-brand-tag {
display: block;
font-family: var(--ss-font-script);
color: var(--ss-accent);
font-size: 1.05rem;
margin-top: 2px;
line-height: 1;
}
.ss-footer-desc {
font-size: .92rem;
line-height: 1.7;
color: rgba(255,255,255,.65);
margin-bottom: 1.25rem;
max-width: 360px;
}
/* Estructura framework:
*/
.ss-footer-contacts {
display: flex;
flex-direction: column;
gap: .5rem;
margin-bottom: 1rem;
}
.ss-footer-contacts > div {
font-size: .92rem;
color: rgba(255,255,255,.65);
line-height: 1.5;
}
.ss-footer-contacts a {
color: var(--ss-white);
font-weight: 700;
transition: color var(--ss-t-fast) var(--ss-ease);
}
.ss-footer-contacts a:hover { color: var(--ss-accent); }
.ss-footer-contacts svg { width: 14px; height: 14px; stroke: var(--ss-accent); fill: none; stroke-width: 2; }
.ss-footer-address {
font-size: .86rem;
color: rgba(255,255,255,.55) !important;
font-style: normal;
line-height: 1.6;
margin-top: .35rem;
}
.ss-footer-col h4 {
text-transform: uppercase;
color: var(--ss-accent);
font-size: .72rem;
letter-spacing: .22em;
font-weight: 900;
margin-bottom: 1.1rem;
}
.ss-footer-col ul {
display: flex;
flex-direction: column;
gap: .55rem;
}
.ss-footer-col a {
color: rgba(255,255,255,.65);
font-size: .92rem;
transition: color var(--ss-t-fast) var(--ss-ease), padding-left var(--ss-t-fast) var(--ss-ease);
}
.ss-footer-col a:hover {
color: var(--ss-white);
padding-left: .25rem;
}
/* Footer bottom — framework emite:
*/
.ss-footer-bottom {
max-width: var(--ss-container);
margin: 0 auto;
padding-top: 1.75rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: .82rem;
color: rgba(255,255,255,.45);
}
.ss-footer-copy { letter-spacing: .02em; margin: 0; }
.ss-footer-trust {
margin: 0;
letter-spacing: .02em;
display: inline-flex;
align-items: center;
gap: .35rem;
flex-wrap: wrap;
}
.ss-footer-trust a {
color: var(--ss-accent);
font-weight: 700;
transition: color var(--ss-t-fast) var(--ss-ease);
}
.ss-footer-trust a:hover { color: var(--ss-white); }
.ss-footer-trust span {
display: inline-flex;
align-items: center;
gap: .35rem;
}
.ss-footer-trust svg {
width: 14px; height: 14px;
stroke: var(--ss-accent); fill: none; stroke-width: 2;
}
/* ============================================================
24 · REVEAL ANIMATION
IMPORTANTE: el patrón base NO usa opacity:0 como estado inicial.
Eso causaba que el contenido quedara invisible en ambientes
donde el timeline de animaciones se pausa (preview iframes,
paint throttling, tabs en background, low-power mode).
Patrón a prueba de fallas:
• Base: VISIBLE siempre (opacity:1, sin transform inicial).
• .visible: dispara animación keyframe de entrada (transform + opacity).
• Si la animación nunca corre o se congela: contenido visible
(porque la base no lo oculta).
============================================================ */
.ss-reveal {
/* visible por defecto — nada que declarar */
}
.ss-reveal.visible {
animation: ssRevealIn .8s var(--ss-ease-out);
}
.ss-reveal.visible[data-delay="1"] { animation-delay: .08s; }
.ss-reveal.visible[data-delay="2"] { animation-delay: .16s; }
.ss-reveal.visible[data-delay="3"] { animation-delay: .24s; }
.ss-reveal.visible[data-delay="4"] { animation-delay: .32s; }
/* ============================================================
25 · KEYFRAMES
Los keyframes de entrada animan principalmente TRANSFORM.
El opacity 0→1 está presente para enriquecer la animación cuando
el timeline corre normalmente, pero el estado base SIEMPRE deja
los elementos visibles (opacity:1), así un timeline congelado
nunca produce contenido invisible.
============================================================ */
@keyframes ssUp {
0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes ssHeroIn {
0% { transform: translateY(28px); }
100% { transform: translateY(0); }
}
@keyframes ssRevealIn {
0% { transform: translateY(20px); }
100% { transform: translateY(0); }
}
@keyframes ssBounce {
0%, 100% { transform: translate(-50%, 0); opacity: .85; }
50% { transform: translate(-50%, 8px); opacity: 1; }
}
@keyframes ssFadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ssSpin {
to { transform: rotate(360deg); }
}
@keyframes ssShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ============================================================
26 · RESPONSIVE (mobile-first cascadia)
============================================================ */
/* ---- 1024px: tablet ---- */
@media (max-width: 1024px) {
.ss-section { padding: 5rem 1.75rem; }
.ss-identity-grid { gap: 3rem; }
.ss-form-grid { gap: 3rem; }
.ss-ritmo-grid { grid-template-columns: repeat(2, 1fr); }
.ss-diff-grid { grid-template-columns: repeat(2, 1fr); }
.ss-footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
.ss-footer-inner > :nth-child(4) { grid-column: 2 / -1; }
}
/* ---- 900px: grids interiores → 1 col ---- */
@media (max-width: 900px) {
.ss-identity-grid,
.ss-form-grid,
.ss-ti-grid { grid-template-columns: 1fr; }
/* .ss-rest-full / .ss-room-detail-body / .ss-rest-full-body
ahora son flex/grid distintos — colapso específico: */
.ss-rest-full { grid-template-columns: 1fr; gap: 1.75rem; }
.ss-rest-full-slider { aspect-ratio: 16 / 9; }
.ss-identity-copy .ss-section-title,
.ss-room-detail-name,
.ss-rest-full-name { text-align: left; }
.ss-img-wrap { aspect-ratio: 4/3; }
.ss-rooms-track .ss-room-slide { aspect-ratio: 4/3; }
.ss-room-detail-img-wrap { aspect-ratio: 16/9; }
.ss-section-head { margin-bottom: 2.5rem; }
.ss-strip-inner { gap: 1.5rem; }
.ss-stat-div { display: none; }
.ss-room-info { padding: 1.75rem; }
}
/* ---- 768px: navbar mobile ---- */
@media (max-width: 768px) {
.ss-nav-links {
position: fixed;
inset: 0;
background: var(--ss-white);
flex-direction: column;
justify-content: center;
align-items: center;
gap: .5rem;
transform: translateY(-100%);
transition: transform var(--ss-t-base) var(--ss-ease);
z-index: 99;
}
.ss-nav-links.open { transform: translateY(0); }
.ss-nav-links a {
color: var(--ss-primary) !important;
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -.015em;
padding: 1rem 1.5rem;
}
.ss-nav-links a.ss-nav-active::after {
left: 50%; right: auto;
transform: translateX(-50%);
width: 32px;
bottom: -2px;
}
.ss-nav-cta {
margin-top: 1rem;
font-size: 1rem;
padding: 1rem 2rem;
}
.ss-nav-toggle { display: flex; }
.ss-rest-full-body,
.ss-room-detail-body { gap: 1rem; }
.ss-form-card { padding: 2rem 1.5rem; }
.ss-form-row { grid-template-columns: 1fr; gap: 0; }
.ss-diff-grid { grid-template-columns: 1fr; }
.ss-amenities-grid { grid-template-columns: repeat(2, 1fr); }
.ss-ti-benefits-grid { grid-template-columns: 1fr; }
.ss-footer-inner {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.ss-footer-inner > :first-child { grid-column: 1 / -1; }
.ss-footer-inner > :nth-child(4) { grid-column: auto; }
.ss-footer-bottom { justify-content: center; text-align: center; }
.ss-hero { height: 55vh; min-height: 480px; }
.ss-hero--interior { height: 55vh; min-height: 420px; }
.ss-sticky {
padding: .85rem 1rem;
gap: .75rem;
inset: auto .5rem .5rem .5rem;
}
.ss-sticky-text { font-size: .82rem; }
.ss-sticky-text strong { font-size: .9rem; }
.ss-room-ribbon {
font-size: .64rem;
padding: .45rem .9rem .45rem .75rem;
top: 1rem;
left: 1rem;
letter-spacing: .14em;
}
}
/* ---- 480px: compact ---- */
@media (max-width: 480px) {
.ss-section { padding: 4rem 1.25rem; }
.ss-form-section { padding: 5rem 1.25rem 4rem; }
.ss-hero-content { padding: 0 1.25rem; }
.ss-hero-actions { flex-direction: column; width: 100%; }
.ss-hero-actions .ss-btn-primary,
.ss-hero-actions .ss-btn-outline { width: 100%; }
.ss-badges { gap: .35rem; }
.ss-badge { font-size: .7rem; padding: .4rem .75rem; }
.ss-strip-inner { gap: 1.25rem; }
.ss-stat-num { font-size: 1.65rem; }
.ss-ritmo-grid { grid-template-columns: 1fr; }
.ss-amenities-grid { grid-template-columns: 1fr; }
.ss-room-info { padding: 1.5rem 1.25rem; }
.ss-room-name { font-size: 1.5rem; }
.ss-room-specs { grid-template-columns: 1fr; padding: 1.25rem; }
.ss-form-card { padding: 1.5rem 1.25rem; }
.ss-form-card-title { font-size: 1.2rem; }
.ss-faq-btn { padding: 1rem 1.15rem; font-size: .95rem; }
.ss-faq-answer-inner { padding: 0 1.15rem 1.15rem; }
.ss-footer { padding: 3rem 1.25rem 1.5rem; }
.ss-footer-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.ss-footer-inner > :first-child,
.ss-footer-inner > :nth-child(4) { grid-column: auto; }
.ss-sticky {
flex-wrap: wrap;
padding: 1rem;
}
.ss-sticky-btn { flex: 1; text-align: center; }
}
/* ============================================================
27 · PRINT (sano por defecto)
============================================================ */
@media print {
.ss-navbar, .ss-sticky, .ss-hero-scroll { display: none !important; }
.ss-section { padding: 2rem 0; }
#ss-root { background: white; color: black; }
}
/* ============================================================
28 · REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
#ss-root *, .ss-footer *, .ss-navbar *, .ss-sticky * {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.ss-hero-scroll { animation: none; }
}
/* end of solaris-sat.css */