/* Janice 1.1 — identidad digital: azul profundo, cian y oro. */
:root {
  --paper: #041329;
  --ink: #f0f7ff;
  --orange: #36d6ff;
  --line: #203954;
  --muted: #acbfd3;
  --green: #0b223d;
  --gold: #f1bd50;
  --serif: 'Segoe UI', Arial, sans-serif;
}
body {
  background: radial-gradient(ellipse at 76% 3%, #073364 0, transparent 22%), #041329;
  color: var(--ink);
  font-family: 'Segoe UI', Arial, sans-serif;
}
.header { height: 108px; border-bottom-color: #65c9ff25; }
.brand { font-weight: 750; letter-spacing: -2.8px; }
.brand > span {
  font-size: 27px;
  line-height: 31px;
  width: 32px;
  height: 32px;
  border: 1px solid #35cfff70;
  border-radius: 8px;
  color: var(--orange);
  margin-left: 9px;
  margin-top: 5px;
  text-align: center;
  box-shadow: 0 0 20px #00c8ff1a;
}
.brand small { color: #8db7da; font-size: 8px; letter-spacing: 3px; }
.header nav { font-size: 13px; color: #c4d7e9; }
.header nav a:hover, .text-link:hover { color: var(--orange); }
.button { border-radius: 7px; font-size: 13px; padding: 15px 21px; font-weight: 650; }
.dark { background: #103453; color: #d9f5ff; border: 1px solid #3397c670; }
.dark:hover { background: #174466; }
.header .dark { background: #0c2a44; border-color: #35caff75; color: #7be6ff; }
.orange { background: linear-gradient(115deg, #6ce8ff, #21b8ee); color: #041329; box-shadow: 0 8px 30px #00caff20; }
.orange:hover { background: #8becff; box-shadow: 0 8px 35px #00caff38; }
.outline { color: #d6e9fb; border-color: #36516b; }
.outline:hover { background: #102e49; }
.text-link { color: #d1e6f8; border-color: #7aa3c465; }
h1, h2 { font-weight: 650; letter-spacing: -2.3px; }
h2 { font-size: clamp(37px, 4vw, 57px); line-height: 1.12; }
h2 em { color: #4dd6fb; font-family: inherit; font-style: normal; font-weight: 650; }
.eyebrow { color: #87a9cb; font-size: 10px; letter-spacing: 1.7px; }
.dot, .signal-dot { background: var(--gold); box-shadow: 0 0 12px #ffcb5680; }
.hero { grid-template-columns: 1fr 1.12fr; min-height: 665px; gap: 0; padding-top: 70px; padding-bottom: 60px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 5px; }
.hero .eyebrow { color: #a4c8e9; font-size: 9px; letter-spacing: 1.5px; }
.hero h1 { font-size: clamp(57px, 5.05vw, 76px); line-height: 1.045; font-weight: 700; letter-spacing: -3px; margin: 24px 0 25px; }
.hero h1 em { display: inline-block; font-family: inherit; font-style: normal; font-weight: 700; background: linear-gradient(100deg, #79e9ff 10%, #20bce9 90%); color: #40d5ff; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero .intro { font-size: 18px; color: #d0e4f4; line-height: 1.6; }
.hero-detail { max-width: 370px; color: #91adc6; font-size: 13px; margin-top: 14px; }
.hero-actions { gap: 22px; margin-top: 29px; }
.hero-actions .text-link { font-size: 12px; }
.hero-foot { color: #91b1ce; gap: 24px; font-size: 10px; margin-top: 29px; }
.hero-foot span:before { color: #57deff; }
.digital-hero-art { position: relative; min-width: 0; width: 100%; padding-top: 5px; align-self: center; }
.digital-hero-image { display: block; width: 100%; max-width: 100%; height: auto; margin-left: 0; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse at center, #000 47%, transparent 74%); mask-image: radial-gradient(ellipse at center, #000 47%, transparent 74%); }
.hero-coordinate { position: absolute; top: -20px; left: 45px; display: flex; align-items: center; gap: 8px; font-size: 8px; color: #6ba7cd; letter-spacing: 2px; }
.signal-dot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
.digital-caption { position: relative; margin: -5px 0 0 45px; display: flex; align-items: center; gap: 13px; color: #a3c0dc; font-size: 12px; line-height: 1.6; }
.digital-caption strong { color: #e0f4ff; font-weight: 500; }
.caption-symbol { border: 1px solid #d4a84a70; color: var(--gold); border-radius: 8px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 22px; background: #dca63508; }
.caption-line { width: 100px; height: 1px; background: linear-gradient(90deg, #24c5fa80, transparent); margin-left: 10px; }
.hero-image-note { font-size: 8px; color: #7090ad; margin-top: 13px; margin-left: 45px; letter-spacing: .2px; }
.ticker { background: #0a2340; border-color: #1b466a; padding: 21px 0; }
.ticker > div { color: #b8d8f3; font-size: 9px; font-weight: 500; letter-spacing: 1.7px; gap: 34px; }
.ticker span { color: var(--gold); font-size: 17px; }
.section { padding-top: 90px; padding-bottom: 90px; }
.section-heading > p { color: #9bb5cf; line-height: 1.8; }
.section-heading h2 { margin-top: 17px; }
.filter { border-color: #294461; color: #a5c2dd; border-radius: 6px; padding: 10px 17px; background: #0a1c32; }
.filter.active { background: #103f60; color: #7fe8ff; border-color: #29bce580; }
.filter:hover { border-color: #51d4f4; }
.template-grid { gap: 22px; }
.template-card { background: linear-gradient(145deg, #0d2742, #081b30); border: 1px solid #244260; border-radius: 10px; padding: 12px 12px 18px; min-width: 0; }
.template-preview { border-radius: 5px; height: 246px; }
.card-info { padding: 18px 5px 0; }
.card-type { color: #87a9c8; font-size: 8px; }
.card-info h3 { color: #f1f8ff; font-weight: 550; }
.card-info h3 small { color: #9ab4cd; }
.round { border-color: #376183; color: #66dcff; border-radius: 7px; }
.round:hover { color: #041329; border-color: #42d6ff; }
.demo-link { color: #8fcce9; margin-left: 5px; }
.caption { color: #829fb9; line-height: 1.8; }
.template-preview .preview-content h3 { font-family: Georgia, 'Times New Roman', serif; }
.oficio-preview .preview-content h3 { font-family: Arial, sans-serif; }
.process-section { background: linear-gradient(120deg, #09213b, #071b32); border-block: 1px solid #193c5b; }
.steps li { border-color: #2a4d68; }
.steps li > span { font-family: inherit; font-size: 26px; color: #41d2f8; font-weight: 600; letter-spacing: -1px; }
.steps h3 { font-weight: 550; }
.steps p, .domain-note p { color: #9db8cf; }
.domain-note { border-color: #264761; }
.domain-note > span { color: var(--gold); }
.domain-note strong { color: #dbebf8; }
.domain-note > a { color: #5fd7f5; }
.membership-copy .intro { color: #d2e7fa; }
.membership-copy > p:not(.intro):not(.eyebrow) { color: #9bb8d2; }
.membership-card { background: radial-gradient(ellipse at 95% 0, #17456860, transparent 60%), #0b223b; border: 1px solid #355375; padding: 35px; box-shadow: 0 20px 70px #00000018; border-radius: 12px; }
.membership-card:before { content: ''; position: absolute; top: -1px; left: 35px; right: 35px; height: 1px; background: linear-gradient(90deg, transparent, #65daff, transparent); }
.membership-card h3 { font-weight: 550; line-height: 1.2; }
.plan-symbol { color: var(--gold); }
.price-label { color: #7ea1c3; }
.price { color: #70e0fa; font-size: 24px; }
.price-sub { color: #a0b9d2; }
.check-list { border-color: #2d4965; }
.check-list li { color: #c7deef; }
.check-list li:before { color: #50d9ff; }
.membership-card .dark { background: #1bc4f1; border-color: #50ddfb; color: #05243b; }
.fine-print { color: #8ca9c3; }
.little-flower { color: #56daff; transform: none; text-shadow: 0 0 40px #00c8ff35; }
.scope h3 { color: #d9eaf9; }
.scope p:not(.eyebrow) { color: #94b0ca; }
.domain-section > div > p:not(.eyebrow), .domain-steps p { color: #9fb9d1; }
.domain-steps li { border-color: #203f5c; }
.domain-steps li > span { font-family: inherit; color: #e8b74b; font-size: 22px; }
.domain-steps h3 { font-weight: 550; }
.faq-section { background: #081e36; border-block: 1px solid #1c3a55; }
details { border-color: #26445f; }
summary { color: #d1e6f8; font-weight: 500; }
summary > span { color: #4bd8ff; }
details p { color: #9eb8d0; line-height: 1.85; }
.request-copy > p:not(.eyebrow) { color: #9db6cc; }
.email-link { color: #5cd7fa; border-color: #34546f; }
.request-note > span { color: #e3b44c; font-size: 63px; }
.request-note p { font-family: inherit; font-style: normal; font-size: 17px; line-height: 1.5; color: #adc7df; }
.form-panel { background: #0b2139; border-color: #2a4867; border-radius: 12px; padding: 31px; }
.form-progress { color: #849fba; border-color: #2c4761; }
.form-progress .current { color: #68e0ff; }
legend { color: #e1f0fc; font-weight: 550; font-size: 19px; }
label { color: #bdcfe1; }
input, select, textarea { color: #eaf5ff; background: #06182c; border-color: #2b4c69; padding: 12px; border-radius: 5px; color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #728fa9; }
.muted { color: #7e9db8; }
.checkbox input { accent-color: #33d0f8; }
.form-summary { background: #10364d; color: #c6eaf9; border: 1px solid #245770; border-radius: 5px; }
.notice { background: #102f45; color: #abd9ec; border-color: #2b617d; }
.notice.success { background: #113b40; border-color: #3c907d; color: #cdf2e8; }
.footer { background: #020d1f; border-top: 1px solid #1a3855; color: #e2f1fc; }
.footer-main { border-color: #18344d; }
.footer-main > p { color: #8ba7c1; }
.footer .brand > span { font-size: 25px; line-height: 29px; width: 30px; height: 30px; }
.footer-bottom { color: #7895af; }
.footer .text-link { color: #62d8f8; }
dialog { background: #0a2139; border-color: #31516d; color: #e7f4ff; border-radius: 12px; box-shadow: 0 20px 100px #0008; }
dialog::backdrop { background: #010919dd; backdrop-filter: blur(6px); }
dialog h2 { font-size: 32px; }
dialog p:not(.eyebrow) { color: #a9c3d9; }
.dialog-close { color: #6cdbf6; }
.demo-header p { color: inherit !important; }
.demo-header h3 { color: inherit; font-family: Georgia, serif; }
.demo-items > div { background: #0a2942; border-color: #28506d; color: #9bbbd4; border-radius: 5px; }
.demo-items strong { color: #d8edfc; }
.skip { background: #6be2ff; color: #041329; }
@media (min-width: 1500px) { .hero { min-height: 690px; } }
@media (max-width: 1100px) {
  .hero h1 { font-size: 62px; }
  .hero .intro { font-size: 17px; }
  .hero-actions { gap: 17px; }
  .hero-actions .button { padding-inline: 17px; font-size: 12px; gap: 17px; }
  .hero-coordinate { left: 20px; }
  .digital-caption, .hero-image-note { margin-left: 20px; }
  .template-preview { height: 235px; padding: 15px; }
  .caption-line { width: 50px; }
}
@media (max-width: 800px) {
  .header { height: 91px; }
  .brand > span { font-size: 23px; width: 28px; height: 28px; line-height: 27px; margin-top: 3px; }
  .brand small { font-size: 7px; letter-spacing: 2.6px; }
  .hero { grid-template-columns: 1fr; padding-top: 43px; padding-bottom: 42px; gap: 0; min-height: auto; }
  .hero h1 { font-size: clamp(55px, 9vw, 73px); }
  .hero .intro { font-size: 18px; }
  .hero-detail { max-width: 430px; }
  .hero-copy { max-width: none; }
  .digital-hero-art { margin: 45px auto 0; max-width: 570px; }
  .digital-hero-image { width: 100%; margin-left: 0; }
  .hero-coordinate { left: 20px; top: -15px; font-size: 7px; }
  .digital-caption { margin-left: 20px; margin-top: 0; }
  .hero-image-note { margin-left: 20px; font-size: 7px; }
  .ticker > div { font-size: 8px; gap: 22px; }
  .section { padding-top: 65px; padding-bottom: 65px; }
  .template-preview { height: 300px; padding: 25px; }
  .template-grid { gap: 25px; }
  .membership-card { padding: 29px; }
  .form-panel { padding: 25px; }
  .form-progress { font-size: 10px; }
  .request-note > span { font-size: 48px; }
}
@media (max-width: 420px) {
  .hero .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .hero h1 { font-size: 55px; letter-spacing: -2.8px; }
  .hero .intro { font-size: 16px; }
  .hero-detail { font-size: 12px; }
  .hero-actions { align-items: flex-start; gap: 20px; }
  .hero-actions .button { font-size: 12px; padding: 14px 17px; }
  .hero-foot { font-size: 9px; gap: 20px; }
  .digital-hero-art { margin-top: 48px; }
  .digital-caption { font-size: 10px; margin-left: 10px; gap: 10px; }
  .hero-coordinate { left: 10px; letter-spacing: 1.2px; }
  .hero-image-note { margin-left: 10px; }
  .caption-line { width: 45px; }
  .caption-symbol { width: 33px; height: 33px; font-size: 21px; }
  .template-preview { padding: 20px; }
  .form-panel { padding: 20px; }
  .membership-card h3 { font-size: 25px; }
  .price { font-size: 21px; }
  .request-note p { font-size: 15px; }
}

/* Catálogo 1.2: doce composiciones reales, con demos navegables. */
#plantillas .section-heading > div { flex: 1; }
#plantillas .section-heading h2 { font-size: clamp(36px, 3.7vw, 53px); }
.filter-count { margin-left: 6px; opacity: .65; font-size: 10px; }
.filter-row { gap: 8px; }
.filter-row .filter { font-size: 10px; padding: 10px 12px; }
.catalog-meta { display: flex; justify-content: space-between; gap: 20px; margin: 24px 0 18px; font-size: 10px; color: #9ab6cd; }
.catalog-meta > span { color: #7298b5; }
.catalog-preview { display: block; width: 100%; padding: 0; text-align: left; background: #06162b; border-radius: 5px; overflow: hidden; position: relative; }
.template-chrome { height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 9px; font-size: 7px; color: #8cabc3; background: #122b43; }
.template-chrome > span:first-child { font-size: 5px; letter-spacing: 2px; color: #51718c; }
.template-chrome > span:nth-child(2) { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.catalog-preview > img { display: block; width: 100%; height: auto; aspect-ratio: 1280/900; object-fit: cover; object-position: top; transition: filter .25s; }
.preview-overlay { position: absolute; inset: 25px 0 0; display: flex; align-items: center; justify-content: center; background: #06172b8c; backdrop-filter: blur(1px); color: white; font-size: 12px; opacity: 0; transition: opacity .2s; }
.catalog-preview:hover .preview-overlay, .catalog-preview:focus-visible .preview-overlay { opacity: 1; }
.template-card .card-info { padding-top: 17px; }
.template-card .card-info h3 { font-size: 22px; }
.template-card .card-info h3 small { font-size: 10px; line-height: 1.5; margin-top: 7px; }
.template-description { color: #87a8c3; font-size: 11px; line-height: 1.7; margin: 14px 5px 0; min-height: 38px; }
.template-grid { row-gap: 25px; }
.catalog-dialog { width: min(1250px, calc(100vw - 36px)); max-width: none; height: 92vh; max-height: 94vh; padding: 24px; overflow: auto; }
.catalog-dialog .dialog-close { right: 11px; top: 3px; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-right: 20px; }
.demo-toolbar h2 { font-size: 23px; letter-spacing: -.5px; margin: 5px 0 0; }
.demo-toolbar .eyebrow { font-size: 8px; }
.demo-device-buttons { display: flex; gap: 5px; background: #06162a; padding: 4px; border: 1px solid #294c69; border-radius: 6px; }
.demo-device-buttons button { background: transparent; color: #86a8c6; font-size: 10px; padding: 8px 13px; border-radius: 4px; }
.demo-device-buttons button[aria-pressed=true] { background: #164561; color: #a4f1ff; }
.demo-device { width: 100%; height: min(65vh, 760px); margin: auto; background: #031124; border: 1px solid #34536d; border-radius: 5px; overflow: hidden; }
.demo-device.mobile { width: 390px; max-width: 100%; border-radius: 18px; border-width: 7px; }
.demo-device iframe { display: block; width: 100%; height: 100%; border: 0; background: #f5f5f0; }
.demo-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 17px; }
.demo-bottom .text-link { font-size: 10px; }
.catalog-dialog > .fine-print { font-size: 9px; margin-top: 12px; }
@media (max-width: 1000px) and (min-width: 801px) { .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 800px) { .catalog-meta { flex-direction: column; gap: 5px; }.template-description { min-height: 0; }.catalog-dialog { padding: 22px 15px; width: calc(100vw - 16px); }.demo-toolbar { padding-right: 12px; gap: 12px; }.demo-toolbar .eyebrow { font-size: 6px; letter-spacing: .6px; }.demo-device-buttons button { font-size: 8px; padding: 7px 9px; }.demo-device { height: 61vh; }.demo-bottom { flex-wrap: wrap; gap: 13px; }.demo-bottom .button { font-size: 11px; padding: 11px 14px; margin-left: auto; }.template-chrome { height: 27px; font-size: 8px; }.catalog-preview > img { aspect-ratio: 1280/900; }.preview-overlay { display: none; } }
.plans-section{position:relative}.billing-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:35px 0}.billing-row>p{max-width:430px;font-size:14px;color:#a9bdd1}.billing-switch,.demo-format-buttons{display:flex;gap:5px;padding:5px;border:1px solid #30475f;border-radius:14px;background:#081b32;width:fit-content}.billing-switch button,.demo-format-buttons button{border:0;border-radius:10px;padding:12px 18px;background:transparent;color:#d3e2ef;font:inherit;cursor:pointer}.billing-switch [aria-pressed=true],.demo-format-buttons [aria-pressed=true]{background:#36d6ff;color:#041329}.billing-switch strong{font-size:12px;margin-left:6px}.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service-plan{padding:30px 25px;border:1px solid #28405b;background:linear-gradient(155deg,#0c223d,#07182e);border-radius:22px;display:flex;flex-direction:column;min-width:0}.service-plan.featured{border-color:#36d6ff;box-shadow:0 0 35px #36d6ff12}.service-plan h3{font-size:34px;margin:16px 0 8px;color:#fff}.plan-kicker{font-size:10px!important;letter-spacing:1.5px;color:#36d6ff!important}.plan-tag{min-height:45px}.service-plan p{color:#b1c4d7;font-size:14px}.service-plan .plan-extent{font-size:23px;color:#f1bd50;margin:20px 0 8px;font-weight:700}.plan-price{font-size:25px;line-height:1.3;color:#fff;padding:24px 0;border-bottom:1px solid #29415b}.plan-price small{display:block;font-size:12px;font-weight:400;color:#adc1d5;margin-top:8px}.service-plan .check-list{padding-top:18px;flex:1}.service-plan .check-list li{font-size:13px;padding-block:10px}.service-plan .button{width:100%;justify-content:space-between;margin-top:22px}.plans-conditions{font-size:13px;line-height:1.8;color:#afc3d6;max-width:950px;margin:28px 0}.plan-comparison{border-block:1px solid #29415b;margin:30px 0}.plan-comparison>summary{cursor:pointer;padding:22px 0;font-size:18px;display:flex;justify-content:space-between}.comparison-scroll{overflow-x:auto}.plan-comparison table{width:100%;border-collapse:collapse;font-size:13px;min-width:620px;text-align:left}.plan-comparison caption{text-align:left;padding:15px 0;color:#36d6ff}.plan-comparison th,.plan-comparison td{padding:17px 14px;border-bottom:1px solid #203953}.plan-comparison th{color:#e1edf7}.plan-comparison td{color:#b4c9db}.demo-format-buttons{margin:0 0 15px}.demo-format-buttons button{font-size:12px;padding:9px 16px}
@media(max-width:900px){.plans-grid{grid-template-columns:1fr}.service-plan{padding:28px}.plan-tag{min-height:0}.billing-row{align-items:flex-start;flex-direction:column}.billing-switch button{font-size:13px;padding:12px}.plan-price{font-size:24px}.demo-format-buttons{max-width:100%}.demo-format-buttons button{padding:9px 12px}.plans-conditions{font-size:12px}}