/* Página comercial de Mommentio Turnos, registro y páginas legales. Marca de Mommentio (manual v1.0). */

.sitio-barra .barra-int { max-width: 1120px; }
.sitio-barra nav { display: flex; gap: .3rem; align-items: center; }
.sitio-barra nav a:not(.btn) { color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .92rem; padding: .4rem .6rem; border-radius: 10px; }
.sitio-barra nav a:not(.btn):hover { background: var(--fondo-2); color: var(--tinta); }
@media (max-width: 760px) { .sitio-barra nav .solo-ancho { display: none; } }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.seccion { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; }
.seccion-oscura { background: var(--negro); color: var(--marfil); }
.seccion-oscura .suave, .seccion-oscura p { color: #c9c6bd; }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--marfil); }
.seccion-suave { background: var(--fondo-2); }
.titulo-seccion { max-width: 720px; margin-bottom: 2rem; }
.titulo-seccion h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }

.hero { padding: clamp(2.5rem, 2rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem); }
.hero .contenedor { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero .contenedor { grid-template-columns: 1.1fr .9fr; } }
.hero h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -.035em; max-width: 16ch; }
.hero .bajada { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--tinta-2); max-width: 52ch; }
.hero .acciones { margin-top: 1.5rem; }
.hero .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }

/* Celular de muestra (maqueta en HTML, con datos de ejemplo rotulados) */
.celular { width: min(320px, 100%); margin: 0 auto; border-radius: 40px; padding: 12px; background: var(--negro); box-shadow: var(--sombra-alta); }
.celular .pantalla { border-radius: 30px; overflow: hidden; background: #F5F3EE; color: #111; min-height: 560px; }
.celular .cab { background: #6B4E9B; color: #fff; padding: 1.4rem 1rem 1rem; }
.celular .cab strong { display: block; font: 600 1.15rem/1.2 var(--f-titulo); }
.celular .cab span { font-size: .78rem; opacity: .85; }
.celular .cuerpo { padding: .9rem; display: grid; gap: .6rem; }
.celular .etq { font: 600 .66rem/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: #6B685F; }
.celular .serv { background: #fff; border: 1px solid #DDD8CC; border-radius: 12px; padding: .6rem .7rem; display: flex; justify-content: space-between; font-size: .82rem; }
.celular .serv.sel { border-color: #6B4E9B; box-shadow: inset 0 0 0 1px #6B4E9B; background: #F0EDF6; }
.celular .dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.celular .dias span { background: #fff; border: 1px solid #DDD8CC; border-radius: 10px; text-align: center; padding: .35rem 0; font: 600 .8rem/1.2 var(--f-titulo); }
.celular .dias span.sel { background: #6B4E9B; color: #fff; border-color: #6B4E9B; }
.celular .horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.celular .horas span { background: #fff; border: 1px solid #C9C3B4; border-radius: 9px; text-align: center; padding: .4rem 0; font: 600 .82rem/1 var(--f-titulo); }
.celular .horas span.sel { background: #6B4E9B; color: #fff; border-color: #6B4E9B; }
.celular .boton { background: #6B4E9B; color: #fff; border-radius: 999px; text-align: center; padding: .7rem; font-weight: 700; font-size: .85rem; }
.celular .rotulo-ejemplo { text-align: center; font-size: .7rem; color: #6B685F; }

.pasos-como { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: n; }
.pasos-como li { list-style: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.2rem; }
.pasos-como li::before { counter-increment: n; content: counter(n); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--marca); color: var(--sobre-marca); font: 700 .95rem/1 var(--f-titulo); margin-bottom: .7rem; }
.pasos-como ol { padding: 0; margin: 0; }

.funciones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.funcion { padding: 1.2rem; border-radius: var(--radio-grande); background: rgba(255, 255, 255, .04); border: 1px solid #2F2E2B; }
.funcion svg { width: 26px; height: 26px; color: var(--petroleo); margin-bottom: .6rem; }
.funcion h3 { font-size: 1.05rem; }
.funcion p { margin: 0; font-size: .94rem; }

.rubros { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rubro { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.1rem; }
.rubro h3 { margin-bottom: .3rem; }
.rubro p { margin: 0; color: var(--tinta-2); font-size: .92rem; }

.precios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; }
.precio-caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.precio-caja.destacada { border-color: var(--marca); box-shadow: inset 0 0 0 2px var(--marca); }
.precio-caja .monto-grande small { font: 500 1rem/1 var(--f-texto); color: var(--tinta-3); letter-spacing: 0; }
.condiciones { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .5rem; max-width: 820px; }
.condiciones li { display: flex; gap: .6rem; align-items: flex-start; color: var(--tinta-2); }
.condiciones svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: .15rem; }

.preguntas { max-width: 820px; }
.preguntas details { border-bottom: 1px solid var(--linea); padding: 1rem 0; }
.preguntas summary { font: 600 1.05rem/1.35 var(--f-titulo); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--tinta); margin: 0; }
.preguntas summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--tinta-3); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas p { margin: .7rem 0 0; color: var(--tinta-2); }

.cierre { text-align: center; }
.cierre h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); max-width: 22ch; margin: 0 auto .7rem; }

/* Registro */
.registro { max-width: 640px; margin: 0 auto; padding: 1.2rem 16px 2rem; }
.registro > header { margin-bottom: 1.5rem; }
.pasos-registro { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.pasos-registro li { flex: 1; display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--tinta-3); }
.pasos-registro li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea-fuerte); font: 700 .78rem/1 var(--f-titulo); flex: none; }
.pasos-registro li.actual { color: var(--tinta); }
.pasos-registro li.actual span { border-color: var(--marca); color: var(--marca); }
.pasos-registro li.hecho span { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.registro-caja { padding: 1.5rem; }
.registro .planes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0; }
.registro .plan { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.2rem; background: var(--superficie); display: flex; flex-direction: column; gap: .5rem;
  text-align: left; cursor: pointer; color: var(--tinta); font: inherit; }
.registro .plan:hover { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.registro .plan .precio { font: 600 1.8rem/1 var(--f-titulo); letter-spacing: -.03em; }
.registro .plan .precio small { font: 500 .9rem/1 var(--f-texto); color: var(--tinta-3); letter-spacing: 0; }
.enlace-prefijo > span { font-size: .8rem; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-prefijo > input { padding-left: calc(55% + 1rem); }
@media (min-width: 520px) { .enlace-prefijo > span { max-width: none; } .enlace-prefijo > input { padding-left: 15.5rem; } }
.centro { text-align: center; }
.aviso-pagina { max-width: 560px; margin: 10vh auto; padding: 0 16px; text-align: center; }

/* Legales */
.legal { max-width: 760px; margin: 0 auto; padding: 2rem 16px 3rem; }
.legal .texto-legal { font-size: 1rem; line-height: 1.65; }
.banda-demo-sitio { background: var(--acento); color: var(--negro); text-align: center; font: 600 .86rem/1.35 var(--f-texto); padding: .55rem 16px; }