/* Cuidado, rutina y urgencia. Contenido de guardarlamirada.com con el diseño de
   la Línea Oftálmica: verde profundo, textura, vidrio y líneas finas. */

/* Tu cuidado */
.care-sec{position:relative;isolation:isolate;background:#082d24;color:#edf5ee;scroll-margin-top:0}
.care-sec:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../assets/texture.webp') center/cover;opacity:.3}
.care-sticky{padding:clamp(70px,8vw,110px) 0}
.care-head{display:grid;grid-template-columns:auto 1fr;gap:10px 40px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.care-head .eyebrow{grid-column:1/-1;opacity:.7}
.care-head h2{grid-column:1/-1;font-size:clamp(34px,3.6vw,58px);line-height:1.1;max-width:1000px;text-wrap:balance;color:#c2d8ce}
.care-head h2 span{display:block;font-size:1.65em;letter-spacing:-.055em;color:#fff;line-height:1}
.care-body{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:stretch}
.care-tabs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.care-tabs button{display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;gap:2px 18px;align-items:center;width:100%;padding:18px 22px;border:1px solid #ffffff1f;border-radius:16px;background:#ffffff08;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.care-tabs button:hover{background:#ffffff12}
.care-tabs svg{grid-row:1/3;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.care-name{font-size:22px;letter-spacing:-.025em}
.care-short{grid-column:2;font-size:15px;color:#a9c4b7;line-height:1.4}
.care-num{grid-row:1/3;grid-column:3;font-size:13px;letter-spacing:.14em;opacity:.55}
.care-tabs button[aria-pressed=true]{background:#edf5ee;color:#082d24;border-color:#edf5ee;transform:translateX(8px)}
.care-tabs button[aria-pressed=true] .care-short{color:#3d5e52}
.care-tabs button:focus-visible{outline:2px solid #c2d8ce;outline-offset:4px}
.care-panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(28px,4vw,52px);border:1px solid #ffffff2e;border-radius:26px 110px 26px 26px;background:linear-gradient(140deg,#ffffff17,#ffffff05);box-shadow:inset 0 1px #ffffff26;min-height:380px}
.care-index{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#a9c4b7}
.care-panel h3{font-size:clamp(34px,3.4vw,54px);line-height:1.08;margin-top:16px}
.care-main{font-size:clamp(20px,1.6vw,25px);line-height:1.5;margin-top:26px;max-width:560px}
.care-support{font-size:clamp(17px,1.3vw,20px);line-height:1.6;margin-top:16px;color:#c2d8ce;max-width:560px}
.care-progress{height:2px;border-radius:2px;background:#ffffff26;overflow:hidden}
.care-progress span{display:block;height:100%;background:#c2d8ce;transform-origin:left;transform:scaleX(var(--care-progress,.25));transition:transform .2s linear}
@media(min-height:600px) and (prefers-reduced-motion:no-preference){
  .care-track{height:330vh}
  .care-sticky{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:60px 0}
}

/* Una rutina pequeña */
.routine-sec{position:relative;isolation:isolate;padding:clamp(70px,8vw,120px) 0;background:radial-gradient(ellipse at 90% 15%,#dbe6d8,transparent 60%),#f4f5ed;color:#193d35;scroll-margin-top:30px}
.routine-sec:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../assets/texture.webp') center/cover;opacity:.06;mix-blend-mode:multiply}
.routine-head{max-width:820px}
.routine-head .eyebrow{opacity:.7;margin-bottom:22px}
.routine-head h2{font-size:clamp(36px,4vw,64px);line-height:1.08;text-wrap:balance}
.routine-head p:not(.eyebrow){font-size:clamp(18px,1.4vw,22px);line-height:1.6;margin-top:22px;max-width:560px;color:#3d5e52}
.routine-steps{position:relative;list-style:none;margin:clamp(50px,6vw,80px) 0 0;padding:0 0 0 clamp(56px,6vw,90px);display:grid;gap:clamp(26px,3vw,40px)}
.routine-steps:before,.routine-line{content:"";position:absolute;left:clamp(20px,2.4vw,36px);top:8px;bottom:8px;width:2px;border-radius:2px;background:#193d3520}
.routine-line{background:#082d24;transform-origin:top;transform:scaleY(0)}
.routine-step{position:relative;display:grid;grid-template-columns:clamp(200px,24vw,340px) 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.routine-num{position:absolute;left:calc(clamp(56px,6vw,90px)*-1 + clamp(20px,2.4vw,36px) - 19px);top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border-radius:50%;border:1px solid #193d3540;background:#f4f5ed;font-size:15px;transition:background .4s,color .4s,border-color .4s}
.routine-step.is-reached .routine-num{background:#082d24;color:#edf5ee;border-color:#082d24}
.routine-step img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:22px;box-shadow:0 18px 45px #193d3514;filter:saturate(.75);transition:filter .6s}
.routine-step.is-reached img{filter:none}
.routine-step h3{font-size:clamp(26px,2.4vw,38px);line-height:1.12}
.routine-step p{font-size:clamp(18px,1.35vw,21px);line-height:1.6;margin-top:12px;max-width:560px;color:#3d5e52}

/* Construye tu recordatorio */
.reminder{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(26px,5vw,70px);align-items:center;margin-top:clamp(60px,7vw,100px);padding:clamp(28px,4vw,50px);border:1px solid #ffffffd9;border-radius:26px;background:linear-gradient(120deg,#ffffffb8,#e5eddf80);box-shadow:0 25px 70px #1636280d}
.reminder h3{font-size:clamp(28px,2.6vw,42px);line-height:1.1}
.reminder-copy p{font-size:18px;line-height:1.6;margin-top:12px;color:#3d5e52}
.reminder-sky{position:relative;height:74px;border-radius:40px;overflow:hidden;background:linear-gradient(90deg,#f6e7c8 0%,#e9eedf 33%,#efcfa8 50%,#9db8a8 70%,#123a2e 100%);background-size:300% 100%;background-position:0% 0;transition:background-position .8s ease}
.reminder-day[data-hora="1"] .reminder-sky{background-position:50% 0}
.reminder-day[data-hora="2"] .reminder-sky{background-position:100% 0}
.reminder-sun{position:absolute;top:50%;left:16%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 0 0 8px #ffffff55,0 0 30px #fff;transition:left .8s ease,background .8s,box-shadow .8s}
.reminder-day[data-hora="1"] .reminder-sun{left:50%}
.reminder-day[data-hora="2"] .reminder-sun{left:84%;background:#e6f1eb;box-shadow:0 0 0 8px #ffffff22,0 0 24px #ffffff88}
.reminder-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.reminder-options button{display:grid;justify-items:center;gap:4px;padding:16px 10px;border:1px solid #b9cfc199;border-radius:14px;background:#ffffff99;color:inherit;font:inherit;text-align:center;cursor:pointer;transition:background .3s,color .3s}
.reminder-options svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reminder-options strong{font-weight:400;font-size:18px}
.reminder-options small{font-size:14px;line-height:1.35;color:#4f6e61}
.reminder-options button[aria-pressed=true]{background:#082d24;color:#edf5ee;border-color:#082d24}
.reminder-options button[aria-pressed=true] small{color:#c2d8ce}
.reminder-options button:focus-visible{outline:2px solid #082d24;outline-offset:4px}
.reminder-text{margin-top:16px;font-size:17px;line-height:1.5;text-align:center;min-height:26px}

/* Cuando no conviene esperar */
.alert-sec{position:relative;isolation:isolate;padding:clamp(60px,7vw,110px) 0 70px;background:radial-gradient(ellipse at 90% 30%,#c2d9cb,transparent 60%),#e0ece4;color:#193d35;scroll-margin-top:30px}
.alert-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:end}
.alert-head .eyebrow{grid-column:1/-1;opacity:.7}
.alert-head h2{font-size:clamp(36px,4vw,64px);line-height:1.08}
.alert-head p:not(.eyebrow){font-size:clamp(18px,1.4vw,22px);line-height:1.6;color:#3d5e52}
.alert-list{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:start}
.alert-item{display:grid;grid-template-columns:52px 1fr 36px;gap:18px;align-items:center;width:100%;padding:16px 18px;border:1px solid #9fbda88c;border-radius:18px;background:#f9fcf5b0;color:inherit;font:inherit;font-size:clamp(19px,1.5vw,23px);text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.alert-item:hover{background:#fff}
.alert-item svg{width:48px;height:48px}
.alert-item .alert-plus{width:34px;height:34px;border-radius:50%;border:1px solid #193d3540;display:grid;place-items:center;transition:transform .3s}
.alert-item .alert-plus svg{width:15px;height:15px}
.alert-item[aria-expanded=true]{background:#082d24;color:#edf5ee;border-color:#082d24}
.alert-item[aria-expanded=true] .alert-plus{transform:rotate(45deg);border-color:#ffffff55}
.alert-item:focus-visible{outline:2px solid #082d24;outline-offset:4px}
.alert-detail{margin:10px 6px 4px;padding:14px 18px;border-left:2px solid #082d24;font-size:18px;line-height:1.55}
.alert-banner{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(40px,5vw,60px);padding:clamp(24px,3.5vw,40px);border-radius:26px 26px 110px 26px;background:#082d24;color:#edf5ee}
.alert-mark{width:58px;height:58px;border-radius:50%;border:1px solid #ffffff66;display:grid;place-items:center;font-size:28px}
.alert-banner h3{font-size:clamp(26px,2.4vw,38px);line-height:1.12}
.alert-banner p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:#c9ddd2}
.alert-sec .back-link{margin-top:45px}

@media(max-width:800px){
  .care-body{grid-template-columns:1fr}
  /* En móvil los cuatro pasos van en una fila compacta para que la sección quepa fija en pantalla */
  .care-sticky{padding:40px 0}
  .care-head{margin-bottom:24px}
  .care-head h2{font-size:27px}
  .care-tabs{grid-template-columns:repeat(4,1fr);gap:6px}
  .care-tabs button{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;gap:6px;padding:12px 4px;border-radius:14px;text-align:center}
  .care-tabs svg{grid-row:auto;width:28px;height:28px}
  .care-num,.care-short{display:none}
  .care-name{font-size:13px;letter-spacing:0}
  .care-panel{gap:26px;padding:24px 22px}
  .care-panel h3{font-size:30px}
  .care-main{font-size:18px;margin-top:16px}
  .care-support{font-size:16px}
  .care-tabs button[aria-pressed=true]{transform:none}
  .care-panel{min-height:0;border-radius:22px 70px 22px 22px}
  .routine-steps{padding-left:52px}
  .routine-steps:before,.routine-line{left:19px}
  .routine-step{grid-template-columns:1fr;gap:16px}
  .routine-num{left:-52px;top:0;margin-top:0}
  .reminder{grid-template-columns:1fr}
  .reminder-options button{padding:12px 6px}
  .reminder-options strong{font-size:16px}
  .reminder-options small{font-size:12px}
  .alert-head,.alert-list{grid-template-columns:1fr}
  .alert-item{grid-template-columns:40px 1fr 32px;gap:14px;padding:12px 14px}
  .alert-item svg{width:38px;height:38px}
  .alert-banner{grid-template-columns:auto 1fr;border-radius:22px 22px 70px 22px}
  .alert-banner p{grid-column:1/-1}
  .alert-mark{width:44px;height:44px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){.care-tabs button,.care-progress span,.routine-num,.routine-step img,.reminder-sky,.reminder-sun,.alert-item,.alert-plus{transition:none!important}}