*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --azul: #081C35;
      --azul-medio: #0A2540;
      --turquesa: #00B8C8;
      --turquesa-claro: #7FE8F2;
      --arena: #F5EDD6;
      --dorado: #C9A84C;
      --blanco: #F6F9FB;
      --gris: #7A8EA0;
      --negro: #050D18;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Space Grotesk', sans-serif; background: var(--negro); color: var(--blanco); overflow-x: hidden; }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem 3rem;
      background: rgba(5,13,24,0.88);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(0,184,200,0.14);
    }
    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.45rem; font-weight: 700;
      color: var(--blanco); letter-spacing: -0.02em;
    }
    .logo span { color: var(--turquesa); }
    nav ul { list-style: none; display: flex; gap: 2.5rem; }
    nav a { text-decoration: none; color: var(--gris); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; transition: color .3s; }
    nav a:hover { color: var(--turquesa); }
    .nav-cta { border: 1px solid var(--turquesa); color: var(--turquesa) !important; padding: .45rem 1.3rem; border-radius: 2px; transition: background .3s, color .3s !important; }
    .nav-cta:hover { background: var(--turquesa) !important; color: var(--negro) !important; }

    /* HERO */
    #hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('../images/sanfernando.jpg');
      background-size: cover; background-position: center 40%;
      filter: brightness(0.25) saturate(0.65);
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(120deg, rgba(5,13,24,.92) 40%, rgba(0,184,200,.07) 100%);
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(0,184,200,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,184,200,.035) 1px, transparent 1px);
      background-size: 56px 56px;
    }
    .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 3rem; padding-top: 6rem; }
    .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--turquesa); margin-bottom: 1.8rem; }
    .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--turquesa); }
    h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5.5vw, 5.6rem); font-weight: 900; line-height: 1.0; letter-spacing: -.03em; color: var(--blanco); max-width: 780px; margin-bottom: 1.5rem; }
    h1 em { font-style: italic; color: var(--turquesa); }
    .hero-desc { font-size: 1.05rem; font-weight: 300; color: var(--gris); max-width: 500px; line-height: 1.85; margin-bottom: 2.8rem; }
    .hero-desc strong { color: var(--blanco); font-weight: 500; }
    .btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn-p { background: var(--turquesa); color: var(--negro); text-decoration: none; padding: .85rem 2rem; font-family: 'Space Grotesk'; font-size: .88rem; font-weight: 600; letter-spacing: .05em; border: none; border-radius: 2px; cursor: pointer; transition: background .3s, transform .2s; display: inline-block; }
    .btn-p:hover { background: var(--turquesa-claro); transform: translateY(-2px); }
    .btn-s { background: transparent; color: var(--blanco); text-decoration: none; padding: .85rem 2rem; font-family: 'Space Grotesk'; font-size: .88rem; font-weight: 500; letter-spacing: .05em; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; cursor: pointer; transition: border-color .3s, color .3s; display: inline-block; }
    .btn-s:hover { border-color: var(--turquesa); color: var(--turquesa); }
    .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--gris); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; animation: bob 2.2s ease-in-out infinite; }
    .hero-scroll::after { content: ''; width: 1px; height: 38px; background: linear-gradient(to bottom, var(--gris), transparent); }
    @keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

    /* STATS */
    .stats-band { background: rgba(0,184,200,.07); border-top: 1px solid rgba(0,184,200,.18); border-bottom: 1px solid rgba(0,184,200,.18); padding: 2rem 3rem; }
    .stats-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
    .stat { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 110px; }
    .stat-n { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--turquesa); }
    .stat-l { font-size: .72rem; font-weight: 500; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; text-align: center; }

    /* SECCIONES */
    section { padding: 7rem 3rem; }
    .wrap { max-width: 1200px; margin: 0 auto; }
    .tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--turquesa); margin-bottom: .9rem; }
    .tag::before { content: ''; width: 22px; height: 1px; background: var(--turquesa); }
    h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--blanco); margin-bottom: 1.1rem; }
    h2 em { font-style: italic; color: var(--turquesa); }
    .lead { font-size: 1rem; color: var(--gris); line-height: 1.85; max-width: 540px; font-weight: 300; }

    /* NOSOTROS */
    #nosotros { background: var(--negro); }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: 4rem; }
    .img-frame { position: relative; }
    .img-frame img { width: 100%; height: 460px; object-fit: cover; border-radius: 3px; filter: saturate(.6) brightness(.8); display: block; }
    .img-badge { position: absolute; bottom: -1.2rem; right: -1.2rem; background: var(--turquesa); color: var(--negro); padding: 1.3rem 1.5rem; border-radius: 2px; }
    .img-badge span { display: block; font-family: 'Playfair Display', serif; font-size: 2.3rem; font-weight: 900; line-height: 1; }
    .img-badge small { font-family: 'Space Grotesk'; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .features { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.2rem; }
    .feat { display: flex; gap: 1rem; align-items: flex-start; }
    .feat-icon { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid rgba(0,184,200,.3); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .feat h4 { font-size: .93rem; font-weight: 600; color: var(--blanco); margin-bottom: .25rem; }
    .feat p { font-size: .83rem; color: var(--gris); line-height: 1.65; font-weight: 300; }

    /* SERVICIOS */
    #servicios { background: rgba(8,28,53,.45); border-top: 1px solid rgba(0,184,200,.07); border-bottom: 1px solid rgba(0,184,200,.07); }
    .srv-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; flex-wrap: wrap; gap: 2rem; }
    .srv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5px; background: rgba(0,184,200,.1); border: 1px solid rgba(0,184,200,.1); }
    .srv-card { background: var(--negro); padding: 2.5rem; transition: background .4s; position: relative; overflow: hidden; }
    .srv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--turquesa); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
    .srv-card:hover { background: rgba(0,184,200,.05); }
    .srv-card:hover::before { transform: scaleX(1); }
    .srv-n { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 900; color: rgba(0,184,200,.1); line-height: 1; margin-bottom: .8rem; }
    .srv-card h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--blanco); margin-bottom: .7rem; }
    .srv-card p { font-size: .86rem; color: var(--gris); line-height: 1.8; font-weight: 300; }
    .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.4rem; }
    .chip { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa); border: 1px solid rgba(0,184,200,.22); padding: .22rem .6rem; border-radius: 1px; }

    /* SEO SECTION */
    #seo { background: var(--negro); position: relative; overflow: hidden; }
    #seo::before { content: ''; position: absolute; top: -120px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,184,200,.06) 0%, transparent 70%); pointer-events: none; }
    .seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-top: 4rem; }
    .seo-img-wrap { position: relative; padding-bottom: 5rem; }
    .seo-img-wrap img { width: 100%; height: 380px; object-fit: cover; border-radius: 3px; filter: saturate(.55) brightness(.75); display: block; }
    .seo-overlay-card {
      position: absolute; bottom: -5rem; left: 0; right: 0;
      background: rgba(5,13,24,.95);
      border: 1px solid rgba(0,184,200,.3);
      border-radius: 3px;
      padding: 1.2rem 1.5rem;
    }
    .seo-result { display: flex; align-items: center; justify-content: space-between; }
    .seo-result-text { font-size: .78rem; }
    .seo-result-text .url { color: var(--turquesa); font-size: .7rem; font-weight: 500; }
    .seo-result-text .title { color: #8AB4F8; font-size: .85rem; font-weight: 500; margin: .2rem 0; }
    .seo-result-text .desc { color: var(--gris); font-size: .75rem; line-height: 1.5; }
    .pos-badge { flex-shrink: 0; background: var(--turquesa); color: var(--negro); font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; width: 52px; height: 52px; border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-left: 1rem; }
    .seo-points { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 1rem; }
    .seo-point { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(255,255,255,.05); }
    .seo-point:last-child { border-bottom: none; padding-bottom: 0; }
    .seo-point-icon { flex-shrink: 0; width: 42px; height: 42px; background: rgba(0,184,200,.1); border: 1px solid rgba(0,184,200,.2); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .seo-point h4 { font-size: .95rem; font-weight: 600; color: var(--blanco); margin-bottom: .3rem; }
    .seo-point p { font-size: .84rem; color: var(--gris); line-height: 1.7; font-weight: 300; }

    /* DIGITALIZAR */
    #digitalizar { background: rgba(8,28,53,.4); border-top: 1px solid rgba(0,184,200,.07); border-bottom: 1px solid rgba(0,184,200,.07); }
    .dig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: 3.5rem; }
    .dig-img { position: relative; }
    .dig-img img { width: 100%; height: 420px; object-fit: cover; border-radius: 3px; filter: saturate(.65); display: block; }
    .code-box {
      position: absolute; top: 1.2rem; left: 1.2rem; right: 1.2rem;
      background: rgba(5,13,24,.93);
      border: 1px solid rgba(0,184,200,.28);
      border-radius: 3px;
      padding: 1rem 1.3rem;
      font-family: 'Courier New', monospace;
      font-size: .73rem; line-height: 1.9;
    }
    .cl { display: flex; gap: .5rem; }
    .ln { color: rgba(255,255,255,.18); user-select: none; }
    .kw { color: #7FE8F2; } .fn { color: #C9A84C; } .st { color: #7EC8A0; } .cm { color: #3D5567; }
    .razones { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 1.5rem; }
    .razon { display: flex; gap: 1.1rem; }
    .rn { flex-shrink: 0; font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 900; color: rgba(0,184,200,.28); width: 36px; text-align: right; line-height: 1.1; }
    .razon h4 { font-size: .95rem; font-weight: 600; color: var(--blanco); margin-bottom: .28rem; }
    .razon p { font-size: .84rem; color: var(--gris); line-height: 1.7; font-weight: 300; }

    /* CÁDIZ */
    #cadiz { padding: 0; }
    .cadiz-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 58vh; }
    .cadiz-photo { position: relative; overflow: hidden; }
    .cadiz-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.55); transition: filter .6s; display: block; }
    .cadiz-photo:hover img { filter: saturate(.75) brightness(.7); }
    .cadiz-text { background: var(--azul-medio); padding: 5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
    .cadiz-quote { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700; font-style: italic; line-height: 1.45; color: var(--blanco); margin: 1.4rem 0; }
    .cadiz-quote::before { content: '\201C'; color: var(--turquesa); }
    .cadiz-quote::after { content: '\201D'; color: var(--turquesa); }
    .cadiz-text p { font-size: .88rem; color: var(--gris); line-height: 1.85; font-weight: 300; }

    /* CONTACTO */
    #contacto { background: rgba(8,28,53,.35); border-top: 1px solid rgba(0,184,200,.1); }
    .ct-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; margin-top: 4rem; }
    .ct-info h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--blanco); margin-bottom: .9rem; }
    .ct-info p { font-size: .88rem; color: var(--gris); line-height: 1.85; font-weight: 300; margin-bottom: 2rem; }
    .ct-datos { display: flex; flex-direction: column; gap: .9rem; }
    .ct-dato { display: flex; align-items: center; gap: .75rem; }
    .ct-icon { width: 34px; height: 34px; border: 1px solid rgba(0,184,200,.28); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
    .ct-dato span { font-size: .86rem; color: var(--gris); }
    form { display: flex; flex-direction: column; gap: 1.1rem; }
    .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .fg { display: flex; flex-direction: column; gap: .35rem; }
    label { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); }
    input, textarea, select { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--blanco); padding: .72rem .95rem; font-family: 'Space Grotesk'; font-size: .88rem; border-radius: 2px; transition: border-color .3s; outline: none; width: 100%; }
    input::placeholder, textarea::placeholder { color: rgba(255,255,255,.2); }
    input:focus, textarea:focus, select:focus { border-color: var(--turquesa); }
    textarea { resize: vertical; min-height: 115px; }
    select option { background: var(--azul-medio); }
    .fsub { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; }
    .fsub small { font-size: .76rem; color: var(--gris); font-weight: 300; }
    .ok-msg { display: none; background: rgba(0,184,200,.1); border: 1px solid rgba(0,184,200,.4); color: var(--turquesa); padding: .9rem 1.3rem; border-radius: 2px; font-size: .88rem; text-align: center; }

    /* FOOTER */
    footer { padding: 2.2rem 3rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    footer .logo { font-size: 1.2rem; }
    footer p { font-size: .76rem; color: var(--gris); }
    footer p strong { color: var(--turquesa); font-weight: 600; }
    .flinks { display: flex; gap: 1.5rem; }
    .flinks a { font-size: .76rem; color: var(--gris); text-decoration: none; transition: color .3s; }
    .flinks a:hover { color: var(--turquesa); }

    /* ── HAMBURGER BUTTON ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px; height: 40px;
      background: none; border: none; cursor: pointer;
      padding: 4px; z-index: 300;
    }
    .hamburger span {
      display: block;
      width: 24px; height: 2px;
      background: var(--blanco);
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
      transform-origin: center;
    }
    /* X cuando está abierto */
    .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      /* ── NAV ── */
      nav { padding: 1rem 1.5rem; }
      nav ul { display: none; }   /* ocultar menú horizontal */
      .hamburger { display: flex; }

      /* Menú desplegable móvil */
      #nav-menu {
        display: flex !important;  /* siempre en DOM, controlado por transform */
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: fixed;
        top: 0; left: 0; right: 0;
        background: rgba(10, 22, 40, 0.98);
        backdrop-filter: blur(18px);
        padding: 90px 2rem 2.5rem;
        transform: translateY(-110%);
        transition: transform .35s cubic-bezier(.4,0,.2,1);
        z-index: 250;
        list-style: none;
        border-bottom: 1px solid rgba(0,184,200,.18);
      }
      #nav-menu.nav-open { transform: translateY(0); }

      #nav-menu li { border-bottom: 1px solid rgba(255,255,255,.06); }
      #nav-menu li:last-child { border-bottom: none; margin-top: 1.2rem; }

      #nav-menu a {
        display: block;
        padding: 1rem .5rem;
        font-size: 1rem;
        letter-spacing: .1em;
        color: rgba(210,230,245,.85);
      }
      #nav-menu a:hover { color: var(--turquesa); }
      #nav-menu .nav-cta {
        text-align: center;
        padding: .85rem 1.5rem;
        border-radius: 2px;
        margin-top: .3rem;
        color: var(--turquesa) !important;
      }

      /* ── SECCIONES ── */
      section { padding: 5rem 1.5rem; }
      .two-col, .seo-grid, .dig-grid, .ct-grid { grid-template-columns: 1fr; gap: 3rem; }
      .cadiz-split { grid-template-columns: 1fr; }
      .cadiz-photo { min-height: 40vh; }
      .cadiz-text { padding: 3.5rem 2rem; }
      .hero-content { padding: 0 1.5rem; padding-top: 5.5rem; }
      footer { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
      .img-badge { display: none; }
      .frow { grid-template-columns: 1fr; }
      .seo-overlay-card { position: static; margin-top: 1rem; }

      /* ── QUITAR animación "Conócenos mejor" ── */
      .hero-scroll { display: none; }

      /* ── COLORES MÁS CLAROS EN MÓVIL ── */
      body { background: #1e3a5c; }

      /* Fondos de sección más claros */
      #nosotros    { background: #1e3a5c; }
      #seo         { background: #1e3a5c; }
      #servicios   { background: #243f63; }
      #digitalizar { background: #223c60; }
      #contacto    { background: #243f63; }
      .stats-band  { background: rgba(0,184,200,.15); }
      .cadiz-text  { background: #1a3457; }
      footer       { background: #162d4a; border-top-color: rgba(0,184,200,.2); }

      /* Tarjetas de servicios */
      .srv-card { background: #1a3254; }
      .srv-card:hover { background: rgba(0,184,200,.12); }
      .role-card { background: rgba(0,184,200,.08); }

      /* Contacto y SEO overlay */
      .seo-overlay-card { background: rgba(20,45,78,.97); }
      .ct-grid input, .ct-grid textarea, .ct-grid select { background: rgba(255,255,255,.1); }

      /* Textos: mucho más claros */
      .lead, .feat p, .srv-card p, .seo-point p, .razon p,
      .ct-dato span, .ct-info p, .cadiz-text p { color: #c8ddef; }

      .stat-l, label, footer p { color: #a8c4dc; }
      .gris, nav a { color: #b0ccdf; }

      h1, h2, h3, h4, .feat h4, .srv-card h3,
      .seo-point h4, .razon h4, .role-card h4 { color: #f0f7ff; }

      /* Inputs */
      input, textarea, select {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.22);
        color: #f0f7ff;
      }

      /* Hero: fondo un poco más visible */
      .hero-bg { filter: brightness(.42) saturate(.8); }
    }

    /* FADE IN */
    .fi { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .fi.on { opacity: 1; transform: none; }
    .fi:nth-child(2) { transition-delay: .12s; }
    .fi:nth-child(3) { transition-delay: .24s; }

    /* =============================================
       NUEVOS ESTILOS — San Fernando / Actualización
       ============================================= */

    /* Hero: badge de proximidad */
    .hero-proximity {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      margin-top: 2rem;
      font-size: .8rem;
      color: var(--gris);
      font-weight: 300;
    }
    .hero-proximity strong { color: var(--turquesa); font-weight: 600; }
    .prox-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--turquesa);
      box-shadow: 0 0 0 0 rgba(0,184,200,.5);
      animation: pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0 rgba(0,184,200,.5); }
      70%  { box-shadow: 0 0 0 9px rgba(0,184,200,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,184,200,0); }
    }

    /* Sección nosotros: two-col con roles a la derecha */
    .team-roles { display: flex; flex-direction: column; gap: 1.6rem; }
    .roles-header h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem; font-weight: 700;
      color: var(--blanco); line-height: 1.2;
      margin-top: .5rem;
    }
    .roles-grid { display: flex; flex-direction: column; gap: .9rem; margin-top: .5rem; }
    .role-card {
      background: rgba(0,184,200,.04);
      border: 1px solid rgba(0,184,200,.12);
      border-radius: 3px;
      padding: 1.2rem 1.4rem;
      transition: border-color .3s, background .3s;
    }
    .role-card:hover {
      border-color: rgba(0,184,200,.35);
      background: rgba(0,184,200,.08);
    }
    .role-icon { font-size: 1.3rem; margin-bottom: .45rem; }
    .role-card h4 {
      font-size: .92rem; font-weight: 600;
      color: var(--blanco); margin-bottom: .3rem;
    }
    .role-card p { font-size: .82rem; color: var(--gris); line-height: 1.65; font-weight: 300; margin-bottom: .7rem; }
    .role-tools { display: flex; flex-wrap: wrap; gap: .3rem; }

    /* Servicio card: badge "Nuevo" */
    .srv-card { position: relative; overflow: hidden; }
    .srv-badge-new {
      position: absolute; top: 1.2rem; right: 1.2rem;
      background: var(--turquesa); color: var(--negro);
      font-size: .62rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      padding: .2rem .55rem; border-radius: 1px;
    }

    /* Zonas de actuación */
    .zonas {
      display: flex; flex-wrap: wrap; gap: .5rem;
      margin-top: 1.6rem;
    }
    .zona-chip {
      font-size: .72rem; font-weight: 600;
      letter-spacing: .07em; text-transform: uppercase;
      color: var(--turquesa);
      border: 1px solid rgba(0,184,200,.3);
      background: rgba(0,184,200,.06);
      padding: .3rem .75rem; border-radius: 2px;
      transition: background .25s, border-color .25s;
    }
    .zona-chip:hover { background: rgba(0,184,200,.15); border-color: var(--turquesa); }

    /* Contacto: nuevo dato de reunión presencial */
    .ct-dato .ct-icon { color: var(--turquesa); }

    /* =============================================
       LOGO IMAGEN — nav y footer
       ============================================= */

    /* Enlace contenedor del logo */
    .logo-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    /* Logo en la barra de navegación */
    .nav-logo {
      height: 80px;
      width: auto;
      object-fit: contain;
      /* El logo tiene fondo claro; mix-blend-mode:lighten
         hace que el blanco/gris claro desaparezca sobre
         el fondo oscuro de la nav */
      mix-blend-mode: lighten;
      filter: brightness(1.15) contrast(1.05);
      transition: opacity .3s;
    }
    .nav-logo:hover { opacity: .85; }

    /* Logo en el footer */
    .footer-logo {
      height: 42px;
      width: auto;
      object-fit: contain;
      mix-blend-mode: lighten;
      filter: brightness(1.1);
      opacity: .9;
      transition: opacity .3s;
    }
    .footer-logo:hover { opacity: 1; }

    /* Ajuste de altura de nav para acomodar el logo */
    nav {
      padding-top: .75rem;
      padding-bottom: .75rem;
    }

    @media (max-width: 900px) {
      .nav-logo  { height: 60px; }
      .footer-logo { height: 36px; }
    }