/* ==========================================================================
   demo-redesign.css — Oculialcoy (demo comercial de Oculinexa)
   --------------------------------------------------------------------------
   Composiciones NUEVAS y específicas de oftalmología para /demo: no son un
   retoque del patrón genérico de landing de clínica, son secciones propias
   (agenda con tipos de cita, ficha OD/OI, flujo de cirugía de cataratas,
   recorrido del paciente, equipo con roles, testimonios asimétricos y el
   CTA de producto). Todo queda scoped bajo el body ".theme-physiocare" del
   layout de la demo y consume los tokens de marca (--oftalmologo-*) que ya
   se resuelven en css/oculialcoy.css — no se toca css/landing-oftalmologo.css.
   ========================================================================== */

/* -- Botones de marca que el layout referencia pero no tenían regla propia -- */
.theme-physiocare .btn-primary-oftalmologo{
  background: linear-gradient(135deg, var(--oftalmologo-primary), var(--oftalmologo-secondary));
  border: none;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(var(--oftalmologo-primary-rgb), .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.theme-physiocare .btn-primary-oftalmologo:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(var(--oftalmologo-primary-rgb), .28);
  color: #fff;
}
.theme-physiocare .btn-soft-oftalmologo{
  background: rgba(var(--oftalmologo-primary-rgb), .08);
  border: 1px solid rgba(var(--oftalmologo-primary-rgb), .22);
  color: var(--oftalmologo-secondary);
  border-radius: 999px;
  font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.theme-physiocare .btn-soft-oftalmologo:hover{
  background: rgba(var(--oftalmologo-primary-rgb), .14);
  transform: translateY(-1px);
  color: var(--oftalmologo-secondary);
}

/* ==========================================================================
   1. Preview strip (sustituye a los 3 "highlights" genéricos): pastillas que
      anticipan lo que se va a ver en la sección "software en acción".
   ========================================================================== */
.theme-physiocare .preview-strip{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.theme-physiocare .preview-pill{
  flex: 1 1 260px;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(var(--oftalmologo-primary-rgb), .14);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(2,8,23,.04);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.theme-physiocare .preview-pill:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(2,8,23,.09);
  border-color: rgba(var(--oftalmologo-primary-rgb), .32);
  color: inherit;
}
.theme-physiocare .preview-pill .pill-num{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--oftalmologo-primary), var(--oftalmologo-secondary));
  color: #fff;
}
.theme-physiocare .preview-pill h3{ font-size: .95rem; font-weight: 800; margin: 0 0 .15rem; }
.theme-physiocare .preview-pill p{ font-size: .82rem; color: var(--fa-muted); margin: 0; line-height: 1.4; }

/* ==========================================================================
   2. "Así es un día en Oculialcoy con Oculinexa" — sección insignia
   ========================================================================== */
.theme-physiocare .software-day{
  position: relative;
}
.theme-physiocare .software-day .software-kicker{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--oftalmologo-secondary);
  background: rgba(var(--oftalmologo-primary-rgb), .10);
  border: 1px solid rgba(var(--oftalmologo-primary-rgb), .2);
  border-radius: 999px; padding: .3rem .7rem;
}

