/* ==========================================================================
   Citta — estilos del sitio comercial (tokens del sistema de marca)
   ========================================================================== */

@font-face { font-family: Manrope; src: url(../fonts/manrope-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url(../fonts/manrope-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url(../fonts/manrope-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: Inter; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
	--surface: #F7F5F1;
	--surface-raised: #FFFFFF;
	--line: #E3E0D8;
	--ink: #18211E;
	--ink-muted: #5B6662;
	--verde: #0F5C4D;
	--verde-hover: #0B4A3E;
	--verde-soft: #E3F1EC;
	--on-verde: #FFFFFF;
	--ambar: #F2A93B;
	--ambar-hover: #E39A2B;
	--on-ambar: #18211E;
	--ambar-ink: #8A5A0B;
	--ambar-soft: #FDF1DC;
	--rojo: #B3362B;
	--rojo-soft: #FBE7E4;
	--azul: #2A63A3;
	--azul-soft: #E5EEF8;
	--focus-ring: #0F5C4D;

	--font-display: Manrope, "Segoe UI", system-ui, sans-serif;
	--font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
	--radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px;
	--shadow-sm: 0 1px 2px rgba(24,33,30,.06), 0 1px 3px rgba(24,33,30,.08);
	--shadow-lg: 0 12px 32px rgba(24,33,30,.14);

	--ancho: 1120px;
	color-scheme: light;
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body.citta { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.citta h1, .citta h2, .citta h3 { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: -.015em; }
.citta h1 { font-size: clamp(32px, 7vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.citta h2 { font-size: clamp(26px, 4.5vw, 36px); line-height: 1.15; font-weight: 700; }
.citta h3 { font-size: 18px; line-height: 1.35; font-weight: 700; }
.citta p { margin: 0; }
.citta a { color: var(--verde); }
.citta img, .citta svg { display: block; max-width: 100%; }
.citta :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.citta code { font-size: .9em; background: var(--verde-soft); color: var(--verde); padding: 2px 6px; border-radius: var(--radius-sm); word-break: break-all; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff !important; padding: 8px 12px; border-radius: var(--radius-sm); z-index: 100; }
.saltar:focus { left: 8px; }
.ico { width: 20px; height: 20px; flex: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--space-4); }
.contenedor--angosto { max-width: 760px; }
@media (min-width: 768px) { .contenedor { padding: 0 var(--space-8); } }

.etiqueta { font: 600 13px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--verde); margin-bottom: var(--space-3) !important; }
.etiqueta--clara { color: var(--ambar); }

/* Botones --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn--pri { background: var(--verde); color: var(--on-verde) !important; }
.btn--pri:hover { background: var(--verde-hover); }
.btn--sec { background: var(--surface-raised); color: var(--ink) !important; border-color: var(--line); }
.btn--sec:hover { border-color: var(--ink-muted); }
.btn--ambar { background: var(--ambar); color: var(--on-ambar) !important; }
.btn--ambar:hover { background: var(--ambar-hover); }
.btn--grande { min-height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.btn--bloque { width: 100%; }

/* Cabecera -------------------------------------------------------------- */
.cab { position: sticky; top: 0; z-index: 50; background: rgba(247,245,241,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.cab__fila { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.cab__logo img { height: 31px; width: auto; }
.cab__nav { display: none; gap: var(--space-6); margin-left: var(--space-8); }
.cab__nav a, .cab__ingresar { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.cab__nav a:hover, .cab__ingresar:hover { color: var(--verde); }
.cab__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.cab--simple .cab__ingresar { margin-left: auto; }
.cab__acciones .btn { min-height: 40px; }
@media (min-width: 860px) { .cab__nav { display: flex; } }
/* En celular "Ingresar" se ve como botón y ambos botones se compactan. */
@media (max-width: 600px) {
	.cab__acciones { gap: var(--space-2); }
	.cab__acciones .cab__ingresar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); font-weight: 600; }
	.cab__acciones .btn { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 360px) { .cab__logo img { height: 26px; } .cab__acciones .cab__ingresar, .cab__acciones .btn { padding: 0 10px; font-size: 13px; } }

/* Héroe ----------------------------------------------------------------- */
.heroe { padding: var(--space-8) 0 56px; }
.heroe__fila { display: grid; gap: 40px; align-items: center; }
.heroe__titulo { max-width: 12ch; }
.heroe__bajada { margin-top: var(--space-4) !important; font-size: 18px; color: var(--ink-muted); max-width: 36ch; }
.heroe__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.heroe__nota { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4) !important; color: var(--ink-muted); font-size: 14px; }
.heroe__nota .ico { width: 18px; height: 18px; color: var(--verde); }
@media (max-width: 480px) { .heroe__cta .btn { flex: 1 1 100%; } }
@media (min-width: 960px) {
	.heroe { padding: 72px 0 96px; }
	.heroe__fila { grid-template-columns: 1.05fr .95fr; gap: 56px; }
	.heroe__bajada { font-size: 19px; }
}

/* Demo de agenda (ilustración hecha con HTML) */
.demo { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 460px; margin: 0 auto; }
.demo__cab { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.demo__dia { font: 700 18px/1.2 var(--font-display); }
.demo__resumen { font-size: 13px; color: var(--ink-muted); margin-top: 2px !important; }
.demo__punto { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ambar); box-shadow: 0 0 0 6px var(--ambar-soft); }
.demo__cuerpo { padding: var(--space-4); }
.demo__citas { position: relative; display: grid; gap: var(--space-3); }
.demo__ahora { position: relative; height: 2px; margin: -5px 0 -5px 6px; background: var(--ambar); }
.demo__ahora span { position: absolute; left: -6px; top: -4px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--ambar); }
.cita { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius-md); padding: var(--space-3); padding-right: 96px; box-shadow: var(--shadow-sm); }
.cita__hora { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
.cita__cliente { font-weight: 600; font-size: 15px; margin: 2px 0 !important; }
.cita__servicio { font-size: 14px; color: var(--ink-muted); }
.cita .chip { position: absolute; top: var(--space-3); right: var(--space-3); }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font: 500 12px/16px var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.chip--ok { color: var(--verde); background: var(--verde-soft); }
.chip--pen { color: var(--ambar-ink); background: var(--ambar-soft); }
.chip--can { color: var(--rojo); background: var(--rojo-soft); }

/* Rubros ---------------------------------------------------------------- */
.rubros { border-block: 1px solid var(--line); background: var(--surface-raised); }
.rubros__fila { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding-block: var(--space-6); }
.rubro { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 15px/1.2 var(--font-sans); color: var(--ink); }
.rubro .ico { color: var(--verde); width: 22px; height: 22px; }
@media (min-width: 640px) { .rubros__fila { grid-template-columns: repeat(4, 1fr); } }

/* Secciones ------------------------------------------------------------- */
.seccion { padding: 64px 0; }
.seccion--primera { padding-top: 48px; }
.seccion--suave { background: var(--surface-raised); border-block: 1px solid var(--line); }
.seccion--tinta { background: var(--ink); color: #E4EBE8; }
.seccion--tinta h2 { color: #fff; }
.seccion__cab { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.seccion__cab > p:last-child:not(.etiqueta) { margin-top: var(--space-3) !important; color: var(--ink-muted); font-size: 17px; }
@media (min-width: 960px) { .seccion { padding: 96px 0; } }

/* Funciones */
.funciones { display: grid; gap: var(--space-4); }
.funcion { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.funcion__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--verde-soft); color: var(--verde); margin-bottom: var(--space-4); }
.funcion__ico .ico { width: 22px; height: 22px; }
.funcion p { margin-top: var(--space-2) !important; color: var(--ink-muted); font-size: 15px; }
.sello { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--ambar-soft); color: var(--ambar-ink); font: 600 11px/16px var(--font-sans); letter-spacing: .02em; }
@media (min-width: 640px) { .funciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .funciones { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

/* Hecho en Ecuador */
.ecuador { display: grid; gap: var(--space-8); }
.ecuador__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.ecuador__lista li { display: flex; gap: var(--space-4); align-items: flex-start; font-size: 16px; }
.ecuador__lista .ico { color: var(--ambar); width: 24px; height: 24px; margin-top: 2px; }
.ecuador__lista strong { color: #fff; }
@media (min-width: 960px) { .ecuador { grid-template-columns: .8fr 1.2fr; align-items: start; } .ecuador__lista { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* Planes ---------------------------------------------------------------- */
.ciclo { display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--space-8); padding: 4px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-full); }
.ciclo__op { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.ciclo__op.is-activo { background: var(--verde); color: var(--on-verde); }
.ciclo__ahorro { padding: 3px 8px; border-radius: var(--radius-full); background: var(--ambar-soft); color: var(--ambar-ink); font-size: 11px; }
.ciclo__op.is-activo .ciclo__ahorro { background: var(--ambar); color: var(--on-ambar); }
.planes { display: grid; gap: var(--space-4); align-items: start; }
.plan { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.plan--destacado { border: 2px solid var(--verde); box-shadow: var(--shadow-lg); }
.plan__sello { position: absolute; top: -12px; left: var(--space-6); padding: 4px 10px; border-radius: var(--radius-full); background: var(--ambar); color: var(--on-ambar); font: 600 12px/16px var(--font-sans); }
.plan__nombre { font-size: 20px !important; }
.plan__para { color: var(--ink-muted); font-size: 14px; margin-top: var(--space-1) !important; min-height: 44px; }
.plan__precio { display: flex; align-items: baseline; gap: 2px; margin-top: var(--space-4) !important; font-family: var(--font-display); }
.plan__moneda { font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 6px; }
.plan__valor { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan__periodo { font: 500 15px/1 var(--font-sans); color: var(--ink-muted); margin-left: 4px; }
.plan__nota { font-size: 13px; color: var(--ink-muted); margin: var(--space-2) 0 var(--space-4) !important; min-height: 20px; }
.plan__lista { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-3); font-size: 15px; }
.plan__lista li { display: flex; gap: var(--space-2); align-items: flex-start; }
.plan__lista .ico { color: var(--verde); width: 18px; height: 18px; margin-top: 3px; }
.planes__pie { text-align: center; color: var(--ink-muted); font-size: 14px; margin-top: var(--space-6) !important; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

/* Tabla comparativa */
.tabla-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.comparar { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.comparar th, .comparar td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: center; }
.comparar thead th { font: 700 16px/1.3 var(--font-display); background: var(--surface); }
.comparar tbody th { text-align: left; font-weight: 500; }
.comparar tr:last-child th, .comparar tr:last-child td { border-bottom: 0; }
.comparar .si { display: inline-flex; color: var(--verde); }
.comparar .no { color: var(--ink-muted); }

/* Preguntas */
.faq { display: grid; gap: var(--space-3); }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.faq__item summary { list-style: none; cursor: pointer; padding: var(--space-4) 48px var(--space-4) var(--space-4); font-weight: 600; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 var(--space-4) var(--space-4); color: var(--ink-muted); }

/* Cierre */
.cierre { padding: 0 0 64px; }
.cierre__caja { background: var(--verde); color: var(--on-verde); border-radius: var(--radius-lg); padding: 48px var(--space-6); text-align: center; }
.cierre__caja h2 { color: #fff; }
.cierre__caja p { margin: var(--space-3) auto var(--space-6) !important; max-width: 44ch; color: #D4E8E1; }
@media (min-width: 768px) { .cierre { padding-bottom: 96px; } .cierre__caja { padding: 56px var(--space-8); } }

/* Pie */
.pie { background: var(--ink); color: #A3B0AB; padding: 48px 0 var(--space-6); font-size: 14px; }
.pie__fila { display: grid; gap: var(--space-8); }
.pie__marca img { height: 33px; width: auto; margin-bottom: var(--space-3); }
.pie__nav { display: grid; gap: var(--space-3); }
.pie__nav a { color: #E4EBE8; text-decoration: none; }
.pie__nav a:hover { color: var(--ambar); }
.pie__legal { margin-top: 40px; padding-top: var(--space-6); border-top: 1px solid #2C3531; }
@media (min-width: 768px) { .pie__fila { grid-template-columns: 1fr auto; } .pie__nav { grid-auto-flow: column; gap: var(--space-8); } }

/* Formularios: registro e ingreso -------------------------------------- */
.acceso { padding: var(--space-8) var(--space-4) 64px; }
.acceso__caja { max-width: 440px; margin: 0 auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.acceso__caja--ancha { max-width: 560px; }
@media (min-width: 640px) { .acceso { padding-top: 56px; } .acceso__caja { padding: var(--space-8); } }
.acceso__titulo { font: 800 28px/1.15 var(--font-display) !important; letter-spacing: -.02em; padding: 0; color: var(--ink); }
.acceso__bajada { color: var(--ink-muted); margin: var(--space-2) 0 var(--space-6) !important; }
.acceso__alterno { text-align: center; margin-top: var(--space-6) !important; font-size: 15px; color: var(--ink-muted); }

.pasos { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-size: 14px; color: var(--ink-muted); }
.pasos__item { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.pasos__item b { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1px solid var(--line); font-size: 12px; }
.pasos__item.is-activo { color: var(--ink); }
.pasos__item.is-activo b { background: var(--verde); border-color: var(--verde); color: var(--on-verde); }
.pasos__linea { flex: 1; height: 1px; background: var(--line); }

.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { display: block; margin-bottom: 0; }
.campo { margin-bottom: var(--space-4); }
.campo label, .campo__etiqueta { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.opcional { font-weight: 400; color: var(--ink-muted); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=password], .campo input[type=number], .campo select {
	width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: 400 16px/1.2 var(--font-sans); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6662' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-soft); }
.campo [aria-invalid=true] { border-color: var(--rojo) !important; }
.campo__ayuda { font-size: 13px; color: var(--ink-muted); margin-top: 6px !important; }
.campo__error { font-size: 13px; color: var(--rojo); margin-top: 6px !important; }
.campo__error:empty { display: none; }

.opciones { display: grid; gap: var(--space-2); }
.opciones--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .opciones--4 { grid-template-columns: repeat(4, 1fr); } }
.opcion { position: relative; cursor: pointer; margin: 0 !important; font-weight: 400 !important; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion__caja { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--space-3) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; font-weight: 600; font-size: 14px; transition: border-color .15s, background-color .15s; }
.opcion__caja .ico { color: var(--ink-muted); width: 24px; height: 24px; }
.opcion input:checked + .opcion__caja { border-color: var(--verde); background: var(--verde-soft); box-shadow: inset 0 0 0 1px var(--verde); }
.opcion input:checked + .opcion__caja .ico { color: var(--verde); }
.opcion input:focus-visible + .opcion__caja { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.opcion--fila .opcion__caja { flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 0; padding: var(--space-3); gap: var(--space-3); font-weight: 400; }
.opcion--fila strong { display: block; font-weight: 600; font-size: 15px; }
.opcion--fila small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.opcion__radio { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--line); border-radius: var(--radius-full); }
.opcion input:checked + .opcion__caja .opcion__radio { border: 6px solid var(--verde); }

.clave { position: relative; }
.clave input { padding-right: 84px !important; }
.clave__ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--verde); font: 600 14px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-sm); }

.check { display: flex !important; gap: var(--space-2); align-items: flex-start; font-weight: 400 !important; font-size: 14px !important; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.form__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); font-size: 14px; }
.form__acciones { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.form__acciones .btn--pri { flex: 1; }
.form__error { background: var(--rojo-soft); color: var(--rojo); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: 14px; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--ambar-soft); color: var(--ambar-ink); font-size: 14px; margin-bottom: var(--space-4) !important; }
.aviso--info { background: var(--azul-soft); color: var(--azul); }
.aviso--error { background: var(--rojo-soft); color: var(--rojo); }

/* Bienvenida al panel --------------------------------------------------- */
.panel-bienvenida { padding: 40px 0 72px; }
.panel-bienvenida h1 { font-size: clamp(28px, 6vw, 40px); }
.estado { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: var(--space-6) 0; }
@media (min-width: 640px) { .estado { grid-template-columns: repeat(4, 1fr); } }
.estado__dato { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.estado__etiqueta { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); margin-bottom: 4px; }
.estado__dato strong { font: 700 17px/1.3 var(--font-display); }
.tarjeta { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.tarjeta > p { color: var(--ink-muted); margin-top: var(--space-2) !important; }
.pasos-lista { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.pasos-lista li { display: flex; gap: var(--space-3); align-items: flex-start; }
.pasos-lista .ico { width: 24px; height: 24px; padding: 4px; border-radius: var(--radius-full); background: var(--verde); color: #fff; flex: none; }
.pasos-lista .num { display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.panel-bienvenida__otros { margin-top: var(--space-4) !important; color: var(--ink-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Rubros múltiples (registro) ------------------------------------------ */
.campo__ayuda--arriba { margin: -2px 0 var(--space-2) !important; }
.opciones--rubros { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .opciones--rubros { grid-template-columns: repeat(3, 1fr); } }
.opciones--rubros[aria-invalid=true] .opcion__caja { border-color: var(--rojo); }
.opcion--multi .opcion__caja { position: relative; }
.opcion__marca { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 5px; background: #fff; }
.opcion__marca .ico { width: 14px !important; height: 14px !important; color: transparent !important; }
.opcion input:checked + .opcion__caja .opcion__marca { background: var(--verde); border-color: var(--verde); }
.opcion input:checked + .opcion__caja .opcion__marca .ico { color: #fff !important; }
.rubros__nota { text-align: center; color: var(--ink-muted); font-size: 14px; padding-bottom: var(--space-6); margin-top: calc(-1 * var(--space-2)) !important; }
@media (min-width: 640px) { .rubros__fila { grid-template-columns: repeat(5, 1fr); } }

/* Elementos que agrega Blocksy y que estas páginas no usan ------------- */
body.citta .skip-link,
body.citta > a[href="#main"],
body.citta > a[href="#main-container"] { position: absolute !important; left: -9999px !important; }
body.citta .ct-drawer-canvas,
body.citta .ct-back-to-top,
body.citta #offcanvas,
body.citta #search-modal,
body.citta .ct-panel,
body.citta .ct-header-cart,
body.citta [data-id="ct-drawer"] { display: none !important; }

/* 404 y páginas de texto ------------------------------------------------ */
.error404 { text-align: center; padding-block: 40px; }
.error404 .heroe__cta { justify-content: center; }
.error404__texto { margin-top: var(--space-3) !important; color: var(--ink-muted); font-size: 17px; }
.texto h1 { font-size: clamp(30px, 5vw, 40px); margin-bottom: var(--space-6); }
.texto__cuerpo { font-size: 16px; line-height: 1.7; }
.texto__cuerpo p, .texto__cuerpo ul, .texto__cuerpo ol { margin: 0 0 var(--space-4) !important; }
.texto__cuerpo h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-3); }

/* Página pública del negocio ------------------------------------------- */
.pub-cab { background: var(--verde); color: #fff; padding: 32px 0; }
.pub-cab__fila { display: flex; align-items: center; gap: var(--space-4); }
.pub-cab__inicial { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: var(--radius-lg); background: rgba(255,255,255,.14); font: 800 26px/1 var(--font-display); }
.citta .pub-cab__nombre { color: #fff; font-size: clamp(24px, 6vw, 34px); }
.pub-cab__dir { color: #D4E8E1; margin-top: 4px !important; font-size: 15px; }
.pub { padding-block: var(--space-6) 48px; }
.pub-aviso { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: -40px; box-shadow: var(--shadow-lg); }
.pub-aviso h2 { font-size: 20px; }
.pub-aviso p { color: var(--ink-muted); margin: var(--space-2) 0 var(--space-4) !important; }
.pub-aviso .btn .ico { width: 20px; height: 20px; }
@media (max-width: 480px) { .pub-aviso .btn { width: 100%; } }
.pub-bloque { margin-top: var(--space-8); }
.pub-bloque h2 { font-size: 22px; margin-bottom: var(--space-3); }
.pub-cat { font: 600 13px/1.4 var(--font-sans) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted) !important; margin: var(--space-4) 0 var(--space-2) !important; }
.pub-servicios { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pub-servicios li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.pub-servicios li:first-child { border-top: 0; }
.pub-servicios small { display: block; color: var(--ink-muted); font-size: 13px; }
.pub-servicios b { font: 700 16px/1 var(--font-display); white-space: nowrap; }
.pub-horario { margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pub-horario div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.pub-horario div:first-child { border-top: 0; }
.pub-horario dt { font-weight: 600; }
.pub-horario dd { margin: 0; color: var(--ink-muted); text-align: right; }
.pub-cerrado { color: var(--rojo); }
.pub-pie { text-align: center; padding: var(--space-6) 0 40px; }
.pub-pie a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted) !important; text-decoration: none; font-size: 13px; }

/* ---------- Reserva en línea ---------- */
.rsv { padding-top: var(--space-6); padding-bottom: 120px; min-height: 60vh; }
.rsv-cargando { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); padding: var(--space-6) 0; }
.rsv-cargando span { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--verde); border-radius: var(--radius-full); animation: rsv-giro .8s linear infinite; }
@keyframes rsv-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rsv-cargando span { animation-duration: 2.4s; } }
.citta .rsv-titulo { font-size: clamp(24px, 6vw, 30px); margin: var(--space-2) 0 var(--space-2); outline: none; }
.rsv-texto { color: var(--ink-muted); margin: 0 0 var(--space-6) !important; }
.rsv-tarjeta { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.rsv-botones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rsv-botones .btn svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .rsv-botones .btn { flex: 1 1 100%; } }

.rsv-progreso { list-style: none; display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; font-size: 13px; color: var(--ink-muted); }
.rsv-progreso li { flex: 1; min-width: 0; white-space: nowrap; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 3px solid var(--line); }
.rsv-progreso li span { display: none; }
.rsv-progreso li.is-hecho { border-color: var(--verde); }
.rsv-progreso li.is-actual { border-color: var(--ambar); color: var(--ink); font-weight: 600; }
@media (max-width: 480px) { .rsv-progreso li:not(.is-actual) { font-size: 0; } }
.rsv-atras { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 0; color: var(--verde); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.rsv-atras svg { width: 18px; height: 18px; }

.rsv-grupo { margin-bottom: var(--space-6); }
.citta .rsv-grupo__titulo { font: 600 13px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.rsv-servicios { display: grid; gap: var(--space-2); }
.rsv-servicio { position: relative; display: block; cursor: pointer; }
.rsv-servicio input { position: absolute; opacity: 0; pointer-events: none; }
.rsv-servicio__caja { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color .15s, background-color .15s; }
.rsv-servicio:hover .rsv-servicio__caja { border-color: var(--ink-muted); }
.rsv-servicio input:checked + .rsv-servicio__caja { border-color: var(--verde); background: var(--verde-soft); box-shadow: inset 0 0 0 1px var(--verde); }
.rsv-servicio input:focus-visible + .rsv-servicio__caja { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rsv-servicio__marca { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: var(--radius-sm); color: transparent; background: #fff; }
.rsv-servicio__marca svg { width: 16px; height: 16px; }
.rsv-servicio input:checked + .rsv-servicio__caja .rsv-servicio__marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.rsv-servicio__texto { flex: 1; min-width: 0; }
.rsv-servicio__texto strong { display: block; font-size: 16px; }
.rsv-servicio__texto small { display: block; color: var(--ink-muted); font-size: 13px; margin-top: 2px; }
.rsv-servicio__precio { font: 700 16px/1 var(--font-display); white-space: nowrap; }

.rsv-opciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rsv-opcion { position: relative; cursor: pointer; }
.rsv-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.rsv-opcion > span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4) 0 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-full); font-weight: 600; font-size: 15px; }
.rsv-opcion input:checked + span { border-color: var(--verde); background: var(--verde-soft); box-shadow: inset 0 0 0 1px var(--verde); }
.rsv-opcion input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rsv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); color: #fff; font: 700 15px/1 var(--font-display); font-style: normal; }
.rsv-avatar--cualquiera { background: var(--ambar); color: var(--ink); }

.rsv-dias { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px 2px var(--space-3); margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.rsv-dia { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); cursor: pointer; scroll-snap-align: start; font-family: var(--font-sans); }
.rsv-dia small { font-size: 12px; color: var(--ink-muted); }
.rsv-dia strong { font: 700 20px/1.1 var(--font-display); }
.rsv-dia.is-sel { background: var(--verde); border-color: var(--verde); color: #fff; }
.rsv-dia.is-sel small { color: #D4E8E1; }
.rsv-dia:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.rsv-fecha-larga { font-weight: 600; margin: var(--space-2) 0 var(--space-4) !important; }
.rsv-tramo { margin-bottom: var(--space-4); }
.rsv-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: var(--space-2); }
.rsv-hora { min-height: 44px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.rsv-hora:hover { border-color: var(--verde); }
.rsv-hora.is-sel { background: var(--verde); border-color: var(--verde); color: #fff; }
.rsv-vacio { padding: var(--space-6); text-align: center; color: var(--ink-muted); background: var(--surface-raised); border: 1px dashed var(--line); border-radius: var(--radius-md); }

.rsv-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) max(var(--space-4), calc((100vw - 760px) / 2 + var(--space-4))); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(24,33,30,.08); }
.rsv-barra__info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--ink-muted); }
.rsv-barra__info strong { font: 700 20px/1.2 var(--font-display); color: var(--ink); }
.rsv-barra .btn:disabled { opacity: .45; cursor: not-allowed; }

.rsv-resumen { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); }
.rsv-resumen__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 700; margin: 0 0 var(--space-3) !important; }
.rsv-resumen ul { list-style: none; margin: 0; padding: 0; }
.rsv-resumen li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.rsv-resumen li > span:nth-child(2) { flex: 1; min-width: 0; }
.rsv-resumen li small { display: block; color: var(--ink-muted); font-size: 13px; }
.rsv-resumen li b { font: 700 15px/1.4 var(--font-display); white-space: nowrap; }
.rsv-resumen__hora { flex: none; min-width: 48px; font: 700 15px/1.4 var(--font-display); color: var(--verde); }
.rsv-resumen__total { display: flex; justify-content: space-between; padding-top: var(--space-3); margin: 0 !important; border-top: 1px solid var(--line); font-weight: 600; }
.rsv-resumen__total strong { font: 800 20px/1 var(--font-display); }
.rsv-resumen__dir { margin: var(--space-3) 0 0 !important; color: var(--ink-muted); font-size: 14px; }
.rsv-form .campo input:not([type=checkbox]) { width: 100%; }
.rsv-nota { text-align: center; }

.rsv-hecho { text-align: center; padding-top: var(--space-4); }
.rsv-hecho__ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--verde-soft); color: var(--verde); box-shadow: 0 0 0 8px rgba(242,169,59,.18); }
.rsv-hecho__ico svg { width: 32px; height: 32px; }
.rsv-hecho .rsv-texto { max-width: 44ch; margin-left: auto !important; margin-right: auto !important; }
.aviso--ok { background: var(--verde-soft); color: var(--verde); }
.rsv-cancelar { margin-top: var(--space-8); text-align: center; }
.rsv-enlace-peligro { background: none; border: 0; color: var(--rojo); font: 600 15px/1 var(--font-sans); text-decoration: underline; cursor: pointer; padding: var(--space-3); }
.rsv-confirmar { text-align: left; }
.rsv-confirmar .rsv-botones { margin-top: var(--space-4); }
.btn--peligro { background: var(--rojo); color: #fff !important; }
.btn--peligro:hover { filter: brightness(.92); }

/* Cabecera pública con logo y teléfono */
.pub-cab__logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 72px; padding: 6px; border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.pub-cab__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pub-cab__contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0 !important; }
.pub-cab__contacto a { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none; }
.pub-cab__contacto a:hover { text-decoration: underline; }
.pub-cab__contacto .ico { width: 18px; height: 18px; }
.pub-cab__contacto a + a { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.16); }

/* Dama / Caballero */
.rsv-generos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
.rsv-genero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 150px; padding: var(--space-4); background: var(--surface-raised); border: 2px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); font: 700 20px/1.2 var(--font-display); cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.rsv-genero:hover { border-color: var(--verde); background: var(--verde-soft); }
.rsv-genero:active { transform: scale(.98); }
.rsv-genero svg { width: 48px; height: 48px; color: var(--verde); }
.rsv-genero small { font: 400 14px/1.3 var(--font-sans); color: var(--ink-muted); }
.rsv-filtro { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--verde-soft); color: var(--verde); font-weight: 600; font-size: 15px; }
.rsv-filtro button { border: 0; background: #fff; color: var(--verde); border-radius: 999px; padding: 6px 12px; font: 600 14px/1 var(--font-sans); cursor: pointer; }
.rsv-avatar img, img.rsv-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.rsv-opcion > span img.rsv-avatar { width: 40px; height: 40px; }