:root {
   --navy: #222c50;
   --copper: #a86040;
   --beige: #d3bea5;
   --cream: linear-gradient(135deg, #E7EDF2, #EEE8F0);
   --white: #ffffff;
 }
 * { margin:0; padding:0; box-sizing:border-box; }
 html { scroll-behavior: smooth; }
 body { font-family: 'Open Sans', sans-serif; color: var(--navy); background: var(--white); overflow-x:hidden; }
 section[id] { scroll-margin-top: 100px; }

 /* Utilidad reutilizable: efecto "tarjeta flotante" con elevación al hover.
    Se aplica a: foto de Quiénes Somos, tarjetas de beneficios, tarjetas de
    valores y el bloque "Nuestra Promesa". */
 .floating-card {
   border-radius:14px;
   box-shadow:0 10px 30px rgba(0,0,0,0.15);
   transition:transform .3s ease, box-shadow .3s ease;
 }
 .floating-card:hover {
   transform:translateY(-6px);
   box-shadow:0 18px 40px rgba(0,0,0,0.22);
 }

 /* NAV */
 nav {
   position: fixed; top:0; width:100%; z-index:200;
   background: rgba(34,44,80,0.97);
   display: flex; align-items:center; justify-content:space-between;
   padding: 14px 5%;
   border-bottom: 2px solid var(--copper);
 }
 .nav-logo { display:flex; align-items:center; gap:10px; }
 .nav-brand-text { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.75rem; color:var(--beige); letter-spacing:2px; text-transform:uppercase; }
 .nav-links { display:flex; gap:24px; list-style:none; }
 .nav-links a { color:var(--beige); text-decoration:none; font-size:.85rem; font-weight:600; transition:.2s; position:relative; }
 .nav-links a:hover, .nav-links a.active { color:var(--copper); }
 .nav-right { display:flex; align-items:center; gap:16px; }
 .nav-logo { min-width:0; }

 /* Filas de logo repetidas (nav, Quiénes Somos, Nuestra Promesa, Contacto, footer) */
 .brand-row { min-width:0; }

 .nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:210; }
 .nav-toggle span { width:26px; height:3px; background:var(--beige); border-radius:2px; transition:.3s; display:block; }
 .nav-toggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
 .nav-toggle.active span:nth-child(2){ opacity:0; }
 .nav-toggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

 .nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.3s; z-index:150; }
 .nav-overlay.active { opacity:1; pointer-events:auto; }

 .hero {
   min-height: 100vh; position:relative; overflow:hidden;
   background: linear-gradient(135deg, rgba(34,44,80,0.93) 0%, rgba(34,44,80,0.78) 60%),
     url('../img/barco.png') center/cover no-repeat;
   display:flex; align-items:center; justify-content:center;
   padding: 120px 5% 80px;
   text-align:center;
 }
 .hero-content { max-width:800px; width:100%; position:relative; z-index:2; }
 .hero-wordmark { font-size:clamp(1.5rem, 7vw, 2.6rem); letter-spacing:clamp(1px, 0.6vw, 3px); }
 .hero-badge {
   display:inline-flex; align-items:center; gap:8px;
   padding:clamp(7px,2vw,9px) clamp(12px,4vw,20px);
   background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
   border-radius:clamp(16px, 4vw, 50px);
   color:var(--beige); font-size:clamp(.68rem, 2.6vw, .82rem); font-weight:600; letter-spacing:.5px; margin-bottom:22px;
   max-width:100%; text-align:center;
 }
 .hero-badge svg { width:16px; height:16px; flex-shrink:0; }
 .hero h1 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.35rem, 4.8vw, 2rem); color:var(--white); line-height:1.3; margin:28px 0 16px; }
 .hero p { color:var(--beige); font-size:1rem; line-height:1.7; max-width:620px; margin:0 auto 36px; }
 .hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
 .btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--copper); color:var(--white); padding:14px 32px; border-radius:5px; font-weight:700; text-decoration:none; font-size:.95rem; transition:.2s; }
 .btn-primary:hover { background:#8a4f32; transform:translateY(-2px); }
 .btn-primary svg { width:18px; height:18px; }
 .btn-secondary { background:transparent; color:var(--white); border:2px solid var(--white); padding:14px 32px; border-radius:5px; font-weight:700; text-decoration:none; font-size:.95rem; transition:.2s; }
 .btn-secondary:hover { background:rgba(255,255,255,.1); }
 .hero-phone { margin-top:28px; color:var(--beige); font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:6px; }
 .hero-phone strong { color:var(--white); }
 .hero-phone svg { width:16px; height:16px; color:var(--copper); }

 /* "Afiliados a" — flota entre el hero y Quiénes Somos */
 .afiliados { position:relative; z-index:5; padding:0 5% 60px; margin-top:-70px; text-align:center; }
 .afiliados-connector { display:flex; flex-direction:column; align-items:center; height:44px; }
 .afiliados-dot {
   width:12px; height:12px; border-radius:50%; background:var(--copper); flex-shrink:0;
   opacity:0; transform:scale(0); transition:opacity .2s ease, transform .2s ease;
 }
 .afiliados-dot.visible { opacity:1; transform:scale(1); }
 .afiliados-line { width:2px; height:0; background:var(--copper); transition:height .7s ease-out; }
 .afiliados-line.grow { height:32px; }
 .afiliados-card {
   display:inline-flex; align-items:center; gap:34px; background:var(--white);
   border-radius:18px; box-shadow:0 20px 50px rgba(34,44,80,.18); padding:30px 52px;
   opacity:0; transform:translateY(15px); transition:opacity .4s ease, transform .4s ease;
 }
 .afiliados-card.visible { opacity:1; transform:translateY(0); }
 .afiliados-label {
   font-family:'Montserrat',sans-serif; font-weight:800; font-size:.9rem; color:var(--navy);
   text-transform:uppercase; letter-spacing:1.5px; white-space:nowrap;
   padding-right:28px; border-right:1px solid rgba(34,44,80,.15);
 }
 .afiliados-logos { display:flex; align-items:center; gap:34px; }
 .afiliados-logos img { height:48px; width:auto; object-fit:contain; }
 @media(max-width:680px) {
   .afiliados { margin-top:-40px; }
   .afiliados-card { flex-direction:column; gap:16px; padding:20px 28px; max-width:100%; }
   .afiliados-label { border-right:none; border-bottom:1px solid rgba(34,44,80,.15); padding-right:0; padding-bottom:14px; white-space:normal; }
   .afiliados-logos { flex-wrap:wrap; justify-content:center; max-width:100%; }
 }

 section { padding: 80px 5%; }
 .section-title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.35rem, 4vw, 1.9rem); color:var(--navy); margin-bottom:10px; }
 .section-title span { color:var(--copper); }
 .section-sub { color:#666; font-size:.95rem; margin-bottom:48px; line-height:1.6; max-width:700px; }
 .center { text-align:center; }
 .center .section-sub { margin-left:auto; margin-right:auto; }

 /* Panel flotante: da profundidad a estas 6 secciones (sombra + radio + separación
    del borde del viewport, para que la sombra se note en vez de quedar cortada). */
 .quienes, .beneficios, .metodologia, .valores, .porque, .clientes {
   width:90%;
   max-width:1800px;
   margin:24px auto;
   border-radius:16px;
   box-shadow:0 4px 20px rgba(0,0,0,0.08);
 }

 .quienes { background: var(--white); }
 .quienes-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1100px; margin:0 auto; }
 .quienes-img { overflow:hidden; }
 .quienes-img img { width:100%; height:clamp(260px,50vw,440px); object-fit:cover; }
 .enfoque-list { list-style:none; margin-top:24px; }
 .enfoque-list li { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:.92rem; line-height:1.5; color:#444; }
 .enfoque-list li svg { width:17px; height:17px; color:var(--copper); flex-shrink:0; margin-top:2px; }

 .beneficios { background: var(--cream); }
 .beneficios-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1100px; margin:0 auto; }
 .bene-card { background:var(--white); padding:32px 24px; text-align:center; border-top:4px solid var(--copper); }
 .bene-icon svg { width:32px; height:32px; color:var(--copper); margin-bottom:16px; }
 .bene-card h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; color:var(--copper); margin-bottom:10px; }
 .bene-card p { font-size:.88rem; color:#666; line-height:1.6; }

 .servicios { background: var(--white); }
 .servicios .section-title { color:var(--navy); }
 .servicios .section-sub { color:#666; }
 .servicios-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1020px; margin:0 auto; }
 .serv-item {
   display:flex; align-items:flex-start; gap:16px;
   background:var(--white); border:1px solid rgba(34,44,80,.09); border-top:3px solid var(--copper);
   border-radius:10px; padding:22px 22px; box-shadow:0 4px 16px rgba(34,44,80,.06); transition:.25s;
 }
 .serv-item:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(34,44,80,.12); }
 .serv-item .icon { width:40px; height:40px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
 .serv-item .icon svg { width:19px; height:19px; color:var(--copper); }
 .serv-item p { color:#555; font-size:.9rem; line-height:1.55; }
 .serv-item strong { color:var(--navy); }

 .metodologia { background:var(--cream); }
 .steps { display:flex; gap:0; max-width:1100px; margin:0 auto; position:relative; }
 .steps::before { content:''; position:absolute; top:30px; left:10%; right:10%; height:3px; background: linear-gradient(to right, var(--copper), var(--beige)); z-index:0; }
 .step { flex:1; text-align:center; position:relative; z-index:1; padding:0 12px; }
 .step-num { width:clamp(48px,9vw,60px); height:clamp(48px,9vw,60px); background:var(--navy); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.05rem,2.5vw,1.3rem); margin:0 auto 16px; border:3px solid var(--copper); }
 .step h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; color:var(--navy); margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
 .step p { font-size:.82rem; color:#666; line-height:1.5; }

 .valores { background:var(--white); }
 .valores-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
 .valor-card { background:var(--cream); padding:32px 26px; text-align:center; border-bottom:4px solid var(--copper); }
 .valor-card svg { width:30px; height:30px; color:var(--copper); margin-bottom:14px; }
 .valor-card h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; color:var(--navy); margin-bottom:10px; }
 .valor-card p { font-size:.85rem; color:#666; line-height:1.6; }

 .porque { background:var(--cream); }
 .porque-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1100px; margin:0 auto; }
 .dif-list { list-style:none; }
 .dif-list li { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
 .dif-list li .check { width:24px; height:24px; background:var(--copper); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); flex-shrink:0; margin-top:1px; }
 .dif-list li .check svg { width:13px; height:13px; }
 .dif-list li span { font-size:.92rem; color:#444; line-height:1.5; }
 .dif-list li span strong { color:var(--navy); }
 .porque-highlight { background:var(--navy); padding:clamp(24px,6vw,40px); color:var(--white); }
 .porque-highlight h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.3rem; color:var(--copper); margin-bottom:14px; }
 .porque-highlight p { color:var(--beige); line-height:1.7; font-size:.95rem; }

 .clientes { background:var(--white); }
 .clientes-cats { display:grid; grid-template-columns:1fr 1fr; gap:32px; width:100%; max-width:1700px; margin:0 auto; }
 .clientes-cat h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.9rem; color:var(--navy); text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; border-bottom:2px solid var(--beige); padding-bottom:10px; text-align:center; }
 .logos-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; }
 .logo-cloud-img {
   max-height:80px; width:auto; max-width:160px;
   filter:grayscale(1); opacity:.75;
   transition:filter .3s ease, opacity .3s ease, transform .3s ease;
 }
 /* Hover a color solo en dispositivos con puntero real (mouse). En touch no hay
    hover fiable, así que los logos se quedan siempre en escala de grises. */
 @media (hover: hover) and (pointer: fine) {
   .logo-cloud-img:hover { filter:grayscale(0); opacity:1; transform:scale(1.06); }
 }

 .contacto {
   position:relative; overflow:hidden; text-align:center;
   padding: 60px 5% 50px;
   background: var(--navy);
 }
 .contacto::before {
   content:''; position:absolute; inset:0; z-index:1;
   background: linear-gradient(135deg, rgba(34,44,80,0.96) 0%, rgba(34,44,80,0.90) 60%);
 }
 .contacto-slideshow { position:absolute; inset:0; z-index:0; }
 .contacto-slide {
   position:absolute; inset:0; background-size:cover; background-position:center;
   opacity:0; animation: contactoSlideFade 12s infinite;
 }
 .contacto-slide:nth-child(1) { background-image:url('../img/contact-sunset.jpg'); animation-delay:0s; }
 .contacto-slide:nth-child(2) { background-image:url('../img/Barco2.jpg'); animation-delay:4s; }
 .contacto-slide:nth-child(3) { background-image:url('../img/services-ship.jpg'); animation-delay:8s; }
 @keyframes contactoSlideFade {
   0%     { opacity:1; }
   33.32% { opacity:1; }
   33.33% { opacity:0; }
   100%   { opacity:0; }
 }
 .contacto > .brand-row, .contacto > .contacto-layout { position:relative; z-index:2; }
 .contacto .section-title { color:var(--white); }
 .contacto .section-sub { color:var(--beige); }
 .contacto-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1100px; margin:0 auto; align-items:stretch; text-align:left; }
 .contacto-info { display:flex; flex-direction:column; justify-content:space-between; }
 .contacto-info .section-sub { margin:10px 0 32px; }
 .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
 .contact-item { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border-radius:8px; padding:16px 20px; transition:.2s; }
 .contact-item:hover { background:rgba(255,255,255,.11); }
 .contact-item .icon svg { width:22px; height:22px; color:var(--copper); flex-shrink:0; }
 .contact-item div { text-align:left; min-width:0; }
 .contact-item label { font-size:.75rem; color:var(--beige); display:block; margin-bottom:2px; text-transform:uppercase; letter-spacing:.5px; }
 .contact-item a, .contact-item span { color:var(--white); font-weight:600; font-size:.9rem; text-decoration:none; overflow-wrap:anywhere; }
 .contact-item a:hover { color:var(--copper); }

 .contact-form-card {
   background:rgba(255,255,255,.10);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius:14px; padding:clamp(24px,6vw,40px);
   border:1px solid rgba(255,255,255,.18);
   box-shadow: 0 24px 60px rgba(0,0,0,.35);
   text-align:left;
 }
 .contact-form-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.1rem; color:var(--white); margin-bottom:20px; }
 .contact-form { display:flex; flex-direction:column; gap:16px; }
 .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
 .form-field { display:flex; flex-direction:column; gap:6px; }
 .form-field label { font-size:.75rem; color:var(--beige); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
 .form-field input, .form-field textarea {
   background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:8px;
   padding:12px 14px; color:var(--white); font-family:'Open Sans',sans-serif; font-size:.9rem; transition:.2s;
 }
 .form-field input::placeholder, .form-field textarea::placeholder { color:rgba(211,190,165,.55); }
 .form-field input:focus, .form-field textarea:focus { outline:none; border-color:var(--copper); background:rgba(255,255,255,.12); }
 .form-field textarea { resize:vertical; min-height:90px; font-family:inherit; }
 .form-error { color:#ffb4a8; font-size:.85rem; display:none; }
 .form-error.visible { display:block; }
 .form-submit {
   display:inline-flex; align-items:center; justify-content:center; gap:8px;
   background:var(--copper); color:var(--white); border:none; padding:14px 32px;
   border-radius:6px; font-weight:700; font-size:1rem; text-decoration:none; font-family:'Open Sans',sans-serif;
   cursor:pointer; transition:.2s; align-self:flex-start;
 }
 .form-submit:hover { background:#8a4f32; transform:translateY(-2px); }
 .form-submit svg { width:20px; height:20px; }

 footer { background:#161e38; color:var(--beige); text-align:center; padding:24px 5%; font-size:.82rem; }

 .section-logo-header { display:flex; align-items:center; gap:16px; margin-bottom:32px; }
 .section-logo-header svg { flex-shrink:0; }

 /* Logos reales (img/logo-white.png, img/logo_Sf.png) en vez del ícono dibujado a mano.
    Los archivos originales traen ~26% de margen transparente arriba y ~37% abajo
    (solo el 37% central es el logo real) — como no se puede editar el archivo,
    se "recorta" ese margen solo visualmente: la caja (.logo-box) muestra nada más
    la ventana de altura --lh con overflow:hidden, y la imagen adentro se agranda
    y se sube con margin-top negativo para que la parte útil quede centrada ahí. */
 .logo-box { overflow:hidden; display:flex; align-items:flex-start; justify-content:center; flex-shrink:0; height:var(--lh); }
 .logo-box img { width:auto; display:block; height:calc(var(--lh) / 0.37); margin-top:calc(var(--lh) * -0.26 / 0.37); }
 .nav-logo-box { --lh:60px; }
 .hero-logo-box { --lh:clamp(105px, 20vw, 170px); margin:0 auto 24px; }
 .quienes-logo-box { --lh:96px; }
 .promesa-logo-box { --lh:64px; }
 .contacto-logo-box { --lh:92px; }
 .footer-logo-box { --lh:56px; }

 /* Scroll fade-in */
 .fade-in { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
 .fade-in.visible { opacity:1; transform:translateY(0); }
 @media (prefers-reduced-motion: reduce) {
   .fade-in { opacity:1 !important; transform:none !important; transition:none !important; }
   html { scroll-behavior:auto; }
   .afiliados-dot, .afiliados-line, .afiliados-card { transition:none !important; }
   .afiliados-dot { opacity:1 !important; transform:none !important; }
   .afiliados-line { height:32px !important; }
   .afiliados-card { opacity:1 !important; transform:none !important; }
   .contacto-slide { animation:none !important; opacity:0; }
   .contacto-slide:nth-child(1) { opacity:1; }
 }

 /* Floating stack: back-to-top + WhatsApp */
 .floating-stack { position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:180; }
 .back-to-top { width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25); cursor:pointer; border:2px solid var(--copper); opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s; }
 .back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
 .back-to-top:hover { background:var(--copper); }
 .back-to-top svg { width:20px; height:20px; }
 .whatsapp-fab { position:relative; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45); animation:pulse-wa 2.4s infinite; transition:.2s; }
 .whatsapp-fab:hover { transform:scale(1.08); }
 .whatsapp-fab svg { width:27px; height:27px; }
 @keyframes pulse-wa { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
 .whatsapp-tooltip { position:absolute; right:66px; top:50%; transform:translateY(-50%); background:var(--navy); color:#fff; padding:8px 14px; border-radius:6px; font-size:.76rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.25s; font-weight:600; }
 .whatsapp-fab:hover .whatsapp-tooltip { opacity:1; }

 /* Tablet y menor: menú hamburguesa, filas de tarjetas que ya no caben en 4/5 */
 @media(max-width:900px) {
   .beneficios-grid { grid-template-columns:repeat(2,1fr); }
   .valores-grid { grid-template-columns:1fr 1fr; }
   .steps { flex-direction:column; gap:24px; }
   .steps::before { display:none; }

   .nav-toggle { display:flex; }
   .nav-links {
     position:fixed; top:0; right:-100%; height:100vh; width:min(78vw,320px);
     background:var(--navy); flex-direction:column; justify-content:center; align-items:flex-start;
     gap:30px; padding:40px; transition:right .35s ease; box-shadow:-10px 0 30px rgba(0,0,0,.35);
   }
   .nav-links.open { right:0; }
   .nav-links a { font-size:1.05rem; }
 }
 /* Mobile real (celulares grandes hacia abajo): recién aquí colapsan a 1 columna
    las grillas de 2 columnas — en tablet (768-900px) siguen viéndose en 2. */
 @media(max-width:680px) {
   .quienes-grid, .porque-grid { grid-template-columns:1fr; }
   .servicios-grid { grid-template-columns:1fr; }
   .clientes-cats { grid-template-columns:1fr; }
   .contacto-layout { grid-template-columns:1fr; gap:32px; }
   .form-row { grid-template-columns:1fr; }
   .logos-grid { gap:16px; }
   .logo-cloud-img { max-height:56px; max-width:120px; }
 }
 @media(max-width:600px) {
   .beneficios-grid { grid-template-columns:1fr; }
   .valores-grid { grid-template-columns:1fr; }
   .floating-stack { right:14px; bottom:14px; }
   .whatsapp-tooltip { display:none; }
 }