/* Selector de escenas (pills) */
.theme-physiocare .software-day .day-tabs{
  display: flex; flex-wrap: wrap; gap: .6rem;
  border: none; margin-bottom: 1.25rem;
}
.theme-physiocare .software-day .day-tabs .nav-link{
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--oftalmologo-primary-rgb), .2);
  background: #fff;
  color: var(--fa-text);
  font-weight: 700;
  font-size: .92rem;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.theme-physiocare .software-day .day-tabs .nav-link .tab-ic{
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--oftalmologo-primary-rgb), .12);
  color: var(--oftalmologo-secondary);
  font-size: .75rem; flex: 0 0 auto;
}
.theme-physiocare .software-day .day-tabs .nav-link:hover{ transform: translateY(-1px); }
.theme-physiocare .software-day .day-tabs .nav-link.active{
  background: linear-gradient(135deg, var(--oftalmologo-primary), var(--oftalmologo-secondary));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px rgba(var(--oftalmologo-primary-rgb), .28);
}
.theme-physiocare .software-day .day-tabs .nav-link.active .tab-ic{ background: rgba(255,255,255,.22); color: #fff; }

/* Marco tipo "pantalla de software" */
.theme-physiocare .device-frame{
  background: #fff;
  border: 1px solid #e3efe9;
  border-radius: 20px;
  box-shadow: 0 22px 50px rgba(2,8,23,.10);
  overflow: hidden;
}
.theme-physiocare .device-frame .device-bar{
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  background: linear-gradient(180deg, #f6faf8, #eef6f2);
  border-bottom: 1px solid #e3efe9;
}
.theme-physiocare .device-frame .device-dots{ display: flex; gap: .35rem; }
.theme-physiocare .device-frame .device-dots span{ width: 9px; height: 9px; border-radius: 999px; background: #d7e3dd; display: block; }
.theme-physiocare .device-frame .device-title{
  margin-left: .5rem; font-size: .82rem; font-weight: 700; color: var(--fa-muted);
  display: flex; align-items: center; gap: .4rem;
}
.theme-physiocare .device-frame .device-title i{ color: var(--oftalmologo-secondary); }
.theme-physiocare .device-frame .device-body{ padding: 1.25rem 1.35rem; }
@media (max-width: 575.98px){
  .theme-physiocare .device-frame .device-body{ padding: 1rem; }
}

/* --- Escena 1: Agenda del día --- */
.theme-physiocare .agenda-mock{ display: flex; flex-direction: column; gap: .55rem; }
.theme-physiocare .agenda-row{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: #f9fbfa;
  border: 1px solid #eef4f1;
}
.theme-physiocare .agenda-row .agenda-time{ font-weight: 800; color: var(--fa-text); font-size: .92rem; }
.theme-physiocare .agenda-row .agenda-who{ min-width: 0; }
.theme-physiocare .agenda-row .agenda-patient{ font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-physiocare .agenda-row .agenda-pro{ font-size: .78rem; color: var(--fa-muted); }
.theme-physiocare .type-chip{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .74rem; font-weight: 800; white-space: nowrap;
}
.theme-physiocare .type-chip::before{ content:""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.theme-physiocare .type-consulta{ background: rgba(var(--oftalmologo-accent-rgb), .12); color: var(--oftalmologo-accent); }
.theme-physiocare .type-revision{ background: rgba(var(--oftalmologo-primary-rgb), .12); color: var(--oftalmologo-secondary); }
.theme-physiocare .type-prueba{ background: rgba(230,160,43,.14); color: #a06a10; }
.theme-physiocare .type-cirugia{ background: rgba(217,58,34,.12); color: #b12f1c; }
@media (max-width: 575.98px){
  .theme-physiocare .agenda-row{ grid-template-columns: 52px 1fr; row-gap: .35rem; }
  .theme-physiocare .agenda-row .type-chip{ grid-column: 2; justify-self: start; }
}

/* --- Escena 2: Ficha de paciente / exploración OD-OI --- */
.theme-physiocare .patient-card-mock .patient-head{
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px dashed #e3efe9;
}
.theme-physiocare .patient-avatar{
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hero-primary-tint), var(--hero-secondary-tint));
  color: var(--oftalmologo-secondary); font-weight: 800; font-size: 1.05rem;
  border: 1px solid #e1eee8; flex: 0 0 auto;
}
.theme-physiocare .patient-head .patient-name{ font-weight: 800; font-size: 1.05rem; }
.theme-physiocare .patient-head .patient-meta{ font-size: .82rem; color: var(--fa-muted); }
.theme-physiocare .patient-head .patient-tags{ margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.theme-physiocare .patient-head .patient-tags .badge{
  background: rgba(var(--oftalmologo-primary-rgb), .1); color: var(--oftalmologo-secondary);
  border: 1px solid rgba(var(--oftalmologo-primary-rgb), .22); font-weight: 700; font-size: .72rem;
}

.theme-physiocare .od-oi-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 575.98px){ .theme-physiocare .od-oi-grid{ grid-template-columns: 1fr; } }
.theme-physiocare .eye-card{ border: 1px solid #eef4f1; border-radius: 14px; overflow: hidden; }
.theme-physiocare .eye-card .eye-head{
  padding: .55rem .85rem; font-weight: 800; font-size: .82rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--oftalmologo-primary-rgb), .08); color: var(--oftalmologo-secondary);
}
.theme-physiocare .eye-card.eye-oi .eye-head{ background: rgba(var(--oftalmologo-accent-rgb), .08); color: var(--oftalmologo-accent); }
.theme-physiocare .eye-card dl{ margin: 0; }
.theme-physiocare .eye-card .eye-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .5rem .85rem; font-size: .85rem; border-top: 1px solid #f1f6f4;
}
.theme-physiocare .eye-card .eye-row dt{ color: var(--fa-muted); font-weight: 600; }
.theme-physiocare .eye-card .eye-row dd{ margin: 0; font-weight: 700; text-align: right; }
.theme-physiocare .patient-note{
  margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px;
  background: #f9fbfa; border: 1px solid #eef4f1; font-size: .85rem; color: var(--fa-text);
}
.theme-physiocare .patient-note strong{ color: var(--oftalmologo-secondary); }

/* --- Escena 3: Flujo de cirugía de cataratas --- */
.theme-physiocare .surgery-flow{
  display: flex; gap: 0; overflow-x: auto; padding-bottom: .5rem; margin: 0 -.25rem;
  scrollbar-width: thin;
}
.theme-physiocare .surgery-step{
  flex: 1 1 120px; min-width: 0; position: relative;
  padding: 0 .5rem; text-align: center;
}
.theme-physiocare .surgery-step::before{
  content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 2px;
  background: linear-gradient(90deg, rgba(var(--oftalmologo-primary-rgb),.35), rgba(var(--oftalmologo-primary-rgb),.35));
  z-index: 0;
}
.theme-physiocare .surgery-step:first-child::before{ display: none; }
.theme-physiocare .surgery-step .step-dot{
  position: relative; z-index: 1;
  width: 40px; height: 40px; margin: 0 auto .6rem;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid rgba(var(--oftalmologo-primary-rgb), .4);
  color: var(--oftalmologo-secondary); font-weight: 800; font-size: .95rem;
}
.theme-physiocare .surgery-step.is-done .step-dot{
  background: linear-gradient(135deg, var(--oftalmologo-primary), var(--oftalmologo-secondary));
  border-color: transparent; color: #fff;
}
.theme-physiocare .surgery-step h4{ font-size: .82rem; font-weight: 800; margin: 0 0 .2rem; }
.theme-physiocare .surgery-step p{ font-size: .74rem; color: var(--fa-muted); margin: 0; line-height: 1.35; }
@media (max-width: 767.98px){
  .theme-physiocare .surgery-flow{ flex-direction: column; gap: 1.1rem; margin: 0; }
  .theme-physiocare .surgery-step{ display: flex; align-items: flex-start; gap: .8rem; text-align: left; padding: 0; }
  .theme-physiocare .surgery-step::before{ top: -1.1rem; left: 19px; width: 2px; height: 1.1rem; }
  .theme-physiocare .surgery-step .step-dot{ margin: 0; flex: 0 0 auto; }
}

/* Bloque lateral con foto de apoyo dentro de la sección software-day */
.theme-physiocare .software-day .side-photo{
  border-radius: 20px; overflow: hidden; position: relative; height: 100%; min-height: 260px;
  box-shadow: 0 18px 40px rgba(2,8,23,.10);
}
.theme-physiocare .software-day .side-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-physiocare .software-day .side-photo .side-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(6,26,22,.82));
  color: #fff; font-size: .84rem; font-weight: 600;
}

/* ==========================================================================
   3. Recorrido del paciente (sustituye al grid genérico de "servicios")
   ========================================================================== */
.theme-physiocare .patient-journey-wrap{ display: grid; grid-template-columns: minmax(0,320px) 1fr; gap: 2.25rem; align-items: start; }
@media (max-width: 991.98px){ .theme-physiocare .patient-journey-wrap{ grid-template-columns: 1fr; gap: 1.75rem; } }

.theme-physiocare .journey-rail{ position: sticky; top: 96px; }
@media (max-width: 991.98px){ .theme-physiocare .journey-rail{ position: static; } }
.theme-physiocare .journey-step{ position: relative; padding: 0 0 1.6rem 2.1rem; }
.theme-physiocare .journey-step::before{
  content: ""; position: absolute; left: 11px; top: 26px; bottom: -6px; width: 2px;
  background: rgba(var(--oftalmologo-primary-rgb), .25);
}
.theme-physiocare .journey-step:last-child::before{ display: none; }
.theme-physiocare .journey-step:last-child{ padding-bottom: 0; }
.theme-physiocare .journey-step .journey-dot{
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--oftalmologo-primary), var(--oftalmologo-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800;
}
.theme-physiocare .journey-step h3{ font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; }
.theme-physiocare .journey-step p{ font-size: .85rem; color: var(--fa-muted); margin: 0 0 .4rem; }
.theme-physiocare .journey-step .journey-tag{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: var(--oftalmologo-secondary);
  background: rgba(var(--oftalmologo-primary-rgb), .09); border-radius: 999px; padding: .2rem .55rem;
}

.theme-physiocare .journey-services{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media (max-width: 767.98px){ .theme-physiocare .journey-services{ grid-template-columns: 1fr; } }
.theme-physiocare .journey-service-card{
  display: flex; gap: .75rem; padding: 1rem; background: #fff;
  border: 1px solid #e5effa; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(2,8,23,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.theme-physiocare .journey-service-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(2,8,23,.08); }
.theme-physiocare .journey-service-card .jsc-icon{
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--oftalmologo-primary-rgb), .1); color: var(--oftalmologo-secondary);
}
.theme-physiocare .journey-service-card h4{ font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; }
.theme-physiocare .journey-service-card p{ font-size: .8rem; color: var(--fa-muted); margin: 0 0 .5rem; line-height: 1.4; }
.theme-physiocare .journey-service-card .jsc-link{
  font-size: .78rem; font-weight: 700; color: var(--oftalmologo-secondary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.theme-physiocare .journey-service-card .jsc-link:hover{ text-decoration: underline; }

/* ==========================================================================
   4. Equipo — roles con acento de color
   ========================================================================== */
.theme-physiocare .team-role-badge{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 800; padding: .25rem .65rem; border-radius: 999px;
  margin-bottom: .35rem;
}
.theme-physiocare .team-role-badge.role-oftalmologo{ background: rgba(var(--oftalmologo-primary-rgb), .12); color: var(--oftalmologo-secondary); }
.theme-physiocare .team-role-badge.role-optometrista{ background: rgba(var(--oftalmologo-accent-rgb), .12); color: var(--oftalmologo-accent); }
.theme-physiocare .team-role-badge.role-director{ background: rgba(230,160,43,.15); color: #a06a10; }

/* ==========================================================================
   5. Testimonios — composición asimétrica (1 destacado + 2 compactos)
   ========================================================================== */
.theme-physiocare .testimonial-featured{
  background: #fff; border-radius: 20px; padding: 2rem;
  height: 100%; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 34px rgba(2,8,23,.08);
}
.theme-physiocare .testimonial-featured::before{
  content: "\201C"; position: absolute; top: -10px; right: 24px;
  font-size: 7rem; font-family: Georgia, serif; color: rgba(var(--oftalmologo-primary-rgb), .1); line-height: 1;
}
.theme-physiocare .testimonial-featured .quote{
  position: relative; font-size: 1.15rem; font-weight: 600; line-height: 1.55;
  color: #fff; margin-bottom: 1.25rem;
}
.theme-physiocare .testimonial-featured{ background: linear-gradient(135deg, var(--oftalmologo-secondary), var(--oftalmologo-accent)); color: #fff; }
.theme-physiocare .testimonial-featured::before{ color: rgba(255,255,255,.16); }
.theme-physiocare .testimonial-featured .stars i{ color: #ffd166; }
.theme-physiocare .testimonial-featured .reviewer .author{ color: #fff; }
.theme-physiocare .testimonial-featured .reviewer .small{ color: rgba(255,255,255,.75) !important; }
.theme-physiocare .testimonial-featured .review-avatar-fallback{ background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
.theme-physiocare .testimonial-mini{
  background: #fff; border: 1px solid #e5effa; border-radius: 16px; padding: 1.15rem 1.25rem;
  box-shadow: 0 8px 20px rgba(2,8,23,.04);
}
.theme-physiocare .testimonial-mini + .testimonial-mini{ margin-top: .9rem; }
.theme-physiocare .testimonial-mini .quote{ font-size: .92rem; font-weight: 600; color: var(--fa-text); margin: .35rem 0 .75rem; }

/* ==========================================================================
   6. CTA de producto — cierre de la demo, distinto del CTA de reserva
   ========================================================================== */
.theme-physiocare .product-cta{
  position: relative; overflow: hidden; border-radius: 28px;
  padding: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(900px 480px at 100% 120%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, var(--oftalmologo-secondary) 0%, #0E1618 100%);
  color: #fff; text-align: center;
}
.theme-physiocare .product-cta .kicker{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .35rem .8rem; margin-bottom: 1rem;
}
.theme-physiocare .product-cta h2{ color: #fff; font-weight: 800; font-size: clamp(1.6rem, 2vw + 1.1rem, 2.4rem); margin-bottom: .75rem; }
.theme-physiocare .product-cta p.lead-cta{ color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 1.75rem; font-size: 1.02rem; }
.theme-physiocare .product-cta .cta-actions{ display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.theme-physiocare .product-cta .btn-cta-solid{
  background: #fff; color: var(--oftalmologo-secondary); border: none; border-radius: 999px;
  font-weight: 800; padding: .85rem 1.5rem; display: inline-flex; align-items: center; gap: .55rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.theme-physiocare .product-cta .btn-cta-solid:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.22); color: var(--oftalmologo-secondary); }
.theme-physiocare .product-cta .btn-cta-outline{
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); border-radius: 999px;
  font-weight: 700; padding: .8rem 1.4rem; display: inline-flex; align-items: center; gap: .55rem;
  transition: background .18s ease, transform .18s ease;
}
.theme-physiocare .product-cta .btn-cta-outline:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); color: #fff; }
.theme-physiocare .product-cta .reassurance{ margin-top: 1.1rem; font-size: .82rem; color: rgba(255,255,255,.7); }