:root {
      --verde: #0d5c45;
      --verde-claro: #1a8068;
      --verde-oscuro: #083b2c;
      --naranja: #e25d1e;
      --amarillo: #f5c31b;
      --arena: #f4ead0;
      --mar: #1a8ba8;
      --mar-claro: #7fc4d4;
      --blanco: #ffffff;
      --gris: #f8f6f0;
      --texto: #1a1a1a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Lato', sans-serif;
      color: var(--texto);
      background-color: #eaf6fb;
      position: relative;
    }

    /* Fondo ilustrado (cielo/mar/playa) en una capa fija aparte, no con
       background-attachment:fixed en el body — ese truco casi nunca
       funciona bien en navegadores de celular (Safari iOS, Chrome
       Android), por eso en el teléfono no se veía el fondo. Con un
       elemento de verdad en position:fixed sí se ve igual en computadora
       y en celular. */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22cielo%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238fd0ea%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23bfe8f0%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23d9f0e8%22/%3E%3C/linearGradient%3E%3CradialGradient%20id%3D%22sol%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff6d0%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23f7cf2e%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23f5c31b%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id%3D%22mar-lejos%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2382cbde%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234fabc8%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22mar-cerca%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%233aa0c4%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231c7ba0%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22arena%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23f7e9bd%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23eed69a%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23dcb972%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22tronco%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238a5a34%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236b4325%22/%3E%3C/linearGradient%3E%3Cfilter%20id%3D%22grano%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%20result%3D%22ruido%22/%3E%3CfeColorMatrix%20in%3D%22ruido%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.3%200%200%200%200%200.24%200%200%200%200%200.1%200%200%200%200.05%200%22/%3E%3C/filter%3E%3Cfilter%20id%3D%22nube-blur%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2213%22/%3E%3C/filter%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23cielo%29%22/%3E%3Cg%20opacity%3D%220.8%22%20filter%3D%22url%28%23nube-blur%29%22%3E%3Cellipse%20cx%3D%22250%22%20cy%3D%22120%22%20rx%3D%22105%22%20ry%3D%2232%22%20fill%3D%22%23ffffff%22/%3E%3Cellipse%20cx%3D%22345%22%20cy%3D%22100%22%20rx%3D%2275%22%20ry%3D%2224%22%20fill%3D%22%23ffffff%22/%3E%3Cellipse%20cx%3D%22185%22%20cy%3D%22140%22%20rx%3D%2255%22%20ry%3D%2220%22%20fill%3D%22%23ffffff%22/%3E%3Cellipse%20cx%3D%221020%22%20cy%3D%22210%22%20rx%3D%22120%22%20ry%3D%2228%22%20fill%3D%22%23ffffff%22/%3E%3Cellipse%20cx%3D%221110%22%20cy%3D%22192%22%20rx%3D%2265%22%20ry%3D%2220%22%20fill%3D%22%23ffffff%22/%3E%3Cellipse%20cx%3D%22640%22%20cy%3D%2290%22%20rx%3D%2260%22%20ry%3D%2218%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.7%22/%3E%3C/g%3E%3Ccircle%20cx%3D%221360%22%20cy%3D%22150%22%20r%3D%22140%22%20fill%3D%22url%28%23sol%29%22/%3E%3Ccircle%20cx%3D%221360%22%20cy%3D%22150%22%20r%3D%2260%22%20fill%3D%22%23fbe07a%22/%3E%3Ccircle%20cx%3D%221360%22%20cy%3D%22150%22%20r%3D%2260%22%20fill%3D%22none%22%20stroke%3D%22%23fff6d0%22%20stroke-width%3D%222%22%20opacity%3D%220.6%22/%3E%3Cpath%20d%3D%22M0%2C470%20C220%2C428%20420%2C510%20640%2C470%20C880%2C425%201080%2C505%201300%2C462%20C1420%2C440%201520%2C455%201600%2C450%20L1600%2C560%20L0%2C560%20Z%22%20fill%3D%22url%28%23mar-lejos%29%22/%3E%3Cpath%20d%3D%22M0%2C510%20C220%2C478%20420%2C545%20640%2C512%20C880%2C478%201080%2C542%201300%2C508%20L1600%2C498%20L1600%2C900%20L0%2C900%20Z%22%20fill%3D%22url%28%23mar-cerca%29%22/%3E%3Cg%20opacity%3D%220.7%22%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22490%22%20r%3D%223%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22500%22%20r%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22485%22%20r%3D%222.5%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22475%22%20r%3D%223%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%22945%22%20cy%3D%22488%22%20r%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%22750%22%20cy%3D%22530%22%20r%3D%222.5%22%20fill%3D%22%23ffffff%22/%3E%3Ccircle%20cx%3D%221150%22%20cy%3D%22470%22%20r%3D%222.5%22%20fill%3D%22%23ffffff%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0%2C555%20C220%2C518%20420%2C596%20640%2C558%20C880%2C517%201080%2C592%201300%2C552%20C1420%2C532%201520%2C544%201600%2C540%22%20fill%3D%22none%22%20stroke%3D%22%23eef8fb%22%20stroke-width%3D%225%22%20opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M0%2C625%20C220%2C592%20420%2C655%20640%2C625%20C880%2C592%201080%2C652%201300%2C618%20C1420%2C602%201520%2C610%201600%2C608%22%20fill%3D%22none%22%20stroke%3D%22%23eef8fb%22%20stroke-width%3D%225%22%20opacity%3D%220.4%22/%3E%3Cpath%20d%3D%22M0%2C700%20C220%2C670%20420%2C724%20640%2C700%20C880%2C670%201080%2C720%201300%2C694%20C1420%2C680%201520%2C688%201600%2C686%22%20fill%3D%22none%22%20stroke%3D%22%23eef8fb%22%20stroke-width%3D%224%22%20opacity%3D%220.3%22/%3E%3Cpath%20d%3D%22M0%2C745%20C260%2C700%20480%2C782%20760%2C740%20C1020%2C700%201280%2C764%201600%2C726%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%228%22%20opacity%3D%220.65%22/%3E%3Cpath%20d%3D%22M0%2C752%20C260%2C708%20480%2C788%20760%2C748%20C1020%2C708%201280%2C770%201600%2C732%20L1600%2C900%20L0%2C900%20Z%22%20fill%3D%22url%28%23arena%29%22/%3E%3Cpath%20d%3D%22M0%2C752%20C260%2C708%20480%2C788%20760%2C748%20C1020%2C708%201280%2C770%201600%2C732%20L1600%2C900%20L0%2C900%20Z%22%20fill%3D%22url%28%23grano%29%22%20opacity%3D%220.5%22/%3E%3Cellipse%20cx%3D%22220%22%20cy%3D%22815%22%20rx%3D%2265%22%20ry%3D%2210%22%20fill%3D%22%23c9a76a%22%20opacity%3D%220.4%22/%3E%3Cellipse%20cx%3D%221220%22%20cy%3D%22840%22%20rx%3D%2280%22%20ry%3D%2211%22%20fill%3D%22%23c9a76a%22%20opacity%3D%220.4%22/%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22855%22%20rx%3D%2255%22%20ry%3D%228%22%20fill%3D%22%23c9a76a%22%20opacity%3D%220.35%22/%3E%3Cg%20transform%3D%22translate%28940%2C795%29%20rotate%28-8%29%22%3E%3Cpath%20d%3D%22M0%2C0%20q6%2C-10%2014%2C-4%20q-8%2C4%20-14%2C4%20Z%22%20fill%3D%22%23e8927a%22/%3E%3Cpath%20d%3D%22M0%2C1%20q0%2C-3%204%2C-4%20q1%2C3%20-1%2C5%20q-2%2C1%20-3%2C-1%20Z%22%20fill%3D%22%23f2a88e%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%281330%2C822%29%20rotate%2815%29%20scale%280.8%29%22%3E%3Cpath%20d%3D%22M0%2C-10%20L3%2C-3%20L10%2C-3%20L4%2C2%20L6%2C9%20L0%2C4%20L-6%2C9%20L-4%2C2%20L-10%2C-3%20L-3%2C-3%20Z%22%20fill%3D%22%23e8a25c%22%20opacity%3D%220.85%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2C900%29%22%3E%3Cpath%20d%3D%22M18%2C-260%20C10%2C-300%2030%2C-330%2018%2C-360%22%20stroke%3D%22url%28%23tronco%29%22%20stroke-width%3D%2214%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%232f7d4f%22%3E%3Cpath%20d%3D%22M18%2C-360%20C-40%2C-380%20-90%2C-350%20-120%2C-300%20C-70%2C-320%20-30%2C-330%2018%2C-360%20Z%22/%3E%3Cpath%20d%3D%22M18%2C-360%20C70%2C-390%20120%2C-370%20145%2C-320%20C100%2C-330%2055%2C-335%2018%2C-360%20Z%22/%3E%3Cpath%20d%3D%22M18%2C-360%20C-20%2C-410%20-10%2C-450%2030%2C-470%20C15%2C-430%2015%2C-395%2018%2C-360%20Z%22/%3E%3Cpath%20d%3D%22M18%2C-360%20C55%2C-400%20100%2C-410%20130%2C-390%20C90%2C-380%2050%2C-370%2018%2C-360%20Z%22/%3E%3Cpath%20d%3D%22M18%2C-360%20C-10%2C-330%20-20%2C-300%20-55%2C-280%20C-30%2C-320%200%2C-345%2018%2C-360%20Z%22/%3E%3C/g%3E%3C/g%3E%3Cg%20opacity%3D%220.55%22%3E%3Cpath%20d%3D%22M180%2C220%20q14%2C-16%2028%2C0%22%20stroke%3D%22%233a3a3a%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M215%2C235%20q12%2C-14%2024%2C0%22%20stroke%3D%22%233a3a3a%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: cover;
      background-color: #8fd0ea;
    }

    /* En pantallas angostas y muy altas (celulares en vertical), "cover"
       hace zoom para llenar todo el alto — y eso recorta los lados de la
       ilustración (la palmera a la izquierda y el sol a la derecha),
       dejando solo el mar y la arena de en medio visibles. Aquí, en vez
       de forzar que llene todo el alto, la ajustamos por ANCHO para que
       se vea completa (palmera, sol, nubes, mar y arena), aunque quede
       como una franja en la parte de abajo en vez de ocupar toda la
       pantalla — el espacio de arriba se rellena con el mismo azul del
       cielo de la ilustración, para que no se note el corte. */
    @media (max-width: 700px) {
      body::before {
        background-size: 100% auto;
      }
    }


    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--verde);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 2rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
    }

    .logo-nav {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: none;
      border: none;   /* antes tenía un aro gris translúcido alrededor del logo */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      padding: 0;
    }

    .logo-nav img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 50%;
      display: block;
    }

    .nav-brand-text {
      line-height: 1.1;
    }

    .nav-brand-text span:first-child {
      display: block;
      font-family: 'Oswald', sans-serif;
      font-size: 1rem;
      color: var(--blanco);
      font-weight: 700;
    }

    .nav-brand-text span:last-child {
      display: block;
      font-size: 0.75rem;
      color: var(--amarillo);
    }

    .nav-links {
      display: flex;
      gap: 0.25rem;
      list-style: none;
    }

    .nav-links a {
      display: block;
      color: var(--blanco);
      text-decoration: none;
      font-family: 'Oswald', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      transition: background 0.2s;
      white-space: nowrap;
    }

    .nav-links a:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .nav-links a.expedientes {
      background: var(--naranja);
      color: white;
    }

    .nav-links a.expedientes:hover {
      background: #c44d15;
    }

    /* ── NAV: botón hamburguesa (oculto en escritorio ancho) ── */
    .nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 34px;
      height: 34px;
      background: none;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
    }

    .nav-burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--blanco);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .nav-burger.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger.abierto span:nth-child(2) { opacity: 0; }
    .nav-burger.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 1560px) {
      .nav-burger {
        display: flex;
      }

      .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(78vw, 320px);
        background: var(--verde-oscuro);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 5.5rem 1.2rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
      }

      .nav-links.abierto {
        transform: translateX(0);
      }

      .nav-links a {
        padding: 0.85rem 0.6rem;
        font-size: 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        white-space: normal;
      }

      .nav-links a.expedientes,
      .nav-links a.reportes-nav {
        margin: 0.5rem 0;
        border-radius: 6px;
        text-align: center;
        border-bottom: none;
      }
    }

    .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 99;
    }

    .nav-overlay.abierto {
      display: block;
    }

    /* ── HERO ── */
    #hero {
      min-height: 100vh;
      background: linear-gradient(160deg, var(--verde-oscuro) 0%, var(--verde) 50%, var(--verde-claro) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6rem 2rem 4rem;
      position: relative;
      overflow: hidden;
    }

    #hero::before {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 120px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f8f6f0' d='M0,80 C360,120 1080,0 1440,80 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom;
      background-size: cover;
    }

    .hero-logo {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      margin-bottom: 1.5rem;
      overflow: hidden;
      background: none;
      border: none;   /* antes tenía un aro gris translúcido */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .hero-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 50%;
      display: block;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: var(--blanco);
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      padding: 0.35rem 1rem;
      border-radius: 20px;
      margin-bottom: 1.2rem;
    }

    #hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 7vw, 5rem);
      color: var(--blanco);
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    #hero h1 em {
      color: var(--amarillo);
      font-style: normal;
    }

    #hero p.subtitulo {
      max-width: 600px;
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 2rem;
    }

    .hero-btns {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-primary {
      background: var(--naranja);
      color: white;
      padding: 0.85rem 2rem;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 15px rgba(226, 93, 30, 0.4);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(226, 93, 30, 0.5);
    }

    .btn-secondary {
      background: transparent;
      color: white;
      padding: 0.85rem 2rem;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
      border: 2px solid rgba(255, 255, 255, 0.6);
      transition: background 0.2s;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    /* ── SECCIONES GENERALES ── */
    section {
      padding: 5rem 2rem;
      background-color: rgba(255, 255, 255, 0.4);
    }

    .section-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .section-tag {
      display: inline-block;
      font-family: 'Oswald', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      color: var(--naranja);
      text-transform: uppercase;
      border-bottom: 2px solid var(--naranja);
      padding-bottom: 0.2rem;
      margin-bottom: 0.8rem;
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      color: var(--verde-oscuro);
      margin-bottom: 1.5rem;
      line-height: 1.2;
    }

    .section-title em {
      color: var(--naranja);
      font-style: normal;
    }

    /* FONDO ALTERNO */
    .bg-gris {
      background-color: rgba(248, 246, 240, 0.45);
    }

    .bg-verde {
      background: var(--verde);
      color: white;
    }

    .bg-verde .section-title {
      color: var(--amarillo);
    }

    .bg-verde p {
      color: rgba(255, 255, 255, 0.85);
    }

    /* ── CAUSA ── */
    .causa-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }

    .causa-texto p {
      font-size: 1rem;
      line-height: 1.8;
      color: #444;
      margin-bottom: 1rem;
    }

    .causa-imagen {
      width: 100%;
      height: auto;
      max-height: 420px;
      object-fit: cover;
      object-position: center;
      border-radius: 12px;
      display: block;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    }

    /* PLACEHOLDER DE IMAGEN */
    .img-placeholder {
      width: 100%;
      border-radius: 12px;
      background: linear-gradient(135deg, #e8f4f0, #d0ede6);
      border: 2px dashed var(--verde-claro);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2.5rem 1.5rem;
      text-align: center;
      gap: 0.5rem;
      color: var(--verde);
    }

    .img-placeholder .ph-icon {
      font-size: 2.5rem;
    }

    .img-placeholder .ph-title {
      font-family: 'Oswald', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
    }

    .img-placeholder .ph-sub {
      font-size: 0.78rem;
      color: var(--verde-claro);
    }

    /* ── OBJETIVOS ── */
    .obj-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
    }

    .obj-card {
      background: white;
      border-radius: 12px;
      padding: 1.8rem;
      border-left: 5px solid var(--naranja);
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .obj-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    }

    .obj-card h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 1rem;
      letter-spacing: 0.08em;
      color: var(--verde-oscuro);
      text-transform: uppercase;
      margin-bottom: 0.7rem;
    }

    .obj-card p {
      font-size: 0.92rem;
      line-height: 1.7;
      color: #555;
    }

    .obj-card.mision {
      border-left-color: var(--verde-claro);
    }

    .obj-card.vision {
      border-left-color: var(--amarillo);
    }

    /* ── ACCIONES ── */
    .acciones-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1.5rem;
    }

    .accion-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 1.8rem;
      transition: background 0.2s;
    }

    .accion-card:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .accion-num {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      color: var(--amarillo);
      opacity: 0.5;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .accion-card h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      color: var(--amarillo);
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }

    .accion-card p {
      font-size: 0.88rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.8);
    }

    /* ── EQUIPO ── */
    .equipo-bloque {
      margin-bottom: 3.5rem;
    }

    .equipo-bloque h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      color: var(--verde-oscuro);
      text-transform: uppercase;
      border-bottom: 3px solid var(--naranja);
      padding-bottom: 0.4rem;
      margin-bottom: 1.5rem;
      display: inline-block;
    }

    .equipo-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1.2rem;
    }

    .persona-card {
      background: white;
      border-radius: 10px;
      padding: 1.4rem;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
      border-top: 4px solid var(--verde);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .persona-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    .persona-foto {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--arena);
      margin: 0 auto 0.8rem;
      border: 3px solid var(--verde-claro);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
    }

    .persona-card h4 {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--verde-oscuro);
    }

    .persona-card p {
      font-size: 0.78rem;
      color: #777;
      margin-top: 0.2rem;
    }

    .equipo-foto-bloque {
      margin-top: 1.5rem;
    }

    .equipo-foto-bloque .img-placeholder {
      height: 220px;
    }

    .equipo-foto-bloque .equipo-foto-real {
      width: 100%;
      height: auto;
      max-height: min(460px, 72vw);
      object-fit: contain;
      object-position: center;
      border-radius: 12px;
      display: block;
      margin: 0 auto;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    }

    /* ── BENEFACTORES ── */
    .benefactores-nota {
      font-size: 0.95rem;
      color: #555;
      line-height: 1.7;
      margin-bottom: 2rem;
    }

    .logos-grid-wrap {
      background: white;
      border-radius: 12px;
      padding: 2.5rem;
      border: 2px dashed var(--verde-claro);
      text-align: center;
    }

    .logos-grid-label {
      font-family: 'Oswald', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
      color: var(--verde);
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }

    .logos-grid-sub {
      font-size: 0.8rem;
      color: #888;
    }

    .benefactores-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem 1.75rem;
      justify-content: center;
      align-items: center;
      padding: 0.5rem 0 0;
    }

    .benefactores-logos img {
      max-height: 76px;
      max-width: min(220px, 32vw);
      width: auto;
      height: auto;
      object-fit: contain;
      vertical-align: middle;
    }

    /* ── RECONOCIMIENTOS ── */
    .recono-card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.07);
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 2rem;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .recono-card .img-placeholder {
      height: 120px;
    }

    .recono-card h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 1rem;
      color: var(--verde-oscuro);
      margin-bottom: 0.5rem;
    }

    .recono-card p {
      font-size: 0.88rem;
      color: #555;
      line-height: 1.6;
    }

    .recono-card .fecha {
      font-size: 0.78rem;
      color: var(--naranja);
      font-weight: 700;
      margin-top: 0.4rem;
    }

    /* ── EXPEDIENTES ANUALES ── */
    #expedientes {
      background: var(--verde-oscuro);
    }

    #expedientes .section-title {
      color: var(--amarillo);
    }

    #expedientes .section-tag {
      color: var(--arena);
      border-color: var(--arena);
    }

    .expedientes-desc {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.95rem;
      line-height: 1.7;
      margin-bottom: 2rem;
    }

    .pdf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.2rem;
    }

    .pdf-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      color: white;
      transition: background 0.2s, transform 0.2s;
    }

    .pdf-card:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    .pdf-icon {
      width: 50px;
      height: 60px;
      background: var(--naranja);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .pdf-info h4 {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
    }

    .pdf-info p {
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.6);
    }

    /* ── CONTACTO ── */
    .contacto-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: stretch;
      max-width: 780px;
      margin: 0 auto;
      text-align: left;
    }

    .contacto-info,
    .redes {
      background: #fff;
      border-radius: 14px;
      padding: 1.8rem 2rem;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contacto-info h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
      color: var(--naranja);
      text-transform: uppercase;
      margin-bottom: 1.2rem;
    }

    .contacto-item {
      display: flex;
      gap: 0.8rem;
      align-items: flex-start;
      margin-bottom: 1rem;
    }

    .contacto-item .icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--verde);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .contacto-item div p:first-child {
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--verde-oscuro);
    }

    .contacto-item div p:last-child {
      font-size: 0.9rem;
      color: #555;
    }

    .redes h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
      color: var(--naranja);
      text-transform: uppercase;
      margin-bottom: 0.8rem;
    }

    .redes-links {
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
    }

    .red-btn {
      padding: 0.5rem 1.2rem;
      border-radius: 20px;
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 700;
      transition: opacity 0.2s;
    }

    .red-btn:hover {
      opacity: 0.85;
    }

    .red-facebook {
      background: #1877F2;
      color: white;
    }

    .red-instagram {
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      color: white;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--verde-oscuro);
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      padding: 2rem 1rem;
      font-size: 0.82rem;
    }

    footer strong {
      color: var(--amarillo);
    }

    footer .hashtag {
      color: var(--verde-claro);
      font-weight: 700;
      display: block;
      margin-top: 0.3rem;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .causa-grid,
      .contacto-grid,
      .recono-card {
        grid-template-columns: 1fr;
      }
    }

    /* ── OBSERVATORIO AMBIENTAL ── */
    .obs-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem;
    }
    .obs-card {
      background: var(--blanco); border: 1px solid #e7e0cf; border-radius: 12px;
      padding: 1.6rem; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .obs-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
    .obs-card h3 { font-family: 'Oswald', sans-serif; font-size: 1rem; color: var(--verde-oscuro); margin-bottom: 0.4rem; }
    .obs-estado {
      display: inline-block; font-family: 'Oswald', sans-serif; font-size: 0.72rem;
      letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.7rem;
      border-radius: 20px; margin: 0.5rem 0 0.7rem;
    }
    .obs-estado.buena { background: #e2f3ea; color: var(--verde-oscuro); }
    .obs-estado.regular { background: #fdf1d6; color: #9a6b00; }
    .obs-card p { font-size: 0.85rem; color: #555; line-height: 1.6; }
    .obs-fuente { margin-top: 1.5rem; font-size: 0.78rem; color: #888; text-align: center; }

    /* ── RESULTADOS / TRANSPARENCIA ── */
    .resultados-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-bottom: 1rem;
    }
    .resultado-card { text-align: center; padding: 1.6rem 1rem; background: var(--gris); border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .resultado-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
    .resultado-num { font-family: 'Playfair Display', serif; font-size: 2.4rem; color: var(--verde); font-weight: 900; line-height: 1; transition: color 0.3s ease; }
    .resultado-label { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: #666; margin-top: 0.4rem; }

    /* ── VOLUNTARIADO: badge de módulo ── */
    .cv-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: var(--verde); color: var(--blanco);
      font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em;
      text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 1rem;
    }
    .cv-badge::before { content: '●'; color: var(--amarillo); font-size: 0.6rem; }

    /* ── VOLUNTARIADO / GESTIÓN DE COMUNIDAD ── */
    .volunt-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
    @media (max-width: 800px) { .volunt-wrap { grid-template-columns: 1fr; } }
    .expedicion-card {
      background: var(--blanco); border-left: 4px solid var(--naranja); border-radius: 8px;
      padding: 1.2rem 1.4rem; margin-bottom: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    }
    .expedicion-fecha { font-family: 'Oswald', sans-serif; font-size: 0.78rem; color: var(--naranja); letter-spacing: 0.05em; text-transform: uppercase; }
    .expedicion-card h4 { margin: 0.3rem 0; color: var(--verde-oscuro); }
    .expedicion-card p { font-size: 0.85rem; color: #666; }
    .volunt-form { background: var(--blanco); border-radius: 12px; padding: 1.8rem; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
    .volunt-form h3 { color: var(--verde-oscuro); margin-bottom: 1rem; }
    .volunt-form label {
      display: block; font-family: 'Oswald', sans-serif; font-size: 0.75rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #666; margin: 0.9rem 0 0.3rem;
    }
    .volunt-form input, .volunt-form select {
      width: 100%; padding: 0.6rem 0.8rem; border: 1px solid #ddd; border-radius: 6px;
      font-family: 'Lato', sans-serif; font-size: 0.9rem;
    }
    .volunt-form button {
      margin-top: 1.4rem; width: 100%; background: var(--verde); color: var(--blanco);
      border: none; padding: 0.8rem; border-radius: 6px; font-family: 'Oswald', sans-serif;
      letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
    }
    .volunt-form button:hover { background: var(--verde-oscuro); }

    /* ── CONTADOR AUTOMÁTICO (anillos circulares) ── */
    .cv-countdown { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.1rem; }
    .cv-ring-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
    .cv-ring-wrap { position: relative; width: 76px; height: 76px; }
    .cv-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .cv-ring-track { fill: none; stroke: rgba(13,92,69,0.12); stroke-width: 7; }
    .cv-ring-bar {
      fill: none; stroke: var(--naranja); stroke-width: 7; stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease;
    }
    .cv-ring-num {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.15rem; color: var(--verde-oscuro);
    }
    .cv-ring-label {
      font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 0.08em;
      text-transform: uppercase; color: #777;
    }
    @keyframes cv-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    .cv-ring-item.cv-urgent .cv-ring-wrap { animation: cv-pulse 1.4s ease-in-out infinite; }
    @keyframes cv-fade { from { opacity: 0; } to { opacity: 1; } }

    /* ── LIGHTBOX (galería) ── */
    .cv-lightbox-trigger { cursor: zoom-in; transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .cv-lightbox-trigger:hover { transform: scale(1.035); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
    .cv-lightbox-overlay {
      position: fixed; inset: 0; z-index: 999; background: rgba(8,26,20,0.92);
      display: none; align-items: center; justify-content: center; padding: 2rem;
      cursor: zoom-out; flex-direction: column; gap: 1rem;
    }
    .cv-lightbox-overlay.cv-open { display: flex; animation: cv-fade 0.25s ease; }
    .cv-lightbox-overlay img { max-width: min(92vw, 900px); max-height: 78vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
    .cv-lightbox-caption { color: var(--blanco); font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; }
    .cv-lightbox-close {
      position: absolute; top: 1.2rem; right: 1.6rem; color: var(--blanco); font-size: 2rem;
      font-family: 'Oswald', sans-serif; cursor: pointer; line-height: 1;
    }
    .cv-lightbox-nav {
      position: absolute; top: 50%; transform: translateY(-50%); color: var(--blanco);
      font-size: 2.2rem; cursor: pointer; padding: 0.5rem 1rem; user-select: none;
    }
    .cv-lightbox-prev { left: 0.5rem; }
    .cv-lightbox-next { right: 0.5rem; }

    /* ── GALERÍA ── */
    .galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.2rem; }
    .galeria-item { position: relative; border-radius: 10px; overflow: hidden; }
    .galeria-item .img-placeholder { height: 170px; margin: 0; border-radius: 10px; }
    .galeria-item .galeria-cap {
      position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.8rem;
      background: linear-gradient(to top, rgba(8,26,20,0.75), transparent);
      color: var(--blanco); font-size: 0.78rem; font-family: 'Oswald', sans-serif; letter-spacing: 0.03em;
    }

    /* ── MAPA INTERACTIVO ── */
    .mapa-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
    @media (max-width: 800px) { .mapa-wrap { grid-template-columns: 1fr; } }
    .mapa-svg-wrap {
      background: linear-gradient(160deg, #0d5c45 0%, #0a4536 100%);
      border-radius: 16px;
      padding: 0.6rem;
      box-shadow: 0 10px 28px rgba(10, 69, 54, 0.22);
    }
    #mapa-leaflet {
      height: 440px;
      width: 100%;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      /* Los mapas de OpenStreetMap/Wikimedia vienen en tonos muy pálidos;
         este filtro les da un poco más de saturación y contraste para
         que se vean menos "lavados" sin cambiar el proveedor del mapa. */
      filter: saturate(1.35) contrast(1.08);
    }
    /* Los popups y el control de zoom de Leaflet heredan bordes redondeados
       para que combinen con el resto del sitio en vez de verse genéricos. */
    #mapa-leaflet .leaflet-control-zoom a {
      border-radius: 8px !important;
      color: var(--verde-oscuro, #0d5c45);
      font-weight: 700;
    }
    #mapa-leaflet .leaflet-popup-content-wrapper {
      border-radius: 10px;
    }
    .cv-mapa-popup h4 { margin: 0 0 0.3rem; font-family: 'Oswald', sans-serif; font-size: 0.95rem; color: var(--verde-oscuro); }
    .cv-mapa-popup p { margin: 0; font-size: 0.82rem; color: #555; }
    .mapa-info-card {
      background: var(--blanco); border-radius: 12px; padding: 1.5rem;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06); min-height: 160px;
    }
    .mapa-info-card h3 { color: var(--verde-oscuro); font-family: 'Oswald', sans-serif; margin-bottom: 0.5rem; }
    .mapa-info-card p { font-size: 0.88rem; color: #555; line-height: 1.6; }
    .mapa-hint { font-size: 0.78rem; color: #888; margin-top: 0.6rem; }

    /* ── LÍNEA DE TIEMPO ── */
    .cv-timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 2rem; }
    .cv-timeline::before {
      content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--verde-claro);
    }
    .cv-timeline-item { position: relative; padding-bottom: 2.2rem; }
    .cv-timeline-item:last-child { padding-bottom: 0; }
    .cv-timeline-item::before {
      content: ''; position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%;
      background: var(--naranja); border: 3px solid var(--blanco); box-shadow: 0 0 0 2px var(--naranja);
    }
    .cv-timeline-fecha {
      font-family: 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--naranja);
      text-transform: uppercase; margin-bottom: 0.2rem;
    }
    .cv-timeline-item h4 { color: var(--verde-oscuro); margin-bottom: 0.3rem; }
    .cv-timeline-item p { font-size: 0.88rem; color: #555; line-height: 1.6; }

    /* ── QUIZ AMBIENTAL ── */
    .quiz-card {
      background: var(--blanco); border-radius: 14px; padding: 2rem; max-width: 620px; margin: 0 auto;
      box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    }
    .quiz-pregunta { font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--verde-oscuro); margin-bottom: 1.2rem; }
    .quiz-opciones { display: flex; flex-direction: column; gap: 0.7rem; }
    .quiz-opcion {
      text-align: left; background: var(--gris); border: 2px solid transparent; border-radius: 8px;
      padding: 0.8rem 1rem; font-family: 'Lato', sans-serif; font-size: 0.92rem; cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .quiz-opcion:hover { background: #efe9d8; }
    .quiz-opcion.correcta { border-color: var(--verde); background: #e2f3ea; }
    .quiz-opcion.incorrecta { border-color: #c44d15; background: #fbe6dd; }
    .quiz-progreso { font-size: 0.78rem; color: #888; margin-bottom: 0.6rem; font-family: 'Oswald', sans-serif; letter-spacing: 0.05em; }
    .quiz-resultado { text-align: center; }
    .quiz-resultado .quiz-emoji { font-size: 3rem; margin-bottom: 0.6rem; }
    .quiz-resultado h3 { color: var(--verde-oscuro); margin-bottom: 0.5rem; }
    .quiz-resultado p { color: #555; margin-bottom: 1.3rem; }
    .quiz-reintentar {
      background: var(--verde); color: var(--blanco); border: none; padding: 0.7rem 1.4rem; border-radius: 6px;
      font-family: 'Oswald', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; cursor: pointer;
    }
    .quiz-reintentar:hover { background: var(--verde-oscuro); }

    /* ── MODAL VOLUNTARIADO (se abre desde los botones flotantes) ── */
    .cv-modal-overlay {
      position: fixed; inset: 0; z-index: 999; background: rgba(8,26,20,0.82);
      display: none; align-items: flex-start; justify-content: center;
      padding: 3.5rem 1.2rem 2rem; overflow-y: auto;
    }
    .cv-modal-overlay.cv-open { display: flex; animation: cv-fade 0.25s ease forwards; }
    .cv-modal-panel {
      position: relative; background: var(--blanco); border-radius: 16px;
      max-width: 1000px; width: 100%; padding: 2.5rem 2rem 2.5rem;
      box-shadow: 0 25px 70px rgba(0,0,0,0.45);
    }
    .cv-modal-close {
      position: absolute; top: 0.9rem; right: 1.1rem; color: var(--verde-oscuro);
      font-size: 2rem; font-family: 'Oswald', sans-serif; cursor: pointer; line-height: 1;
      background: var(--gris); width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; transition: background 0.2s;
    }
    .cv-modal-close:hover { background: #e8e4d8; }
    .cv-modal-panel--angosto { max-width: 680px; }
    .cv-modal-panel--angosto .obs-grid {
      grid-template-columns: 1fr 1fr;
    }
    .cv-modal-panel--angosto .obs-card h3 {
      font-size: 1.05rem;
      margin-bottom: 0.6rem;
    }
    @media (max-width: 560px) {
      .cv-modal-panel--angosto .obs-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .cv-modal-panel { padding: 3rem 1.2rem 1.5rem; }
    }

    @media (max-width: 480px) {
      nav { padding: 0.5rem 0.9rem; }
      .nav-brand-text span:first-child { font-size: 0.88rem; }
      .nav-brand-text span:last-child { font-size: 0.65rem; }
      .logo-nav { width: 42px; height: 42px; }
    }

    /* (el botón flotante viejo fue reemplazado por el dock-tortuga, ver más abajo) */
  
/* ── PORTADA: BLOQUE "¿POR QUÉ ESTE PROYECTO?" ── */
.cv-porque-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
}

.cv-porque-grid {
  display: grid;
  gap: 1.4rem;
}

.cv-porque-grid p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #444;
}

.cv-porque-cifras {
  background: var(--verde-oscuro);
  border-radius: 16px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.cv-cifra {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cv-cifra:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.cv-cifra-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--amarillo);
  line-height: 1.1;
}

.cv-cifra-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.3rem;
}

.cv-porque-link {
  color: var(--amarillo);
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-top: 0.4rem;
}

.cv-porque-link:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .cv-porque-layout {
    grid-template-columns: 1fr;
  }
}

/* ── NAV: se oculta al bajar, reaparece al subir ── */
nav {
  transition: transform 0.3s ease;
}

nav.cv-nav-oculto {
  transform: translateY(-100%);
}

/* ── REPORTA UNA PLAYA (formulario + galería comunitaria) ── */
.nav-links a.reportes-nav {
  background: var(--verde-claro);
  color: white !important;
}

.nav-links a.reportes-nav:hover {
  background: var(--verde-oscuro);
}

.rp-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.rp-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rp-field label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--verde-oscuro);
}

.rp-field select,
.rp-field textarea,
.rp-field input[type="text"],
.rp-field input[type="email"],
.rp-field input[type="number"],
.rp-field input[type="file"] {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d8d3c8;
  border-radius: 8px;
  background: #fff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

.rp-field select:focus,
.rp-field textarea:focus,
.rp-field input[type="text"]:focus,
.rp-field input[type="email"]:focus,
.rp-field input[type="number"]:focus {
  outline: none;
  border-color: var(--verde);
}

/* ── Botón de "elegir archivo" con estilo propio (en vez del feo default) ── */
.rp-field input[type="file"] {
  padding: 0.5rem;
  cursor: pointer;
}

.rp-field input[type="file"]::file-selector-button {
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--verde);
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}

.rp-field input[type="file"]::file-selector-button:hover {
  background: var(--verde-oscuro);
}

/* ── Formulario + panel lateral (llena el espacio vacío con contenido útil) ── */
.rp-form-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.rp-form-layout .rp-form {
  max-width: none;
}

.rp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 1.5rem;
}

.rp-sidebar-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

.rp-sidebar-card h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--verde-oscuro);
  margin-bottom: 0.9rem;
}

.rp-pasos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  counter-reset: paso;
}

.rp-pasos li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #555;
  padding-left: 1.8rem;
  position: relative;
  counter-increment: paso;
}

.rp-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--arena);
  color: var(--verde-oscuro);
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-pasos li strong {
  color: var(--verde-oscuro);
}

.rp-sidebar-tip {
  background: var(--verde-oscuro);
}

.rp-sidebar-tip h3 {
  color: var(--amarillo);
}

.rp-sidebar-tip p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 860px) {
  .rp-form-layout {
    grid-template-columns: 1fr;
  }
  .rp-sidebar {
    position: static;
  }
}

.rp-preview img {
  margin-top: 0.6rem;
  max-width: 200px;
  max-height: 200px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.rp-quitar-foto {
  margin-top: 0.6rem;
  background: none;
  border: 1px solid #d8d3c8;
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  color: #b3261e;
  cursor: pointer;
}

.rp-quitar-foto:hover {
  background: #fdecea;
  border-color: #b3261e;
}

.rp-status {
  font-size: 0.92rem;
  min-height: 1.3rem;
}

.rp-status.ok { color: var(--verde-oscuro); font-weight: 700; }
.rp-status.error { color: #b3261e; font-weight: 700; }

.rp-nota {
  font-size: 0.8rem;
  color: #888;
  margin-top: -0.5rem;
}

.ss-archivo-nombre {
  font-size: 0.8rem;
  color: var(--verde-oscuro, #0a2f24);
  margin: 0.4rem 0 0;
  font-weight: 700;
}

.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.rp-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

.rp-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #eef0ea;
  display: block;
}

.rp-card-sin-foto {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  background: #eaf3ee;
}

.rp-card-body {
  padding: 1.1rem 1.3rem;
}

.rp-card-playa {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 0.5rem;
}

.rp-card-body p {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.rp-card-autor {
  font-size: 0.8rem;
  color: #999;
}

.rp-vacio {
  color: #777;
  grid-column: 1 / -1;
}

/* ── REVELADO SUAVE AL HACER SCROLL (una vez por sección) ── */
.cv-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cv-reveal.cv-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cv-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DOCK TORTUGA — reemplaza los botones flotantes de Voluntariado
   ══════════════════════════════════════════════════════════════════ */
.dock {
  --dorado: #f2b90f;
  --dock-naranja: #e8703a;
  --dock-naranja-hover: #ff854e;
  --crema: #f6f0e2;
  --shell-dark: #1b382b;
  --shell-mid: #2d5a44;
  --shell-light: #52936e;
  --shell-highlight: #93d4ad;
  --skin-main: #dfa369;
  --skin-shadow: #b77943;
  --skin-dark: #835227;

  position: fixed;
  display: flex;
  align-items: center;
  z-index: 95;
  touch-action: none;
}

.dock.dock-right { transform: scaleX(-1); }

.dock-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: -50px;
  opacity: 0;
  pointer-events: none;
  transition: margin-left 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
}

.dock.open .dock-actions { margin-left: 12px; opacity: 1; pointer-events: auto; }
.dock.dragging .dock-actions { opacity: 0 !important; pointer-events: none !important; }

.dock-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  background: linear-gradient(135deg, var(--dock-naranja), #c4521f);
  color: var(--crema);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.2s ease;
  opacity: 0; transform: scale(.5) translateX(-20px);
}

.dock.open .dock-btn { opacity: 1; transform: scale(1) translateX(0); }
.dock.open .dock-btn:nth-child(1) { transition-delay: .22s; }
.dock.open .dock-btn:nth-child(2) { transition-delay: .28s; }
.dock-btn:hover { background: linear-gradient(135deg, var(--dock-naranja-hover), var(--dock-naranja)); }
.dock-btn:active { transform: scale(.92) !important; }

.dock-handle {
  width: 78px; height: 78px;
  border: none; background: transparent;
  margin-left: -30px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  position: relative; z-index: 2;
  filter: drop-shadow(4px 8px 10px rgba(0,0,0,.5));
  animation: cv-turtle-flotar 2.8s ease-in-out infinite;
  transition: margin-left 0.4s cubic-bezier(.34,1.56,.64,1);
}

.dock.open .dock-handle { margin-left: 8px; animation: none; }
.dock.dragging .dock-handle { margin-left: 0 !important; animation: none; cursor: grabbing; }

@keyframes cv-turtle-flotar {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.dock-handle svg { width: 88px; height: 88px; overflow: visible; }

.dock-handle svg .parte {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.2);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1);
}

.dock.open .dock-handle svg .parte { opacity: 1; transform: scale(1); }
.dock.dragging .dock-handle svg .parte { opacity: 1; transform: scale(1); transition: none; }
.dock.open .dock-handle svg .p1 { transition-delay: .02s; }
.dock.open .dock-handle svg .p2 { transition-delay: .07s; }
.dock.open .dock-handle svg .p3 { transition-delay: .12s; }
.dock.open .dock-handle svg .p5 { transition-delay: .2s; }

.dock.open .flipper-top { animation: cv-turtle-aleteo-arriba 2.6s ease-in-out infinite; transform-origin: 46px 26px; }
.dock.open .flipper-bottom { animation: cv-turtle-aleteo-abajo 2.6s ease-in-out infinite; transform-origin: 46px 54px; }
@keyframes cv-turtle-aleteo-arriba { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
@keyframes cv-turtle-aleteo-abajo { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .dock-handle { animation: none; }
  .dock.open .flipper-top,
  .dock.open .flipper-bottom { animation: none; }
}

/* ── LISTA DE JORNADAS (página jornadas.html) ── */
.jornadas-lista {
  display: grid;
  gap: 1.3rem;
  max-width: 760px;
}

.jornada-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem 1.7rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
  border-left: 5px solid #ccc;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jornada-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.jornada-card.jornada-proxima {
  border-left-color: var(--naranja);
  background: #fff8f3;
}

.jornada-card.jornada-realizada {
  border-left-color: var(--verde);
}

.jornada-card-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.jornada-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  color: white;
}

.jornada-badge-proxima { background: var(--naranja); }
.jornada-badge-realizada { background: var(--verde); }

.jornada-fecha {
  font-size: 0.82rem;
  color: #888;
}

.jornada-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--verde-oscuro);
  margin-bottom: 0.4rem;
}

