/* El nervio óptico. Mismo contenido que guardarlamirada.com con otra composición:
   ilustración a la izquierda, punto interactivo sobre el nervio y el mensaje
   final en un panel verde oscuro. */
.nerve-sec{position:relative;isolation:isolate;padding:clamp(40px,5vw,80px) 0 clamp(80px,9vw,130px);background:radial-gradient(ellipse at 20% 45%,#d4e6dc,transparent 55%),#e6f1eb;scroll-margin-top:40px}
.nerve-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,6vw,90px);align-items:center}
.nerve-grid>*{min-width:0}
.nerve-figure{position:relative;margin:0;padding-bottom:70px}
.nerve-art{position:relative}
.nerve-art img{display:block;width:100%;height:auto}
.nerve-pin{position:absolute;left:34.5%;top:48%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center;color:#fff}
.nerve-pin::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;background:#082d24cc;box-shadow:0 4px 18px #082d2455}
.nerve-pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid #ffffffb3;animation:nerve-pulse 2.4s ease-out infinite}
.nerve-pin svg{position:relative;width:20px;height:20px;transition:transform .3s}
.nerve-pin[aria-expanded=true] svg{transform:rotate(45deg)}
.nerve-pin:focus-visible,.nerve-card button:focus-visible{outline:2px solid #082d24;outline-offset:5px}
@keyframes nerve-pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.35);opacity:0}}
.nerve-card{position:absolute;left:4%;bottom:0;width:min(400px,80%);border-radius:20px;background:#082d24;color:#edf5ee;box-shadow:0 18px 45px #082d2440}
.nerve-card button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nerve-card strong{display:block;font-weight:400;font-size:24px;letter-spacing:-.03em}
.nerve-card small{display:block;margin-top:6px;font-size:15px;color:#c2d8ce}
.nerve-card .nerve-plus{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff55;display:grid;place-items:center;transition:transform .3s}
.nerve-card .nerve-plus svg{width:16px;height:16px}
.nerve-card button[aria-expanded=true] .nerve-plus{transform:rotate(45deg)}
.nerve-card p{padding:0 24px 22px;font-size:17px;line-height:1.6;color:#e0ece4}
.nerve-copy .eyebrow{opacity:.7;margin-bottom:22px}
.nerve-copy h2{font-size:clamp(32px,3.2vw,50px);line-height:1.15;text-wrap:balance}
.nerve-copy p:not(.eyebrow){font-size:clamp(18px,1.4vw,21px);line-height:1.65;margin-top:22px;color:#3d5e52}
.nerve-key{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;margin-top:clamp(50px,6vw,80px);padding:clamp(30px,4.5vw,60px);border-radius:26px 26px 26px 110px;background:#082d24;color:#edf5ee;position:relative;overflow:hidden;isolation:isolate}
.nerve-key::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../assets/texture.webp') center/cover;opacity:.3}
.nerve-key h3{font-size:clamp(27px,2.6vw,40px);line-height:1.2;letter-spacing:-.035em;text-wrap:balance}
.nerve-key p{font-size:clamp(18px,1.4vw,21px);line-height:1.65;color:#c9ddd2;padding-left:clamp(0px,3vw,40px);border-left:1px solid #ffffff33}
@media(max-width:800px){
  .nerve-grid{grid-template-columns:1fr;gap:10px}
  .nerve-copy{order:-1}
  .nerve-figure{padding-bottom:0}
  .nerve-pin{width:40px;height:40px;margin:-20px 0 0 -20px}
  .nerve-card{position:relative;left:auto;bottom:auto;width:auto;margin-top:6px}
  .nerve-card strong{font-size:22px}
  .nerve-key{grid-template-columns:1fr;border-radius:22px 22px 22px 70px;gap:20px}
  .nerve-key p{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid #ffffff33}
}
@media(prefers-reduced-motion:reduce){.nerve-pin::after{animation:none;opacity:.6}.nerve-pin svg,.nerve-card .nerve-plus{transition:none}}