/* ============== BASE ============== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
/* ============== NAV ============== */
#nav.scrolled {
background: rgba(246, 242, 231, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 rgba(15, 20, 17, 0.06);
}
/* Logo de Brote Studios */
.site-logo {
height: 38px;
width: auto;
display: block;
}
@media (min-width: 768px) {
.site-logo { height: 46px; }
}
.site-logo--footer { height: 50px; }
/* Sobre el hero oscuro (nav sin scroll) realzamos un poco el logo */
#nav:not(.scrolled) .site-logo {
filter: brightness(1.08) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
/* ============== HERO LAMP (full-screen, minimalista) ============== */
.hero-lamp {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 100vw;
min-height: 100vh;
margin: 0;
background: #050807;
color: #F6F2E7;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
}
/* Conos de luz con conic-gradient */
.hero-lamp-cone {
position: absolute;
top: 5.25rem;
height: 28rem;
width: 32rem;
z-index: 1;
pointer-events: none;
}
.hero-lamp-cone-left {
right: 50%;
background-image: conic-gradient(from 70deg at center top, rgba(212, 248, 122, 0.85), transparent, transparent);
mask-image: linear-gradient(to bottom, white 15%, transparent 85%);
-webkit-mask-image: linear-gradient(to bottom, white 15%, transparent 85%);
animation: heroLampCone 1.6s cubic-bezier(.2,.7,.2,1) 0.3s both;
transform-origin: top right;
}
.hero-lamp-cone-right {
left: 50%;
background-image: conic-gradient(from 290deg at center top, transparent, transparent, rgba(212, 248, 122, 0.85));
mask-image: linear-gradient(to bottom, white 15%, transparent 85%);
-webkit-mask-image: linear-gradient(to bottom, white 15%, transparent 85%);
animation: heroLampCone 1.6s cubic-bezier(.2,.7,.2,1) 0.3s both;
transform-origin: top left;
}
@keyframes heroLampCone {
from { opacity: 0.3; transform: scaleX(0.4); }
to { opacity: 1; transform: scaleX(1); }
}
/* Halo difuminado central */
.hero-lamp-glow {
position: absolute;
top: 3.25rem;
left: 50%;
transform: translateX(-50%);
width: 42rem;
height: 18rem;
background: #D4F87A;
opacity: 0.35;
filter: blur(110px);
border-radius: 50%;
z-index: 2;
pointer-events: none;
}
/* Bombita brillante */
.hero-lamp-bulb {
position: absolute;
top: 8.25rem;
left: 50%;
transform: translateX(-50%);
width: 20rem;
height: 10rem;
background: #E8FFB0;
opacity: 0.65;
filter: blur(60px);
border-radius: 50%;
z-index: 3;
animation: heroLampBulb 1.6s cubic-bezier(.2,.7,.2,1) 0.3s both;
pointer-events: none;
}
@keyframes heroLampBulb {
from { width: 8rem; opacity: 0.3; }
to { width: 20rem; opacity: 0.65; }
}
/* Línea/filamento horizontal */
.hero-lamp-line {
position: absolute;
top: 8.25rem;
left: 50%;
transform: translateX(-50%);
width: 32rem;
max-width: 80vw;
height: 2px;
background: linear-gradient(90deg, transparent, #D4F87A 25%, #FFFFFF 50%, #D4F87A 75%, transparent);
box-shadow: 0 0 20px #D4F87A, 0 0 40px rgba(212, 248, 122, 0.6);
border-radius: 999px;
z-index: 50;
animation: heroLampLine 1.6s cubic-bezier(.2,.7,.2,1) 0.3s both;
pointer-events: none;
}
@keyframes heroLampLine {
from { width: 12rem; opacity: 0.5; }
to { width: 32rem; opacity: 1; }
}
/* Tapa la parte de arriba para esconder el origen del cono */
.hero-lamp-top-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 7.25rem;
background: #050807;
z-index: 40;
pointer-events: none;
}
/* Contenido minimalista, debajo del lamp — flex grow para empujar marquee abajo */
.hero-lamp-content {
position: relative;
z-index: 60;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
width: 100%;
max-width: 100%;
padding: clamp(18rem, 38vh, 24rem) 1.5rem 3.5rem;
box-sizing: border-box;
}
.hero-lamp-content > * {
max-width: 640px;
}
.hero-lamp-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.9rem;
border-radius: 9999px;
background: rgba(212, 248, 122, 0.08);
border: 1px solid rgba(212, 248, 122, 0.18);
color: rgba(212, 248, 122, 0.9);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.02em;
backdrop-filter: blur(8px);
}
.hero-lamp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #D4F87A;
box-shadow: 0 0 12px #D4F87A;
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.hero-lamp-title {
margin-top: 1.25rem;
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #F6F2E7 30%, rgba(91, 102, 96, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-lamp-title em {
font-style: italic;
background: linear-gradient(180deg, #D4F87A 0%, #1F6A4E 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-lamp-subtitle {
margin-top: 1rem;
color: rgba(246, 242, 231, 0.55);
font-size: 0.92rem;
line-height: 1.55;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.hero-lamp-ctas {
margin-top: 2rem;
display: flex;
gap: 0.65rem;
justify-content: center;
flex-wrap: wrap;
}
.hero-lamp-cta-primary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.8rem 1.4rem;
border-radius: 9999px;
background: #D4F87A;
color: #0F1411;
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px -10px rgba(212, 248, 122, 0.45);
}
.hero-lamp-cta-primary:hover {
background: #E8FFB0;
transform: scale(1.03);
box-shadow: 0 0 0 4px rgba(212, 248, 122, 0.15), 0 12px 35px -10px rgba(212, 248, 122, 0.6);
}
.hero-lamp-cta-secondary {
display: inline-flex;
align-items: center;
padding: 0.8rem 1.4rem;
border-radius: 9999px;
background: rgba(246, 242, 231, 0.06);
border: 1px solid rgba(246, 242, 231, 0.15);
color: #F6F2E7;
font-weight: 500;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.3s ease;
}
.hero-lamp-cta-secondary:hover {
background: rgba(246, 242, 231, 0.12);
border-color: rgba(246, 242, 231, 0.25);
}
/* Marquee variante dark dentro del hero — ahora en flujo, no absolute */
.hero-lamp-marquee {
position: relative;
width: 100%;
padding: 1.1rem 0;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(212, 248, 122, 0.06);
overflow: hidden;
z-index: 70;
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
flex-shrink: 0;
}
.hero-lamp-marquee .marquee {
display: flex;
gap: 4rem;
color: rgba(246, 242, 231, 0.4);
font-size: 0.82rem;
white-space: nowrap;
font-weight: 500;
animation: scroll 40s linear infinite;
width: max-content;
}
/* ============== MOBILE UX REFINEMENTS (rebalanceo total) ============== */
/* === HERO LAMP mobile: lamp compacto + content centrado === */
@media (max-width: 768px) {
.hero-lamp { min-height: 100dvh; }
/* Lamp mucho más chico, posicionado arriba */
.hero-lamp-cone {
width: 14rem;
height: 12rem;
top: 4.25rem;
mask-image: linear-gradient(to bottom, white 20%, transparent 75%);
-webkit-mask-image: linear-gradient(to bottom, white 20%, transparent 75%);
}
.hero-lamp-glow {
width: 18rem;
height: 9rem;
top: 3rem;
opacity: 0.32;
filter: blur(70px);
}
.hero-lamp-bulb {
width: 8.5rem;
height: 5rem;
top: 6rem;
opacity: 0.55;
filter: blur(40px);
}
.hero-lamp-line {
top: 6rem;
width: 12.5rem;
}
.hero-lamp-top-cover { height: 5.5rem; }
/* Content centrado verticalmente, con espacio para CTAs visibles */
.hero-lamp-content {
justify-content: center;
padding: 8rem 1.25rem 5.5rem;
}
/* Tipografía y CTAs mobile-first */
.hero-lamp-badge {
font-size: 0.68rem;
padding: 0.4rem 0.8rem;
}
.hero-lamp-title {
font-size: 2.75rem;
line-height: 0.97;
letter-spacing: -0.025em;
margin-top: 1rem;
}
.hero-lamp-subtitle {
font-size: 0.875rem;
margin-top: 0.85rem;
line-height: 1.5;
max-width: 280px;
}
.hero-lamp-ctas {
margin-top: 1.5rem;
flex-direction: column;
gap: 0.5rem;
width: 100%;
max-width: 280px;
}
.hero-lamp-cta-primary,
.hero-lamp-cta-secondary {
width: 100%;
justify-content: center;
padding: 0.9rem 1.25rem;
}
/* Marquee con margin-bottom para no ser tapado por el bottom nav flotante */
.hero-lamp-marquee {
padding: 0.85rem 0;
margin-bottom: 4.5rem;
font-size: 0.75rem;
}
.hero-lamp-marquee .marquee {
font-size: 0.78rem;
gap: 2.5rem;
}
}
/* === DEVICE FRAME mobile: sin borde, full bleed === */
@media (max-width: 640px) {
.device-frame-wrapper {
padding: 0;
perspective: none;
}
.device-frame {
border-width: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
background: transparent;
transform: none !important;
}
.device-frame-inner {
border-radius: 0;
background: #F6F2E7;
box-shadow: none;
}
.device-frame::before { display: none; }
}
/* === SECCIONES: padding vertical comprimido === */
@media (max-width: 768px) {
#servicios,
#proceso,
#portfolio,
#precios,
#faq,
#contacto {
padding-top: 3.5rem !important;
padding-bottom: 3.5rem !important;
}
.scroll-entry {
padding: 2rem 1rem 1rem;
}
/* Headers compactos */
#servicios h2,
#proceso h2,
#portfolio h2,
#precios h2,
#faq h2,
#contacto h2 {
font-size: 2.25rem !important;
line-height: 1 !important;
}
}
/* === 3D SPOTLIGHT SECTION mobile: spline más chico, padding tight === */
@media (max-width: 768px) {
.spotlight-card {
border-radius: 22px;
min-height: auto;
}
.spotlight-card > div { gap: 0 !important; }
.spotlight-card .p-8 { padding: 1.5rem !important; }
.spline-stage { height: 240px; }
.loader-orb { width: 40px; height: 40px; }
}
/* === BENTO mobile: cards balanceadas, orb contenido === */
@media (max-width: 640px) {
.bento {
gap: 0.75rem;
grid-auto-rows: minmax(160px, auto);
}
.bento-card { padding: 1.5rem 1.5rem 1.25rem; }
.bento-card-featured,
.bento-card-dark {
grid-column: span 1;
padding: 1.75rem 1.5rem 1.5rem;
}
/* Orb mucho más chico y contenido en mobile */
.bento-bg-orb {
width: 10rem;
height: 10rem;
top: -25%;
right: -20%;
opacity: 0.5;
filter: blur(30px);
}
.bento-card-head {
margin-bottom: 0.85rem;
}
.bento-card > .bento-num:first-child {
top: 1.25rem;
right: 1.5rem;
}
.bento-icon {
font-size: 1.65rem;
margin-bottom: 0.5rem;
}
.bento-title {
font-size: 1.35rem;
line-height: 1.05;
}
.bento-card-featured .bento-title,
.bento-card-dark .bento-title {
font-size: 1.65rem;
}
.bento-desc {
font-size: 0.85rem;
line-height: 1.5;
}
.bento-list {
margin-top: 0.75rem;
gap: 0.3rem;
}
.bento-list li { font-size: 0.78rem; }
.bento-arrow {
width: 32px;
height: 32px;
bottom: 1rem;
right: 1rem;
font-size: 1rem;
}
.bento-tag { font-size: 0.6rem; padding: 0.25rem 0.6rem; }
}
/* === TIMELINE mobile: cards más compactas === */
@media (max-width: 768px) {
.timeline { padding-top: 1rem; }
.timeline-step { margin-bottom: 2rem; padding-left: 3rem; }
.timeline-card { padding: 1.25rem 1.5rem; }
.timeline-title { font-size: 1.5rem; }
.timeline-desc { font-size: 0.85rem; line-height: 1.55; }
.timeline-icon { font-size: 2rem; margin: 0.75rem 0 0.5rem; }
.timeline-day { font-size: 0.65rem; padding: 0.25rem 0.65rem; }
}
/* === HERO BLOBS legacy (no usados) === */
/* ============== NAV en hero oscuro (color flip cuando no scrolled) ============== */
#nav:not(.scrolled) nav a { color: rgba(246, 242, 231, 0.75); }
#nav:not(.scrolled) nav a:hover { color: #D4F87A; }
#nav:not(.scrolled) > div > div > a:first-child {
color: #F6F2E7;
}
#nav:not(.scrolled) > div > div > a:first-child .text-leaf {
color: #D4F87A;
}
#nav:not(.scrolled) a[href="#contacto"] {
background: #D4F87A;
color: #0F1411;
}
#nav:not(.scrolled) a[href="#contacto"]:hover {
background: #E8FFB0;
}
/* ============== HERO BLOBS (legacy, no usados) ============== */
.blob {
position: absolute;
border-radius: 9999px;
filter: blur(80px);
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.blob-1 {
width: 500px; height: 500px;
background: radial-gradient(circle, #D4F87A 0%, transparent 70%);
top: -100px; left: -150px;
animation: float 18s ease-in-out infinite;
}
.blob-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, #1F6A4E 0%, transparent 70%);
bottom: -100px; right: -100px;
opacity: 0.25;
animation: float 22s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.05); }
66% { transform: translate(-30px, 40px) scale(0.95); }
}
/* ============== MARQUEE ============== */
.marquee {
animation: scroll 40s linear infinite;
width: max-content;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ============== BROWSER WINDOW ============== */
.browser-window {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 0 rgba(15,20,17,0.06), 0 30px 60px -25px rgba(15,20,17,0.25);
border: 1px solid rgba(15,20,17,0.06);
}
.browser-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
background: #F1ECE0;
border-bottom: 1px solid rgba(15,20,17,0.06);
position: relative;
}
.browser-bar > span {
width: 11px; height: 11px;
border-radius: 50%;
background: #d4d4d4;
}
.browser-bar > span:nth-child(1) { background: #ff5f57; }
.browser-bar > span:nth-child(2) { background: #febc2e; }
.browser-bar > span:nth-child(3) { background: #28c840; }
.browser-url {
margin-left: 12px;
flex: 1;
text-align: center;
font-size: 11px;
color: rgba(15,20,17,0.5);
background: #fff;
padding: 4px 12px;
border-radius: 6px;
max-width: 70%;
margin-right: auto;
}
/* ============== SERVICE CARDS ============== */
.service-card {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.06);
transition: transform 0.4s cubic-bezier(.2,.7,.2,1),
box-shadow 0.4s cubic-bezier(.2,.7,.2,1);
position: relative;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 2px 0 rgba(15,20,17,0.06), 0 25px 50px -25px rgba(15,20,17,0.25);
}
.service-card-dark {
background: #0F1411;
color: #F6F2E7;
}
.service-card-dark ul li {
color: rgba(246, 242, 231, 0.7);
}
.service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: #F6F2E7;
font-size: 28px;
margin-bottom: 16px;
}
/* ============== BENTO GRID (Servicios redesigned) ============== */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 1rem;
}
@media (max-width: 1024px) {
.bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.bento { grid-template-columns: 1fr; }
}
.bento-span-2 { grid-column: span 2; }
@media (max-width: 640px) {
.bento-span-2 { grid-column: span 1; }
}
.bento-card {
position: relative;
display: flex;
flex-direction: column;
padding: 1.75rem;
background: #fff;
border-radius: 24px;
box-shadow: inset 0 0 0 1px rgba(15, 20, 17, 0.06);
transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s cubic-bezier(.2,.7,.2,1), border-color 0.45s;
overflow: hidden;
isolation: isolate;
}
.bento-card:hover {
transform: translateY(-6px);
box-shadow: inset 0 0 0 1px rgba(31, 106, 78, 0.25),
0 30px 60px -25px rgba(15, 20, 17, 0.2);
}
.bento-card:hover .bento-arrow {
background: #0F1411;
color: #D4F87A;
transform: translate(0, 0) rotate(-45deg);
}
.bento-card:hover .bento-icon { transform: scale(1.1) rotate(-3deg); }
.bento-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.bento-num {
font-family: 'Fraunces', serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(15, 20, 17, 0.35);
}
.bento-tag {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: rgba(212, 248, 122, 0.5);
color: #0F3D2E;
}
.bento-tag-dark {
background: rgba(212, 248, 122, 0.15);
color: #D4F87A;
border: 1px solid rgba(212, 248, 122, 0.25);
}
.bento-icon {
font-size: 2.2rem;
margin-bottom: 0.75rem;
width: fit-content;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.bento-card:not(.bento-card-head + .bento-icon) > .bento-num + .bento-icon { margin-top: 0; }
.bento-card > .bento-num:first-child {
position: absolute;
top: 1.5rem;
right: 1.75rem;
}
.bento-title {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
}
.bento-card-featured .bento-title,
.bento-card-dark .bento-title {
font-size: 2rem;
}
.bento-desc {
margin-top: 0.5rem;
color: rgba(91, 102, 96, 0.95);
font-size: 0.9rem;
line-height: 1.55;
flex: 1;
}
.bento-card-dark .bento-desc { color: rgba(246, 242, 231, 0.7); }
.bento-list {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bento-list li {
font-size: 0.82rem;
color: rgba(15, 20, 17, 0.75);
padding-left: 1.25rem;
position: relative;
}
.bento-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55rem;
width: 0.5rem;
height: 1px;
background: #1F6A4E;
}
.bento-card-dark .bento-list li { color: rgba(246, 242, 231, 0.7); }
.bento-card-dark .bento-list li::before { background: #D4F87A; }
.bento-arrow {
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(15, 20, 17, 0.06);
color: #0F1411;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.4s cubic-bezier(.2,.7,.2,1);
}
.bento-card-dark .bento-arrow {
background: rgba(212, 248, 122, 0.15);
color: #D4F87A;
}
/* Featured card (con orb decorativo) */
.bento-card-featured {
background: linear-gradient(135deg, #FDFAEF 0%, #F4ECD3 100%);
}
.bento-bg-orb {
position: absolute;
top: -30%;
right: -20%;
width: 18rem;
height: 18rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 248, 122, 0.4) 0%, transparent 70%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.bento-card-featured > * { position: relative; z-index: 1; }
/* Dark featured */
.bento-card-dark {
background: #0F1411;
color: #F6F2E7;
box-shadow: inset 0 0 0 1px rgba(212, 248, 122, 0.08);
}
.bento-card-dark:hover {
box-shadow: inset 0 0 0 1px rgba(212, 248, 122, 0.25),
0 30px 60px -25px rgba(15, 20, 17, 0.4);
}
.bento-noise {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(212, 248, 122, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(31, 106, 78, 0.15) 0%, transparent 40%);
z-index: 0;
pointer-events: none;
}
.bento-card-dark > * { position: relative; z-index: 1; }
.bento-card-dark .bento-num { color: rgba(246, 242, 231, 0.5); }
/* ============== TIMELINE PROCESO (zigzag vertical animado) ============== */
.timeline {
position: relative;
max-width: 980px;
margin: 0 auto;
padding-top: 2rem;
}
/* Rail central vertical */
.timeline-rail {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: rgba(212, 248, 122, 0.1);
transform: translateX(-50%);
}
.timeline-rail-progress {
width: 100%;
height: 0%;
background: linear-gradient(180deg, #D4F87A 0%, #1F6A4E 100%);
box-shadow: 0 0 24px rgba(212, 248, 122, 0.6);
border-radius: 999px;
transition: height 0.15s linear;
}
.timeline-step {
position: relative;
display: flex;
align-items: center;
min-height: 18rem;
margin-bottom: 3rem;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-step-left { justify-content: flex-start; }
.timeline-step-right { justify-content: flex-end; }
.timeline-card {
width: 45%;
background: rgba(246, 242, 231, 0.04);
border: 1px solid rgba(212, 248, 122, 0.1);
backdrop-filter: blur(8px);
border-radius: 24px;
padding: 2rem 2.25rem;
transition: all 0.5s cubic-bezier(.2,.7,.2,1);
}
.timeline-step:hover .timeline-card {
background: rgba(246, 242, 231, 0.07);
border-color: rgba(212, 248, 122, 0.35);
transform: translateY(-4px);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
}
.timeline-day {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.2em;
font-weight: 700;
color: #D4F87A;
padding: 0.3rem 0.8rem;
border-radius: 999px;
background: rgba(212, 248, 122, 0.1);
border: 1px solid rgba(212, 248, 122, 0.2);
}
.timeline-icon {
font-size: 2.5rem;
margin: 1rem 0 0.75rem;
color: #D4F87A;
}
.timeline-icon svg { width: 40px; height: 40px; }
.timeline-title {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: 0.6rem;
}
.timeline-desc {
color: rgba(246, 242, 231, 0.65);
font-size: 0.92rem;
line-height: 1.6;
}
/* Número gigante en el lado opuesto al card */
.timeline-num {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: 'Fraunces', serif;
font-size: 11rem;
font-weight: 600;
color: rgba(212, 248, 122, 0.06);
line-height: 0.9;
pointer-events: none;
user-select: none;
}
.timeline-step-left .timeline-num { right: 4%; }
.timeline-step-right .timeline-num { left: 4%; }
/* Punto en el rail central */
.timeline-dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #13392C;
border: 2px solid rgba(212, 248, 122, 0.3);
z-index: 3;
transition: all 0.5s cubic-bezier(.2,.7,.2,1);
}
.timeline-step.is-visible .timeline-dot {
background: #D4F87A;
border-color: #D4F87A;
box-shadow: 0 0 0 6px rgba(212, 248, 122, 0.15),
0 0 24px rgba(212, 248, 122, 0.7);
transform: translate(-50%, -50%) scale(1.15);
}
/* Conector lateral del card al rail */
.timeline-step-left .timeline-card::after,
.timeline-step-right .timeline-card::after {
content: '';
position: absolute;
top: 50%;
width: 8%;
height: 1px;
background: rgba(212, 248, 122, 0.2);
}
.timeline-step-left .timeline-card { position: relative; }
.timeline-step-right .timeline-card { position: relative; }
.timeline-step-left .timeline-card::after { right: -10%; }
.timeline-step-right .timeline-card::after { left: -10%; }
/* Mobile: timeline colapsa a single-column */
@media (max-width: 768px) {
.timeline-rail { left: 22px; }
.timeline-step { flex-direction: column; min-height: auto; margin-bottom: 2.5rem; padding-left: 3rem; }
.timeline-step-left,
.timeline-step-right { justify-content: flex-start; }
.timeline-card { width: 100%; padding: 1.5rem; }
.timeline-card::after { display: none !important; }
.timeline-dot { left: 22px; top: 2.5rem; transform: translate(-50%, 0); }
.timeline-step.is-visible .timeline-dot { transform: translate(-50%, 0) scale(1.15); }
.timeline-num { display: none; }
.timeline-title { font-size: 1.65rem; }
}
/* ============== PROCESS (legacy, no usado) ============== */
.process-step {
position: relative;
padding: 28px 24px;
border-radius: 20px;
background: rgba(246, 242, 231, 0.05);
border: 1px solid rgba(212, 248, 122, 0.15);
transition: all 0.4s ease;
}
.process-step:hover {
background: rgba(246, 242, 231, 0.08);
transform: translateY(-4px);
border-color: rgba(212, 248, 122, 0.4);
}
.step-num {
font-family: 'Fraunces', serif;
font-size: 64px;
font-weight: 600;
color: rgba(212, 248, 122, 0.15);
line-height: 1;
margin-bottom: 8px;
}
/* ============== PRICE CARDS ============== */
.price-card {
background: #fff;
border-radius: 24px;
padding: 36px 32px;
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.06);
position: relative;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.price-card:hover {
transform: translateY(-4px);
box-shadow: 0 2px 0 rgba(15,20,17,0.06), 0 30px 60px -25px rgba(15,20,17,0.2);
}
.price-card-featured {
background: #0F1411;
color: #F6F2E7;
box-shadow: 0 30px 60px -20px rgba(15,20,17,0.4);
transform: scale(1.02);
}
.price-card-featured:hover {
transform: scale(1.02) translateY(-4px);
}
/* ============== TESTIMONIALS ============== */
.testimonial {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.06);
transition: transform 0.4s ease;
}
.testimonial:hover {
transform: translateY(-4px);
}
/* ----- Agregar reseña (form) ----- */
.review-form-wrap {
display: none;
margin-top: 2.5rem;
}
.review-form-wrap.open {
display: block;
animation: reviewIn 0.35s ease;
}
@keyframes reviewIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.review-form {
background: #fff;
border-radius: 22px;
padding: 28px;
max-width: 640px;
margin: 0 auto;
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.06), 0 24px 60px -28px rgba(15,20,17,0.28);
}
.review-label {
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #5B6660;
margin-bottom: 0.4rem;
}
.review-input {
width: 100%;
padding: 0.7rem 0.9rem;
border-radius: 12px;
background: #F6F2E7;
border: 1px solid rgba(15,20,17,0.10);
font: inherit;
color: #0F1411;
transition: border-color 0.2s ease, background 0.2s ease;
}
.review-input::placeholder { color: rgba(15,20,17,0.4); }
.review-input:focus {
outline: none;
border-color: #1F6A4E;
background: #fff;
}
.review-x {
flex-shrink: 0;
width: 36px;
height: 36px;
display: grid;
place-content: center;
border-radius: 50%;
background: rgba(15,20,17,0.05);
border: none;
cursor: pointer;
color: #0F1411;
transition: all 0.2s ease;
}
.review-x:hover { background: rgba(15,20,17,0.12); transform: rotate(90deg); }
.review-x svg { width: 16px; height: 16px; }
.rating-stars { display: flex; gap: 4px; }
.rating-stars .star {
font-size: 1.9rem;
line-height: 1;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #D8D2C2;
transition: color 0.15s ease, transform 0.15s ease;
}
.rating-stars .star:hover { transform: scale(1.18); }
.rating-stars .star.on { color: #F5B301; }
/* ============== FAQ ============== */
.faq-item {
background: #fff;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.06);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.faq-item:hover {
box-shadow: inset 0 0 0 1px rgba(15,20,17,0.15);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-weight: 500;
font-size: 16px;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: #F6F2E7;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 400;
transition: transform 0.3s ease, background 0.3s ease;
flex-shrink: 0;
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
background: #D4F87A;
}
.faq-body {
padding: 0 24px 24px;
color: #5B6660;
line-height: 1.6;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============== REVEAL ANIMATION ============== */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============== PROJECT CARDS ============== */
.project-card .browser-window {
transition: transform 0.5s cubic-bezier(.2,.7,.2,1),
box-shadow 0.5s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .browser-window {
transform: translateY(-8px);
box-shadow: 0 2px 0 rgba(15,20,17,0.06), 0 40px 80px -30px rgba(15,20,17,0.35);
}
/* ----- Portfolio: tarjetas con captura de pantalla ----- */
a.project-card { display: block; color: inherit; text-decoration: none; }
.browser-body-shot {
position: relative;
padding: 0;
height: 300px;
overflow: hidden;
}
.browser-shot {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Overlay "Ver sitio" al pasar el mouse (solo en los que tienen link) */
.project-shot-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 14px;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(0deg, rgba(15,20,17,0.45) 0%, rgba(15,20,17,0) 55%);
pointer-events: none;
}
.project-link:hover .project-shot-overlay { opacity: 1; }
.project-shot-overlay span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
border-radius: 999px;
background: #D4F87A;
color: #0F1411;
font-size: 0.8rem;
font-weight: 600;
}
/* Badge "En marcha" */
.project-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: rgba(15,20,17,0.75);
color: #D4F87A;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* Placeholder temático para proyectos en marcha (se ve si falta la imagen) */
.project-fallback {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
text-align: center;
}
.project-fallback .pf-name {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.project-fallback .pf-tag {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
opacity: 0.7;
}
.project-fallback-pptw {
background: radial-gradient(120% 100% at 50% 0%, #2a1457 0%, #0d0b1a 100%);
color: #e9e0ff;
}
.project-fallback-pptw .pf-name {
background: linear-gradient(90deg, #b794f6, #7aa2ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.project-fallback-dev {
background: radial-gradient(120% 100% at 50% 0%, #1a2150 0%, #0a0e1f 100%);
color: #dfe4ff;
font-family: 'Inter', sans-serif;
}
.project-fallback-dev .pf-name { font-family: 'Inter', sans-serif; font-weight: 800; }
.project-fallback-dev .pf-accent { color: #6c63ff; }
@media (max-width: 768px) {
.browser-body-shot { height: 230px; }
.project-fallback .pf-name { font-size: 1.6rem; }
}
/* ============== 3D + SPOTLIGHT CARD ============== */
.spotlight-card {
position: relative;
background: #0A1F18;
background-image:
radial-gradient(at 0% 0%, rgba(31, 106, 78, 0.25) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(15, 57, 44, 0.4) 0px, transparent 50%);
border: 1px solid rgba(212, 248, 122, 0.08);
border-radius: 32px;
overflow: hidden;
min-height: 540px;
color: #F6F2E7;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}
/* Subtle grid pattern */
.spotlight-card::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(212, 248, 122, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 248, 122, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
z-index: 0;
}
/* Spotlight estático (Aceternity-style, fade-in al cargar) */
.spotlight-static {
position: absolute;
top: -30%;
left: -15%;
width: 70%;
height: 180%;
background: radial-gradient(
ellipse at center,
rgba(212, 248, 122, 0.18) 0%,
rgba(31, 106, 78, 0.08) 35%,
transparent 70%
);
filter: blur(60px);
opacity: 0;
transform: rotate(-35deg);
animation: spotlightFade 2.4s cubic-bezier(.2,.7,.2,1) 0.4s forwards;
pointer-events: none;
z-index: 0;
}
@keyframes spotlightFade {
from { opacity: 0; transform: translateX(-30%) rotate(-35deg); }
to { opacity: 1; transform: translateX(0) rotate(-35deg); }
}
/* Spotlight que sigue el cursor (ibelick-style) */
.spotlight-cursor {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(212, 248, 122, 0.22) 0%,
rgba(212, 248, 122, 0.08) 30%,
transparent 70%
);
filter: blur(40px);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
z-index: 1;
will-change: transform, left, top;
}
.spotlight-card:hover .spotlight-cursor { opacity: 1; }
/* Spline stage */
.spline-stage {
position: relative;
width: 100%;
height: 500px;
border-radius: 24px;
overflow: hidden;
}
.spline-stage spline-viewer {
width: 100% !important;
height: 100% !important;
display: block;
position: relative;
z-index: 2;
/* Robot blanco: desatura + brillo + leve contraste — mantiene el shading 3D */
filter: grayscale(1) brightness(2.1) contrast(0.92);
}
/* Tapa el logo "Built with Spline" */
.spline-mask {
position: absolute;
bottom: 10px;
right: 10px;
width: 150px;
height: 50px;
background: transparent;
z-index: 3;
pointer-events: none;
}
.spline-loader {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 1;
text-align: center;
}
.loader-orb {
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #D4F87A, #1F6A4E);
box-shadow: 0 0 60px rgba(212, 248, 122, 0.4);
animation: orbPulse 2s ease-in-out infinite;
}
@keyframes orbPulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.15); opacity: 1; }
}
@media (max-width: 1023px) {
.spline-stage { height: 380px; }
.spotlight-card { min-height: auto; }
}
/* ============== SCROLL ENTRY (título antes del device-frame) ============== */
.scroll-entry {
padding: 6rem 1rem 4rem;
text-align: center;
}
@media (max-width: 768px) {
.scroll-entry { padding: 3rem 1rem 2rem; }
}
/* ============== DEVICE FRAME ============== */
/* Contiene TODAS las secciones del sitio. Animación de entrada por scroll. */
.device-frame-wrapper {
padding: 0 1rem 6rem;
perspective: 2200px;
perspective-origin: 50% 0%;
}
@media (max-width: 768px) {
.device-frame-wrapper { padding: 0 0.5rem 3rem; }
}
.device-frame {
margin: 0 auto;
width: 100%;
max-width: 1440px;
border: 6px solid #13392C;
border-radius: 44px;
padding: 0.85rem;
background: linear-gradient(180deg, #0F3D2E 0%, #0A1F18 100%);
transform-style: preserve-3d;
transform-origin: center top;
transform: rotateX(16deg) scale(0.94);
will-change: transform;
box-shadow:
0 30px 80px -20px rgba(15, 20, 17, 0.35),
0 80px 160px -40px rgba(15, 20, 17, 0.25),
0 200px 200px -80px rgba(15, 20, 17, 0.15),
inset 0 0 0 1px rgba(212, 248, 122, 0.06);
position: relative;
}
/* Brillito en el borde superior tipo "pantalla encendida" */
.device-frame::before {
content: '';
position: absolute;
top: -3px;
left: 25%;
right: 25%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 248, 122, 0.6), transparent);
border-radius: 1px;
pointer-events: none;
}
.device-frame-inner {
border-radius: 36px;
overflow: hidden;
background: #F6F2E7;
position: relative;
box-shadow: inset 0 0 0 1px rgba(15, 20, 17, 0.04);
}
/* Las secciones internas no necesitan padding extra — ya lo tienen */
.device-frame-inner > section,
.device-frame-inner > div {
width: 100%;
}
@media (max-width: 768px) {
.device-frame {
border-width: 4px;
border-radius: 28px;
padding: 0.5rem;
}
.device-frame-inner {
border-radius: 22px;
}
}
/* Barra de progreso indicando el scroll de la animación */
.scroll-progress-label {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #5B6660;
font-weight: 600;
text-align: center;
margin-top: 0.5rem;
}
.scroll-progress {
width: 200px;
height: 4px;
background: rgba(15, 20, 17, 0.08);
border-radius: 999px;
overflow: hidden;
margin: 0 auto;
}
.scroll-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1F6A4E, #D4F87A);
border-radius: 999px;
transition: width 0.1s linear;
}
.scroll-frame-inner {
width: 100%;
height: 100%;
border-radius: 22px;
overflow: hidden;
background: #F6F2E7;
position: relative;
}
/* Featured project preview */
.featured-project {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FDF9EE 0%, #F0EAD8 100%);
}
.fp-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(15,20,17,0.06);
font-size: 11px;
}
.fp-dots { display: flex; gap: 6px; }
.fp-dots span {
width: 11px; height: 11px;
border-radius: 50%;
background: #d4d4d4;
}
.fp-dots span:nth-child(1) { background: #ff5f57; }
.fp-dots span:nth-child(2) { background: #febc2e; }
.fp-dots span:nth-child(3) { background: #28c840; }
.fp-url {
flex: 1;
text-align: center;
font-size: 11px;
color: rgba(15,20,17,0.55);
background: #fff;
padding: 5px 14px;
border-radius: 6px;
max-width: 60%;
margin: 0 auto;
}
.fp-actions { display: flex; align-items: center; gap: 6px; }
.fp-pill {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
background: #1F6A4E;
color: #D4F87A;
padding: 4px 10px;
border-radius: 999px;
}
.fp-content {
flex: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 2rem;
padding: 3rem 3rem;
align-items: center;
overflow: hidden;
}
.fp-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(31, 106, 78, 0.1);
color: #13392C;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
width: fit-content;
}
.fp-title {
font-family: 'Fraunces', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 600;
line-height: 1.02;
color: #0F1411;
margin-top: 1.25rem;
letter-spacing: -0.01em;
}
.fp-text {
margin-top: 1.25rem;
color: #5B6660;
font-size: 15px;
line-height: 1.6;
max-width: 90%;
}
.fp-buttons { margin-top: 1.75rem; display: flex; gap: 12px; flex-wrap: wrap; }
.fp-btn-primary {
background: #0F1411;
color: #F6F2E7;
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
}
.fp-btn-secondary {
background: #fff;
color: #0F1411;
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(15,20,17,0.1);
}
.fp-stats {
margin-top: 2.5rem;
display: flex;
gap: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(15,20,17,0.08);
}
.fp-stats > div { display: flex; flex-direction: column; }
.fp-stats strong {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 600;
color: #1F6A4E;
}
.fp-stats span {
font-size: 11px;
color: #5B6660;
margin-top: 2px;
}
.fp-right {
position: relative;
height: 100%;
min-height: 320px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 14px;
}
.fp-plant {
border-radius: 18px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px -10px rgba(15,20,17,0.2);
transition: transform 0.4s ease;
}
.fp-plant::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(31,106,78,0) 0%, rgba(31,106,78,0.15) 100%);
}
.fp-plant-1 {
background: linear-gradient(135deg, #B7E1A1 0%, #1F6A4E 100%);
background-image:
radial-gradient(circle at 30% 40%, #D4F87A 0%, transparent 50%),
linear-gradient(135deg, #B7E1A1 0%, #1F6A4E 100%);
}
.fp-plant-2 {
background: linear-gradient(135deg, #6BAE7B 0%, #13392C 100%);
background-image:
radial-gradient(circle at 70% 30%, #B7E1A1 0%, transparent 60%),
linear-gradient(135deg, #6BAE7B 0%, #13392C 100%);
}
.fp-plant-3 {
background: linear-gradient(135deg, #D4F87A 0%, #6BAE7B 100%);
background-image:
radial-gradient(circle at 40% 60%, #fff 0%, transparent 50%),
linear-gradient(135deg, #D4F87A 0%, #6BAE7B 100%);
}
.fp-plant-4 {
background: linear-gradient(135deg, #1F6A4E 0%, #0F1411 100%);
background-image:
radial-gradient(circle at 60% 30%, #1F6A4E 0%, transparent 60%),
linear-gradient(135deg, #6BAE7B 0%, #13392C 100%);
}
@media (max-width: 1024px) {
.fp-content {
grid-template-columns: 1fr;
padding: 2rem;
gap: 1.5rem;
}
.fp-right {
min-height: 200px;
}
.fp-text { max-width: 100%; }
}
@media (max-width: 768px) {
.scroll-showcase { padding: 3rem 0.5rem; }
.scroll-frame { height: 28rem; padding: 0.4rem; border-width: 3px; }
.fp-content { padding: 1.5rem; }
.fp-stats { flex-wrap: wrap; gap: 1rem; }
.fp-title { font-size: 1.75rem; }
.fp-right { display: none; }
}
/* ============== LAMP (Aceternity-style, adaptado) ============== */
.lamp-stage {
position: relative;
width: 100%;
height: 100%;
border-radius: 32px;
overflow: hidden;
background: #050807;
box-shadow:
0 30px 80px -20px rgba(15, 20, 17, 0.45),
inset 0 0 0 1px rgba(212, 248, 122, 0.06);
isolation: isolate;
}
/* Conos de luz (izquierdo y derecho) usando conic-gradient */
.lamp-cone {
position: absolute;
top: 0;
height: 14rem;
width: 18rem;
overflow: hidden;
}
.lamp-cone-left {
right: 50%;
background-image: conic-gradient(from 70deg at center top, #D4F87A, transparent, transparent);
animation: lampGrow 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both;
}
.lamp-cone-right {
left: 50%;
background-image: conic-gradient(from 290deg at center top, transparent, transparent, #D4F87A);
animation: lampGrow 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both;
}
@keyframes lampGrow {
from { opacity: 0.4; transform: scaleX(0.5); }
to { opacity: 1; transform: scaleX(1); }
}
/* Máscaras para fundir el cono con el fondo */
.lamp-cone-mask-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10rem;
background: #050807;
mask-image: linear-gradient(to top, white, transparent);
-webkit-mask-image: linear-gradient(to top, white, transparent);
}
.lamp-cone-left .lamp-cone-mask-side {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 10rem;
background: #050807;
mask-image: linear-gradient(to right, white, transparent);
-webkit-mask-image: linear-gradient(to right, white, transparent);
}
.lamp-cone-right .lamp-cone-mask-side {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 10rem;
background: #050807;
mask-image: linear-gradient(to left, white, transparent);
-webkit-mask-image: linear-gradient(to left, white, transparent);
}
/* Glow general (la "neblina" del lamp) */
.lamp-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 28rem;
height: 9rem;
background: #D4F87A;
opacity: 0.45;
filter: blur(60px);
border-radius: 50%;
z-index: 1;
}
/* Bombita brillante (el punto más brillante) */
.lamp-bulb {
position: absolute;
top: 12rem;
left: 50%;
transform: translate(-50%, -50%);
width: 16rem;
height: 9rem;
background: #E8FFB0;
opacity: 0.6;
filter: blur(50px);
border-radius: 50%;
animation: bulbGrow 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both;
z-index: 2;
}
@keyframes bulbGrow {
from { width: 8rem; opacity: 0.3; }
to { width: 16rem; opacity: 0.6; }
}
/* La línea del filamento (horizontal sprout) */
.lamp-line {
position: absolute;
top: 11.8rem;
left: 50%;
transform: translateX(-50%);
width: 18rem;
height: 2px;
background: linear-gradient(90deg, transparent, #D4F87A 20%, #D4F87A 80%, transparent);
box-shadow: 0 0 12px #D4F87A;
border-radius: 999px;
animation: lineGrow 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both;
z-index: 50;
}
@keyframes lineGrow {
from { width: 10rem; opacity: 0.5; }
to { width: 18rem; opacity: 1; }
}
/* Tapa la parte superior del cono para que se vea limpio */
.lamp-top-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2rem;
background: #050807;
z-index: 40;
}
/* Contenido iluminado abajo */
.lamp-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 1.5rem 2.5rem;
text-align: center;
z-index: 60;
}
/* ============== MOBILE BOTTOM NAV ============== */
.mobile-bottom-nav {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
gap: 0.15rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(15, 20, 17, 0.06);
border-radius: 999px;
box-shadow:
0 2px 0 rgba(15, 20, 17, 0.04),
0 20px 50px -10px rgba(15, 20, 17, 0.3),
0 30px 80px -20px rgba(15, 20, 17, 0.15);
z-index: 100;
max-width: calc(100vw - 1.5rem);
}
@media (max-width: 768px) {
.mobile-bottom-nav { display: flex; }
}
.mb-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.55rem 0.6rem 0.45rem;
border-radius: 999px;
color: #5B6660;
transition: color 0.3s ease, background 0.3s ease;
text-decoration: none;
min-width: 56px;
cursor: pointer;
}
.mb-item:hover { color: #1F6A4E; }
.mb-item.active {
color: #1F6A4E;
background: rgba(212, 248, 122, 0.18);
}
.mb-icon {
display: grid;
place-items: center;
width: 22px;
height: 22px;
}
.mb-icon svg {
width: 22px;
height: 22px;
stroke-width: 2;
}
.mb-item.active .mb-icon {
animation: iconBounce 0.7s cubic-bezier(.2,.7,.2,1);
}
.mb-label {
font-size: 9.5px;
font-weight: 700;
margin-top: 3px;
letter-spacing: 0.02em;
line-height: 1;
}
/* Línea animada inferior tipo InteractiveMenu (Aceternity vibe) */
.mb-item::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #1F6A4E;
border-radius: 999px;
transition: width 0.35s cubic-bezier(.2,.7,.2,1);
}
.mb-item.active::after { width: 60%; }
@keyframes iconBounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-0.35em); }
40% { transform: translateY(0); }
60% { transform: translateY(-0.12em); }
80% { transform: translateY(0); }
}
/* En mobile, dejamos espacio abajo para no tapar contenido con la barra */
@media (max-width: 768px) {
body { padding-bottom: 5rem; }
}
/* ============== RESPONSIVE TWEAKS ============== */
@media (max-width: 768px) {
.blob-1 { width: 300px; height: 300px; }
.blob-2 { width: 250px; height: 250px; }
.price-card-featured { transform: scale(1); }
.price-card-featured:hover { transform: translateY(-4px); }
}
/* ============== SERVICIOS (cards con imágenes que rotan en hover) ============== */
.svc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (max-width: 640px) {
.svc-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.svc-card {
position: relative;
display: flex;
flex-direction: column;
height: 320px;
padding: 1.5rem;
background: rgb(206, 227, 206);
border-radius: 28px;
box-shadow: inset 0 0 0 1px rgba(15, 20, 17, 0.06);
transition: transform 0.45s cubic-bezier(.2,.7,.2,1),
box-shadow 0.45s cubic-bezier(.2,.7,.2,1),
background 0.3s ease;
overflow: hidden;
isolation: isolate;
border: 2px solid rgb(0, 98, 0);
}
.svc-card:hover {
background: #ffffff;
transform: translateY(-6px);
box-shadow: inset 0 0 0 1px rgba(31, 106, 78, 0.22),
0 30px 60px -25px rgba(15, 20, 17, 0.22);
}
.svc-images {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.svc-img {
position: absolute;
width: 11rem;
height: 8rem;
object-fit: cover;
border-radius: 14px;
transition: transform 0.45s cubic-bezier(.2,.7,.2,1),
box-shadow 0.45s cubic-bezier(.2,.7,.2,1);
border: 2px solid rgb(0, 98, 0);
}
.svc-img-back {
transform: rotate(-6deg);
box-shadow: 0 8px 20px -8px rgba(15, 20, 17, 0.25);
}
.svc-img-front {
transform: rotate(4deg);
box-shadow: 0 14px 30px -10px rgba(15, 20, 17, 0.35);
}
.svc-card:hover .svc-img-back { transform: rotate(-11deg) scale(1.06) translateX(-10px); }
.svc-card:hover .svc-img-front { transform: rotate(7deg) scale(1.06) translateX(10px); }
.svc-title {
margin-top: auto;
font-family: 'Fraunces', serif;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
color: #0F1411;
}
.svc-tag {
margin-top: 0.25rem;
font-size: 0.82rem;
color: #5B6660;
}
/* Servicios mobile: tarjetas ajustadas al contenido (definido DESPUÉS del base
para que gane el override) y fotos más grandes, sin tanto vacío. */
@media (max-width: 640px) {
.svc-card { height: auto; min-height: 230px; padding: 1.25rem; }
.svc-images { min-height: 150px; margin-bottom: 0.85rem; }
.svc-img { width: 13rem; height: 9rem; }
}
/* ============== PRECIOS GLASSY (fondo blanco + anillo verde animado) ============== */
.precios-glass {
background: #ffffff;
color: #0F1411;
}
.pricing-shader {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
opacity: 0.85;
pointer-events: none;
background-color: white;
}
.precios-glass::after {
/* viñeta clara para fundir los bordes del anillo con el fondo blanco */
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(255, 255, 255, 0.85) 100%);
}
.price-glass-title {
background: linear-gradient(90deg, #0F1411 0%, #1F6A4E 60%, #2E8B63 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glass-pricing {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
align-items: stretch;
}
.glass-card {
flex: 1 1 280px;
max-width: 340px;
display: flex;
flex-direction: column;
padding: 2rem 1.75rem;
border-radius: 24px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
border: 1px solid rgba(15, 20, 17, 0.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 30px 60px -30px rgba(15, 20, 17, 0.25);
transition: transform 0.4s cubic-bezier(.2,.7,.2,1),
box-shadow 0.4s ease,
border-color 0.4s ease;
}
.glass-card:hover {
transform: translateY(-6px);
border-color: rgba(31, 106, 78, 0.35);
box-shadow: 0 40px 70px -30px rgba(15, 20, 17, 0.3);
}
.glass-card-popular {
position: relative;
border-color: rgba(31, 106, 78, 0.4);
box-shadow: 0 0 0 1px rgba(31, 106, 78, 0.18),
0 40px 80px -30px rgba(15, 20, 17, 0.35);
}
@media (min-width: 768px) {
.glass-card.glass-card-popular { transform: scale(1.05); }
.glass-card.glass-card-popular:hover { transform: scale(1.05) translateY(-6px); }
}
.glass-badge {
position: absolute;
top: -0.85rem;
right: 1.25rem;
padding: 0.3rem 0.8rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
background: #D4F87A;
color: #0F1411;
}
.glass-plan {
font-family: 'Fraunces', serif;
font-size: 2.6rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1;
}
.glass-sub {
color: #5B6660;
font-size: 0.95rem;
margin-top: 0.5rem;
}
.glass-price {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 1.5rem 0;
}
.glass-amount {
font-family: 'Fraunces', serif;
font-size: 2.8rem;
font-weight: 400;
letter-spacing: -0.02em;
}
.glass-per {
font-size: 0.82rem;
color: #5B6660;
}
.glass-divider {
height: 1px;
width: 100%;
margin-bottom: 1.25rem;
background: linear-gradient(90deg, transparent, rgba(15, 20, 17, 0.14) 50%, transparent);
}
.glass-features {
display: flex;
flex-direction: column;
gap: 0.6rem;
font-size: 0.9rem;
color: rgba(15, 20, 17, 0.85);
margin-bottom: 1.75rem;
flex: 1;
}
.glass-features li {
display: flex;
align-items: center;
gap: 0.6rem;
}
.glass-features svg {
color: #1F6A4E;
flex-shrink: 0;
}
/* ============== RIPPLE BUTTONS ============== */
.ripple-btn {
position: relative;
overflow: hidden;
isolation: isolate;
margin-top: auto;
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 14px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.92rem;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.ripple-btn:active { transform: scale(0.98); }
.ripple-btn-primary {
background: #D4F87A;
color: #0F1411;
}
.ripple-btn-primary:hover { background: #E4FF9A; }
.ripple-btn-secondary {
background: rgba(15, 20, 17, 0.04);
color: #0F1411;
border: 1px solid rgba(15, 20, 17, 0.18);
}
.ripple-btn-secondary:hover { background: rgba(15, 20, 17, 0.09); }
.ripple-label {
position: relative;
z-index: 1;
pointer-events: none;
}
.ripple-ink {
position: absolute;
z-index: 0;
border-radius: 50%;
transform: scale(0);
pointer-events: none;
background: rgba(15, 20, 17, 0.25);
animation: ripple-anim 0.6s ease-out forwards;
}
.ripple-btn-secondary .ripple-ink { background: rgba(15, 20, 17, 0.18); }
@keyframes ripple-anim {
to { transform: scale(1); opacity: 0; }
}
@media (max-width: 768px) {
.glass-plan { font-size: 2.3rem; }
.glass-amount { font-size: 2.4rem; }
}
/* === PRECIOS mobile: cards sólidas y compactas (no lavadas sobre el anillo) === */
@media (max-width: 640px) {
.precios-glass { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pricing-shader { opacity: 0.45; } /* anillo más sutil detrás de las cards */
.glass-pricing { gap: 1.5rem; }
.glass-card {
padding: 1.5rem 1.4rem;
border-radius: 20px;
background: #ffffff; /* sólida = texto nítido */
border-color: rgba(15, 20, 17, 0.12);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 16px 36px -22px rgba(15, 20, 17, 0.3);
}
.glass-card-popular {
border-color: rgba(31, 106, 78, 0.45);
box-shadow: 0 0 0 1.5px rgba(31, 106, 78, 0.35), 0 18px 40px -22px rgba(15, 20, 17, 0.35);
}
.glass-plan { font-size: 2rem; }
.glass-amount { font-size: 2.1rem; }
.glass-price { margin: 1rem 0; }
.glass-sub { font-size: 0.9rem; margin-top: 0.35rem; }
.glass-divider { margin-bottom: 1rem; }
.glass-features { margin-bottom: 1.25rem; gap: 0.5rem; font-size: 0.88rem; }
}
/* === CONTACTO mobile: caja menos voluminosa, columnas más juntas === */
@media (max-width: 640px) {
#contacto .rounded-3xl { padding: 1.5rem !important; border-radius: 22px; }
#contacto .grid { gap: 1.75rem !important; }
#contacto h2 { font-size: 2rem !important; line-height: 1.05 !important; }
}
@media (prefers-reduced-motion: reduce) {
.svc-img,
.svc-card:hover .svc-img-back,
.svc-card:hover .svc-img-front { transition: none; }
.ripple-ink { animation: none; display: none; }
}
/* ============== CHAT ASISTENTE (Brote) ============== */
.chat-widget {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 130;
font-family: 'Inter', system-ui, sans-serif;
}
/* Botón flotante (FAB) */
.chat-fab {
position: relative;
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
cursor: pointer;
background: #13392C;
color: #D4F87A;
box-shadow: 0 12px 30px -8px rgba(15, 20, 17, 0.5),
0 0 0 0 rgba(212, 248, 122, 0.5);
display: grid;
place-items: center;
transition: transform 0.3s cubic-bezier(.2,.7,.2,1), background 0.3s ease;
animation: chatPulse 2.8s ease-out infinite;
}
.chat-fab:hover { transform: scale(1.06); background: #1F6A4E; }
.chat-ic {
grid-area: 1 / 1;
width: 26px;
height: 26px;
transition: opacity 0.25s ease, transform 0.3s ease;
}
.chat-ic-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chat-widget.open .chat-ic-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chat-widget.open .chat-ic-close { opacity: 1; transform: rotate(0) scale(1); }
.chat-widget.open .chat-fab { animation: none; }
@keyframes chatPulse {
0% { box-shadow: 0 12px 30px -8px rgba(15,20,17,0.5), 0 0 0 0 rgba(212,248,122,0.45); }
70% { box-shadow: 0 12px 30px -8px rgba(15,20,17,0.5), 0 0 0 14px rgba(212,248,122,0); }
100% { box-shadow: 0 12px 30px -8px rgba(15,20,17,0.5), 0 0 0 0 rgba(212,248,122,0); }
}
/* Burbuja "nudge" */
.chat-nudge {
position: absolute;
right: 72px;
bottom: 12px;
white-space: nowrap;
background: #fff;
color: #0F1411;
font-size: 0.82rem;
font-weight: 600;
padding: 0.55rem 0.85rem;
border-radius: 14px 14px 4px 14px;
box-shadow: 0 10px 30px -10px rgba(15, 20, 17, 0.3);
border: 1px solid rgba(15, 20, 17, 0.06);
opacity: 0;
transform: translateX(8px) scale(0.96);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.chat-nudge.show { opacity: 1; transform: translateX(0) scale(1); }
.chat-widget.open .chat-nudge { opacity: 0 !important; pointer-events: none; }
/* Panel */
.chat-panel {
position: absolute;
right: 0;
bottom: 74px;
width: 370px;
max-width: calc(100vw - 3rem);
height: min(70vh, 560px);
display: flex;
flex-direction: column;
background: #F6F2E7;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(15, 20, 17, 0.45);
border: 1px solid rgba(15, 20, 17, 0.08);
opacity: 0;
transform: translateY(16px) scale(0.96);
transform-origin: bottom right;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.chat-widget.open .chat-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Header */
.chat-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1rem;
background: #13392C;
color: #F6F2E7;
}
.chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.25rem;
background: rgba(212, 248, 122, 0.18);
flex-shrink: 0;
}
.chat-head-meta { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.chat-head-meta strong { font-size: 0.95rem; }
.chat-status {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: rgba(246, 242, 231, 0.65);
margin-top: 2px;
}
.chat-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #D4F87A;
box-shadow: 0 0 8px rgba(212, 248, 122, 0.9);
animation: chatDot 1.6s ease-in-out infinite;
}
@keyframes chatDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.chat-close {
width: 32px;
height: 32px;
border: none;
background: rgba(246, 242, 231, 0.1);
color: #F6F2E7;
border-radius: 50%;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.2s ease;
flex-shrink: 0;
}
.chat-close:hover { background: rgba(246, 242, 231, 0.22); }
.chat-close svg { width: 16px; height: 16px; }
/* Body / mensajes */
.chat-body {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
scroll-behavior: smooth;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(15,20,17,0.15); border-radius: 999px; }
.chat-msg {
max-width: 85%;
padding: 0.65rem 0.85rem;
font-size: 0.88rem;
line-height: 1.45;
border-radius: 16px;
word-wrap: break-word;
animation: chatMsgIn 0.35s cubic-bezier(.2,.7,.2,1);
}
@keyframes chatMsgIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg a {
color: #1F6A4E;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.chat-msg.bot {
align-self: flex-start;
background: #fff;
color: #0F1411;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 10px -4px rgba(15, 20, 17, 0.12);
}
.chat-msg.user {
align-self: flex-end;
background: #1F6A4E;
color: #F6F2E7;
border-bottom-right-radius: 5px;
}
.chat-msg.user a { color: #D4F87A; }
.chat-msg strong { font-weight: 700; }
.chat-msg ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.chat-msg li { margin: 0.15rem 0; }
/* Indicador de "escribiendo" */
.chat-typing { display: flex; gap: 4px; padding: 0.7rem 0.9rem; }
.chat-typing span {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(15, 20, 17, 0.35);
animation: chatTyping 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatTyping {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* Quick replies */
.chat-quick {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 1rem 0.5rem;
}
.chat-quick:empty { display: none; }
.chat-chip {
border: 1px solid rgba(31, 106, 78, 0.3);
background: rgba(31, 106, 78, 0.06);
color: #1F6A4E;
font-size: 0.78rem;
font-weight: 600;
padding: 0.4rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
}
.chat-chip:hover { background: rgba(31, 106, 78, 0.14); transform: translateY(-1px); }
/* Input */
.chat-input {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem;
border-top: 1px solid rgba(15, 20, 17, 0.08);
background: #fff;
}
.chat-input input {
flex: 1;
border: none;
background: rgba(15, 20, 17, 0.05);
border-radius: 999px;
padding: 0.7rem 1rem;
font-size: 0.88rem;
color: #0F1411;
outline: none;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.chat-input input:focus {
background: #fff;
box-shadow: inset 0 0 0 2px rgba(31, 106, 78, 0.4);
}
.chat-send {
width: 42px;
height: 42px;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #D4F87A;
color: #0F1411;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.2s ease, transform 0.15s ease;
}
.chat-send:hover { background: #1F6A4E; color: #F6F2E7; }
.chat-send:active { transform: scale(0.94); }
.chat-send svg { width: 18px; height: 18px; }
/* Mobile: el FAB sube por encima del bottom-nav y el panel es bottom-sheet */
@media (max-width: 768px) {
.chat-widget { right: 1rem; bottom: 5.5rem; }
.chat-panel {
position: fixed;
right: 0.75rem;
left: 0.75rem;
bottom: 0.75rem;
top: auto;
width: auto;
max-width: none;
height: min(78vh, 600px);
}
}
@media (prefers-reduced-motion: reduce) {
.chat-fab { animation: none; }
.chat-msg, .chat-panel, .chat-nudge { animation: none; transition: opacity 0.2s ease; }
}
/* ============================================================
GALERÍA DISEÑOS 3D (modal)
============================================================ */
.d3-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.d3-modal.open { opacity: 1; visibility: visible; }
.d3-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 12, 10, 0.78);
backdrop-filter: blur(6px);
}
.d3-dialog {
position: relative;
width: min(1040px, 100%);
max-height: 90vh;
overflow-y: auto;
background: #0F1411;
color: #F6F2E7;
border: 1px solid rgba(212, 248, 122, 0.14);
border-radius: 28px;
box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
padding: 1.75rem;
transform: translateY(24px) scale(0.97);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.d3-modal.open .d3-dialog { transform: translateY(0) scale(1); opacity: 1; }
.d3-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.d3-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #D4F87A;
}
.d3-eyebrow span { display: inline-block; }
.d3-modal-title {
font-family: 'Fraunces', serif;
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 600;
line-height: 1.05;
margin-top: 0.5rem;
}
.d3-modal-sub {
margin-top: 0.5rem;
color: rgba(246, 242, 231, 0.6);
font-size: 0.95rem;
max-width: 38ch;
}
.d3-close {
flex-shrink: 0;
width: 42px;
height: 42px;
display: grid;
place-content: center;
border-radius: 50%;
background: rgba(246, 242, 231, 0.06);
border: 1px solid rgba(246, 242, 231, 0.12);
color: #F6F2E7;
cursor: pointer;
transition: all 0.2s ease;
}
.d3-close:hover { background: rgba(212, 248, 122, 0.15); color: #D4F87A; transform: rotate(90deg); }
.d3-close svg { width: 18px; height: 18px; }
.d3-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
}
.d3-card {
margin: 0;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(160deg, rgba(246, 242, 231, 0.05), rgba(246, 242, 231, 0.02));
border: 1px solid rgba(246, 242, 231, 0.08);
}
.d3-stage {
position: relative;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(120% 90% at 50% 0%, rgba(31, 106, 78, 0.18) 0%, transparent 60%),
linear-gradient(180deg, #141a16 0%, #0c100e 100%);
}
.d3-stage-mac {
background:
radial-gradient(120% 90% at 50% 30%, rgba(212, 248, 122, 0.10) 0%, transparent 55%),
linear-gradient(180deg, #1a211c 0%, #0c100e 100%);
}
.d3-stage-dark { background: #0a0d0b; }
.d3-cap {
padding: 1rem 1.1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
border-top: 1px solid rgba(246, 242, 231, 0.07);
}
.d3-cap strong { font-size: 0.95rem; font-weight: 600; color: #F6F2E7; }
.d3-cap span { font-size: 0.82rem; color: rgba(246, 242, 231, 0.55); line-height: 1.45; }
.d3-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(246, 242, 231, 0.08);
}
.d3-foot > span { color: rgba(246, 242, 231, 0.7); font-size: 0.98rem; }
.d3-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.3rem;
border-radius: 999px;
background: #D4F87A;
color: #0F1411;
font-weight: 600;
font-size: 0.92rem;
transition: all 0.2s ease;
}
.d3-cta:hover { background: #F6F2E7; transform: scale(1.03); }
/* ---------- Robot Spline (lazy) ---------- */
.d3-robot-stage spline-viewer { width: 100%; height: 100%; }
.d3-robot-loader {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.d3-robot-stage.loaded .d3-robot-loader { display: none; }
.d3-robot-mask {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 44px;
background: #0a0d0b;
z-index: 4;
pointer-events: none;
}
/* ============================================================
01 · MacBook Air 3D (CSS puro)
============================================================ */
.macbook-container { perspective: 600px; }
.macbook-inner { transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); }
.macbook-screen { transform-style: preserve-3d; transform-origin: bottom; }
.macbook-screen-face-one { transform: translateZ(2px); }
.macbook-body { transform-style: preserve-3d; transform-origin: top; transform: rotateX(-90deg); }
.macbook-body-face-one { transform-style: preserve-3d; transform: translateZ(-2px); }
.macbook-keyboard { transform-style: preserve-3d; }
.macbook-key {
width: 6px; height: 6px;
background: #444;
float: left;
margin: 1px;
border-radius: 2px;
box-shadow: 0 -2px 0 #222;
transform: translateZ(-2px);
}
.macbook-shadow { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); }
.custom-animate-rotate { animation: macRotate 7s linear infinite; }
.custom-animate-lid-screen { animation: macLidScreen 7s linear infinite; }
.custom-animate-lid-macbody { animation: macLidMacbody 7s linear infinite; }
.custom-animate-lid-keyboard-area { animation: macLidKeyboard 7s linear infinite; }
.custom-animate-screen-shade { animation: macScreenShade 7s linear infinite; }
.custom-animate-keys { animation: macKeys 7s linear infinite; }
.custom-animate-macbook-shadow { animation: macShadow 7s linear infinite; }
@keyframes macRotate {
0% { transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); }
5% { transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg); }
20% { transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg); }
25% { transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg); }
60% { transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg); }
65% { transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg); }
80% { transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg); }
85% { transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg); }
87% { transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg); }
100% { transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg); }
}
@keyframes macLidScreen {
0% { transform: rotateX(0deg); background-position: left bottom; }
5% { transform: rotateX(50deg); background-position: left bottom; }
20% { transform: rotateX(-90deg); background-position: -150px top; }
25% { transform: rotateX(15deg); background-position: left bottom; }
30% { transform: rotateX(-5deg); background-position: right top; }
38% { transform: rotateX(5deg); background-position: right top; }
48% { transform: rotateX(0deg); background-position: right top; }
90% { transform: rotateX(0deg); background-position: right top; }
100% { transform: rotateX(0deg); background-position: right center; }
}
@keyframes macLidMacbody {
0% { transform: rotateX(-90deg); }
50% { transform: rotateX(-90deg); }
100% { transform: rotateX(-90deg); }
}
@keyframes macLidKeyboard {
0% { background-color: #dfdfdf; }
50% { background-color: #bbb; }
100% { background-color: #dfdfdf; }
}
@keyframes macScreenShade {
0% { background-position: -20px 0px; }
5% { background-position: -40px 0px; }
20% { background-position: 200px 0; }
50% { background-position: -200px 0; }
80% { background-position: 0px 0px; }
85% { background-position: -30px 0; }
90% { background-position: -20px 0; }
100% { background-position: -20px 0px; }
}
@keyframes macKeys {
0% { box-shadow: 0 -2px 0 #222; }
5% { box-shadow: 1px -1px 0 #222; }
20% { box-shadow: -1px 1px 0 #222; }
25% { box-shadow: -1px 1px 0 #222; }
60% { box-shadow: -1px 1px 0 #222; }
80% { box-shadow: 0 -2px 0 #222; }
85% { box-shadow: 0 -2px 0 #222; }
87% { box-shadow: 0 -2px 0 #222; }
100% { box-shadow: 0 -2px 0 #222; }
}
@keyframes macShadow {
0% { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); }
5% { transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); }
20% { transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg); box-shadow: 0 0 50px 30px rgba(0,0,0,0.3); }
25% { transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg); box-shadow: 0 0 35px 15px rgba(0,0,0,0.1); }
60% { transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); }
100% { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); }
}
/* ============================================================
02 · Glass card 3D (hover tilt) — themed Brote
============================================================ */
.gcard { width: 250px; height: 290px; perspective: 1000px; }
.gcard-inner {
position: relative;
height: 100%;
border-radius: 50px;
background: linear-gradient(135deg, #13392C 0%, #0a0f0c 100%);
box-shadow: rgba(0,0,0,0.4) 0px 20px 40px -20px;
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
}
.gcard:hover .gcard-inner {
box-shadow: rgba(0,0,0,0.3) 30px 50px 25px -40px, rgba(0,0,0,0.1) 0px 25px 30px 0px;
transform: rotate3d(1, 1, 0, 30deg);
}
.gcard-glass {
position: absolute;
inset: 8px;
border-radius: 55px;
border-left: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
background: linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transform-style: preserve-3d;
transform: translate3d(0, 0, 25px);
}
.gcard-content {
position: absolute;
transform: translate3d(0, 0, 26px);
padding: 90px 28px 0;
}
.gcard-title { display: block; font-size: 20px; font-weight: 900; color: #fff; }
.gcard-text { display: block; margin-top: 18px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.78); }
.gcard-footer {
position: absolute;
bottom: 20px; left: 20px; right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform-style: preserve-3d;
transform: translate3d(0, 0, 26px);
}
.gcard-socials { display: flex; gap: 10px; transform-style: preserve-3d; }
.gcard-social {
display: grid;
place-content: center;
width: 30px; height: 30px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: rgba(0,0,0,0.5) 0px 7px 5px -5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.gcard-social svg { width: 16px; height: 16px; stroke: #0F1411; transition: stroke 0.2s ease; }
.gcard:hover .gcard-social {
box-shadow: rgba(0,0,0,0.2) -5px 20px 10px 0px;
transform: translate3d(0, 0, 50px);
}
.gcard:hover .gcard-social:nth-child(1) { transition-delay: 0.4s; }
.gcard:hover .gcard-social:nth-child(2) { transition-delay: 0.6s; }
.gcard:hover .gcard-social:nth-child(3) { transition-delay: 0.8s; }
.gcard-social:hover { background: #1F6A4E; }
.gcard-social:hover svg { stroke: #fff; }
.gcard-social:active { background: #D4F87A; }
.gcard-viewmore {
display: flex;
width: 40%;
align-items: center;
justify-content: flex-end;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.gcard-viewmore:hover { transform: translate3d(0, 0, 10px); }
.gcard-viewmore button { border: none; background: none; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
.gcard-viewmore svg { width: 16px; height: 16px; stroke: #fff; }
.gcard-circles { position: absolute; top: 0; right: 0; transform-style: preserve-3d; }
.gcard-circle {
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(212, 248, 122, 0.10);
box-shadow: rgba(100,100,111,0.2) -10px 10px 20px 0px;
transition: all 0.5s ease-in-out;
}
.gcard-c1 { width: 170px; top: 8px; right: 8px; transform: translate3d(0,0,20px); transition-delay: 0s; }
.gcard-c2 { width: 140px; top: 10px; right: 10px; transform: translate3d(0,0,40px); transition-delay: 0.4s; }
.gcard-c3 { width: 110px; top: 17px; right: 17px; transform: translate3d(0,0,60px); transition-delay: 0.8s; }
.gcard-c4 { width: 80px; top: 23px; right: 23px; transform: translate3d(0,0,80px); transition-delay: 1.2s; }
.gcard-badge {
position: absolute;
top: 30px; right: 30px;
display: grid;
place-content: center;
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
background: #D4F87A;
font-size: 22px;
box-shadow: rgba(100,100,111,0.2) -10px 10px 20px 0px;
transition: all 0.5s ease-in-out;
transform: translate3d(0, 0, 100px);
transition-delay: 1.6s;
}
.gcard:hover .gcard-badge { transform: translate3d(0, 0, 120px); }
/* ============================================================
04 · Hero futurista (parallax + scan + glitch) — vanilla
============================================================ */
.d3-futuro { perspective: 900px; }
.d3-futuro-img {
position: absolute;
inset: -8%;
background-size: cover;
background-position: center;
filter: saturate(0.85) contrast(1.05) brightness(0.7);
transform: scale(1.08);
transition: transform 0.25s ease-out;
will-change: transform;
}
.d3-futuro::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,13,11,0.2) 0%, rgba(10,13,11,0.75) 100%);
pointer-events: none;
}
.d3-futuro-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(212,248,122,0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(212,248,122,0.10) 1px, transparent 1px);
background-size: 28px 28px;
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.d3-futuro-scan {
position: absolute;
left: 0; right: 0;
height: 80px;
background: linear-gradient(180deg, transparent 0%, rgba(255, 40, 40, 0.35) 45%, rgba(255,80,80,0.9) 50%, rgba(255,40,40,0.35) 55%, transparent 100%);
box-shadow: 0 0 30px rgba(255, 40, 40, 0.5);
mix-blend-mode: screen;
animation: d3Scan 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes d3Scan {
0% { top: -20%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.d3-futuro-text {
position: relative;
z-index: 2;
text-align: center;
padding: 0 1.5rem;
pointer-events: none;
}
.d3-futuro-title {
font-family: 'Fraunces', serif;
text-transform: uppercase;
font-weight: 800;
font-size: clamp(1.4rem, 4vw, 2.1rem);
color: #fff;
line-height: 1.05;
position: relative;
text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.d3-futuro-title::before,
.d3-futuro-title::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0.7;
}
.d3-futuro-title::before { color: #D4F87A; animation: d3Glitch 3.5s infinite linear alternate; }
.d3-futuro-title::after { color: #ff3b3b; animation: d3Glitch 2.7s infinite linear alternate-reverse; }
@keyframes d3Glitch {
0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
93% { transform: translate(-2px, 1px); opacity: 0.7; }
95% { transform: translate(2px, -1px); opacity: 0.7; }
97% { transform: translate(-1px, 1px); opacity: 0.6; }
}
.d3-futuro-sub {
margin-top: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
font-weight: 700;
color: rgba(246,242,231,0.8);
}
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
.d3-modal { padding: 0; }
.d3-dialog {
max-height: 100vh;
height: 100%;
border-radius: 0;
padding: 1.25rem;
}
.d3-grid { grid-template-columns: 1fr; }
.d3-stage { height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
.custom-animate-rotate,
.custom-animate-lid-screen,
.custom-animate-lid-macbody,
.custom-animate-lid-keyboard-area,
.custom-animate-screen-shade,
.custom-animate-keys,
.custom-animate-macbook-shadow,
.d3-futuro-scan,
.d3-futuro-title::before,
.d3-futuro-title::after { animation: none; }
.d3-modal, .d3-dialog { transition: opacity 0.2s ease; }
}