.jornada-card p {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.6;
}

/* ── OBSERVATORIO: "Conoce cada playa" ── */
.obs-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.6rem;
}

.obs-info-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  border: 1px solid #e2ede6;
  border-radius: 14px;
  padding: 1.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obs-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

.obs-info-img {
  width: 100%;
  height: 140px;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.08);
}

.obs-info-img span {
  font-size: 2.4rem;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

.obs-info-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(247, 214, 148, 0) 0%, rgba(230, 189, 122, 0.55) 100%);
}

.obs-info-img--balandra {
  background: linear-gradient(180deg, #bfe6f2 0%, #7fc4d9 45%, #2f8aa8 75%, #1c6b86 100%);
}
.obs-info-img--tecolote {
  background: linear-gradient(180deg, #cdeef0 0%, #7fd3d6 45%, #29a3ab 75%, #157f86 100%);
}
.obs-info-img--pichilingue,
.obs-info-img--la-concha {
  background: linear-gradient(180deg, #d7f0e6 0%, #8fd0c1 45%, #349b87 75%, #1d7566 100%);
}
.obs-info-img--malecon {
  background: linear-gradient(180deg, #ffd9a0 0%, #f7a35c 40%, #e8703a 75%, #c4521f 100%);
}

.obs-info-card h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--verde-oscuro);
  margin-bottom: 0.6rem;
}

.obs-info-card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 0.7rem;
}

.obs-info-card p:last-child {
  margin-bottom: 0;
}

.obs-info-dato {
  font-size: 0.82rem !important;
  color: #6b6b6b !important;
  background: #f0f5f2;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.obs-info-dato strong {
  color: var(--verde-oscuro);
}

.obs-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.obs-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--verde-oscuro);
  background: var(--arena);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
}

