.ow2-form{max-width:760px;margin:0 auto;font-family:"DM Sans",Arial,sans-serif;color:#201E30} .ow2-stepper{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px} .ow2-step{display:flex;flex-direction:column;align-items:center;gap:6px;color:#9aa3b2;min-width:72px} .ow2-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:999px;background:#EEF0F6;color:#9aa3b2;font-weight:800;font-size:18px} .ow2-step .ow2-label{font-weight:700;font-size:12px;color:#7B8698} .ow2-progress{flex:1;height:2px;background:#EDF0F6;position:relative;border-radius:2px;align-self:center} .ow2-progress-bar{position:absolute;left:0;top:0;height:100%;width:0;background:#EBDCFD;border-radius:2px;transition:width .25s ease} .ow2-step.is-active .ow2-badge{background:#F867A5;color:#fff} .ow2-step.is-active .ow2-label{color:#201E30} .ow2-step.is-done .ow2-badge{background:#F1EAFE;color:#6A55F8} .ow2-panel{display:none} .ow2-panel.is-active{display:block} /* ------------------------------------------------------------------ campos */ .ow2-field-group{position:relative;background:#fff;border:1px solid #E3E7EF;border-radius:12px;padding:8px 14px;margin-bottom:14px} .ow2-field-label{display:block;font-size:12px;font-weight:600;color:#374151;margin:0 0 2px;line-height:1.1;padding-left:14px} .ow2-field{border:none;width:100%;background:transparent;color:#201E30;font-size:15px;padding:8px 42px 8px 14px} .ow2-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:.95;pointer-events:none;filter:invert(41%) sepia(7%) saturate(462%) hue-rotate(183deg) brightness(90%) contrast(86%)} .ow2-field-group:focus-within{border-color:#6A67F9} .ow2-error{border-color:#FA3C58 !important} .ow2-error-msg{margin-top:6px;margin-left:14px;font-size:12px;color:#FA3C58;font-weight:600} .ow2-actions{display:flex;gap:12px;margin-top:8px;justify-content:center;flex-wrap:wrap} .ow2-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:14px 18px;border:0;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;transition:transform .18s ease,filter .18s ease,opacity .18s ease;font-family:inherit} .ow2-btn-primary{background:linear-gradient(90deg,#4D5FF8 0%, #A05EFE 50%, #F268A8 100%);color:#fff} .ow2-btn-primary:not(:disabled):hover{filter:brightness(1.06)} .ow2-btn-ghost{background:#fff;color:#201E30} .ow2-btn-ghost:hover{background:#F0F5FA} .ow2-btn:disabled{opacity:.45;cursor:not-allowed} .ow2-btn-block{width:100%;max-width:340px} .ow2-step2-heading{font-weight:800;font-size:18px;text-align:center;margin:2px 0 16px} /* --------------------------------------------------------------- scheduler */ .ow2-sched{position:relative} .ow2-sched.is-busy{pointer-events:none;opacity:.6} .ow2-sched-view[hidden]{display:none} .ow2-sched-block{margin-bottom:18px} .ow2-sched-legend{font-size:13px;font-weight:700;color:#374151;margin:0 0 8px} /* Selector de duración */ .ow2-seg{display:flex;flex-wrap:wrap;gap:8px} .ow2-seg-btn{flex:1 1 auto;min-width:96px;min-height:44px;padding:10px 14px;border:1px solid #E3E7EF;border-radius:12px;background:#fff;color:#4b5563;font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease} .ow2-seg-btn:hover{background:#F7F8FD;border-color:#CFD6E8} .ow2-seg-btn.is-active{border-color:#6A55F8;background:#F1EAFE;color:#4B37D6} .ow2-seg-btn:focus-visible{outline:2px solid #6A67F9;outline-offset:2px} /* Calendario */ .ow2-cal{border:1px solid #E3E7EF;border-radius:14px;background:#fff;padding:12px} .ow2-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} .ow2-cal-month{flex:1;text-align:center;font-weight:700;font-size:16px;color:#201E30} /* Solo la inicial: `capitalize` convertía «septiembre de 2026» en «Septiembre De 2026», porque toca todas las palabras. */ .ow2-cal-month::first-letter{text-transform:uppercase} .ow2-cal-nav{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid #E3E7EF;border-radius:10px;background:#fff;color:#4b5563;cursor:pointer;padding:0} .ow2-cal-nav svg{width:18px;height:18px} .ow2-cal-nav:hover:not(:disabled){background:#F0F5FA} .ow2-cal-nav:disabled{opacity:.35;cursor:not-allowed} .ow2-cal-nav:focus-visible{outline:2px solid #6A67F9;outline-offset:2px} .ow2-cal-dow,.ow2-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .ow2-cal-dowcell{text-align:center;font-size:11px;font-weight:700;color:#9aa3b2;text-transform:uppercase;letter-spacing:.03em;padding:4px 0} .ow2-cal-cell{aspect-ratio:1/1;min-height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;font-family:inherit;font-weight:600;font-size:14px;line-height:1;padding:0} .ow2-cal-cell.is-empty{visibility:hidden} .ow2-cal-day{color:#201E30;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease} .ow2-cal-day.is-available{background:#F1EAFE;color:#4B37D6} .ow2-cal-day.is-available:hover{background:#DFD1FB} .ow2-cal-day.is-off{color:#C3C8D4;cursor:not-allowed;background:transparent} .ow2-cal-day.is-today{box-shadow:inset 0 0 0 1px #9aa3b2} .ow2-cal-day.is-selected{background:linear-gradient(90deg,#4D5FF8 0%, #A05EFE 50%, #F268A8 100%);color:#fff;box-shadow:none} .ow2-cal-day:focus-visible{outline:2px solid #6A67F9;outline-offset:2px} .ow2-sched-note{margin:10px 2px 0;font-size:13px;color:#7B8698;text-align:center} .ow2-sched-note:empty{display:none} /* Vista de horas */ /* Botón de texto puro: sin fondo ni en reposo ni en hover. La única realimentación es el color, así no compite con el botón de confirmar. */ .ow2-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px;padding:4px 2px;border:0;background:transparent;color:#6A55F8;font-family:inherit;font-weight:600;font-size:12px;line-height:1;cursor:pointer} .ow2-back svg{width:13px;height:13px} .ow2-back:hover,.ow2-back:focus-visible{background:transparent;color:#4B37D6;text-decoration:underline} .ow2-back:focus-visible{outline:2px solid #6A67F9;outline-offset:2px;text-decoration:none} .ow2-sched-day{font-weight:800;font-size:17px;color:#201E30} .ow2-sched-meta{margin:2px 0 12px;font-size:13px;color:#7B8698} /* La lista tiene scroll propio para que el botón de confirmar no se vaya al fondo de la página. `scrollbar-gutter` reserva el hueco de la barra: sin él, al aparecer se comía unos píxeles de la última columna. */ .ow2-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;max-height:340px;overflow-y:auto;padding:2px;scrollbar-gutter:stable} /* OJO con el tamaño de letra de este bloque: aquí y en .ow2-seg-btn, .ow2-back y .ow2-cal-cell se usaba la abreviatura `font: 600 15px/1.2 inherit`, que es CSS INVÁLIDO — `inherit` no vale como familia dentro de la abreviatura, así que el navegador descartaba la declaración entera y los botones heredaban los 20px del tema. Por eso las horas se veían enormes y se partían en dos líneas. Van en propiedades separadas a propósito; no volver a la abreviatura. `nowrap` y `tabular-nums` rematan el problema: una hora de 12 h («12:00 p. m.») nunca debe partirse, y las cifras tabulares alinean las horas entre filas. */ .ow2-slot{min-height:38px;padding:8px 4px;border:1px solid #E3E7EF;border-radius:10px;background:#fff;color:#4B37D6;font-family:inherit;font-weight:600;font-size:12px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease} .ow2-slot:hover{border-color:#A9A0F6;background:#F7F5FF} .ow2-slot.is-selected{border-color:transparent;background:linear-gradient(90deg,#4D5FF8 0%, #A05EFE 50%, #F268A8 100%);color:#fff} .ow2-slot:focus-visible{outline:2px solid #6A67F9;outline-offset:2px} .ow2-sched-confirm{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px} .ow2-sched-summary{font-size:14px;font-weight:600;color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:10px 14px;text-align:center} .ow2-sched-summary[hidden]{display:none} /* --- selector de zona horaria --- */ /* `min-width:0` en el select: dentro de un flex, su ancho por defecto sale del contenido —y «America/Argentina/Buenos_Aires» es largo— así que sin esto empujaba la fila y se salía de la tarjeta en un móvil. */ .ow2-sched-tz{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px} .ow2-sched-tz-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#7B8698} .ow2-sched-tz-label svg{width:16px;height:16px;flex:0 0 auto} .ow2-sched-tz-select{min-width:0;max-width:100%;padding:7px 10px;border:1px solid #E3E7EF;border-radius:10px;background:#fff;color:#201E30;font-family:inherit;font-size:13px;cursor:pointer} .ow2-sched-tz-select:focus{border-color:#6A67F9;outline:none} .ow2-sched-tz-select:focus-visible{outline:2px solid #6A67F9;outline-offset:2px} .ow2-sched-status{margin-top:12px;text-align:center;font-size:13px;color:#7B8698} .ow2-sched-status[hidden]{display:none} .ow2-sched-status.is-error{color:#991b1b} /* Mensajes + debug */ .ow2-message{display:none;text-align:center;margin:12px auto 0;max-width:420px;border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46;border-radius:10px;padding:10px 12px;font-size:14px} .ow2-message.error{border-color:#fecaca;background:#fef2f2;color:#991b1b} .ow2-debugbar{margin-top:10px;border-radius:8px;padding:8px 10px;font:13px/1.35 system-ui;background:#fff8e5;border:1px solid #facc15;color:#854d0e} /* ------------------------------------------------------------- responsive */ @media (max-width: 768px){ .ow2-step2-heading{font-size:16px} .ow2-slots{max-height:320px} } @media (max-width: 600px){ .ow2-stepper{gap:12px} .ow2-cal{padding:10px} .ow2-cal-month{font-size:15px} .ow2-slots{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))} /* En táctil el botón crece un poco aunque la letra no: por debajo de unos 40px el dedo empieza a fallar el objetivo. */ .ow2-slot{min-height:40px} .ow2-seg-btn{min-width:0;flex:1 1 30%;font-size:13px;padding:10px 8px} .ow2-btn-block{max-width:none} } @media (max-width: 480px){ .ow2-badge{width:40px;height:40px;font-size:16px} .ow2-step{min-width:56px} .ow2-step .ow2-label{font-size:11px} .ow2-cal-dow,.ow2-cal-grid{gap:2px} .ow2-cal-cell{min-height:38px;font-size:13px} .ow2-cal-dowcell{font-size:10px} .ow2-sched-day{font-size:16px} .ow2-slots{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width: 360px){ .ow2-slots{grid-template-columns:repeat(2,minmax(0,1fr))} .ow2-cal-cell{min-height:34px} } /* Los navegadores sin aspect-ratio necesitan una altura explícita o las celdas del calendario colapsan a la altura del número. */ @supports not (aspect-ratio: 1/1){ .ow2-cal-cell{height:42px} } @media (prefers-reduced-motion: reduce){ .ow2-btn,.ow2-slot,.ow2-cal-day,.ow2-seg-btn,.ow2-progress-bar{transition:none} } /* Campos sin bordes (según tu ajuste) */ .ow2-form .ow2-field-group{ border:0 !important; box-shadow:none !important; background:#fff; } .ow2-form .ow2-field{ border:0 !important; outline:none !important; box-shadow:none !important; background:transparent; -webkit-appearance:none; appearance:none; } /* Foco con ring suave */ .ow2-form .ow2-field-group:focus-within{ border:0 !important; box-shadow:0 0 0 2px #E6EAFE !important; } .ow2-field-group > ow-phone-picker { display:block; width:100%; } /* ------------------------------- resumen de la página de gracias Figma «Thank you» → nodo 665:1667. Solo la tarjeta: el resto de la página (titular, texto, botón de volver) lo monta Elementor. Las columnas del diseño miden 245 / 205 / 360 con 10 de separación y 10 de relleno interno, dentro de una tarjeta con 20 de relleno lateral. Aquí eso se colapsa en 265 / auto / 380 con 20 de relleno por celda y SIN gap: el contenido cae exactamente en las mismas coordenadas (265 y 490 desde el borde de la tarjeta) y, al no haber hueco entre celdas, las líneas divisorias salen continuas de arriba abajo. Con `gap` quedaban partidas al apilar en móvil. */ /* `container-type` para que la tarjeta reaccione a SU ancho, no al de la ventana: en Elementor puede acabar dentro de una columna estrecha de una página ancha, y ahí una media query de viewport no se entera de nada. Las media queries de abajo se quedan como red de seguridad para navegadores sin @container. `width:100%` NO es decorativo, es lo que sostiene lo anterior. Contener el tamaño en línea significa exactamente «no mires el contenido para calcular el ancho», así que en cualquier sitio donde el ancho SE SAQUE del contenido —hijo de un flex, float, inline-block— la tarjeta se quedaba en 0 px y el texto caía a una letra por línea. Pasó en la página de gracias montada en Elementor, cuyos contenedores son flex. Ojo también con `margin:0 auto`: un margen automático en el eje transversal anula el `align-items:stretch` del padre, así que ni el caso por defecto de Elementor se libraba. Con un ancho explícito el problema desaparece entero, porque ya no hay nada que deducir del contenido. Queda un caso que `width:100%` no puede resolver, y por eso está el `min-width`: si el PADRE es quien se encoge a su contenido, el cálculo se muerde la cola —el padre le pregunta el ancho a la tarjeta y la contención contesta 0—. El suelo de 280px convierte ese fallo total en una tarjeta estrecha pero legible, y no estorba en un móvil: en una pantalla de 320px quedan 288 útiles. */ .ow2-meet{width:100%;min-width:280px;max-width:870px;margin:0 auto;container-type:inline-size;font-family:"DM Sans",Arial,sans-serif;color:#1A2433} .ow2-meet[hidden]{display:none} .ow2-meet-heading{font-weight:700;font-size:16px;margin:0 0 12px} /* --- el envoltorio del shortcode ------------------------------------------ Sin esta regla la tarjeta salía de 280px y apilada en un escritorio de 1440. La causa no está en la tarjeta sino encima: Elementor la mete en un contenedor flex en columna con `align-items:center`, y ahí el ancho del ítem se deduce de su contenido. Nuestro contenido es `.ow2-meet`, que con `container-type:inline-size` lleva contención en el eje en línea — y la contención significa, literalmente, que su aportación de ancho intrínseco es 0 —. Así que el widget medía 0, el `width:100%` de la tarjeta resolvía contra 0 y lo único que quedaba en pie era el suelo de `min-width:280px`. Dándole `width:100%` al envoltorio ya no hay nada que deducir: coge el ancho del contenedor. El centrado que buscaba la página no se pierde, porque `.ow2-meet` sigue con `max-width:870px` y `margin:0 auto`. `.ow2-form` va en la misma lista por el mismo motivo: no tiene contención, pero dentro de un contenedor centrado también se encogía a su contenido. */ .elementor-widget-shortcode:has(.ow2-meet), .elementor-widget-shortcode:has(.ow2-form), .elementor-shortcode:has(> .ow2-meet), .elementor-shortcode:has(> .ow2-form), .wp-block-shortcode:has(> .ow2-meet), .wp-block-shortcode:has(> .ow2-form){width:100%;max-width:100%;align-self:stretch} /* Y para el navegador que no entiende `:has()` —el de antes de 2023, el mismo que tampoco entiende `@container`— la contención solo aporta el problema, nunca el beneficio: las consultas de contenedor de más abajo se le ignoran enteras. Se la quitamos y que mida como toda la vida; el apilado se lo siguen dando los `@media` duplicados. */ @supports not selector(:has(*)){ .ow2-meet{container-type:normal} } /* Sin `overflow:hidden`: recortaba el desplegable de «Add to calendar» contra el borde inferior de la tarjeta. Las celdas no pintan fondo, así que no hay nada que las esquinas redondeadas tengan que recortar. */ .ow2-meet-card{display:grid;grid-template-columns:265px minmax(0,1fr) 380px;background:#fff;border-radius:30px;box-shadow:0 0 10px 0 rgba(0,0,0,.08)} .ow2-meet-col{display:flex;flex-direction:column;gap:10px;padding:20px;min-width:0;border-right:1px solid #E6EDF8} .ow2-meet-col:last-child{border-right:0} .ow2-meet-col[hidden]{display:none} /* «Duration» solo falta si la reserva llegó sin minutos, que no debería pasar. Si pasa, la rejilla se reparte entre las dos columnas que quedan en vez de dejar un hueco de 205px vacío en medio. */ .ow2-meet-card:has(.ow2-meet-col--duration[hidden]){grid-template-columns:minmax(0,1fr) 380px} /* El `margin:0` que cada párrafo declara por su cuenta NO basta: el tema trae `.entry-content p{margin-bottom:1.6em}`, que con dos clases —bueno, una clase y un elemento— gana en especificidad a un `.ow2-meet-date` pelado. El resultado eran 22.4px de aire fantasma DEBAJO DE CADA PÁRRAFO de la tarjeta: entre la fecha y la hora se veían 32.4px donde el diseño pedía 10, y el «15 min» arrastraba 41.6px por su tamaño de letra. Se resetea aquí, con el div por delante para no depender de qué hoja se cargue antes. */ div.ow2-meet p{margin:0} .ow2-meet-label{margin:0;font-size:16px;font-weight:400;line-height:normal;color:#374151;text-transform:uppercase;overflow-wrap:break-word} /* --- columna 1: fecha y hora --- */ .ow2-meet-col--when{gap:20px} /* Fecha y hora son el mismo dato partido en dos líneas, así que van más juntas que los bloques que separa el `gap:20px` de la columna. */ .ow2-meet-when{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0} .ow2-meet-date,.ow2-meet-time{margin:0;font-size:14px;font-weight:700;line-height:normal;color:#1A2433} .ow2-meet-tz{font-weight:500;color:#7B8698} .ow2-meet-cal{position:relative;align-self:flex-start} /* OJO con `box-sizing` en estos dos botones. «Add to calendar» es un