.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: 0.2em 0.8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: "";
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.popup-template .modal{opacity:0;transition:all .25s ease}.popup-template .modal.is-open{opacity:1;transition:all .25s ease}.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}@property --corte {
syntax: "<percentage>";
inherits: true;
initial-value: 100%;
}
:root {
--ciruela-900: #1d0a26;
--ciruela-800: #2b0f38;
--ciruela-700: #511247;
--ciruela: #660066;
--morado: #683fa4;
--violeta: #852c86;
--magenta: #ff0069;
--magenta-texto: #d4005a;
--turquesa: #00c7d1;
--azul: #0099ff;
--menta: #00e9af;
--lienzo: #f3f1f8;
--lienzo-punto: #d9d3e6;
--papel: #ffffff;
--tinta: #24102e;
--tinta-2: #5b4d66;
--linea: #e2dcec;
--wire: #c9c2d6;
--wire-2: #e6e1ee;
--wire-tinta: #8d8399;
--cinta-a: linear-gradient(160deg, #660066 0%, #852c86 45%, #ff0069 100%);
--cinta-b: linear-gradient(200deg, #0099ff 0%, #00c7d1 55%, #852c86 100%);
--cinta-texto: linear-gradient(90deg, #852c86 0%, #683fa4 40%, #0099ff 100%);
--display: var(--texto);
--texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--mano: var(--texto);
--ancho: 1200px;
--gutter: clamp(16px, 4vw, 40px);
--radio-movil: 46px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--lienzo);
color: var(--tinta);
font: 400 1.0625rem/1.6 var(--texto);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; text-wrap: pretty; }
.envoltura { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cabecera {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--lienzo) 86%, transparent);
backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.marca img { width: 150px; height: auto; }
.menu { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 0.98rem; }
.menu a { text-decoration: none; color: var(--tinta-2); }
.menu a:hover { color: var(--tinta); }
.telefono { font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: 999px;
font: 600 1rem/1 var(--texto); text-decoration: none; cursor: pointer; border: 0;
}
.boton-principal { background: var(--ciruela-800); color: #fff; position: relative; isolation: isolate; }
.boton-principal::before {
content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
background: linear-gradient(100deg, var(--magenta), var(--morado) 50%, var(--azul));
}
.boton-principal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--ciruela-800); }
.boton-principal:hover::after { background: var(--ciruela-700); }
.boton-secundario { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1.5px var(--wire); }
.boton-secundario:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.cabecera .boton { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.menu-abrir { display: none; } .portada {
position: relative; overflow: hidden;
background-color: var(--lienzo);
background-image: radial-gradient(var(--lienzo-punto) 1.2px, transparent 1.3px);
background-size: 22px 22px;
padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 110px);
}
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.portada h1 {
font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.2rem);
line-height: 0.98; font-weight: 700; letter-spacing: -0.045em;
max-width: 13ch;
}
.portada h1 .degradado {
background: var(--cinta-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada .entradilla { margin-top: 26px; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); color: var(--tinta-2); max-width: 34rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sello { margin-top: 30px; display: flex; align-items: center; gap: 12px; color: var(--tinta-2); font-size: 0.95rem; }
.sello svg { width: 22px; flex: none; } .movil {
--ancho-movil: 300px;
position: relative; z-index: 2;
width: var(--ancho-movil); aspect-ratio: 9 / 19.3;
border-radius: var(--radio-movil);
background: #120716;
padding: 11px;
box-shadow:
0 0 0 1.5px #3a2745 inset,
0 50px 80px -30px rgba(43, 15, 56, 0.55),
0 18px 30px -18px rgba(43, 15, 56, 0.5);
}
.movil::before { content: ""; position: absolute; z-index: 5; top: 21px; left: 50%; translate: -50% 0;
width: 84px; height: 24px; border-radius: 20px; background: #120716;
}
.pantalla { position: relative; width: 100%; height: 100%; border-radius: calc(var(--radio-movil) - 11px); overflow: hidden; background: #fff; }
.capa { position: absolute; inset: 0; }
.capa-final { clip-path: inset(0 0 0 var(--corte)); }
.comparador { --corte: 38%; }
.comparador.entrada { animation: barrido 1.6s cubic-bezier(.7, 0, .2, 1) 0.5s both; }
@keyframes barrido { from { --corte: 100%; } to { --corte: 38%; } }
@media (prefers-reduced-motion: reduce) { .comparador.entrada { animation: none; } }
.tirador { position: absolute; z-index: 6; top: 11px; bottom: 11px; left: 11px; right: 11px; pointer-events: none; }
.tirador::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 0 1px rgba(36, 16, 46, 0.18); }
.tirador span {
position: absolute; top: 50%; left: var(--corte); translate: -50% -50%;
width: 44px; height: 44px; border-radius: 50%; background: #fff;
box-shadow: 0 6px 18px -4px rgba(36, 16, 46, 0.45), 0 0 0 2px var(--magenta);
display: grid; place-items: center;
}
.tirador svg { width: 22px; }
.rango {
position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; margin: 0;
opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.rango:focus-visible + .tirador span { outline: 3px solid var(--azul); outline-offset: 3px; }
.etiqueta-capa {
position: absolute; z-index: 3; bottom: -38px;
font: 600 0.78rem/1 var(--texto); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.etiqueta-capa.wire { left: 0; background: #fff; color: var(--wire-tinta); box-shadow: inset 0 0 0 1px var(--wire); }
.etiqueta-capa.final { right: 0; background: var(--ciruela-800); color: #fff; } .nota { position: absolute; z-index: 3; font-size: 0.8rem; color: var(--tinta-2); }
.nota-comentario {
width: 250px; left: 350px; top: 596px;
background: #fff; border-radius: 16px 16px 16px 4px; padding: 14px 14px 12px;
box-shadow: 0 16px 34px -18px rgba(36, 16, 46, 0.45);
display: grid; gap: 10px;
}
.hilo { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 0.7rem/1 var(--texto); color: #fff; }
.avatar.cli { background: #7a8aa0; }
.avatar.wu { background: var(--cinta-a); }
.hilo b { display: block; color: var(--tinta); font-weight: 600; font-size: 0.78rem; }
.hilo p { font-size: 0.82rem; line-height: 1.35; color: var(--tinta); }
.resuelto { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: #0a8a6a; font-size: 0.76rem; }
.resuelto::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.2 4.7-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.pie-escenario { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; font-size: 0.8rem; color: var(--tinta-2); } .app { position: absolute; inset: 0; padding: 46px 16px 0; font-family: var(--texto); color: var(--tinta); background: #fbf9fd; display: flex; flex-direction: column; }
.app-barra { position: absolute; top: 15px; left: 24px; right: 22px; display: flex; justify-content: space-between; font: 600 0.72rem/1 var(--texto); }
.app-barra i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; border: 1.3px solid currentColor; position: relative; }
.app-saludo { font-size: 0.74rem; color: var(--tinta-2); }
.app-titulo { font: 700 1.28rem/1.1 var(--display); letter-spacing: -0.03em; margin-top: 2px; }
.app-recogida {
margin-top: 12px; border-radius: 18px; padding: 12px 14px; color: #fff;
background: var(--cinta-a); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
}
.app-recogida small { display: block; font-size: 0.66rem; opacity: 0.85; }
.app-recogida b { font: 700 1.35rem/1 var(--display); letter-spacing: -0.02em; }
.app-recogida span { font-size: 0.66rem; background: rgba(255,255,255,.2); padding: 6px 9px; border-radius: 999px; font-weight: 600; }
.app-seccion { margin-top: 14px; font: 600 0.74rem/1 var(--texto); color: var(--tinta-2); display: flex; justify-content: space-between; }
.app-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.app-lista li { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 7px 10px 7px 7px; box-shadow: 0 1px 0 #efe9f5, 0 6px 14px -12px rgba(36,16,46,.35); }
.app-lista .foto { width: 42px; height: 42px; border-radius: 11px; }
.app-lista .pan { background: radial-gradient(circle at 35% 30%, #f6d49b, #c9853f 60%, #9b5a24); }
.app-lista .empanada { background: linear-gradient(135deg, #f2c16b, #d58b35), repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.08) 6px 8px); background-blend-mode: multiply; }
.app-lista .tarta { background: radial-gradient(circle at 50% 50%, #fff 0 22%, #f3e6d0 23% 60%, #d9b27a 61%); }
.app-lista b { display: block; font-size: 0.78rem; font-weight: 600; }
.app-lista small { font-size: 0.66rem; color: var(--tinta-2); }
.app-lista em { font-style: normal; font: 600 0.78rem/1 var(--texto); font-variant-numeric: tabular-nums; }
.app-boton {
margin-top: auto; margin-bottom: 10px; height: 46px; border-radius: 16px;
background: var(--ciruela-800); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
font: 600 0.84rem/1 var(--texto);
}
.app-boton em { font-style: normal; font-variant-numeric: tabular-nums; }
.app-tabs { display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1px solid #efe9f5; margin-inline: -16px; background: #fff; }
.app-tabs i { width: 22px; height: 22px; border-radius: 7px; background: #e7e1ee; }
.app-tabs i.activo { background: var(--cinta-a); } .wf { position: absolute; inset: 0; padding: 46px 16px 0; background: #fff; display: flex; flex-direction: column; font-family: var(--texto); color: var(--wire-tinta); }
.wf .l { height: 8px; border-radius: 4px; background: var(--wire-2); }
.wf .l.os { background: var(--wire); }
.wf-caja { border: 1.5px solid var(--wire); border-radius: 16px; }
.wf-recogida { margin-top: 12px; height: 62px; display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 10px; padding: 0 12px; }
.wf-x { position: relative; border: 1.5px solid var(--wire); border-radius: 10px; }
.wf-x::before, .wf-x::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--wire) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.wf-x::after { transform: scaleX(-1); }
.wf-fila { display: grid; grid-template-columns: 42px 1fr 34px; gap: 10px; align-items: center; padding: 7px 10px 7px 7px; }
.wf-fila .wf-x { width: 42px; height: 42px; }
.wf-boton { margin-top: auto; margin-bottom: 10px; height: 46px; border: 1.5px dashed var(--wire-tinta); border-radius: 16px; display: grid; place-items: center; font: 600 0.72rem/1 var(--texto); }
.wf-tabs { display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1.5px solid var(--wire-2); margin-inline: -16px; }
.wf-tabs i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--wire); }
.cota { position: absolute; font: 600 0.6rem/1 var(--texto); color: var(--magenta-texto); display: flex; align-items: center; gap: 3px; }
.cota.v { flex-direction: column; }
.cota.v::before, .cota.v::after { content: ""; height: 7px; border-left: 1px solid var(--magenta); } .bloque { padding-block: clamp(64px, 9vw, 128px); }
.bloque-cabeza { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.bloque-cabeza h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; }
.bloque-cabeza p { font-size: 1.15rem; color: var(--tinta-2); max-width: 40rem; } .proceso {
background-color: var(--ciruela-900);
background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
background-size: 22px 22px;
color: #f2eaf6;
}
.proceso .bloque-cabeza p { color: #cbbcd5; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; counter-reset: paso; }
.paso { display: grid; gap: 16px; align-content: start; counter-increment: paso; }
.paso .movil { --ancho-movil: 100%; --radio-movil: 30px; padding: 7px; background: #0c0410; box-shadow: 0 0 0 1px #3a2745 inset, 0 30px 50px -30px #000; }
.paso .movil::before { top: 14px; width: 48px; height: 14px; }
.paso .pantalla { border-radius: 23px; }
.paso-num { font: 700 0.95rem/1 var(--display); color: var(--turquesa); font-variant-numeric: tabular-nums; }
.paso-num::before { content: counter(paso, decimal-leading-zero); }
.paso h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.paso > p { font-size: 0.95rem; color: #cbbcd5; line-height: 1.5; }
.paso .aprobado { display: inline-flex; align-self: start; gap: 6px; align-items: center; font-size: 0.78rem; font-weight: 600; color: var(--menta); } .mini { position: absolute; inset: 0; }
.mini > .app, .mini > .wf, .mini > .boceto, .mini > .publicada { width: 278px; height: 621px; inset: auto; top: 0; left: 0; transform-origin: 0 0; scale: var(--escala, 0.5); }
.boceto { position: absolute; inset: 0; background: #fffdf6; }
.boceto svg { width: 100%; height: 100%; }
.publicada { position: absolute; inset: 0; background: var(--cinta-a); display: grid; place-items: center; }
.publicada .icono-app { width: 34%; aspect-ratio: 1; border-radius: 24%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.publicada .icono-app img { width: 72%; }
.despues {
margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 32px);
border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
.despues .version { font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--display); letter-spacing: -0.04em; background: var(--cinta-b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.despues h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.despues p { color: #cbbcd5; max-width: 52rem; } .servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.servicio { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-block: 28px; border-top: 1px solid var(--linea); }
.servicio .icono { width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 24px -16px rgba(36,16,46,.5); }
.servicio .icono svg { width: 34px; height: 34px; }
.servicio h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.servicio p { color: var(--tinta-2); }
.servicio a { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--magenta-texto); }
.tambien { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 24px; }
.tambien h3 { font-size: 1.05rem; font-weight: 600; }
.tambien ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.tambien li b { display: block; font-weight: 600; }
.tambien li span { color: var(--tinta-2); font-size: 0.97rem; } .casa { background: #fff; }
.casa .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pila-capas { position: relative; display: grid; gap: 10px; }
.capa-casa { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--lienzo); }
.capa-casa .n { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 700 0.9rem/1 var(--display); color: #fff; }
.capa-casa b { display: block; font-weight: 600; }
.capa-casa span { color: var(--tinta-2); font-size: 0.97rem; } .precios-tabla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.precio { background: #fff; border-radius: 22px; padding: 24px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 0 var(--linea); }
.precio h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.precio .cifra { font: 700 1.9rem/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.precio .cifra small { font: 500 0.9rem/1 var(--texto); letter-spacing: 0; color: var(--tinta-2); }
.precio p { color: var(--tinta-2); font-size: 0.95rem; }
.precio.destacado { background: var(--ciruela-800); color: #fff; }
.precio.destacado p, .precio.destacado .cifra small { color: #d8c9e2; }
.aviso-precios { margin-top: 18px; font-size: 0.92rem; color: var(--tinta-2); max-width: 52rem; } .preguntas { max-width: 52rem; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 600 1.12rem/1.35 var(--display); letter-spacing: -0.015em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); translate: 0 -70%; rotate: 45deg; transition: rotate .2s; }
.preguntas details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.preguntas details p { padding: 0 0 22px; color: var(--tinta-2); max-width: 46rem; } .contacto { background: var(--ciruela-900); color: #f2eaf6; }
.contacto .envoltura { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); }
.contacto .bloque-cabeza p { color: #cbbcd5; }
.contacto-datos { display: grid; gap: 6px; font-size: 1.05rem; }
.contacto-datos a { font-weight: 600; text-decoration: none; }
form.idea { background: #fff; color: var(--tinta); border-radius: 26px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label.campo { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 600; }
label.campo input, label.campo textarea { font: 400 1rem/1.4 var(--texto); padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--wire); background: #fff; color: var(--tinta); width: 100%; }
label.campo textarea { min-height: 120px; resize: vertical; }
fieldset.chips { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
fieldset.chips legend { font-size: 0.9rem; font-weight: 600; padding: 0; margin-bottom: 10px; }
.chips-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-lista label { position: relative; }
.chips-lista input { position: absolute; opacity: 0; }
.chips-lista span { display: inline-block; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--wire); font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.chips-lista input:checked + span { background: var(--ciruela-800); color: #fff; box-shadow: none; }
.chips-lista input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.rgpd { font-size: 0.8rem; color: var(--tinta-2); line-height: 1.45; }
.legal-check { display: flex; gap: 10px; align-items: start; font-size: 0.88rem; }
.legal-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ciruela-800); } .pie { background: #150619; color: #cbbcd5; padding-block: 48px 36px; font-size: 0.92rem; }
.pie .envoltura { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.pie img { width: 140px; margin-bottom: 14px; }
.pie a { text-decoration: none; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie h3 { font: 600 0.95rem/1 var(--texto); color: #fff; margin-bottom: 14px; letter-spacing: 0; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; font-size: 0.82rem; } @media (max-width: 1100px) {
.pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.precios-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.menu, .cabecera .telefono { display: none; }
.menu-abrir { display: inline-flex; margin-left: auto; }
.cabecera .boton-principal { display: none; }
.portada .envoltura, .casa .envoltura, .contacto .envoltura { grid-template-columns: 1fr; }
.servicios { grid-template-columns: 1fr; }
.tambien { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.paso:last-child { grid-column: 1 / -1; max-width: 50%; }
.campos { grid-template-columns: 1fr; }
.tambien ul { grid-template-columns: 1fr; }
.precios-tabla { grid-template-columns: 1fr; }
.despues { grid-template-columns: 1fr; }
.pie .envoltura { grid-template-columns: 1fr; }
} .app-boton { position: relative; }
.toque { position: absolute; right: 38%; top: 50%; width: 30px; height: 30px; translate: 50% -50%; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 8px rgba(255,255,255,.22), 0 0 0 16px rgba(255,255,255,.1); }
@media (max-width: 900px) {
.menu.abierto { display: grid; position: absolute; top: 72px; left: 0; right: 0; padding: 18px var(--gutter) 24px; background: var(--lienzo); border-bottom: 1px solid var(--linea); gap: 16px; font-size: 1.1rem; }
} .escenario { position: relative; height: 780px; width: 600px; max-width: 100%; justify-self: end; }
.escenario > * { position: absolute; }
.cinta-fondo { width: 640px; max-width: none; left: -40px; top: 150px; opacity: 0.9; pointer-events: none; }
.marco-nombre { font: 500 0.78rem/1 var(--texto); color: var(--tinta-2); display: flex; gap: 6px; align-items: center; }
.marco-nombre::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--tinta-2); border-radius: 2px; }
.marco-nombre.n1 { left: 16px; top: 0; }
.marco-nombre.n2 { left: 392px; top: 128px; }
.escenario .comparador { --ancho-movil: 290px; left: 16px; top: 24px; }
.movil-2 { --ancho-movil: 200px; --radio-movil: 34px; left: 392px; top: 150px; padding: 8px; }
.movil-2::before { top: 16px; width: 58px; height: 17px; }
.movil-2 .pantalla { border-radius: 26px; }
.conexion { inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.nota-conexion { left: 318px; top: 404px; z-index: 4; font-weight: 600; color: #0077cc; background: var(--lienzo); padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #b8dcff; font-size: 0.74rem; white-space: nowrap; rotate: -4deg; }
.nota-muestras { left: 392px; top: 60px; display: flex; gap: 6px; align-items: center; background: #fff; padding: 9px 12px; border-radius: 12px; box-shadow: 0 16px 34px -20px rgba(36, 16, 46, 0.4); flex-wrap: wrap; width: 200px; }
.nota-muestras i { width: 26px; height: 26px; border-radius: 8px; }
.nota-muestras span { width: 100%; font-size: 0.74rem; color: var(--tinta-2); }
.app-ok { align-items: stretch; }
.ok-circulo { width: 76px; height: 76px; border-radius: 50%; margin: 40px auto 18px; background: linear-gradient(140deg, var(--menta), var(--turquesa) 55%, var(--azul)); display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(0,153,255,.6); }
.ok-circulo svg { width: 40px; }
.ok-codigo { margin: 26px auto 0; text-align: center; background: #fff; border-radius: 18px; padding: 14px 26px; box-shadow: 0 1px 0 #efe9f5, 0 10px 20px -14px rgba(36,16,46,.35); }
.ok-codigo small { display: block; font-size: 0.72rem; color: var(--tinta-2); }
.ok-codigo b { font: 700 2rem/1.1 var(--display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) and (min-width: 901px) {
.escenario { scale: 0.86; transform-origin: right center; margin-block: -50px; }
}
@media (max-width: 900px) {
.escenario { justify-self: center; height: 700px; width: 600px; }
}
@media (max-width: 640px) {
.escenario { width: 100%; height: 700px; }
.escenario .comparador { left: 50%; translate: -50% 0; --ancho-movil: 270px; }
.marco-nombre.n1 { left: 50%; translate: -135px 0; }
.movil-2, .marco-nombre.n2, .conexion, .nota-conexion, .nota-muestras { display: none; }
.nota-comentario { left: auto; right: 0; top: 470px; width: 220px; }
.cinta-fondo { width: 520px; left: 50%; translate: -50% 0; top: 170px; }
}