/* ============================================================ NEA INMOBILIARIO — sistema refinado v2 Negro · Amarillo #FBEA26 · Rojo #C01818 · Playfair + Inter Variantes de sitio se controlan con [data-*] en . ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* marca */ --k:#000; --w:#fff; --y:#FBEA26; --r:#C01818; --g1:#101010; --g2:#171717; --g3:#0a0a0a; --line:rgba(255,255,255,.10); --ink:rgba(255,255,255,.96); --ink-2:rgba(255,255,255,.80); --ink-3:rgba(255,255,255,.60); /* sombra sutil para textos sobre fotos/fondos variables */ --txt-shadow-soft:0 1px 2px rgba(0,0,0,.55); --txt-shadow-strong:0 2px 8px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.55); /* sistema de acento (lo reescribe [data-accent]) */ --accent:var(--y); /* color líder */ --accent-ink:var(--k); /* texto sobre el acento líder */ --accent-2:var(--r); /* color de acción / venta */ --accent-soft:rgba(251,234,38,.08); /* tipografía Las fuentes de emoji ('Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji') van al final del stack para que el browser caiga automáticamente a ellas cuando encuentra un caracter emoji que la fuente principal no tiene. */ --fs:'Playfair Display','Times New Roman',serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; --ff:'Inter',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; --fm:'IBM Plex Mono','SF Mono',ui-monospace,monospace,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; /* Forzar lining figures (números alineados a la base) en lugar de los "old-style" que Playfair Display trae por default. Aplica a toda la cascada — Inter ya viene con lining por default, así que no afecta. */ font-feature-settings:"lnum" 1, "kern" 1, "liga" 1; font-variant-numeric:lining-nums; /* layout */ --maxw:1320px; --pad:clamp(1.25rem,5vw,4.5rem); --sec:clamp(4.5rem,9vw,8rem); } /* ---- variantes de fondo ---- */ html[data-bg="calido"]{ --k:oklch(0.16 0.008 70); --g3:oklch(0.18 0.009 70); --g1:oklch(0.21 0.010 70); --g2:oklch(0.24 0.010 70); } /* ---- variantes de acento ---- */ html[data-accent="amarillo"]{ --accent:var(--y); --accent-ink:var(--k); --accent-2:var(--y); --accent-soft:rgba(251,234,38,.08); } html[data-accent="rojo"]{ --accent:var(--r); --accent-ink:var(--w); --accent-2:var(--r); --accent-soft:rgba(192,24,24,.10); } /* ---- variante de tipografía display ---- */ html[data-display="cormorant"]{ --fs:'Cormorant Garamond','Times New Roman',serif; } html{scroll-behavior:smooth} body{ background:var(--k);color:var(--ink); font-family:var(--ff);line-height:1.6;overflow-x:hidden; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv05"; } img{display:block;max-width:100%} a{color:inherit} em{font-style:italic;color:var(--accent)} html[data-accent="rojo"] em{color:var(--r)} ::selection{background:var(--accent);color:var(--accent-ink)} /* contenedor */ .wrap{max-width:var(--maxw);margin-inline:auto;width:100%} /* ---- eyebrow ---- */ .eyebrow{ display:inline-flex;align-items:center;gap:.85rem; font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase; color:var(--accent);margin-bottom:1.6rem; } html[data-accent="rojo"] .eyebrow{color:var(--r)} .eyebrow::before{content:'';width:32px;height:1px;background:currentColor;flex-shrink:0;opacity:.7} /* ---- títulos ---- */ .stitle{ font-family:var(--fs);font-weight:700;line-height:1.08; font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.01em; margin-bottom:1.1rem;text-wrap:balance; } html[data-display="cormorant"] .stitle{font-weight:700;letter-spacing:0} .ssub{ font-size:1.02rem;font-weight:300;color:var(--ink-2); max-width:54ch;line-height:1.8; } /* mono kicker (reemplaza emojis) */ .mono{font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase} /* ============================================================ NAV ============================================================ */ #nav{ position:fixed;inset:0 0 auto 0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:1.6rem var(--pad); transition:padding .4s ease,background .4s ease,border-color .4s ease; border-bottom:1px solid transparent; } #nav.s{ background:color-mix(in srgb,var(--k) 88%,transparent); backdrop-filter:blur(18px) saturate(1.2); padding:.9rem var(--pad); border-color:var(--line); } #nav>a{ flex:none;display:flex;align-items:center; /* ancho reservado para el logo: evita que el nav se reacomode cuando la imagen cambia de tamaño al scrollear */ width:160px;height:58px; transition:height .4s ease; } #nav.s>a{height:46px} .nlogo{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block} /* barra de progreso de scroll (debajo del nav) */ #navprogress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);z-index:201;overflow:hidden} #navprogress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .08s linear} html[data-accent="rojo"] #navprogress i{background:var(--r);box-shadow:0 0 10px var(--r)} .nlogo,.nlogo img{transition:height .4s ease} .nlinks{display:flex;gap:2.4rem;list-style:none;align-items:center} .nlinks a{ color:var(--ink-2);text-decoration:none; font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; transition:color .25s;position:relative; } .nlinks a:not(.ncta)::after{ content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px; background:var(--accent);transition:right .3s cubic-bezier(.16,1,.3,1); } .nlinks a:not(.ncta):hover{color:var(--w)} .nlinks a:not(.ncta):hover::after{right:0} .ncta{ background:var(--accent-2);color:var(--w)!important; padding:.6rem 1.4rem;font-weight:600;border-radius:8px; transition:background .25s,transform .25s; } .ncta:hover{background:color-mix(in srgb,var(--accent-2) 80%,#000);transform:translateY(-1px)} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;background:none;border:none;z-index:210} .hamburger span{display:block;width:24px;height:2px;background:var(--w);transition:transform .3s,opacity .3s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{ display:none;position:fixed;inset:0;z-index:205; background:color-mix(in srgb,var(--k) 97%,transparent);backdrop-filter:blur(8px); flex-direction:column;align-items:center;justify-content:center;gap:2rem; } .mobile-menu.open{display:flex} .mm-close{ position:absolute;top:1.2rem;right:1.2rem;z-index:220; width:48px;height:48px;background:rgba(255,255,255,.08); border:1px solid var(--line);color:var(--w); border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:1.3rem;font-family:inherit;line-height:1; transition:background .2s, border-color .2s, transform .2s; } .mm-close:hover{background:rgba(255,255,255,.18);border-color:var(--accent);transform:rotate(90deg)} .mobile-menu a{ color:var(--ink);text-decoration:none;font-size:1.6rem; font-family:var(--fs);font-weight:700;letter-spacing:.01em;transition:color .2s; } .mobile-menu a:hover{color:var(--accent)} .mobile-menu .mcta{ background:var(--accent-2);color:var(--w)!important; padding:.7rem 2rem;font-size:.95rem;font-family:var(--ff);font-weight:600; letter-spacing:.1em;text-transform:uppercase;border-radius:8px; } /* ============================================================ HERO ============================================================ */ #hero{ min-height:100svh;position:relative;display:flex;align-items:center; padding:8rem var(--pad) 5rem;overflow:hidden; } .hero-media{ position:absolute;inset:0;z-index:0;transform-origin:center;will-change:transform,filter; background-image:url('assets/hero.jpg'); background-size:cover;background-position:center center;background-repeat:no-repeat; background-color:#0c0c0c; } .hero-media image-slot{display:none} .hero-tint{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.32)} .hero-fade{position:absolute;inset:0;z-index:3;background:var(--k);opacity:0;pointer-events:none} .hero-vignette{ position:absolute;inset:0;z-index:2;pointer-events:none; background: /* Radial centrado: centro claro, oscuro hacia los bordes */ radial-gradient(ellipse 75% 95% at 50% 50%, transparent 25%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.78) 100%), /* Lateral izquierdo */ linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 22%, transparent 78%, rgba(0,0,0,.55) 100%), /* Fade arriba (para nav) y abajo (para hero CTAs) */ linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 25%), linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 20%); } .hgrid{ position:absolute;inset:0;z-index:2;pointer-events:none; background-image:linear-gradient(rgba(251,234,38,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(251,234,38,.022) 1px,transparent 1px); background-size:84px 84px;mask-image:linear-gradient(to bottom,black,transparent 80%); } .hn{ position:absolute;right:-3%;top:50%;transform:translateY(-50%); font-family:var(--fs);font-size:62vw;font-weight:900;line-height:.8; color:transparent;-webkit-text-stroke:1px rgba(251,234,38,.045); pointer-events:none;z-index:2;user-select:none; } html[data-accent="rojo"] .hn{-webkit-text-stroke-color:rgba(192,24,24,.10)} .hc{position:relative;z-index:4;max-width:720px;width:100%} .heyebrow-loc{ display:flex;align-items:center;gap:.8rem; font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase; color:var(--accent);margin-bottom:1.6rem; } html[data-accent="rojo"] .heyebrow-loc{color:var(--y)} .heyebrow-loc::before{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0} .htitle{ font-family:var(--fs);font-weight:700;line-height:1.04;letter-spacing:-.015em; font-size:clamp(2.6rem,6vw,5.4rem);margin-bottom:1.5rem;max-width:14ch; } /* "NEA" del hero en peso 900 — mayor presencia de marca */ .htitle em{ font-style:normal;color:var(--accent); font-weight:900;letter-spacing:-.018em; } .hsub{ font-size:1.08rem;font-weight:400;color:#f4f4f4;max-width:48ch;line-height:1.7;margin-bottom:2.6rem; text-shadow:var(--txt-shadow-strong); } /* textos sobre fotos / overlays - sombra suave para mejor legibilidad */ .hcred, .hcred .mono, .scrollhint, .heyebrow, .heyebrow-loc{ text-shadow:var(--txt-shadow-soft); } .pbadges span{ text-shadow:var(--txt-shadow-soft); } .mmap-tip, .mmap-tip *{ text-shadow:0 1px 2px rgba(0,0,0,.5); } /* refuerzo de contraste en textos terciarios */ .paddr, .pcount, .fdesc, .fcopy, .ful a, .mvbody, .sdesc, .tdesc, .step p, .modal-desc, .modal-addr, .psumm, .sd-text{ color:var(--ink-2); } .hbtns{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .hcred{ margin-top:2.6rem;display:flex;align-items:center;gap:.9rem; color:var(--ink-3); } .hcred .mono{color:var(--ink-3)} .hcred-sello{width:46px;height:46px;object-fit:contain;opacity:.9;flex-shrink:0} /* botones */ .bp{ display:inline-flex;align-items:center;gap:.6rem; background:var(--accent);color:var(--accent-ink); padding:.95rem 2.2rem;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;border:1px solid var(--accent);cursor:pointer;font-family:var(--ff);border-radius:8px; transition:background .25s,transform .25s,box-shadow .25s; } .bp:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--accent)} .bs{ display:inline-flex;align-items:center;gap:.6rem; border:1px solid rgba(255,255,255,.28);color:var(--w); padding:.95rem 2.2rem;font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;background:transparent;cursor:pointer;font-family:var(--ff);border-radius:8px; transition:border-color .25s,color .25s,background .25s; } .bs:hover{border-color:var(--accent);color:var(--accent)} .scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-3);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase} .scrollline{width:1px;height:52px;background:linear-gradient(to bottom,var(--accent),transparent);animation:pline 2.2s ease infinite} @keyframes pline{0%,100%{opacity:0;transform:scaleY(.3);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}} /* hero — featured card (variante split) */ .hero-feature{display:none} html[data-hero="split"] #hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center} html[data-hero="split"] .hero-feature{ display:block;position:relative;z-index:4; background:color-mix(in srgb,var(--g2) 80%,transparent); border:1px solid var(--line);backdrop-filter:blur(8px); } html[data-hero="split"] .hsub{max-width:40ch} .hf-media{aspect-ratio:4/3;position:relative;overflow:hidden} .hf-body{padding:1.4rem 1.6rem} .hf-tag{font-family:var(--fm);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem} .hf-title{font-family:var(--fs);font-size:1.3rem;font-weight:700;line-height:1.2;margin-bottom:.3rem} .hf-addr{font-size:.8rem;color:var(--ink-3)} .hf-link{margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);cursor:pointer} /* variante hero centrado */ html[data-hero="centrado"] #hero{text-align:center;justify-content:center} html[data-hero="centrado"] .hc{max-width:880px} html[data-hero="centrado"] .heyebrow-loc, html[data-hero="centrado"] .hbtns, html[data-hero="centrado"] .hcred{justify-content:center} html[data-hero="centrado"] .htitle{max-width:none;margin-inline:auto} html[data-hero="centrado"] .hsub{margin-inline:auto} html[data-hero="centrado"] .hero-vignette{background:radial-gradient(ellipse 90% 90% at 50% 50%,transparent 20%,rgba(0,0,0,.82) 100%),linear-gradient(to top,rgba(0,0,0,.7),transparent 40%)} /* ============================================================ STATS ============================================================ */ .statsbar{background:var(--accent);color:var(--accent-ink)} html[data-accent="rojo"] .statsbar{--accent-ink:#fff} .stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin-inline:auto} .stat{text-align:center;padding:2.4rem 1.5rem;position:relative} .stat+.stat::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:color-mix(in srgb,var(--accent-ink) 22%,transparent)} .stn{font-family:var(--fs);font-size:2.4rem;font-weight:700;line-height:1} .stl{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.66;margin-top:.45rem} /* ============================================================ SECCIONES ============================================================ */ section{padding:var(--sec) var(--pad)} .sechead{margin-bottom:3.5rem;max-width:var(--maxw);margin-inline:auto} /* ---- PROPIEDADES ---- */ #propiedades{background:var(--g3)} .toolbar{ max-width:var(--maxw);margin-inline:auto;margin-bottom:2.5rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.8rem 3rem; align-items:start; } .fgroup{display:flex;flex-direction:column;gap:.7rem;min-width:0} .fgroup.search {grid-column:1/-1;grid-row:1} .fgroup.op {grid-column:1;grid-row:2} .fgroup.tipo {grid-column:2;grid-row:2;justify-self:start;width:100%;max-width:640px} .fgroup.dorm {grid-column:1;grid-row:3} .fgroup.precio {grid-column:2;grid-row:3;justify-self:start} .fgroup.advanced-toggle {grid-column:1;grid-row:4;justify-self:start} .pcount{grid-column:2;grid-row:4;justify-self:end;align-self:end;font-family:var(--fm);font-size:.7rem;color:var(--ink-3);white-space:nowrap;margin-top:.4rem} /* boton "Filtros avanzados" */ .filters-more-btn{ display:inline-flex;align-items:center;gap:.55rem; background:transparent;border:1px solid var(--line);color:var(--ink-2); padding:.55rem 1.1rem;font-size:.72rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase; cursor:pointer;border-radius:8px;font-family:var(--ff); transition:border-color .18s, color .18s; } .filters-more-btn:hover{border-color:var(--ink-2);color:var(--w)} .filters-more-btn.open{border-color:var(--accent);color:var(--accent)} .fmore-chev{display:inline-block;transition:transform .25s;font-size:.7rem;line-height:1} .filters-more-btn.open .fmore-chev{transform:rotate(180deg)} .fmore-count{ display:inline-flex;align-items:center;justify-content:center; min-width:1.4rem;height:1.4rem;padding:0 .35rem; background:var(--accent);color:var(--accent-ink, #000); border-radius:999px;font-family:var(--fm);font-size:.66rem;font-weight:700; letter-spacing:0;text-transform:none; } /* panel de filtros avanzados */ .filters-advanced{ max-width:var(--maxw);margin-inline:auto;margin:-1.5rem auto 2.5rem; background:var(--bg-2,#161616);border:1px solid var(--line);border-radius:12px; overflow:hidden; animation:fadFade .22s ease; } @keyframes fadFade{from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)}} .fad-inner{padding:1.4rem 1.6rem 1.2rem;display:flex;flex-direction:column;gap:1.2rem} .fad-credit{padding-bottom:.8rem;border-bottom:1px solid var(--line)} .fad-check{ display:inline-flex;align-items:center;gap:.55rem; cursor:pointer;font-size:.92rem;color:var(--ink); } .fad-check input{width:auto;margin:0;cursor:pointer;accent-color:var(--accent)} .fad-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem 1.8rem} .fad-group-title{ font-family:var(--fm);font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);margin:0 0 .6rem; } .fad-chips{display:flex;flex-wrap:wrap;gap:.4rem} .fad-chip{ display:inline-flex;align-items:center;gap:.4rem; background:transparent;border:1px solid var(--line);color:var(--ink-2); padding:.4rem .75rem;border-radius:8px;cursor:pointer; font-size:.78rem;transition:all .15s;user-select:none; } .fad-chip input{display:none} .fad-chip i{ font-style:normal;font-family:var(--fm);font-size:.62rem; color:var(--ink-3);background:rgba(255,255,255,.04); padding:.06rem .35rem;border-radius:4px; } .fad-chip:hover{border-color:var(--ink-2);color:var(--w)} .fad-chip:has(input:checked){ background:var(--accent);border-color:var(--accent);color:var(--accent-ink, #000); } .fad-chip:has(input:checked) i{background:rgba(0,0,0,.18);color:var(--accent-ink, #000)} .fad-actions{display:flex;gap:.6rem;justify-content:flex-end;border-top:1px solid var(--line);padding-top:1rem} .fad-clear,.fad-close{ background:transparent;border:1px solid var(--line);color:var(--ink-2); padding:.55rem 1.1rem;border-radius:8px;cursor:pointer; font-family:var(--ff);font-size:.78rem;letter-spacing:.06em; text-transform:uppercase;font-weight:600;transition:all .18s; } .fad-clear:hover{border-color:var(--bad,#ef4444);color:var(--bad,#ef4444)} .fad-close:hover{border-color:var(--w);color:var(--w)} @media (max-width: 640px){ .fad-section{grid-template-columns:1fr} } /* search bar */ .fsearch-wrap{ position:relative;display:flex;align-items:center; background:transparent;border:1px solid var(--line);border-radius:8px; padding:.1rem .5rem;max-width:640px; } .fsearch-wrap:focus-within{border-color:var(--accent)} .fsearch-icon{font-size:.95rem;opacity:.55;padding:0 .3rem} .fsearch-input{ flex:1;background:transparent;border:none;color:var(--w); padding:.65rem .4rem;font-family:var(--ff);font-size:.92rem;outline:none;min-width:0; } .fsearch-input::placeholder{color:var(--ink-3)} .fsearch-input::-webkit-search-cancel-button{display:none} .fsearch-clear{ background:transparent;border:none;color:var(--ink-3);cursor:pointer; font-size:.95rem;padding:.3rem .55rem;border-radius:4px; } .fsearch-clear:hover{color:var(--w);background:rgba(255,255,255,.06)} .pcount b{color:var(--accent);font-weight:600} .flabel{font-family:var(--fm);font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} .frow{display:flex;gap:.5rem;flex-wrap:wrap} .frow.op-row{display:flex;flex-wrap:nowrap;gap:.5rem} .frow.tipo-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem} .op-btn,.fbtn{ background:transparent;border:1px solid var(--line);color:var(--ink-2); padding:.5rem 1.15rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; cursor:pointer;transition:all .22s;font-family:var(--ff);border-radius:8px; white-space:nowrap; } .op-btn:hover,.fbtn:hover{border-color:var(--ink-2);color:var(--w)} .fbtn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .op-btn.active{border-color:var(--w);color:var(--w)} .op-btn[data-op="venta"].active{border-color:var(--r);color:#fff;background:rgba(192,24,24,.16)} .op-btn[data-op="alquiler"].active{border-color:var(--y);color:var(--y);background:rgba(251,234,38,.10)} /* Range inputs (dormitorios / precio) */ .frange{display:flex;align-items:center;gap:.55rem} .rinput{ background:transparent;border:1px solid var(--line);color:var(--w); padding:.55rem .9rem;font-size:.72rem;font-weight:500;letter-spacing:.06em; font-family:var(--fm);border-radius:8px;width:6.4rem; transition:border-color .22s,background .22s; -moz-appearance:textfield; } .rinput-wide{width:9rem} .rinput::-webkit-outer-spin-button,.rinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .rinput::placeholder{color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:500} .rinput:hover{border-color:var(--ink-2)} .rinput:focus{outline:none;border-color:var(--w);background:rgba(255,255,255,.03)} .rdash{color:var(--ink-3);font-size:.85rem;user-select:none} /* Selector de moneda */ .curseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none;height:34px} .curbtn{background:transparent;border:0;color:var(--ink-2);padding:0 .8rem;font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:all .22s;min-width:44px;height:100%} .curbtn + .curbtn{border-left:1px solid var(--line)} .curbtn:hover{color:var(--w)} .curbtn.active{background:var(--accent);color:var(--accent-ink)} /* mapa */ /* Labels del mapa mas brillantes / legibles */ .nea-bright-labels{filter:brightness(1.7) contrast(1.15) saturate(1.1)} /* Newsletter — form de suscripcion */ .newsletter-form-wrap{ max-width:var(--maxw);margin:2.5rem auto 0;display:flex;justify-content:center; } .newsletter-form{ background:var(--bg-2,#161616);border:1px solid var(--line); border-radius:6px;padding:1.8rem 1.6rem;max-width:560px;width:100%;text-align:center; } .nl-title{ font-family:var(--fs);font-size:1.25rem;color:var(--w);margin:0 0 .5rem; } .nl-sub{ font-size:.88rem;color:var(--ink-2);line-height:1.5;margin:0 0 1.2rem; } .nl-row{ display:flex;gap:.5rem;max-width:440px;margin:0 auto;flex-wrap:wrap; } .nl-row input[type="email"]{ flex:1;min-width:200px;background:var(--bg-3,#1e1e1e);border:1px solid var(--line); color:var(--w);padding:.7rem .9rem;font-family:var(--ff);font-size:.92rem;border-radius:6px; } .nl-row input[type="email"]:focus{outline:none;border-color:var(--accent)} .nl-row button{ background:var(--accent);color:var(--accent-ink,#000);border:none; padding:.7rem 1.3rem;font-weight:700;font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;cursor:pointer;border-radius:6px;font-family:var(--ff); transition:transform .18s, filter .18s; } .nl-row button:hover{transform:translateY(-1px);filter:brightness(1.05)} .nl-row button:disabled{opacity:.6;cursor:wait} .nl-msg{margin:.9rem 0 0;padding:.65rem .9rem;border-radius:6px;font-size:.85rem;line-height:1.4;text-align:left} .nl-msg-ok{background:rgba(74,222,128,.1);color:var(--ok,#4ade80);border:1px solid rgba(74,222,128,.3)} .nl-msg-err{background:rgba(239,68,68,.1);color:var(--bad,#ef4444);border:1px solid rgba(239,68,68,.3)} .nl-disc{ font-size:.72rem;color:var(--ink-3);margin:1.2rem 0 0;line-height:1.5; } /* Mensaje "sitio caido" cuando Supabase no responde */ .site-down-msg{ grid-column:1/-1; text-align:center;padding:4rem 2rem; background:var(--bg-2,#161616);border:1px solid var(--line);border-radius:12px; max-width:560px;margin:0 auto; } .sd-icon{font-size:2.4rem;color:var(--accent);margin-bottom:.8rem;line-height:1} .sd-title{font-family:var(--fs);font-size:1.4rem;color:var(--w);margin:0 0 .8rem} .sd-text{color:var(--ink-2);font-size:.95rem;line-height:1.5;margin:0 0 1.6rem} .sd-cta{ display:inline-block;background:var(--accent);color:var(--accent-ink,#000); padding:.7rem 1.4rem;border-radius:8px;font-weight:700;font-size:.85rem; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; transition:transform .18s; } .sd-cta:hover{transform:translateY(-2px)} .propmap-wrap{max-width:var(--maxw);margin:0 auto 3rem;position:relative} .maplabel{font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem;display:flex;align-items:center;gap:1rem} .maplabel .legend{display:flex;gap:1.2rem;margin-left:auto} .maplabel .lg{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-2)} .maplabel .dot{width:9px;height:9px;border-radius:50%;display:inline-block} .maplabel .dot.v{background:var(--r)} .maplabel .dot.a{background:var(--y)} #propMap{height:460px;border:1px solid var(--line);background:#0c0c0c;border-radius:6px;overflow:hidden} /* grid de propiedades */ .pgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .pcard{ background:var(--g2);overflow:hidden;cursor:pointer;position:relative; border:1px solid transparent;border-radius:6px; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .3s; } .pcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px -20px rgba(0,0,0,.8)} .pcard.hidden{display:none} .pimg-wrap{aspect-ratio:4/3;overflow:hidden;position:relative;background:#0e0e0e} .pimg{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1);user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-webkit-touch-callout:none} .carousel img,.ms-card img,.cflow-slide img,.tm-stage img{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:auto} .pimg-wrap::after{content:'';position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:30%;min-width:110px;max-width:180px;aspect-ratio:104/30;background:url('assets/marca-agua.png') no-repeat center/contain;pointer-events:none;z-index:4;opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))} .pcard:hover .pimg{transform:scale(1.05)} .cprev,.cnext{position:absolute;top:50%;transform:translateY(-50%);z-index:6;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);color:#fff;width:34px;height:50px;font-size:1.3rem;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;display:flex;align-items:center;justify-content:center} .cprev{left:0} .cnext{right:0} .pcard:hover .cprev,.pcard:hover .cnext{opacity:1} .cprev:hover,.cnext:hover{background:rgba(0,0,0,.8)} .pbadges{position:absolute;top:.85rem;left:.85rem;display:flex;gap:.4rem;z-index:5} .bventa,.balquiler,.btype{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .6rem;border-radius:8px} .bventa{background:var(--r);color:#fff} .balquiler{background:var(--y);color:#000} .btype{background:rgba(0,0,0,.62);color:rgba(255,255,255,.9);font-weight:600;backdrop-filter:blur(4px)} .pbody{padding:1.5rem 1.5rem 1.7rem;position:relative} .ptitle{font-family:var(--fs);font-size:1.16rem;font-weight:700;line-height:1.25;margin-bottom:.4rem} .paddr{font-size:.78rem;color:var(--ink-3);margin-bottom:.85rem;display:flex;gap:.4rem;align-items:flex-start} .psumm{font-size:.84rem;color:var(--ink-2);line-height:1.65;margin-bottom:1.2rem} .plink{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s} html[data-accent="rojo"] .plink{color:var(--r)} .pcard:hover .plink{gap:.75rem} .pbody::after{content:'';position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)} .pcard:nth-child(even) .pbody::after{background:var(--accent-2)} .pcard:hover .pbody::after{transform:scaleX(1)} /* placeholder de foto (cuando no hay imagen real) */ .ph{ width:100%;height:100%;position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.6rem;text-align:center; background: repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px), #0e0e0e; color:var(--ink-3); } .ph .ph-k{font-family:var(--fm);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.32)} .ph .ph-mark{width:54px;height:54px;object-fit:contain;opacity:.5} /* card style: minimal */ html[data-cards="minimal"] .pcard{background:transparent;border-color:var(--line)} html[data-cards="minimal"] .pcard:hover{background:var(--g2)} html[data-cards="minimal"] .pbody{padding:1.4rem .2rem 1.6rem} html[data-cards="minimal"] .pbody::after{left:.2rem;right:.2rem} html[data-cards="minimal"] .pgrid{gap:2.4rem 2rem} .no-results{display:none;padding:4rem;text-align:center;color:var(--ink-3);font-size:.95rem;grid-column:1/-1;font-family:var(--fs)} .no-results.show{display:block} /* ---- NOSOTROS ---- */ #nosotros{background:var(--k)} .ngrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,6rem);align-items:center} .nwrap{position:relative} .nwrap image-slot{width:100%;aspect-ratio:4/5;--isl-bg:#101010} .nsello{width:104px;height:104px;object-fit:contain;flex:none;margin-left:auto;align-self:flex-start;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));pointer-events:none} /* Coverflow 3D — fotos equipo / local */ .cflow{ position:relative;width:100%;aspect-ratio:4/5; user-select:none;touch-action:pan-y; } .cflow-viewport{ position:absolute;inset:0; perspective:1500px;perspective-origin:50% 50%; overflow:hidden; } .cflow-stage{position:absolute;inset:0;transform-style:preserve-3d} .cflow-slide{ position:absolute;top:50%;left:50%; width:84%;aspect-ratio:4/5; margin-left:-42%;margin-top:-52.5%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.22,.61,.36,1), filter .55s ease,opacity .45s ease; cursor:pointer;will-change:transform; } .cflow-slide image-slot, .cflow-slide > img, .cflow-slide .cflow-ph{ width:100%;height:100%;display:block; --isl-bg:#0d0d0d;border-radius:6px;overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4); object-fit:cover; } .cflow-ph{ background:#0e0e0e; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.8rem;color:rgba(255,255,255,.32); border:1px dashed rgba(255,255,255,.10); font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; text-align:center;padding:1rem; } .cflow-ph-ico{font-size:2.4rem;line-height:1;color:rgba(255,255,255,.18)} .cflow-ph-lbl{max-width:80%} .cflow-slide:not(.is-active){filter:brightness(.55) saturate(.85)} .cflow-slide.is-active{filter:none;z-index:5} .cflow-slide.is-hidden{opacity:0;pointer-events:none} .cflow-slide:not(.is-active) image-slot{pointer-events:none} .cflow-nav{ position:absolute;top:50%;transform:translateY(-50%); width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:var(--w);font-size:1.4rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; z-index:25;transition:all .22s;font-family:var(--ff); } .cflow-nav:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent} .cflow-prev{left:-1.2rem} .cflow-next{right:-1.2rem} .cflow-dots{ position:absolute;left:50%;bottom:-1.8rem;transform:translateX(-50%); display:flex;gap:.5rem;z-index:20; } .cfdot{ width:7px;height:7px;border-radius:50%;padding:0; background:rgba(255,255,255,.22);border:0;cursor:pointer; transition:transform .22s, background .22s; } .cfdot:hover{background:rgba(255,255,255,.5)} .cfdot.on{background:var(--accent);transform:scale(1.35)} .nhead{display:flex;align-items:flex-start;gap:1.4rem;margin-bottom:1.2rem} .mvstack{display:flex;flex-direction:column;gap:1.4rem;margin-top:2.4rem} .mvblock{padding:1.6rem 1.7rem;border-left:3px solid var(--accent);background:var(--accent-soft)} .mvblock.alt{border-left-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 6%,transparent)} .mvtag{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem} .mvblock.alt .mvtag{color:var(--accent-2)} .mvbody{font-size:.9rem;color:var(--ink-2);line-height:1.8} .mvbody strong{color:var(--w);font-weight:600} /* ---- SERVICIOS ---- */ #servicios{background:var(--g1)} .sgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0} .scard{background:var(--g1);padding:2.8rem 2.3rem;position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:background .35s} .scard:hover{background:var(--g2)} .scard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)} .scard:nth-child(even)::after{background:var(--accent-2)} .scard:hover::after{transform:scaleX(1)} .snum{font-family:var(--fs);font-size:2.4rem;font-weight:700;line-height:1;color:var(--accent);opacity:.9;margin-bottom:1.6rem} .scard:nth-child(even) .snum{color:var(--accent-2)} .sico{display:none;font-size:2rem;margin-bottom:1rem} .stcard{font-family:var(--fs);font-size:1.4rem;font-weight:700;line-height:1.2;margin-bottom:.8rem} .sdesc{font-size:.85rem;color:var(--ink-2);line-height:1.75} /* iconos emoji opcional */ html[data-icons="emoji"] .sico{display:block} html[data-icons="emoji"] .snum{font-size:.66rem;font-family:var(--fm);letter-spacing:.2em;margin-bottom:1.1rem;opacity:1} /* ---- TASACIONES ---- */ #tasaciones{background:var(--k)} .tgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:1rem} .tcard{padding:2.4rem 2rem;border:1px solid var(--line);border-top:2px solid var(--accent);background:var(--g3);transition:transform .35s,border-color .3s} .tcard:hover{transform:translateY(-4px)} .tnum{font-family:var(--fm);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem} .ttitle{font-family:var(--fs);font-size:1.3rem;font-weight:700;margin-bottom:.7rem} .tdesc{font-size:.85rem;color:var(--ink-2);line-height:1.75} .center-cta{max-width:var(--maxw);margin:3.5rem auto 0;text-align:center} /* ---- PROPIETARIOS ---- */ #propietarios{background:var(--g1)} .stepgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;margin-top:1rem} .step{padding:1.7rem 1.8rem;background:var(--g2);border-top:2px solid var(--accent);position:relative} .step:nth-child(even){border-top-color:var(--accent-2)} .step-n{font-family:var(--fs);font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1;margin-bottom:.9rem} .step:nth-child(even) .step-n{color:var(--accent-2)} .step p{font-size:.88rem;color:var(--ink-2);line-height:1.7} .step strong{color:var(--w);font-weight:600;display:block;margin-bottom:.25rem;font-size:.92rem} /* ---- TESTIMONIOS ---- */ #testimonios{background:var(--k)} .tmgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem} .tm{padding:2.4rem 2.2rem;background:var(--g2);border:1px solid var(--line);display:flex;flex-direction:column;gap:1.4rem;position:relative;overflow:hidden} .tm::before{content:'\201C';position:absolute;top:-1.2rem;right:1rem;font-family:var(--fs);font-size:7rem;line-height:1;color:var(--accent);opacity:.12} .tm-stars{display:flex;gap:.2rem;color:var(--accent)} html[data-accent="rojo"] .tm-stars{color:var(--r)} .tm-stars span{font-size:.95rem} .tm-quote{font-family:var(--fs);font-size:1.12rem;font-weight:500;font-style:italic;line-height:1.55;color:var(--ink);flex:1} .tm-who{display:flex;align-items:center;gap:.9rem;border-top:1px solid var(--line);padding-top:1.2rem} .tm-av{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--fs);font-weight:700;font-size:1.05rem;flex-shrink:0} .tm-name{font-size:.9rem;font-weight:600;color:var(--w)} .tm-meta{font-size:.72rem;color:var(--ink-3);margin-top:.1rem} /* ---- CONTACTO ---- */ #contacto{background:var(--g1)} .cgrid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;margin-top:1rem} .cinfo{display:flex;flex-direction:column;gap:1.8rem} .citem{display:flex;gap:1.2rem;align-items:flex-start} .cicon{width:46px;height:46px;flex-shrink:0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;color:var(--accent);text-transform:uppercase} html[data-accent="rojo"] .cicon{color:var(--r)} .clabel{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem} html[data-accent="rojo"] .clabel{color:var(--r)} .cval{font-size:.95rem;color:var(--ink);line-height:1.5} .cval a{text-decoration:none;transition:color .25s} .cval a:hover{color:var(--accent)} .chours{margin-top:.5rem;padding-top:1.6rem;border-top:1px solid var(--line)} .cform{display:flex;flex-direction:column;gap:1rem} .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fg{display:flex;flex-direction:column;gap:.4rem} .fg label{font-family:var(--fm);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .fg input,.fg select,.fg textarea{ background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--w); padding:.85rem 1rem;font-size:.9rem;font-family:var(--ff);outline:none;resize:none; transition:border-color .25s,background .25s;-webkit-appearance:none;border-radius:0; } .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.05)} .fg select option{background:#1a1a1a} .fsubmit{ background:#25D366;color:#fff;border:none;padding:1rem; font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; cursor:pointer;transition:background .25s,transform .25s;margin-top:.4rem;width:100%; display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--ff);border-radius:8px; } .fsubmit:hover{background:#1db955;transform:translateY(-2px)} /* ============================================================ FOOTER ============================================================ */ footer{background:#050505;padding:4.5rem var(--pad) 2.2rem;border-top:1px solid var(--line)} .ftop{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line)} .fli{height:38px;width:auto;margin-bottom:1.2rem} .fdesc{font-size:.82rem;color:var(--ink-3);line-height:1.75;max-width:300px} .fcred{margin-top:1.3rem;display:flex;flex-direction:column;gap:.3rem} .fcred .k{font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-top:.5rem} .fcred .v{font-size:.82rem;color:var(--ink-2);font-weight:500} .fctitle{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.3rem} html[data-accent="rojo"] .fctitle{color:var(--r)} .ful{list-style:none;display:flex;flex-direction:column;gap:.6rem} .ful a{font-size:.84rem;color:var(--ink-3);text-decoration:none;transition:color .25s} .ful a:hover{color:var(--accent)} .fbot{max-width:var(--maxw);margin:0 auto;padding-top:1.6rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .fcopy{font-size:.72rem;color:var(--ink-3)} /* ============================================================ MODAL + CARRUSEL ============================================================ */ .modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s} .modal-overlay.open{opacity:1;pointer-events:all} .modal{background:var(--g1);max-width:860px;width:100%;max-height:92vh;overflow-y:auto;position:relative;border:1px solid var(--line)} .modal-close{position:absolute;top:1rem;right:1rem;z-index:10;background:rgba(0,0,0,.6);border:1px solid var(--line);color:#fff;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:background .2s} .modal-close:hover{background:var(--r)} .carousel{position:relative;background:#0a0a0a;aspect-ratio:16/10;overflow:hidden} .carousel-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)} .carousel-slide{flex:0 0 auto;height:100%} .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;background:#0a0a0a} .carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(0,0,0,.55);border:1px solid var(--line);color:#fff;width:42px;height:42px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s} .carousel-btn:hover{background:rgba(0,0,0,.85)} .carousel-prev{left:.8rem} .carousel-next{right:.8rem} .carousel-counter{position:absolute;bottom:.8rem;right:.8rem;background:rgba(0,0,0,.6);color:#fff;font-family:var(--fm);font-size:.68rem;padding:.28rem .6rem;letter-spacing:.06em;backdrop-filter:blur(4px)} .carousel-dots{position:absolute;bottom:.8rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem;max-width:60%;flex-wrap:wrap;justify-content:center} .cdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s,transform .2s} .cdot.on{background:#fff;transform:scale(1.3)} .modal-body{padding:2.6rem} .modal-badges{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap} .modal-title{font-family:var(--fs);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;line-height:1.15;margin-bottom:.4rem} .modal-addr{font-size:.86rem;color:var(--ink-3);margin-bottom:1.4rem} .modal-sep{width:42px;height:2px;background:var(--accent-2);margin-bottom:1.4rem} .modal-desc{font-size:.9rem;color:var(--ink-2);line-height:1.85;white-space:pre-line} .modal-cta{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap} .modal-wa{display:inline-flex;align-items:center;gap:.6rem;background:#25D366;color:#fff;padding:.85rem 1.7rem;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .25s;border-radius:6px} .modal-visit{ display:inline-flex;align-items:center;gap:.5rem; background:transparent;color:var(--w); padding:.85rem 1.5rem;font-size:.78rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;text-decoration:none; border:1px solid var(--line);border-radius:6px; transition:border-color .22s, background .22s; } .modal-visit:hover{border-color:var(--accent);background:rgba(251,234,38,.06)} .modal-wa:hover{background:#1db955} .modal-share-row{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap} .mbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;font-family:var(--ff);transition:opacity .2s;border-radius:6px} .mbtn:hover{opacity:.85} .mbtn-maps{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)} .mbtn-wa-share{background:#25D366;color:#fff} .mbtn-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff} /* WhatsApp flotante */ .wafloat{position:fixed;bottom:1.6rem;right:1.6rem;z-index:300;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(37,211,102,.45);text-decoration:none;transition:transform .3s,box-shadow .3s} .wafloat:hover{transform:scale(1.08)} /* MAPA — pines + tooltip */ .nea-pin{overflow:visible!important;background:transparent!important;border:none!important} .nea-pin img{display:block;width:32px;height:32px;cursor:pointer;transition:transform .22s cubic-bezier(.16,1,.3,1);transform-origin:center bottom;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))} .nea-pin img:hover{transform:scale(1.4) translateY(-4px)} .leaflet-popup-content-wrapper{background:var(--g2);color:#fff;border:1px solid var(--line);border-radius:0} .leaflet-popup-tip{background:var(--g2)} #mapTip{position:absolute;z-index:9998;width:196px;background:var(--g1);border:1px solid var(--accent);box-shadow:0 8px 28px rgba(0,0,0,.7);pointer-events:auto;display:none;border-radius:6px;overflow:hidden} #mapTip img{border-top-left-radius:6px;border-top-right-radius:6px} #mapTip.tip-in{display:block;animation:mtipIn .24s cubic-bezier(.16,1,.3,1) both} #mapTip.tip-out{animation:mtipOut .2s ease forwards} @keyframes mtipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes mtipOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}} .map-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer} .map-overlay .chip{background:rgba(0,0,0,.7);backdrop-filter:blur(6px);border:1px solid var(--accent);color:var(--ink);font-family:var(--fm);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.4rem;pointer-events:none;border-radius:8px} /* ============================================================ REVEAL ============================================================ */ .r,.rl,.rr{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .rl{transform:translateX(-40px)} .rr{transform:translateX(40px)} .r.in,.rl.in,.rr.in{opacity:1;transform:translate(0)} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}.d7{transition-delay:.56s} @media(prefers-reduced-motion:reduce){.r,.rl,.rr{opacity:1;transform:none;transition:none}} /* ============================================================ CURSOR ANIMADO ============================================================ */ @media (hover:hover) and (pointer:fine){ html.cursor-on, html.cursor-on *{cursor:none!important} html.cursor-on input, html.cursor-on textarea, html.cursor-on select, html.cursor-on .twk-field{cursor:text!important} } .cursor-dot,.cursor-ring{ position:fixed;top:0;left:0;z-index:2147483647;pointer-events:none; border-radius:50%;transform:translate(-50%,-50%);opacity:0;will-change:left,top,width,height; } .cursor-on .cursor-dot,.cursor-on .cursor-ring{opacity:1} .cursor-dot{width:7px;height:7px;background:var(--accent,#FBEA26);transition:opacity .25s,width .2s,height .2s,transform .12s} .cursor-dot.hide{opacity:0} .cursor-dot.gone{opacity:0!important} .cursor-ring{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border:1.5px solid color-mix(in srgb,var(--accent,#FBEA26) 65%,transparent); transition:opacity .25s,width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s; } .cursor-ring.hover{width:52px;height:52px;border-color:var(--accent,#FBEA26)} .cursor-ring.down{width:26px;height:26px} .cursor-ring.label{width:74px;height:74px;background:var(--accent,#FBEA26);border-color:transparent} .cursor-ring.gone{opacity:0!important} .cursor-ring .clabel{font-family:var(--fm);font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink,#000);opacity:0;transition:opacity .18s} .cursor-ring.label .clabel{opacity:1} @media(prefers-reduced-motion:reduce){.cursor-ring{transition:opacity .25s,background .25s,border-color .25s}} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .pgrid,.tmgrid{grid-template-columns:repeat(2,1fr)} .ngrid{grid-template-columns:1fr;gap:3rem} .nwrap image-slot{aspect-ratio:16/10} .cflow{aspect-ratio:16/11;max-width:560px;margin-inline:auto} .cflow-slide{margin-top:-26.25%;aspect-ratio:16/10} .nsello{width:80px;height:80px;margin-left:1rem} html[data-hero="split"] #hero .wrap{grid-template-columns:1fr} html[data-hero="split"] .hero-feature{max-width:420px} } @media(max-width:880px){ .nlinks{display:none} .hamburger{display:flex} .stats{grid-template-columns:repeat(2,1fr)} .stat:nth-child(3)::before,.stat:nth-child(2)::before{content:none} .stat{border-top:1px solid color-mix(in srgb,var(--accent-ink) 16%,transparent)} .stat:nth-child(-n+2){border-top:none} #propMap{height:340px} .cgrid{grid-template-columns:1fr;gap:2.5rem} .ftop{grid-template-columns:1fr 1fr;gap:2rem} .modal-body{padding:1.6rem} } @media(max-width:600px){ .pgrid,.tmgrid{grid-template-columns:1fr} .ftop{grid-template-columns:1fr} .frow{grid-template-columns:1fr} .toolbar{grid-template-columns:1fr;gap:1.4rem} .fgroup.op,.fgroup.tipo,.fgroup.dorm,.fgroup.precio,.pcount{grid-column:1;grid-row:auto;justify-self:start;max-width:none} .frow.tipo-row{grid-template-columns:repeat(2,minmax(0,1fr))} .frow.op-row{flex-wrap:wrap} .rinput,.rinput-wide{width:100%;min-width:0} .frange{width:100%} } /* ============================================================ v8 — Precio, expensas, novedades, reseñas reales, mini-mapa ============================================================ */ /* ---- Precio en cards ---- */ .pprice-row{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:.6rem 1rem;margin:.2rem 0 1rem;padding-bottom:1rem; border-bottom:1px solid var(--line); } /* Refuerzo explícito de lining-nums en elementos con muchos números (defensa por si algún browser/cache ignora la herencia desde :root) */ .pprice, .mprice, .stn, .pcount, .pexp b, .mexp b, .htitle, .stitle, .ptitle, .modal-title, .mchar b, .nlabel, .pprev s, .mprev s{ font-feature-settings:"lnum" 1, "kern" 1; font-variant-numeric:lining-nums; } .pprice{ font-family:var(--fs);font-size:1.32rem;font-weight:700;line-height:1; color:var(--w);letter-spacing:-.005em; } .pprice.consult{ font-size:.92rem;font-weight:500;color:var(--ink-2);font-style:italic; } .pexp{ font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);white-space:nowrap; } .pexp b{color:var(--accent);font-weight:600;font-family:var(--ff);font-size:.78rem;letter-spacing:0;text-transform:none;margin-left:.35rem} html[data-accent="rojo"] .pexp b{color:var(--r)} /* ---- Precio en modal ---- */ .modal-price-box{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem; margin:0 0 1.4rem;padding:.85rem 1rem; background:var(--g3);border-left:3px solid var(--accent); } html[data-accent="rojo"] .modal-price-box{border-left-color:var(--r)} .mprice{ font-family:var(--fs);font-size:1.7rem;font-weight:700;line-height:1.05;color:var(--w);letter-spacing:-.01em; } .mprice.consult{font-size:1.1rem;color:var(--ink-2);font-style:italic;font-weight:500} .mexp{display:flex;align-items:baseline;gap:.5rem;font-size:.78rem;color:var(--ink-3)} .mexp span{font-family:var(--fm);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase} /* ---- Re-tasado (precio anterior tachado + badge) ---- */ /* Verde = lectura semántica "bajó de precio / oportunidad para el comprador" */ :root{ --retasado:#4ade80; } .pretasado-tag, .mretasado-tag{ display:inline-flex;align-items:center;gap:.35rem; background:var(--retasado);color:#062c14; font-family:var(--fm);font-size:.6rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; padding:.25rem .55rem;border-radius:2px; white-space:nowrap;line-height:1; } .pretasado-tag::before, .mretasado-tag::before{ content:'↓'; font-size:.78rem; line-height:1; } .pprev{ font-family:var(--fm);font-size:.7rem;letter-spacing:.06em; color:var(--ink-3);margin:-.6rem 0 .9rem; } .pprev s{ color:var(--retasado); text-decoration-thickness:1.5px; text-decoration-color:var(--retasado); margin-left:.3rem; font-family:var(--ff); font-size:.86rem; font-weight:500; letter-spacing:0; } .mprice-wrap{ display:flex;align-items:center;gap:.7rem;flex-wrap:wrap } .mprev{ font-family:var(--fm);font-size:.74rem;letter-spacing:.06em; color:var(--ink-3);margin:.2rem 0 .6rem; } .mprev s{ color:var(--retasado); text-decoration-thickness:2px; text-decoration-color:var(--retasado); margin-left:.4rem; font-family:var(--ff); font-size:.95rem; font-weight:500; letter-spacing:0; } .mexp b{color:var(--w);font-weight:600;font-size:.95rem} /* ---- Mini-mapa por propiedad (modal) ---- */ .modal-map{ width:100%;height:240px;background:var(--g3);margin:1.4rem 0 0; border:1px solid var(--line);position:relative;overflow:hidden;border-radius:6px; } .modal-map .mmap-empty{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; text-align:center;padding:1.4rem;font-size:.78rem;color:var(--ink-3);line-height:1.6; } /* ---- Sección Novedades ---- */ #novedades{background:var(--g1)} .newsgrid{ max-width:var(--maxw);margin-inline:auto; display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .ncard{ background:var(--g2);border:1px solid var(--line);border-radius:6px; padding:1.8rem 1.7rem 1.9rem;display:flex;flex-direction:column;gap:.8rem; position:relative;overflow:hidden;transition:border-color .25s,transform .25s; } .ncard:hover{border-color:var(--accent);transform:translateY(-3px)} .ncard-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3); } .ncard-src{color:var(--accent);font-weight:600} html[data-accent="rojo"] .ncard-src{color:var(--r)} .ncard-dot{opacity:.6} .ncard-date{font-family:var(--fm)} .ncard-title{ font-family:var(--fs);font-size:1.18rem;font-weight:700;line-height:1.25; color:var(--w);text-wrap:balance; } .ncard-summ{font-size:.84rem;color:var(--ink-2);line-height:1.7;flex:1} .ncard-link{ font-family:var(--ff);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem; transition:gap .25s;margin-top:.4rem; } html[data-accent="rojo"] .ncard-link{color:var(--r)} .ncard-link:hover{gap:.8rem} .news-empty{ grid-column:1/-1;background:var(--g2);border:1px dashed var(--line); padding:3rem 2.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem; } .news-empty-tag{ font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);font-weight:600; } html[data-accent="rojo"] .news-empty-tag{color:var(--r)} .news-empty-title{font-family:var(--fs);font-size:1.6rem;font-weight:700;color:var(--w);line-height:1.2} .news-empty-text{font-size:.92rem;color:var(--ink-2);line-height:1.75;max-width:52ch} .news-empty-cta{ margin-top:.6rem;background:var(--accent);color:var(--accent-ink); padding:.85rem 1.7rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;transition:transform .25s; } .news-empty-cta:hover{transform:translateY(-2px)} /* ---- Reseñas reales ---- */ .tm-summary{ max-width:var(--maxw);margin:0 auto 2rem;padding:1.5rem 1.8rem; background:var(--g2);border:1px solid var(--line);border-left:3px solid var(--accent); display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap; } html[data-accent="rojo"] .tm-summary{border-left-color:var(--r)} .tm-summary:empty{display:none} .tm-summary.has-data{justify-content:flex-start} .tm-avg-num{ font-family:var(--fs);font-size:3.2rem;font-weight:700;line-height:1;color:var(--accent); letter-spacing:-.02em; } html[data-accent="rojo"] .tm-avg-num{color:var(--r)} .tm-avg-info{display:flex;flex-direction:column;gap:.3rem} .tm-avg-stars{display:flex;gap:.15rem;font-size:1.05rem} .tm-avg-stars .s.on{color:var(--accent)} .tm-avg-stars .s.off{color:var(--ink-3);opacity:.5} html[data-accent="rojo"] .tm-avg-stars .s.on{color:var(--r)} .tm-avg-meta{font-size:.78rem;color:var(--ink-2)} .tm-avg-meta b{color:var(--w);font-weight:600} .tm-avg-cta{ margin-left:auto;text-decoration:none;font-family:var(--ff); font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--w);border:1px solid var(--line);padding:.7rem 1.2rem;transition:all .22s; } .tm-avg-cta:hover{border-color:var(--accent);color:var(--accent)} .tm-stars .s.on{color:var(--accent)} .tm-stars .s.off{color:var(--ink-3);opacity:.4} html[data-accent="rojo"] .tm-stars .s.on{color:var(--r)} .tm-empty{ grid-column:1/-1;background:var(--g2);border:1px dashed var(--line); padding:3rem 2.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem; } .tm-empty-tag{ font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);font-weight:600; } html[data-accent="rojo"] .tm-empty-tag{color:var(--r)} .tm-empty-title{font-family:var(--fs);font-size:1.6rem;font-weight:700;color:var(--w);line-height:1.2} .tm-empty-text{font-size:.92rem;color:var(--ink-2);line-height:1.75;max-width:52ch} .tm-empty-ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem} .tm-empty-cta{ background:transparent;color:var(--w);border:1px solid var(--line); padding:.85rem 1.5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;transition:all .25s; } .tm-empty-cta:hover{border-color:var(--accent);color:var(--accent)} .tm-empty-cta.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .tm-empty-cta.primary:hover{transform:translateY(-2px);color:var(--accent-ink)} .tm-cta-row{ grid-column:1/-1;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center; margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line); } /* ---- Responsive ---- */ @media (max-width:980px){ .newsgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .newsgrid{grid-template-columns:1fr} .tm-summary{flex-direction:column;align-items:flex-start;gap:.9rem} .tm-avg-cta{margin-left:0} .pprice{font-size:1.15rem} .mprice{font-size:1.4rem} .modal-map{height:200px} } /* ============================================================ v9 — Carrusel 3D de reseñas + bordes redondeados en CTAs ============================================================ */ /* Cuando hay reseñas, el contenedor deja de ser grid */ .tmgrid.is-carousel{display:block;margin-top:1rem} .tmgrid.is-empty{display:block;margin-top:1rem} .tm-carousel{ position:relative;max-width:var(--maxw);margin:0 auto; padding:1rem 0 2rem; } .tm-stage{ position:relative; height:420px; perspective:1400px; perspective-origin:50% 45%; transform-style:preserve-3d; display:flex;align-items:center;justify-content:center; } .tm-stage .tm{ position:absolute;left:50%;top:50%;width:min(420px, 88vw); margin:0;padding:2rem 2rem 1.7rem; background:var(--g2);border:1px solid var(--line); display:flex;flex-direction:column;gap:1.2rem; transform-origin:center center; transition:transform .6s cubic-bezier(.5,.05,.25,1), opacity .6s cubic-bezier(.5,.05,.25,1), filter .6s cubic-bezier(.5,.05,.25,1), background .3s; cursor:pointer;will-change:transform,opacity,filter; backface-visibility:hidden; } /* Override del estilo viejo de .tm cuando está en carrusel */ .tm-stage .tm::before{display:none} .tm-stage .tm[data-pos="center"]{ transform:translate(-50%,-50%) translateZ(0) rotateY(0) scale(1); opacity:1;filter:none;z-index:6; box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px var(--line); cursor:default; } .tm-stage .tm[data-pos="left"]{ transform:translate(-50%,-50%) translateX(-72%) translateZ(-180px) rotateY(28deg) scale(.88); opacity:.55;filter:blur(1.5px) saturate(.85);z-index:4; } .tm-stage .tm[data-pos="right"]{ transform:translate(-50%,-50%) translateX(72%) translateZ(-180px) rotateY(-28deg) scale(.88); opacity:.55;filter:blur(1.5px) saturate(.85);z-index:4; } .tm-stage .tm[data-pos="far-left"]{ transform:translate(-50%,-50%) translateX(-118%) translateZ(-360px) rotateY(38deg) scale(.72); opacity:.15;filter:blur(4px);z-index:2;pointer-events:none; } .tm-stage .tm[data-pos="far-right"]{ transform:translate(-50%,-50%) translateX(118%) translateZ(-360px) rotateY(-38deg) scale(.72); opacity:.15;filter:blur(4px);z-index:2;pointer-events:none; } .tm-stage .tm[data-pos="hidden"]{ transform:translate(-50%,-50%) translateZ(-500px) scale(.5); opacity:0;pointer-events:none;z-index:1; } .tm-stage .tm:hover[data-pos="left"], .tm-stage .tm:hover[data-pos="right"]{opacity:.85;filter:blur(0)} /* ---- Modal: foto entera con marca de agua visible ---- */ #modalImgWrap{background:#000;position:relative} #modalImgWrap .carousel-slide img{object-fit:contain;background:#000} #modalImgWrap .carousel::after{content:'';position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:18%;min-width:120px;max-width:200px;aspect-ratio:104/30;background:url('assets/marca-agua.png') no-repeat center/contain;pointer-events:none;z-index:6;opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))} /* ---- Apto credito hipotecario: badge ---- */ .bcredit{ display:inline-block;background:#2563eb;color:#fff; padding:.32rem .6rem;font-size:.58rem; letter-spacing:.12em;text-transform:uppercase;border-radius:8px; font-weight:700; } /* ---- Aviso de imagenes intervenidas ---- */ .img-disclaimer{ font-family:var(--fm);font-size:.6rem;letter-spacing:.04em; color:var(--ink-3);line-height:1.5; padding:.55rem 1.4rem;margin:0; background:rgba(255,255,255,.02);border-bottom:1px solid var(--line); } .fdisclaimer{ display:block;font-size:.66rem;color:var(--ink-3);margin-top:.3rem; } /* ---- Modal: propiedades similares ---- */ .modal-similar:empty{display:none} .modal-similar{margin:1.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)} .ms-title{ font-family:var(--fs);font-size:1.1rem;font-weight:600; color:var(--ink);margin:0 0 1rem; } .ms-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; } .ms-card{ background:var(--bg-2,#161616);border:1px solid var(--line); border-radius:8px;padding:0;cursor:pointer;overflow:hidden; text-align:left;color:inherit;font-family:inherit; transition:transform .18s ease, border-color .18s ease; display:flex;flex-direction:column; } .ms-card:hover{border-color:var(--accent);transform:translateY(-2px)} .ms-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0e0e0e} .ms-img{width:100%;height:100%;object-fit:cover;display:block} .ms-img-ph{width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a,#0e0e0e)} .ms-op{ position:absolute;top:.5rem;left:.5rem; font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:.2rem .55rem;border-radius:8px;color:#fff; } .ms-op.op-venta{background:var(--r,#c01818)} .ms-op.op-alquiler{background:var(--y,#fbea26);color:#000} .ms-body{padding:.7rem .85rem .9rem;display:flex;flex-direction:column;gap:.25rem} .ms-prop-title{font-family:var(--fs);font-weight:600;font-size:.95rem;line-height:1.2;color:var(--w)} .ms-prop-addr{font-size:.72rem;color:var(--ink-2);line-height:1.3} .ms-prop-price{font-family:var(--fs);font-weight:700;font-size:.92rem;color:var(--accent);margin-top:.15rem} /* ---- Modal: bloque de caracteristicas ---- */ .modal-chars{ display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem .9rem;margin:.4rem 0 1rem;padding:.8rem 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .modal-chars:empty{display:none} .modal-chars .mchar{display:flex;flex-direction:column;gap:.1rem} .modal-chars .mchar span{ font-family:var(--fm);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3); } .modal-chars .mchar b{font-size:.95rem;color:var(--ink);font-weight:600} /* Features en el modal */ .mfeatures-wrap{grid-column:1/-1;margin-top:.4rem;padding-top:.6rem;border-top:1px dashed var(--line)} .mfeatures-label{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem} .mfeatures{display:flex;flex-wrap:wrap;gap:.4rem} .mfeature{ display:inline-block;background:rgba(255,255,255,.06);color:var(--ink); padding:.28rem .7rem;font-size:.75rem;border-radius:8px; border:1px solid var(--line); } /* Flechas del carrusel */ .tm-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:10; width:52px;height:52px;border-radius:999px;border:1px solid var(--line); background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:var(--w); font-size:1.7rem;line-height:1;cursor:pointer;transition:all .25s; display:flex;align-items:center;justify-content:center; font-family:var(--ff);font-weight:300; padding:0;padding-bottom:2px; } .tm-nav:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-50%) scale(1.06)} .tm-prev{left:.4rem} .tm-next{right:.4rem} @media (min-width:980px){ .tm-prev{left:2rem} .tm-next{right:2rem} } /* Dots */ .tm-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem} .tm-dot{ width:8px;height:8px;border-radius:50%;border:0;padding:0; background:rgba(255,255,255,.18);cursor:pointer;transition:all .25s; } .tm-dot:hover{background:rgba(255,255,255,.42)} .tm-dot.on{background:var(--accent);width:24px;border-radius:999px} html[data-accent="rojo"] .tm-dot.on{background:var(--r)} /* CTAs redondeadas */ .tm-cta-row{ display:flex;gap:1rem;flex-wrap:wrap;justify-content:center; margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line); grid-column:1/-1; } .bp.rounded, .bs.rounded{border-radius:8px} .tm-avg-cta{border-radius:999px} .tm-empty-cta{border-radius:999px} .news-empty-cta{border-radius:8px} .ncard-link{ display:inline-flex;align-self:flex-start; padding:.55rem 1.1rem;border-radius:999px; border:1px solid var(--line);background:rgba(255,255,255,.02); transition:all .25s; } .ncard-link:hover{border-color:var(--accent);background:rgba(251,234,38,.06);gap:.6rem} /* Responsive del carrusel */ @media (max-width:760px){ .tm-stage{height:460px} .tm-stage .tm{width:min(340px, 90vw);padding:1.6rem 1.4rem 1.4rem} .tm-stage .tm[data-pos="left"]{transform:translate(-50%,-50%) translateX(-58%) translateZ(-140px) rotateY(26deg) scale(.82);opacity:.32} .tm-stage .tm[data-pos="right"]{transform:translate(-50%,-50%) translateX(58%) translateZ(-140px) rotateY(-26deg) scale(.82);opacity:.32} .tm-stage .tm[data-pos="far-left"], .tm-stage .tm[data-pos="far-right"]{opacity:0} } @media (prefers-reduced-motion: reduce){ .tm-stage .tm{transition:opacity .3s} .tm-stage .tm[data-pos="left"], .tm-stage .tm[data-pos="right"], .tm-stage .tm[data-pos="far-left"], .tm-stage .tm[data-pos="far-right"]{filter:none} }