.obs-info-dato + .obs-info-dato {
  margin-top: 0.6rem;
}

.obs-metodo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}

.obs-metodo-card {
  background: var(--verde-oscuro);
  border-radius: 12px;
  padding: 1.5rem;
  color: #fff;
}

.obs-metodo-num {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--amarillo);
  margin-bottom: 0.4rem;
}

.obs-metodo-card h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.obs-metodo-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.obs-metodo-card p em {
  color: var(--amarillo);
  font-style: normal;
}

/* ── FOOTER ampliado ── */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.8rem;
  max-width: 980px;
  margin: 0 auto 1.5rem;
  text-align: left;
}
.footer-col h4 {
  color: var(--amarillo);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}
.footer-col p { margin-top: 0.4rem; line-height: 1.5; }
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 0.15rem 0;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
  max-width: 980px;
  margin: 0 auto;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 600px) { .footer-grid { text-align: center; } }

/* ── "Ver más" en las tarjetas de playa: tarjeta compacta + ventana ancha ── */
.obs-info-card > p:not(.obs-info-dato) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.obs-info-card .obs-mas { display: none; }
.obs-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1.5px solid var(--verde-oscuro, #0d5c45);
  color: var(--verde-oscuro, #0d5c45);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  margin: 0.2rem 0 0;
  cursor: pointer;
}
.obs-ver-mas:hover, .obs-ver-mas:active { background: var(--arena, #f3e6c8); }

.obs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 59, 44, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.obs-modal-overlay.abierto { display: flex; animation: cv-fade 0.2s ease; }
.obs-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.obs-modal-img {
  min-height: 320px;
  background-size: cover;
  background-position: center;
}
.obs-modal-texto {
  padding: 1.8rem 1.8rem 1.6rem;
  overflow-y: auto;
  max-height: 90vh;
}
.obs-modal-texto h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--verde-oscuro);
  margin-bottom: 0.7rem;
}
.obs-modal-texto p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 0.8rem;
}
.obs-modal-texto .obs-info-tags { margin-bottom: 0.9rem; }
.obs-modal-cerrar {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--verde-oscuro, #0d5c45);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 700px) {
  .obs-modal { grid-template-columns: 1fr; grid-template-rows: 170px 1fr; max-height: 92vh; }
  .obs-modal-img { min-height: 0; }
  .obs-modal-texto { padding: 1.2rem 1.2rem 1.4rem; max-height: none; }
  .obs-modal-texto h4 { font-size: 1.3rem; }
}

