/* RO SEO: páginas de servicio/ciudad y sección de servicios de la portada. Usa las variables del tema ro-estudio. */

.rose-hero{
  background: linear-gradient(180deg, var(--ro-navy, #060644) 0%, var(--ro-navy-soft, #1B0F52) 100%);
  color: #fff;
  padding: 80px 0 90px;
}
.rose-crumbs{ font-size: 13px; color: var(--ro-text-soft, #C9C2E8); margin-bottom: 28px; }
.rose-crumbs a{ color: var(--ro-text-soft, #C9C2E8); text-decoration: underline; text-underline-offset: 3px; }
.rose-crumbs span{ margin: 0 6px; opacity: .6; }
.rose-hero__eyebrow{ color: var(--ro-pink, #DE79A0); }
.rose-hero h1{
  color: #fff; margin: 14px 0 18px; max-width: 820px;
  font-family: var(--ro-font-display, 'Poppins', sans-serif);
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
}
.rose-hero__intro{ color: var(--ro-text-soft, #C9C2E8); font-size: 18px; line-height: 1.6; max-width: 680px; margin: 0 0 32px; }
.rose-hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

.rose-body{ padding: 80px 0 40px; background: #fff; }
.rose-body__inner{ max-width: 820px; }
.rose-content{ color: #333055; font-size: 17px; line-height: 1.8; }
.rose-content h2, .rose-faq h2, .rose-related h2{
  color: var(--ro-navy, #060644); font-family: var(--ro-font-display, 'Poppins', sans-serif);
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.01em; margin: 48px 0 16px; line-height: 1.25;
}
.rose-content h2:first-child{ margin-top: 0; }
.rose-content p{ margin: 0 0 18px; }
.rose-content ul, .rose-content ol{ margin: 0 0 22px; padding-left: 22px; }
.rose-content li{ margin-bottom: 8px; }
.rose-content li::marker{ color: var(--ro-accent, #A231A2); }
.rose-content a{ color: var(--ro-accent-dark, #5C1F78); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.rose-faq{ margin-top: 56px; }
.rose-faq details{ border: 1.5px solid #E2DCF5; border-radius: 12px; padding: 0 20px; margin-bottom: 10px; background: #fff; }
.rose-faq details[open]{ border-color: var(--ro-accent, #A231A2); background: var(--ro-bg, #F8F5FF); }
.rose-faq summary{ cursor: pointer; padding: 18px 0; font-weight: 700; color: var(--ro-navy, #060644); list-style: none; position: relative; padding-right: 28px; }
.rose-faq summary::-webkit-details-marker{ display: none; }
.rose-faq summary::after{ content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--ro-accent, #A231A2); }
.rose-faq details[open] summary::after{ content: "–"; }
.rose-faq details p{ margin: 0 0 18px; color: #4A4570; line-height: 1.7; }

.rose-cta{ background: var(--ro-accent, #A231A2); color: #fff; padding: 64px 0; margin-top: 60px; text-align: center; }
.rose-cta h2{ color: #fff; margin: 0 0 10px; font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.rose-cta p{ margin: 0 0 26px; color: rgba(255,255,255,.88); font-size: 17px; }
.rose-cta .rose-hero__actions{ justify-content: center; }

.rose-related{ padding: 70px 0 100px; background: var(--ro-bg, #F8F5FF); }
.rose-related h2{ margin-top: 0; margin-bottom: 28px; }

.rose-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.rose-card{
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1.5px solid #E2DCF5; border-radius: var(--ro-radius, 20px);
  padding: 26px 24px; color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rose-card:hover{ border-color: var(--ro-accent, #A231A2); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(6,6,68,.08); }
.rose-card__tag{ color: var(--ro-accent, #A231A2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rose-card h3{ margin: 0; color: var(--ro-navy, #060644); font-size: 19px; font-weight: 800; }
.rose-card p{ margin: 0; color: #4A4570; font-size: 15px; line-height: 1.6; flex: 1; }
.rose-card__more{ color: var(--ro-accent-dark, #5C1F78); font-weight: 700; font-size: 14px; margin-top: 6px; }

.rose-front{ background: var(--ro-bg, #F8F5FF); }
.rose-front .ro-section-head{ margin-bottom: 48px; }
.rose-cities{ text-align: center; margin: 36px 0 0; color: #4A4570; }
.rose-cities a{ color: var(--ro-accent-dark, #5C1F78); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px){
  .rose-hero{ padding: 48px 0 60px; }
  .rose-hero__actions .ro-btn{ flex: 1 1 100%; justify-content: center; }
  .rose-body{ padding: 52px 0 24px; }
  .rose-content{ font-size: 16px; }
}

/* Quiénes somos (templates/about.php) */
.rab-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.rab-hero h1{ max-width: none; }
.rab-hero h1 em{ font-style: normal; color: var(--ro-pink, #DE79A0); }
.rab-fact{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--ro-radius, 20px); padding: 30px 28px; backdrop-filter: blur(6px); }
.rab-fact h2{ color: #fff; font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: 18px; font-weight: 800; margin: 0 0 18px; }
.rab-fact dl{ margin: 0; }
.rab-fact dl > div{ padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.rab-fact dt{ color: var(--ro-pink, #DE79A0); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rab-fact dd{ margin: 4px 0 0; color: #fff; font-size: 16px; line-height: 1.45; }

.rab-sec{ padding: 80px 0; background: #fff; }
.rab-sec--soft{ background: var(--ro-bg, #F8F5FF); }
.rab-sec--def{ padding: 56px 0; background: var(--ro-bg, #F8F5FF); border-bottom: 1px solid #E2DCF5; }
.rab-narrow{ max-width: 820px; }
.rab-lead{ margin: 0 0 12px; color: var(--ro-navy, #060644); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55; }
.rab-lead a{ color: var(--ro-accent-dark, #5C1F78); font-weight: 700; text-underline-offset: 3px; }
.rab-note{ margin: 0; color: #4A4570; font-size: 15px; line-height: 1.6; }
.rab-head{ max-width: 720px; margin: 0 0 40px; }
.rab-head h2, .rab-person h2, .rab-faq h2{
  color: var(--ro-navy, #060644); font-family: var(--ro-font-display, 'Poppins', sans-serif);
  font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 10px 0 0;
}
.rab-chips{ list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.rab-chips li{ background: #fff; border: 1.5px solid #E2DCF5; border-radius: 999px; padding: 12px 22px; color: var(--ro-navy, #060644); font-weight: 700; }
.rab-chips a{ color: var(--ro-accent-dark, #5C1F78); text-decoration: none; }
.rab-chips li:hover{ border-color: var(--ro-accent, #A231A2); }
.rab-person{ display: grid; grid-template-columns: auto minmax(0, 640px); gap: 40px; align-items: center; justify-content: center; }
.rab-avatar{ width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: 52px; font-weight: 800; background: linear-gradient(135deg, var(--ro-accent, #A231A2), var(--ro-accent-dark, #5C1F78)); box-shadow: 0 14px 40px rgba(162,49,162,.25); }
.rab-role{ margin: 6px 0 14px; color: var(--ro-accent, #A231A2); font-weight: 700; }
.rab-person p:last-child{ margin: 0; color: #4A4570; font-size: 17px; line-height: 1.7; }
.rab-steps{ list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.rab-steps li{ counter-increment: paso; background: #fff; border: 1.5px solid #E2DCF5; border-radius: var(--ro-radius, 20px); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.rab-steps li::before{ content: counter(paso); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ro-accent, #A231A2); color: #fff; font-weight: 800; }
.rab-steps strong{ color: var(--ro-navy, #060644); font-size: 18px; font-weight: 800; }
.rab-steps span{ color: #4A4570; line-height: 1.6; font-size: 15px; }
.rab-faq{ margin-top: 0; }
.rab-faq h2{ margin: 0 0 24px; }
.rab-cta{ margin-top: 0; }

@media (max-width: 860px){
  .rab-hero__grid{ grid-template-columns: 1fr; gap: 36px; }
  .rab-sec{ padding: 56px 0; }
  .rab-person{ grid-template-columns: 1fr; gap: 24px; justify-items: start; }
  .rab-avatar{ width: 110px; height: 110px; font-size: 38px; }
  .rab-steps{ grid-template-columns: 1fr; }
}

/* Nuestros servicios (portada): lista ordenada y completa */
#paquetes, #servicios, #servicios-detalle, #blog, #trabajos{ scroll-margin-top: 130px; }
/* #contacto tiene 60px más de relleno superior: se compensa para que el título caiga a la misma altura que en las demás secciones */
#contacto{ scroll-margin-top: 70px; }
.rsv{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.rsv__intro{ position: sticky; top: 150px; }
.rsv__intro h2{ margin: 10px 0 14px; }
.rsv__intro p{ margin: 0 0 28px; color: #4A4570; font-size: 17px; line-height: 1.7; }
.rsv__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.rsv .ro-btn--ghost-dark{ border: 1.5px solid var(--ro-navy, #060644); color: var(--ro-navy, #060644); background: transparent; }
.rsv__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rsv__row{
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 18px; align-items: start;
  background: #fff; border: 1.5px solid #E2DCF5; border-radius: var(--ro-radius, 20px);
  padding: 26px 26px; color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rsv__row:hover{ border-color: var(--ro-accent, #A231A2); transform: translateX(4px); box-shadow: 0 10px 30px rgba(6,6,68,.08); }
.rsv__n{ font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: 34px; font-weight: 800; line-height: 1; color: var(--ro-pink, #DE79A0); }
.rsv__body{ display: flex; flex-direction: column; gap: 6px; }
.rsv__tag{ color: var(--ro-accent, #A231A2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rsv__body strong{ color: var(--ro-navy, #060644); font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: 21px; font-weight: 800; line-height: 1.25; }
.rsv__desc{ color: #4A4570; font-size: 15.5px; line-height: 1.65; }
.rsv__go{ color: var(--ro-accent-dark, #5C1F78); font-size: 22px; font-weight: 700; line-height: 1; padding-top: 4px; }
@media (max-width: 900px){
  .rsv{ grid-template-columns: 1fr; gap: 32px; }
  .rsv__intro{ position: static; }
  .rsv__row{ grid-template-columns: 40px minmax(0, 1fr); padding: 22px 20px; gap: 14px; }
  .rsv__n{ font-size: 26px; }
  .rsv__go{ display: none; }
}

/* Paquetes (portada): carrusel de tarjetas de color (modelo F) */
.ro-packages{
  display: flex !important; grid-template-columns: none !important; grid-auto-flow: row !important;
  gap: 16px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 20px !important; margin: 0 -4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ro-packages::-webkit-scrollbar{ display: none; height: 0; }
.ro-packages .ro-card{
  flex: 0 0 292px !important; scroll-snap-align: start; min-height: 380px; height: auto !important;
  border: 0 !important; border-radius: 24px !important; padding: 28px 26px !important;
  display: flex !important; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
  color: #fff !important; box-shadow: none !important; transform: none !important;
}
.ro-packages .ro-card::after{ content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.ro-packages .ro-card--dark{ background: linear-gradient(155deg, #060644, #1B0F52) !important; }
.ro-packages .ro-card--purple{ background: linear-gradient(155deg, #A231A2, #5C1F78) !important; }
.ro-packages .ro-card--lavender{ background: linear-gradient(155deg, #6B4FC4, #3C2A86) !important; }
.ro-packages .ro-card--light{ background: linear-gradient(155deg, #DE79A0, #B8446F) !important; }
.ro-packages .ro-card > *{ position: relative; z-index: 1; }
.ro-packages .ro-card__aside{ display: flex; align-items: center; justify-content: space-between; margin: 0; }
.ro-packages .ro-card__icon{ background: rgba(255,255,255,.18) !important; color: #fff !important; }
.ro-packages .ro-card__icon svg{ stroke: #fff !important; color: #fff !important; }
.ro-packages .ro-card__badge{ color: #fff !important; opacity: .85; }
.ro-packages .ro-card__body{ display: flex; flex-direction: column; flex: 1; gap: 10px; }
.ro-packages .ro-card h3{ color: #fff !important; font-size: 22px !important; line-height: 1.25; margin: 10px 0 0; }
.ro-packages .ro-card .ro-card__desc{ display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; max-height: none !important; text-overflow: clip !important; color: rgba(255,255,255,.9) !important; font-size: 15px; line-height: 1.6; margin: 0; }
.ro-packages .ro-card .ro-card__ideal{ display: block; background: rgba(255,255,255,.16) !important; color: #fff !important; opacity: 1 !important; border-radius: 12px !important; padding: 10px 14px !important; font-size: 13px; line-height: 1.45; margin-top: auto; }
.ro-packages .ro-card__footer{ margin: 0; padding: 0; border: 0 !important; display: flex; justify-content: flex-start; }
.ro-packages .ro-card .ro-card__cta{ background: transparent !important; border: 0 !important; color: #fff !important; padding: 0 !important; font-weight: 700; font-size: 14px; opacity: 1 !important; box-shadow: none !important; }
.ro-packages .ro-card .ro-card__cta:hover{ text-decoration: underline; text-underline-offset: 4px; }
.rpk-nav{ display: flex; gap: 10px; margin-top: 6px; justify-content: center; }
.rpk-nav button{ width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ro-navy, #060644); background: transparent; color: var(--ro-navy, #060644); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.rpk-nav button:hover{ background: var(--ro-navy, #060644); color: #fff; }
.rpk-nav[hidden]{ display: none; }
@media (max-width: 760px){
  .ro-packages .ro-card{ flex-basis: 82% !important; min-height: 360px; padding: 24px 22px !important; }
}

/* Ventana flotante de servicio */
.rsm-lock{ overflow: hidden; }
.rsm{ position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rsm[hidden]{ display: none; }
.rsm__overlay{ position: absolute; inset: 0; background: rgba(6,6,68,.62); backdrop-filter: blur(3px); }
.rsm__panel{ position: relative; background: #fff; border-radius: var(--ro-radius, 20px); width: min(720px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 44px 44px 36px; box-shadow: 0 30px 80px rgba(6,6,68,.35); animation: rsm-in .22s ease; }
@keyframes rsm-in{ from{ opacity: 0; transform: translateY(14px) scale(.98); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .rsm__panel{ animation: none; } }
.rsm__close{ position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ro-bg, #F8F5FF); color: var(--ro-navy, #060644); font-size: 26px; line-height: 1; cursor: pointer; }
.rsm__close:hover{ background: #E8E2F7; }
.rsm__tag{ color: var(--ro-accent, #A231A2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rsm__panel h3{ margin: 8px 0 12px; color: var(--ro-navy, #060644); font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.2; padding-right: 44px; }
.rsm__intro{ margin: 0 0 22px; color: #4A4570; font-size: 17px; line-height: 1.65; }
.rsm__content{ color: #333055; font-size: 16px; line-height: 1.75; }
.rsm__content h2{ margin: 26px 0 10px; color: var(--ro-navy, #060644); font-family: var(--ro-font-display, 'Poppins', sans-serif); font-size: 20px; font-weight: 800; }
.rsm__content p{ margin: 0 0 14px; }
.rsm__content ul, .rsm__content ol{ margin: 0 0 16px; padding-left: 22px; }
.rsm__content li{ margin-bottom: 6px; }
.rsm__content li::marker{ color: var(--ro-accent, #A231A2); }
.rsm__content a{ color: var(--ro-accent-dark, #5C1F78); font-weight: 700; }
.rsm__faq{ margin-top: 26px; }
.rsm__faq h4{ margin: 0 0 12px; color: var(--ro-navy, #060644); font-size: 18px; font-weight: 800; }
.rsm__faq details{ border: 1.5px solid #E2DCF5; border-radius: 12px; padding: 0 16px; margin-bottom: 8px; }
.rsm__faq details[open]{ border-color: var(--ro-accent, #A231A2); background: var(--ro-bg, #F8F5FF); }
.rsm__faq summary{ cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--ro-navy, #060644); }
.rsm__faq details p{ margin: 0 0 14px; color: #4A4570; line-height: 1.65; }
.rsm__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #E8E2F7; }
.rsm__full{ margin-left: auto; color: var(--ro-accent-dark, #5C1F78); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px){
  .rsm{ padding: 12px; align-items: flex-end; }
  .rsm__panel{ padding: 34px 22px 26px; max-height: calc(100vh - 24px); }
  .rsm__full{ margin-left: 0; flex-basis: 100%; }
}

.rsm__cta{ margin-top: 30px; padding: 24px 26px; border-radius: 16px; background: var(--ro-bg, #F8F5FF); border: 1.5px solid #E2DCF5; }
.rsm__cta h4{ margin: 0 0 6px; color: var(--ro-navy, #060644); font-size: 19px; font-weight: 800; }
.rsm__cta p{ margin: 0; color: #4A4570; line-height: 1.6; }
.rsm__cta + .rsm__actions{ margin-top: 18px; padding-top: 0; border-top: 0; }
.rsm__others{ margin-top: 26px; padding-top: 22px; border-top: 1px solid #E8E2F7; }
.rsm__others h4{ margin: 0 0 12px; color: var(--ro-navy, #060644); font-size: 16px; font-weight: 800; }
.rsm__others div{ display: flex; flex-wrap: wrap; gap: 10px; }
.rsm__others a{ border: 1.5px solid #E2DCF5; border-radius: 999px; padding: 9px 16px; color: var(--ro-accent-dark, #5C1F78); font-weight: 700; font-size: 14px; text-decoration: none; }
.rsm__others a:hover{ border-color: var(--ro-accent, #A231A2); }