con las dos versiones en atributos `data-` y un script que reescribía su contenido. Sin script sólo existía una de las dos verdades: quien marcaba «ya aparece en Google» seguía leyendo «deja $750 de anticipo», que es exactamente lo que esta página no puede hacer. `:has()` lo resuelve con CSS, que sí corre sin JavaScript, y ya se usa en esta hoja para resaltar la tarjeta marcada. Se turnan por lo que hay marcado ARRIBA, en la pregunta que decide — que nace respondida, así que siempre hay exactamente una visible. */ .sv-como-no,.sv-como-si{display:none} #sv-form:has(input[name="ficha_tiene"][value="no"]:checked) .sv-como-no{display:block} #sv-form:has(input[name="ficha_tiene"][value="si"]:checked) .sv-como-si{display:block} /* Y lo mismo dentro de «ver qué incluye»: un punto que sólo es cierto en uno de los dos casos se turna con la misma pregunta. «Contestamos hasta 30 reseñas que ya te dejaron» es papel mojado para quien acaba de marcar que todavía no aparece en Google — no hay ninguna que contestar—, y dejarlo puesto es ofrecer trabajo que no existe justo donde se compara qué se lleva cada paquete. ⚠ SÓLO SE ESCONDE LO CONDICIONAL. El punto que vale en los dos casos va sin clase y por tanto siempre se ve: en un navegador que no entienda `:has()` —que es donde estas reglas no llegan— la lista pierde el matiz, no la promesa. */ /* Cuando se pulsa «Elige cómo lo pagas», la vista salta hasta estas dos opciones. Un salto sin nada que mirar al llegar se lee como que la página se movió sola, así que al llegar parpadean una vez. */ .sv-pagos.pide{animation:svPide 1.6s ease-out} @keyframes svPide{ 0%,100%{box-shadow:none} 15%,60%{box-shadow:0 0 0 1px var(--bronze)} } @media (prefers-reduced-motion:reduce){ .sv-pagos.pide{animation:none;box-shadow:0 0 0 1px var(--bronze)} } .sv-solo-si,.sv-solo-no{display:none} #sv-form:has(input[name="ficha_tiene"][value="si"]:checked) .sv-solo-si{display:list-item} #sv-form:has(input[name="ficha_tiene"][value="no"]:checked) .sv-solo-no{display:list-item} /* Y con ficha propia, la opción de anticipo se apaga aunque no haya script. `pointer-events:none` sobre la tarjeta evita el clic; el `disabled` de verdad lo sigue poniendo el script, y el Worker rechaza la combinación pase lo que pase — son tres capas porque es dinero, y la de CSS es la única que sigue en pie cuando el JavaScript no carga. */ #sv-form:has(input[name="ficha_tiene"][value="si"]:checked) .ped-op:has(input[data-anticipo]){ opacity:.82;border-style:dashed;background:none;pointer-events:none} #sv-form:has(input[name="ficha_tiene"][value="si"]:checked) .ped-op:has(input[data-anticipo]) b::after{ content:"No disponible con tu ficha";display:block;margin-top:3px;color:var(--dim); font-weight:400;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase} /* Y el enlace de la ficha sólo se pide cuando hay ficha que enlazar. Sin script se veía siempre, incluido el estado por defecto «todavía no aparece», donde por definición no existe. */ [data-sv-ficha]{display:none} #sv-form:has(input[name="ficha_tiene"][value="si"]:checked) [data-sv-ficha]{display:block} .sv-plan .ped-op{margin-top:10px} /* ══ PRIMERO EL PAQUETE, DESPUÉS CÓMO SE PAGA ══ Con las cuatro formas de pago desplegadas a la vez la pantalla pedía dos decisiones al mismo tiempo. El control nace escondido en el marcado y lo enciende el script: sin JavaScript no hay nada que pulsar y se ven las cuatro opciones, que es la página de siempre. */ .sv-plan{position:relative} /* ⚠ EL CONTROL ES LA TARJETA ENTERA, no un rectangulito debajo del texto. Antes era un botón normal con su borde y su rótulo, y en iOS salía como una pastilla blanca del sistema: 200 px de objetivo dentro de una tarjeta de 700 que ya dice todo lo que hay que saber. Ahora el botón se estira por encima de todo el bloque y no se ve — lo que se ve, y se toca, es la tarjeta. `appearance:none` va el primero y a propósito: es lo único que garantiza que iOS no pinte su propio botón encima si cualquier otra declaración de aquí no llegara a aplicarse. */ .sv-elige{-webkit-appearance:none;appearance:none; position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0; border:0;background:none;color:inherit;font:inherit;z-index:2; cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .sv-elige[hidden]{display:none} /* ── QUÉ INCLUYE, PLEGADO EN LA PROPIA TARJETA ── ⚠ `z-index:3` Y `position:relative` NO SON DECORACIÓN: el control que elige el paquete cubre la tarjeta entera con `z-index:2`, así que sin esto el desplegable quedaría debajo y no se podría abrir. Y como el manejador de clics sólo mira `.sv-elige`, abrirlo no elige nada: son dos gestos distintos en el mismo sitio, y cada uno hace lo suyo. */ .sv-mas{position:relative;z-index:3;margin-top:12px} .sv-mas summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:6px 0;font-size:11px;letter-spacing:2px;text-transform:uppercase; color:var(--muted);list-style:none;touch-action:manipulation; -webkit-tap-highlight-color:transparent;transition:color .25s} .sv-mas summary::-webkit-details-marker{display:none} /* El triángulo lo dibujamos nosotros: el del sistema es minúsculo y cambia de forma entre navegadores. Gira al abrir, que es lo que dice qué va a pasar. */ .sv-mas summary::before{content:"";width:0;height:0;flex:none; border-left:4px solid currentColor;border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;transition:transform .25s} .sv-mas[open] summary::before{transform:rotate(90deg)} .sv-mas summary:hover,.sv-mas summary:focus-visible{color:var(--bronze-hi)} .sv-mas ul{list-style:none;margin:8px 0 2px;padding:0} .sv-mas li{position:relative;padding-left:18px;margin-top:7px; font-size:13px;line-height:1.6;color:var(--muted)} .sv-mas li::before{content:"";position:absolute;left:2px;top:8px; width:5px;height:5px;border:1px solid var(--bronze);transform:rotate(45deg)} /* ── LO QUE HEREDA DEL OTRO PAQUETE ── Va DENTRO del mismo desplegable, debajo de lo suyo, para que las dos listas se lean de una vez. El rótulo separa una de otra —sin él son diecisiete puntos seguidos y no se sabe cuál es la diferencia— y los puntos heredados van un punto más pequeños y con el rombo hueco: son ciertos, pero no son la razón por la que este paquete cuesta $810 más. */ .sv-mas-y{margin-top:14px;padding-top:11px;border-top:1px solid var(--line-soft); font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--bronze-hi)} .sv-mas-h li{font-size:12.5px;color:var(--dim)} .sv-mas-h li::before{border-color:var(--line);background:none} /* La pista de que esto se toca. Una tarjeta que reacciona al pulsarla no se distingue de un cuadro de texto si nadie lo dice. */ .sv-pista{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft); font-size:10px;letter-spacing:2.4px;text-transform:uppercase; color:var(--bronze-hi);display:flex;align-items:center;gap:9px} .sv-pista[hidden]{display:none} .sv-pista::before{content:"";width:7px;height:7px;flex:none; border:1px solid currentColor;transform:rotate(45deg)} /* ── LA RESPUESTA AL DEDO ── Cuatro capas, y cada una contesta en un momento distinto: 1. EN REPOSO, la tarjeta respira: un resplandor recorre su borde muy despacio y sin parar. Es lo que dice «esto se toca» sin escribirlo — y va en el borde y no en el fondo para que no compita con el texto ni con el precio. 2. AL MANTENER PULSADO, se hunde un pelo y se enciende. Inmediata, sin transición de entrada: un color que llega 250 ms después del dedo se lee como retraso, no como respuesta. 3. AL SOLTAR, una ola sale del punto exacto donde se tocó y recorre la tarjeta entera. Ésa es la confirmación de que sí se pulsó. 4. Y entonces se abre el paquete. Si no se toca no pasa nada más que el respiro: no hay `:hover` en una pantalla táctil, así que nadie ve una tarjeta reaccionar a un dedo que no llegó. */ .sv-plan:has(.sv-elige:not([hidden])){ transition:border-color .25s,background-color .25s,transform .12s} /* El respiro. Un resplandor que da la vuelta al borde cada seis segundos. Va en un pseudoelemento con máscara para que sólo pinte el marco de un píxel y no el relleno. */ .sv-plan:has(.sv-elige:not([hidden]))::before{ content:"";position:absolute;inset:-1px;pointer-events:none;z-index:1; border:1px solid transparent; background:linear-gradient(115deg,transparent 42%,var(--bronze-hi) 50%,transparent 58%) border-box; background-size:300% 100%; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:.55;animation:svRespira 6s linear infinite} @keyframes svRespira{from{background-position:150% 0}to{background-position:-150% 0}} .sv-plan:has(.sv-elige:active){ border-color:var(--bronze);background:rgba(200,169,106,.09); transform:scale(.988);transition-duration:0s} @media(hover:hover){ .sv-plan:has(.sv-elige:hover){border-color:var(--bronze);background:rgba(200,169,106,.07)} } /* El anillo de foco va en la TARJETA y no en el botón invisible, que no se ve por definición: quien navega con teclado tiene que saber dónde está. */ .sv-plan:has(.sv-elige:focus-visible){outline:1px solid var(--bronze-hi);outline-offset:3px} /* LA OLA. Sale del punto que se tocó —el script escribe `--x` y `--y` con las coordenadas— y crece hasta cubrir la tarjeta. Con `pointer-events:none` para no comerse el toque siguiente. */ .sv-plan.pulsada::after{ content:"";position:absolute;left:var(--x,50%);top:var(--y,50%); width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%; pointer-events:none;z-index:3;background:rgba(200,169,106,.34); animation:svOla .52s cubic-bezier(.22,.7,.3,1) forwards} @keyframes svOla{ from{transform:scale(0);opacity:.9} to{transform:scale(90);opacity:0}} /* Quien pidió menos movimiento no ve ni el respiro ni el viaje de la ola, pero recibe la confirmación igual: un destello corto en el sitio. */ @media(prefers-reduced-motion:reduce){ .sv-plan:has(.sv-elige:not([hidden]))::before{animation:none;opacity:0} .sv-plan:has(.sv-elige:active){transform:none} .sv-plan.pulsada::after{ left:0;top:0;width:100%;height:100%;margin:0;border-radius:0; background:rgba(200,169,106,.20);animation:svApaga .42s linear forwards} @keyframes svApaga{from{opacity:1}to{opacity:0}} } /* El paquete que NO se eligió no se borra: se aparta. Devolverlo es un toque en «cambiar», y verlo desaparecer del todo hace dudar de si sigue estando. */ .sv-plan[hidden]{display:none} .sv-plan.abierto{border-color:var(--bronze)} /* La salida para volver. Un cobro sin marcha atrás es un cobro que se abandona: quien se equivoca de paquete y no ve cómo deshacerlo cierra la pestaña. */ .sv-vuelta{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:14px} .sv-vuelta button{-webkit-appearance:none;appearance:none; border:none;background:none;padding:8px 0;cursor:pointer; font-family:var(--sans);font-size:11px;letter-spacing:2.2px;text-transform:uppercase; color:var(--muted);touch-action:manipulation;transition:color .3s} .sv-vuelta button:hover,.sv-vuelta button:focus-visible{color:var(--bronze-hi)} .sv-vuelta[hidden]{display:none} .sv-pagos[hidden]{display:none} .sv-pagos{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)} /* Lo que se lee en voz alta pero no ocupa sitio. Sin `display:none`, que lo quitaría también del lector de pantalla, que es justo a quien va dirigido. */ .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* El matiz que la promesa de arriba no puede callar. Va debajo de `.sv-que` y no en los términos: la visita a tomar fotos sólo existe en dos ciudades, y quien lo descubre después de pagar tiene razón en enfadarse. */ .sv-nota{margin-top:5px;color:var(--dim);font-size:12.5px;line-height:1.55} /* La opción de anticipo cuando la ficha ya es del cliente. No se esconde: si desapareciera, quien la vio en el otro paquete pensaría que la web falla. Se apaga, y la línea de arriba explica por qué. ⚠ .42 DEJABA EL RENGLÓN PEQUEÑO EN 2,06 DE CONTRASTE. Un control apagado sigue teniendo que leerse: es donde está escrito CUÁNTO cuesta esa forma de pago y por qué no está disponible, que es exactamente lo que necesita saber quien va a elegir la otra. Se sube a .82 —4,6 sobre este fondo, por encima del 4,5 mínimo— y el aviso de que está apagada lo dan el borde apagado, el cursor y la frase entera del paquete, que cambia. Deshabilitar no es esconder. */ .ped-op.apagada{opacity:.82;border-style:dashed;background:none} .ped-op.apagada,.ped-op.apagada *{cursor:not-allowed} /* Y DICHO CON PALABRAS, no sólo con un borde. Con el contraste ya subido, la tarjeta apagada se parece demasiado a la disponible: quien la pulsa y no ve pasar nada no concluye «no está disponible», concluye «esta web no funciona». */ .ped-op.apagada b::after{content:"No disponible con tu ficha";display:block; margin-top:3px;color:var(--dim);font-weight:400;font-size:12.5px; letter-spacing:.04em;text-transform:uppercase} /* El bloque de datos aparece cuando ya hay paquete. Sin JavaScript no lleva `hidden` en el marcado y se ve desde el principio. */ [data-sv-datos][hidden]{display:none} /* Un separador dentro del mismo bloque, para no abrir un cuarto paso por tres campos de contacto. */ .ped-f .ped-paso{margin:26px 0 4px} /* La salida para quien necesita más de lo que hay en la lista. */ /* El empujón al tramo del envío gratis, igual que en la ficha. */ .ped-gratis{margin-top:9px;font-size:12px;color:var(--bronze-hi)} .ped-gratis[hidden]{display:none} .ped-mas{margin-top:14px;font-size:12.5px} .ped-mas a{color:var(--bronze-hi);border-bottom:1px solid var(--line)} .ped-mas a:hover,.ped-mas a:focus-visible{color:var(--ink)} .ped-pie{margin-top:18px;color:var(--dim);font-size:12.5px;line-height:1.7;text-align:center} .ped-pie a{color:var(--muted)} .ped-pie a:hover{color:var(--bronze-hi)} /* ------------------------------------------------------------- GRACIAS */ .gr-marca{width:54px;height:54px;margin:0 auto 22px;border:1px solid var(--bronze); display:flex;align-items:center;justify-content:center;color:var(--bronze-hi);font-size:22px} .gr-t{font-family:var(--serif);font-size:clamp(28px,5vw,40px);line-height:1.15; color:var(--ink);text-align:center} .gr-t em{font-style:italic;color:var(--bronze-hi)} .gr-p{margin-top:14px;color:var(--muted);text-align:center;font-size:14.5px;line-height:1.8} /* EL PASO QUE LE TOCA AL CLIENTE, en un bloque propio y no dentro del párrafo. Es la única frase de la página de servicios que, si no se lee, deja el trabajo parado sin que nadie sepa por qué: el plazo de entrega no cuenta desde el pago, cuenta desde que nos dan acceso. Va en el marcado —no lo escribe ningún script— y se destaca en bronce para que no se lea de paso. */ .gr-paso{margin-top:22px;padding:16px 18px;border:1px solid var(--line); background:rgba(200,169,106,.04)} .gr-paso p{color:var(--muted);font-size:13.5px;line-height:1.7} .gr-paso p+p{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)} .gr-paso b{color:var(--bronze-hi);font-weight:500} /* El correo se parte por donde toca en una pantalla estrecha en vez de desbordar la caja, y se puede seleccionar de un toque para copiarlo. */ .gr-correo{display:inline-block;color:var(--ink);font-weight:400; word-break:break-all;-webkit-user-select:all;user-select:all} .gr-wa{display:flex;align-items:center;justify-content:center;gap:10px; margin-top:28px;min-height:54px;padding:15px 26px; background:var(--bronze);color:#0A0B0E;font-size:10.5px;letter-spacing:3px; text-transform:uppercase;font-weight:500;text-decoration:none; transition:background-color .3s} .gr-wa:hover{background:var(--bronze-hi)} .gr-wa:focus-visible{outline:1px solid var(--bronze-hi);outline-offset:4px} /* Sólo aparece cuando el JavaScript encuentra el pedido guardado. Sin él, la página sigue diciendo lo importante —que el pago salió bien— y ofrece el WhatsApp de siempre, sin datos dentro. */ [hidden]{display:none!important}