/* ── GALERÍA DE COLABORADORES: fotos completas, sin barras grises ──
   Disposición tipo "mosaico": cada foto se ve entera con su proporción
   original (verticales u horizontales), sin caja fija ni fondo gris.
   Solo afecta a la galería (#gl-grid); "Reporta una playa" no cambia. */
#gl-grid.rp-grid {
  display: block;
  column-count: 3;
  column-gap: 1.2rem;
}
#gl-grid .rp-card {
  break-inside: avoid;
  margin-bottom: 1.2rem;
  display: inline-block;
  width: 100%;
}
#gl-grid .rp-card img {
  height: auto;
  background: none;
  cursor: zoom-in;
  max-height: 560px;          /* fotos muy largas se recortan un poco; al tocarlas se ven completas */
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 1000px) { #gl-grid.rp-grid { column-count: 2; } }
@media (max-width: 600px)  { #gl-grid.rp-grid { column-count: 1; } }

.gl-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 30, 22, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: zoom-out;
}
.gl-zoom-overlay.abierto { display: flex; animation: cv-fade 0.2s ease; }
.gl-zoom-overlay img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.gl-zoom-cerrar {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--verde-oscuro, #0d5c45);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

/* ── TELÉFONO: estilo más "app" — letras grandes, mucho aire, esquinas
   redondeadas y botones grandes tipo píldora. Solo afecta pantallas
   chicas (≤ 640px); la versión de escritorio no cambia. ── */
@media (max-width: 640px) {
  section { padding: 3.2rem 1.4rem; }
  .section-title { font-size: 2.1rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.3rem; }
  .section-tag { font-size: 0.78rem; margin-bottom: 1rem; }
  section p { line-height: 1.8; margin-bottom: 1.15rem; }
  section .section-inner > p, .causa-grid p { font-size: 1.05rem; }

  /* botones grandes de ancho completo */
  .hero-btns { flex-direction: column; gap: 0.9rem; width: 100%; }
  .btn-primary, .btn-secondary {
    display: block; width: 100%; text-align: center;
    padding: 1.05rem 1.5rem; font-size: 1.05rem; border-radius: 40px;
  }

  /* tarjetas menos "cuadradas": esquinas redondas, sin borde, sombra suave */
  .obs-card, .resultado-card, .rp-card, .obs-info-card {
    border: none; border-radius: 24px;
    box-shadow: 0 6px 22px rgba(8, 59, 44, 0.09);
  }
  .obs-card { padding: 1.7rem 1.5rem; }
  .obs-grid, .resultados-grid { gap: 1.2rem; }
  .resultado-num { font-size: 2.6rem; }
  .rp-card img, #gl-grid .rp-card img { border-radius: 20px 20px 0 0; }
  .section-inner > img { border-radius: 22px; }
}

/* ── TELÉFONO (ajuste 2): primer texto sin quedar bajo el menú fijo, letras
   chicas más legibles, formularios cómodos, sin espacios vacíos en tarjetas. ── */
@media (max-width: 640px) {
  nav + section { padding-top: 6.2rem; }          /* el menú fijo (58px) ya no tapa la primera etiqueta */
  section p:last-child { margin-bottom: 0; }      /* sin hueco extra al final de las tarjetas */
  .obs-card p, .resultado-card p, .obs-info-card p { margin-bottom: 0; }

  /* textos pequeños: un poco más grandes para leerse bien */
  .section-tag { font-size: 0.82rem; }
  .expedicion-fecha { font-size: 0.85rem; }
  .cv-badge, .jornada-badge, .obs-tag, .obs-estado { font-size: 0.76rem; }
  .cv-ring-label { font-size: 0.72rem; }
  section .section-inner > p.obs-fuente,
  section .section-inner > p.mapa-hint, .mapa-hint { font-size: 0.85rem; line-height: 1.6; }

  /* formularios: 16px evita el zoom automático del iPhone; campos altos y fáciles de tocar */
  label { font-size: 0.95rem; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    font-size: 16px; min-height: 48px; border-radius: 14px;
  }
  textarea { min-height: 120px; }
  button[type="submit"], form .btn-primary { width: 100%; min-height: 52px; font-size: 1.05rem; border-radius: 40px; }

  /* nada se sale de su columna (correos largos, etc.) */
  .contacto-grid > *, .causa-grid > *, .volunt-wrap > * { min-width: 0; }
  section p a, .contacto-grid a { overflow-wrap: anywhere; }
  section p a:not([class]) { color: var(--verde); font-weight: 600; }
  .contacto-info, .redes { padding: 1.6rem 1.2rem; }
  .contacto-item div { min-width: 0; }
  .contacto-grid a { font-size: 0.85rem; }       /* el correo cabe en una sola línea */
}

@media (max-width: 360px) {
  section { padding-left: 1.1rem; padding-right: 1.1rem; }
  .section-title { font-size: 1.85rem; }
}