@layer base;
@layer components;
@layer utilities;

@layer base {
  

@layer components {
  #progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--rose-lt), #D7BE82); z-index: 10000; transition: width 0.15s ease; }

  nav { position: fixed; top:0; left:0; right:0; z-index:100; padding: clamp(1.4rem,2.5vw,2rem) var(--pad-x); display: flex; justify-content:space-between; align-items:center; transition: opacity .5s, transform .5s, color .5s, background-color .5s cubic-bezier(0.23,1,0.32,1); will-change: background, backdrop-filter; }
  nav.scrolled { background: rgba(250,248,245,0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); box-shadow: 0 8px 30px rgba(16,63,110,.04); }

  .nav-logo { font-family:var(--f-serif); font-size:clamp(0.95rem,1vw,1.05rem); font-weight:400; letter-spacing:.14em; color:var(--white); text-decoration:none; white-space:nowrap; transition:color .5s; }
  .nav-logo em { font-style:italic; color:#D7BE82; }

  .nav-links { display:flex; gap:clamp(1.2rem,2vw,2.5rem); list-style:none; align-items:center; }
  .nav-links a { font-size:var(--size-xs); letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,0.95); text-decoration:none; transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1); position: relative; }
  .nav-links a::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 0; height: 1px; background: currentColor; transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1); transform: translateX(-50%); }
  .nav-links a:hover { color:var(--white); opacity: 1; }
  .nav-links a:hover::after { width: 80%; }

  nav.scrolled .nav-logo { color:var(--text); }
  nav.scrolled .nav-logo em { color:var(--rose); }
  nav.scrolled .nav-links a { color:var(--text-lt); }
  nav.scrolled .nav-links a:hover { color:var(--rose); }

  .lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255,255,255,0.15);
    transition: border-color .5s;
  }

  nav.scrolled .lang-switcher {
    border-left-color: var(--border);
  }

  .lang-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    font-family: var(--f-sans);
    font-weight: 300;
    position: relative;
    line-height: 1;
  }

  .lang-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }

  .lang-btn:hover {
    color: rgba(255,255,255,0.85);
  }

  .lang-btn:hover::after,
  .lang-btn.active::after {
    width: 100%;
  }

  .lang-btn.active {
    color: rgba(255,255,255,1);
    font-weight: 400;
  }

  .lang-divider {
    color: rgba(255,255,255,0.2);
    font-weight: 200;
    font-size: 0.6rem;
    padding: 0 0.1rem;
    user-select: none;
    transition: color .5s;
  }

  nav.scrolled .lang-btn {
    color: var(--text-lt);
    opacity: 0.6;
  }

  nav.scrolled .lang-btn:hover {
    color: var(--rose);
    opacity: 1;
  }

  nav.scrolled .lang-btn.active {
    color: var(--rose);
    opacity: 1;
  }

  nav.scrolled .lang-divider {
    color: var(--border);
  }

  .menu-toggle { display: none; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; position: relative; z-index: 1001; }
  .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px auto; transition: all 0.3s ease; }
  nav.scrolled .menu-toggle span { background: var(--text); }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-drawer { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: var(--cream); z-index: 1000; transition: right 0.5s cubic-bezier(0.23, 1, 0.32, 1); padding: 5rem 2rem 2rem; box-shadow: -10px 0 40px rgba(16,63,110,0.08); }
  .mobile-drawer.active { right: 0; }
  .mobile-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
  .mobile-drawer a { font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); text-decoration: none; display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }

  .mobile-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
  }

  .mobile-lang-switcher .lang-btn {
    color: var(--text-lt);
    opacity: 0.5;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }

  .mobile-lang-switcher .lang-btn:hover {
    color: var(--rose);
    opacity: 1;
  }

  .mobile-lang-switcher .lang-btn.active {
    color: var(--rose);
    opacity: 1;
  }

  .mobile-lang-switcher .lang-divider {
    color: var(--border);
    font-size: 0.7rem;
  }

  .overlay-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
  .overlay-menu.active { opacity: 1; visibility: visible; }

  #hero { height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #0A2F52; }
  #hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(8,35,60,0.6) 0%, transparent 100%); z-index: 1; pointer-events: none; }
  #hero-video-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  #hero-video-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity:0.95; }

  .hero-content { position: relative; z-index: 2; text-align: center; padding: 0 clamp(1.5rem, 4vw, 3rem); max-width: 700px; margin: 0 auto; }

  /* ESTILO DORADO PREMIUM PARA EL HERO */
  .hero-content p {
    font-family: var(--f-serif);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: #ffffff;
    max-width: 520px;
    margin: 0 auto 2.2rem;
    font-weight: 300;
    letter-spacing: 0.015em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35), 0 0 60px rgba(0, 0, 0, 0.2);
    text-wrap: balance;
  }
  .hero-content .btn-outline {
    font-size: var(--size-xs);
    padding: 0.7rem 1.8rem;
    opacity: 0.85;
    transition: opacity .5s, transform .5s, color .5s, background-color .5s cubic-bezier(0.23,1,0.32,1);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
  }
  .hero-content .btn-outline:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.3em;
  }

  .stats { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:clamp(2rem,3vw,2.5rem) var(--pad-x); display:grid; grid-template-columns:repeat(4,1fr); }
  .stat { padding:0 clamp(1.2rem,2vw,2rem); border-right:1px solid var(--border); }
  .stat:first-child { padding-left:0; }
  .stat:last-child  { border-right:none; }
  .stat-n { font-family:var(--f-serif); font-size:clamp(1.5rem,2vw,1.9rem); font-weight:300; color:var(--rose); letter-spacing:-.01em; line-height:1; margin-bottom:.45rem; }
  .stat-l { font-size:var(--size-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--text-lt); }

  #manifesto { padding:clamp(5rem,8vw,8.5rem) var(--pad-x); max-width:850px; margin:0 auto; }
  .tag { font-size:var(--size-xs); letter-spacing:.4em; text-transform:uppercase; color:#C9A84C; margin-bottom:2.5rem; display:block; }
  .manifesto-foot { margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 3vw, 2.5rem); }
  .manifesto-foot p { font-size:var(--size-base); line-height:1.9; color:var(--text-lt); }

  #inversion-cartagena { position:relative; width:100%; height:78vh; min-height:480px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:clamp(2rem,4vw,3rem) 0 clamp(5rem,7vw,7rem); content-visibility: auto; contain-intrinsic-size: 780px 480px; }
  .video-background { position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
  .video-background video { width:100%; height:100%; object-fit:cover; }
  .overlay-dark { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(8,35,60,0.25),rgba(8,35,60,0.55)); z-index:2; }
  .inversion-content { position:relative; z-index:3; text-align:center; color:var(--white); padding:0 clamp(1.5rem,6vw,4rem); max-width:760px; }
  .inversion-content .eyebrow { font-size:var(--size-xs); letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:1.4rem; display:block; }
  .inversion-content h2 { font-family:var(--f-serif); font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:300; line-height:1.2; margin-bottom:1.4rem; text-wrap: balance; }
  .inversion-content h2 em { font-style:italic; }
  .inversion-content p { font-size:var(--size-md); line-height:1.85; color:rgba(255,255,255,0.85); margin:0 auto 2.4rem; font-weight:300; max-width:540px; }

  .btn-outline, .btn-p { font-family:var(--f-sans); font-size:var(--size-xs); letter-spacing:.25em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding:0.9rem 2.4rem; transition:all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: var(--radius-sm); cursor: pointer; }
  .btn-outline { color:var(--white); background:transparent; border:1px solid rgba(255,255,255,0.4); transition: opacity .45s, transform .45s, color .45s, background-color .45s cubic-bezier(0.23,1,0.32,1); }
  .btn-outline:hover { background:var(--white); color:var(--rose-dk); border-color:var(--white); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,63,110,0.12); }
  .btn-outline-dark {
    font-family:var(--f-sans);
    font-size:var(--size-xs);
    letter-spacing:.25em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 44px;
    padding:0.9rem 2.4rem;
    transition: opacity .45s, transform .45s, color .45s, background-color .45s cubic-bezier(0.23,1,0.32,1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color:#8B6F2E;
    background:rgba(201,168,76,0.10);
    border:1px solid rgba(201,168,76,0.4);
    backdrop-filter: blur(3px);
  }
  .btn-outline-dark:hover {
    background:rgba(201,168,76,0.18);
    color:#6B5220;
    border-color:rgba(201,168,76,0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,0.15);
  }
  .btn-p { color:var(--white); background:var(--rose); border:none; transition: opacity .45s, transform .45s, color .45s, background-color .45s cubic-bezier(0.23,1,0.32,1); }
  .btn-p:hover { background:var(--rose-lt); transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 20px rgba(16,63,110,0.15); }

  #oporto { padding:clamp(3rem,5vw,5rem) var(--pad-x); max-width:1100px; margin:0 auto; }
  .oporto-grid, .mari-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
  .video-phone { position:relative; width:clamp(220px,85%,260px); aspect-ratio:9/16; overflow:hidden; box-shadow: 0 10px 40px rgba(16,63,110,.08), 0 2px 10px rgba(0,0,0,.04); background:#1a1014; border-radius: var(--radius-sm); margin:0 auto; contain: paint; }
  .video-phone video { width:100%; height:100%; object-fit:cover; }
  .video-badge { position:absolute; top:1rem; right:1rem; background:rgba(16,63,110,0.15); backdrop-filter: blur(5px); border:1px solid rgba(16,63,110,0.2); padding:.3rem .8rem; pointer-events:none; font-size:0.6rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,0.95); }

  .mari-section { padding:clamp(1rem,2vw,2rem) var(--pad-x) clamp(5rem,7vw,7rem); max-width:1100px; margin:0 auto; }
  #proyectos { padding:clamp(2rem,4vw,4rem) var(--pad-x) clamp(6rem,8vw,8rem); }
  .sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(2.5rem,4vw,4rem); flex-wrap:wrap; gap:1rem; }
  .sec-title { font-family:var(--f-serif); font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:300; letter-spacing:-.01em; color:#D7BE82; text-wrap: balance; }
  .sec-title em { font-style:italic; color:#DCC790; }
  .sec-link { font-size:var(--size-xs); letter-spacing:.28em; text-transform:uppercase; color:var(--text-lt); text-decoration:none; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
  .sec-link:hover { color:var(--rose); letter-spacing: 0.32em; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
  .card { background:var(--white); border:1px solid var(--border); overflow:hidden; position:relative; transition:border-color .4s,box-shadow .4s, transform .4s; will-change: transform; min-height: 380px; border-radius: var(--radius-sm); transform-style: preserve-3d; content-visibility: auto; contain-intrinsic-size: 400px; transform: translateZ(0); }
  .card:hover { border-color:rgba(16,63,110,0.25); box-shadow:0 8px 30px rgba(16,63,110,0.06); transform: translateY(-3px) translateZ(0); }

  .swatch { position:absolute; inset:0; transition:transform .65s ease; will-change: transform; }
  .card:hover .swatch { transform:scale(1.03); }
  .s-kairos  { background:linear-gradient(148deg,#F3E9E7,#EEDAD7,#F5EDEC); }
  .s-crystal { background:linear-gradient(148deg,#EEE7E9,#E5D9DD,#EEE4E6); }
  .s-terra   { background:linear-gradient(148deg,#EEE9E5,#E5DFDB,#EFEAE7); }
  .s-bari    { background:linear-gradient(148deg,#E9EDEC,#DFE6E4,#E9EEED); }
  .s-zinnia  { background:linear-gradient(148deg,#E9EBE5,#DEE2D9,#E9EBE0); }
  .s-reserva { background:linear-gradient(148deg,#E8EFE8,#D8E9D6,#E4EDE3); }
  .s-entre   { background:linear-gradient(148deg,#E5E9ED,#D9E1E7,#E4E9EF); }
  .s-itaca   { background:linear-gradient(148deg,#E7ECF0,#DAE0E7,#E6EAF0); }
  .s-marduk  { background:linear-gradient(148deg,#F0EBE7,#E7E0DB,#F0EDE9); }
  .s-oporto  { background:linear-gradient(148deg, #103F6E, #0A2F52, #345775); }

  /* Oporto: dark swatch, pill with dark background and white text */
  .card.oporto .pill { background:rgba(16,63,110,0.85); border-color:rgba(16,63,110,0.6); color:#ffffff; }
  .card.oporto .card-in { color:#ffffff; }
  .card.oporto .c-desc { color:rgba(255,255,255,0.85); }
  .card.oporto .c-arr { border-color:rgba(255,255,255,0.2); color:#ffffff; }

  /* Reserva: light green swatch, pill with subtle green accent */
  .card.reserva .pill { background:rgba(255,255,255,0.9); border-color:rgba(107,175,114,0.2); color:#4A7C50; }
  .card.reserva .card-in { color:var(--text); }
  .card.reserva .c-tag, .card.reserva .c-price { color:#5A9A62; }
  .card.reserva .c-arr { border-color:var(--rose); color:var(--rose); }

  .orb { position:absolute; border-radius:var(--radius-full); filter: blur(42px); opacity:.42; animation:orbFloat 11s ease-in-out infinite alternate; will-change: transform; transform: translateZ(0); }
  @keyframes orbFloat { from{transform:translate(0,0) scale(1) translateZ(0)} to{transform:translate(7px,-11px) scale(1.05) translateZ(0)} }
  .s-kairos  .orb { background:#D4ABAE; width:200px; height:200px; top:-55px; right:-35px; }
  .s-crystal .orb { background:#C8A8B0; width:240px; height:240px; top:-65px; right:-45px; }
  .s-terra   .orb { background:#C8B8A8; width:185px; height:185px; top:18px;  left:-28px; }
  .s-bari    .orb { background:#A8B8B4; width:220px; height:220px; bottom:-45px; right:-35px; }
  .s-zinnia  .orb { background:#B0BC9C; width:185px; height:185px; top:-38px; left:38%; }
  .s-reserva .orb { background:#8FBC8F; width:190px; height:190px; bottom:-18px; left:-18px; }
  .s-entre   .orb { background:#A8B8C8; width:185px; height:185px; top:-28px; right:18px; }
  .s-itaca   .orb { background:#B0C4DE; width:230px; height:230px; top:-45px; left:-45px; }
  .s-marduk  .orb { background:#DDBCA0; width:200px; height:200px; bottom:-28px; right:-28px; }
  .s-oporto .orb { background:#245B93; width:200px; height:200px; top:-40px; right:-30px; }

  .card-in { position:relative; z-index:2; height:100%; min-height:inherit; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.4rem,2vw,1.8rem); }
  .pill { position:absolute; top:1.2rem; right:1.2rem; z-index:3; background:rgba(255,255,255,0.75); backdrop-filter: blur(6px); border:1px solid var(--border); padding:.3rem .8rem; font-size:var(--size-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--mauve); border-radius: var(--radius-sm); transition: all 0.35s ease; }
  .card:hover .pill { background:rgba(255,255,255,0.9); border-color:rgba(16,63,110,0.15); }
  .c-tag { font-size:var(--size-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--rose); margin-bottom:.6rem; display:block; }
  .c-name { font-family:var(--f-serif); font-size:clamp(1.2rem,1.6vw,1.6rem); font-weight:300; line-height:1.15; margin-bottom:.55rem; color:var(--text); text-wrap: balance; }
  .c-name em { font-style:italic; color:var(--rose-lt); }
  .c-desc { font-size:var(--size-sm); line-height:1.7; color:var(--text-lt); margin-bottom:1.1rem; }
  .c-foot { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top: auto; }
  .c-price { font-family:var(--f-serif); font-size:var(--size-md); color:var(--rose); }
  .c-loc { font-size:var(--size-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--text-lt); flex:1; }
  .c-arr { width:28px; height:28px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--rose-lt); font-size:.8rem; transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1); flex-shrink:0; border-radius:var(--radius-full); }
  .card:hover .c-arr { background:var(--rose); color:var(--white); border-color:var(--rose); transform: scale(1.1); }

  .quote-divider { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:clamp(4rem,7vw,7rem) var(--pad-x); text-align:center; }
  .quote-divider blockquote { font-family:var(--f-serif); font-size:clamp(1.3rem,2.2vw,2rem); font-weight:300; font-style:italic; line-height:1.45; max-width:700px; margin:0 auto 1rem; color:#D7BE82; text-wrap: balance; }
  .quote-divider blockquote em { font-style:normal; color:#CFAF67; }
  .quote-src { font-size:var(--size-xs); letter-spacing:.35em; text-transform:uppercase; color:var(--text-lt); }

  .testimonial { padding: clamp(4rem, 7vw, 7rem) var(--pad-x); text-align: center; background: var(--cream); }
  .testimonial-inner { max-width: 800px; margin: 0 auto; }
  .testimonial blockquote { font-family: var(--f-serif); font-size: clamp(1.2rem, 2vw, 1.6rem); font-style: italic; font-weight: 300; line-height: 1.6; color: var(--text); margin-bottom: 1.5rem; text-wrap: balance; }
  .testimonial cite { font-size: var(--size-xs); letter-spacing: .35em; text-transform: uppercase; color: var(--text-lt); font-style: normal; }

  #ubicaciones { background:var(--cream2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:clamp(4rem,7vw,7rem) var(--pad-x); }
  .ubic-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem); align-items:start; }
  .zones { list-style:none; margin-top:1.8rem; }
  .zone { display:flex; align-items:center; gap:1.4rem; padding:1.1rem 0; border-bottom:1px solid var(--border); transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1); }
  .zone:hover { border-color:rgba(16,63,110,0.35); }
  .zone-dot { width:4px; height:4px; flex-shrink:0; background:var(--rose); border-radius:var(--radius-full); }
  .zone-nm { font-family:var(--f-serif); font-size:clamp(1rem,1.15vw,1.1rem); font-weight:300; flex:1; color:var(--text); }
  .zone-ct { font-size:var(--size-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--rose-lt); }
  .map-art { height:clamp(340px,40vw,400px); background:var(--white); border:1px solid var(--border); position:relative; overflow:hidden; border-radius: var(--radius-sm); }
  .map-art iframe { width:100%; height:100%; border:0; }

  #contacto { padding:clamp(4rem,7vw,7rem) var(--pad-x); max-width:550px; margin:0 auto; }
  input, select, textarea { width:100%; padding:0.9rem 1rem; border:1px solid var(--border); background:transparent; font-family:var(--f-sans); color:var(--text); font-size:var(--size-sm); transition:all .3s ease; outline:none; border-radius: var(--radius-sm); }
  input:focus, select:focus, textarea:focus { border-color:var(--rose-lt); box-shadow: 0 0 0 4px rgba(36, 91, 147, 0.1); }
  select { color:var(--text-lt); cursor:pointer; }

  .urgencia { background: linear-gradient(135deg, rgba(16,63,110,0.08), rgba(36,91,147,0.05)); border: 1px solid var(--border); border-left: 3px solid var(--rose); border-radius: var(--radius-sm); padding: 1.2rem 1.5rem; margin-bottom: 2rem; text-align: center; font-size: var(--size-sm); line-height: 1.6; color: var(--text); }
  .urgencia strong { color: var(--rose); font-weight: 500; display: block; margin-bottom: 0.3rem; font-size: var(--size-md); }
  .trust-badges { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.8rem; }
  .trust-badge { display: flex; align-items: center; gap: 0.6rem; font-size: var(--size-sm); color: var(--text-lt); }
  .trust-badge::before { content: "✓"; color: var(--rose); font-weight: 500; }

  .lead-magnet { background: var(--cream2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.5rem; margin-bottom: 2rem; text-align: center; }
  .lead-magnet h3 { font-family: var(--f-serif); font-size: 1.2rem; color: var(--text); margin-bottom: 0.5rem; }
  .lead-magnet p { font-size: var(--size-sm); color: var(--text-lt); margin-bottom: 1rem; }
  .btn-download { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; background: var(--rose); color: var(--white); text-decoration: none; font-size: var(--size-xs); letter-spacing: 0.2em; text-transform: uppercase; border-radius: var(--radius-sm); transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1); }
  .btn-download:hover { background: var(--rose-lt); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,63,110,0.15); }

  footer { padding:clamp(4rem,6vw,6rem) var(--pad-x) clamp(2rem,3vw,2.8rem); border-top:1px solid var(--border); }
  .ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,4rem); margin-bottom:clamp(3rem,5vw,5rem); }
  .ft-brand { font-family:var(--f-serif); font-size:clamp(1rem,1.15vw,1.1rem); font-weight:300; margin-bottom:.9rem; color:var(--text); }
  .ft-brand em { font-style:italic; color:var(--rose); }
  .ft-tagline { font-size:var(--size-sm); line-height:1.75; color:var(--text-lt); max-width:270px; margin-bottom:1.8rem; }
  .ft-social { display:flex; gap:.7rem; }
  .soc { width:32px; height:32px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:var(--size-xs); color:var(--text-lt); text-decoration:none; transition:all .3s; border-radius:var(--radius-full); }
  .soc:hover { background:var(--rose); color:var(--white); border-color:var(--rose); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,63,110,0.15); }
  .ft-col-t { font-size:var(--size-xs); letter-spacing:.35em; text-transform:uppercase; color:var(--rose); margin-bottom:1.3rem; }
  .ft-links { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
  .ft-links a { font-size:var(--size-sm); color:var(--text-lt); text-decoration:none; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; }
  .ft-links a:hover { color:var(--rose); transform: translateX(3px); }
  .ft-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:.8rem; }
  .ft-copy { font-size:var(--size-xs); letter-spacing:.2em; color:var(--text-lt); opacity:.7; text-transform:uppercase; }
  .ft-badge { font-size:var(--size-xs); letter-spacing:.2em; color:var(--rose-lt); border:1px solid var(--border); padding:.3rem .8rem; text-transform:uppercase; border-radius: var(--radius-sm); transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
  .ft-badge:hover { border-color: var(--rose-lt); color: var(--rose); }

  .reveal { opacity:0; transform:translateY(24px); transition:all .9s cubic-bezier(.4,0,.2,1); }
  .reveal.vis { opacity:1; transform:translateY(0); }
  .d1{transition-delay:.1s} .d2{transition-delay:.22s} .d3{transition-delay:.34s} .d4{transition-delay:.46s}

  ::-webkit-scrollbar { width:3px; }
  ::-webkit-scrollbar-track { background:var(--cream); }
  ::-webkit-scrollbar-thumb { background:var(--rose-lt); border-radius: 3px; }

  .whatsapp-float { position:fixed; right:25px; bottom:25px; width:45px; height:45px; border-radius:var(--radius-full); background:var(--rose); color:#fff; display:flex; align-items:center; justify-content:center; z-index:9999; box-shadow:0 6px 20px rgba(16,63,110,.2); opacity: 0.85; transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease, background .4s ease; text-decoration: none; }
  .whatsapp-float:hover { transform:translateY(-3px) scale(1.05); background:var(--rose-lt); opacity: 1; box-shadow:0 10px 28px rgba(16,63,110,.3); }

  .video-sound-btn { position:absolute; right:12px; bottom:12px; width:32px; height:32px; border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius-full); background:rgba(10,47,82,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color:white; cursor:pointer; z-index:20; display:flex; align-items:center; justify-content:center; transition:.4s ease; }
  .video-sound-btn:hover { background:var(--rose); transform:scale(1.08); border-color: rgba(255,255,255,0.4); box-shadow: 0 4px 12px rgba(16,63,110,0.2); }
  .video-sound-btn svg { width: 14px; height: 14px; }

  /* ===== BOTÓN DE TESTIMONIOS ===== */
  .testimonial-cta {
    margin-top: 2.5rem;
    text-align: center;
  }
  .btn-testimonial {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 2.2rem;
    background: rgba(16, 63, 110, 0.82);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-family: var(--f-sans);
    font-size: var(--size-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity .45s, transform .45s, color .45s, background-color .45s cubic-bezier(0.23,1,0.32,1);
    box-shadow: 0 6px 24px rgba(16, 63, 110, 0.2);
  }
  .btn-testimonial:hover {
    background: rgba(16, 63, 110, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(16, 63, 110, 0.3);
    border-color: rgba(255, 255, 255, 0.35);
  }
  .btn-testimonial svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  .btn-testimonial:hover svg {
    opacity: 1;
  }

  /* ===== MODAL DE TESTIMONIOS ===== */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 35, 60, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .modal-box {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-width: 480px;
    width: 100%;
    padding: clamp(2rem, 4vw, 2.8rem);
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: opacity .45s, transform .45s, color .45s, background-color .45s cubic-bezier(0.23,1,0.32,1);
    box-shadow: 0 14px 36px rgba(16,63,110,.08);
  }
  .modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
  }
  .modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-lt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.3s ease;
  }
  .modal-close:hover {
    background: var(--rose);
    color: var(--white);
    border-color: var(--rose);
  }
  .modal-title {
    font-family: var(--f-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 300;
    color: #D7BE82;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
  }
  .modal-subtitle {
    font-size: var(--size-sm);
    color: var(--text-lt);
    margin-bottom: 1.8rem;
    line-height: 1.6;
  }
  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .modal-form input,
  .modal-form textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    background: var(--white);
    font-family: var(--f-sans);
    color: var(--text);
    font-size: var(--size-sm);
    transition: all 0.3s ease;
    outline: none;
    border-radius: var(--radius-sm);
  }
  .modal-form input:focus,
  .modal-form textarea:focus {
    border-color: var(--rose-lt);
    box-shadow: 0 0 0 4px rgba(36, 91, 147, 0.1);
  }
  .modal-form textarea {
    resize: vertical;
    min-height: 100px;
  }
  .modal-form .btn-p {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
  }
  .modal-success {
    text-align: center;
    padding: 1rem 0;
  }
  .modal-success p {
    font-family: var(--f-serif);
    font-size: 1.1rem;
    color: #D7BE82;
    margin-bottom: 0.5rem;
  }
  .modal-success span {
    font-size: var(--size-sm);
    color: var(--text-lt);
  }

  /* ===== TESTIMONIOS DINÁMICOS ===== */
  .testimonials-dynamic {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  .testimonial-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.8rem;
    text-align: left;
    transition: opacity .4s, transform .4s, color .4s, background-color .4s cubic-bezier(0.23,1,0.32,1);
  }
  .testimonial-card:hover {
    border-color: rgba(16, 63, 110, 0.2);
    box-shadow: 0 8px 28px rgba(16, 63, 110, 0.06);
    transform: translateY(-3px);
  }
  .testimonial-card q {
    font-family: var(--f-serif);
    font-size: var(--size-md);
    font-style: italic;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text);
    display: block;
    margin-bottom: 1rem;
    quotes: '"' '"';
  }
  .testimonial-card q::before {
    content: open-quote;
    color: var(--rose-lt);
    font-size: 1.4rem;
    line-height: 0;
    margin-right: 0.2rem;
  }
  .testimonial-card q::after {
    content: close-quote;
    color: var(--rose-lt);
    font-size: 1.4rem;
    line-height: 0;
    margin-left: 0.2rem;
  }
  .testimonial-card cite {
    font-size: var(--size-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-lt);
    font-style: normal;
  }
  .testimonial-card .t-date {
    font-size: var(--size-xs);
    color: var(--text-lt);
    opacity: 0.6;
    margin-top: 0.3rem;
    display: block;
  }
  .testimonials-empty {
    text-align: center;
    color: var(--text-lt);
    font-size: var(--size-sm);
    padding: 2rem 0;
    font-style: italic;
  }

  .orb.paused { animation-play-state: paused; }

  /* ===== GOOGLE REVIEWS ===== */
  .google-reviews {
    padding: clamp(5rem, 8vw, 8.5rem) var(--pad-x);
    background:
      linear-gradient(rgba(8, 35, 60, 0.82), rgba(8, 35, 60, 0.88)),
      none;
    position: relative;
  }
  .google-reviews::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8,35,60,0.3) 0%, transparent 40%, transparent 60%, rgba(8,35,60,0.4) 100%);
    pointer-events: none;
  }
  .reviews-overlay {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .google-reviews .tag {
    color: #D7BE82;
    margin-bottom: 1.4rem;
    display: block;
  }
  .google-reviews h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.4rem;
    color: #D7BE82;
    text-wrap: balance;
  }
  .google-reviews h2 em { font-style: italic; }
  .reviews-subtitle {
    font-size: var(--size-sm);
    line-height: 1.85;
    color: rgba(255,255,255,0.85);
    max-width: 540px;
    margin: 0 auto 2.4rem;
    font-weight: 300;
  }
  .rating-box { margin: 2.5rem 0; }
  .stars {
    color: #D7BE82;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    letter-spacing: 4px;
    display: block;
    font-family: var(--f-sans);
    margin-bottom: 0.6rem;
  }
  .rating-text {
    color: rgba(255,255,255,0.85);
    font-size: var(--size-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* CONTENEDOR TRUSTINDEX */
  .trustindex-container {
    margin: 2.5rem 0;
    min-height: 200px;
  }
  .trustindex-container [class*="ti-widget"] {
    margin: 0 auto !important;
  }

  .review-buttons {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  .review-buttons .btn-p,
  .review-buttons .btn-outline {
    text-decoration: none;
  }

  @media (max-width: 600px) {
    .google-reviews {
      padding: clamp(3.5rem, 6vw, 5rem) var(--pad-x);
    }
    .review-buttons {
      flex-direction: column;
      align-items: center;
    }
    .review-buttons .btn-p,
    .review-buttons .btn-outline {
      width: 100%;
      max-width: 280px;
      justify-content: center;
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }
}

@media(max-width:1024px){ .ft-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:860px){
  #hero { height: 75dvh; min-height: 500px; }
  nav { padding:1.1rem 1.4rem; }
  .nav-links { display:none; }
  .menu-toggle { display: block; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:none; }
  .stat:nth-child(3) { padding-left:0; }
  .manifesto-foot { grid-template-columns:1fr; gap:1.8rem; }
  #inversion-cartagena { height:60vh; min-height:400px; margin:2rem 0 4rem; }
  .oporto-grid,.mari-grid,.ubic-inner { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr; gap:2.2rem; }
  .ft-tagline { max-width:100%; }
}
@media(max-width:600px){
  .grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns:1fr; }
  .stat { border-right:none; padding:0; }
  .stat + .stat { padding-top:1rem; margin-top:1rem; border-top:1px solid var(--border); }
}
@media(max-width:480px){ .btn-p,.btn-outline { padding:.8rem 1.8rem; } }