/* Coopenet public redesign / responsive layer.
   The legacy PHP, AJAX routes and form markup remain untouched. */
:root {
  --cn-blue: #0878c9;
  --cn-blue-dark: #07518c;
  --cn-ink: #18334d;
  --cn-muted: #64768a;
  --cn-surface: #ffffff;
  --cn-soft: #eef6fc;
  --cn-border: #dce8f2;
  --cn-shadow: 0 18px 45px rgba(19, 63, 97, .12);
  --cn-radius: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #f3f7fb; scroll-behavior: smooth; }
body { color: var(--cn-ink); background: linear-gradient(180deg, #f3f7fb 0, #fff 40rem); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.55; }
#loadingDiv { top: 50%; left: 50%; width: min(360px, calc(100% - 32px)); max-width: calc(100% - 32px); padding: 24px 20px; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid #e0b83e; border-radius: 12px; background: #fff8d8; color: var(--cn-ink); font-size: clamp(18px, 3vw, 24px); line-height: 1.25; text-align: center; box-shadow: 0 16px 40px rgba(22, 48, 70, .22); }
#wrapper { width: min(960px, 100%); max-width: 960px; background: transparent; }
.header { position: relative; z-index: 20; width: min(960px, 100%); min-height: 154px; margin: 0 auto; padding-top: 10px; border-radius: 0 0 22px 22px; background-color: #075b9c; background-image: linear-gradient(115deg, rgba(4, 61, 108, .82), rgba(8, 125, 201, .56)), url('../images/header_background.png'); background-size: cover, 100% 100%; background-position: center top, center top; box-shadow: 0 12px 28px rgba(15, 68, 106, .18); }
.header::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 82px; pointer-events: none; background: linear-gradient(105deg, #03263f 0%, #063450 28%, rgba(7,81,140,.65) 62%, rgba(8,125,201,0) 100%); opacity: 1; }
.header #header_link { position: relative; left: 22px; width: 260px; height: 60px; z-index: 2; }
.header #header_link img { display: block; width: 100%; max-width: 260px; height: auto; max-height: 60px; object-fit: contain; object-position: left center; }
.header .payment_link { top: 14px; right: 22px; z-index: 3; padding: 8px 18px; border: 0; border-radius: 999px; background: #ffd65a; color: #17344d; font-size: 14px; font-weight: 800; text-shadow: none; box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.header .payment_link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.23); }
.header .social_links { top: 56px; right: 22px; z-index: 3; width: auto; padding: 2px 7px; border-radius: 999px; background: rgba(5, 43, 78, .34); }
.header #header_link:focus-visible, .header .payment_link:focus-visible, .menu_toggle:focus-visible, .menu li:focus-visible { outline: 3px solid #ffd65a; outline-offset: 3px; }
.social_links .social.twitter, .social_links .social.fb, .social_links .social.instagram, .social_links .social.whatsapp, .social_links .social.telegram { width: 27px; height: 27px; margin: 0 2px; background-size: 27px 27px; opacity: .92; transition: transform .2s ease, opacity .2s ease; }
.social_links .social:hover { transform: translateY(-2px); opacity: 1; }
.menu_toggle { display: none; position: relative; z-index: 40; }
.header .menu { position: relative; z-index: 30; width: calc(100% - 36px); height: auto; min-height: 58px; margin: 12px 18px 0; border-radius: 15px 15px 0 0; background: rgba(5, 43, 78, .6); backdrop-filter: blur(10px); }
.menu ul { padding: 0 8px; display: flex; justify-content: center; }
.menu ul li { position: relative; flex: 1 1 auto; padding: 13px 15px; border-radius: 10px 10px 0 0; color: #fff; font-family: inherit; font-size: 12px; letter-spacing: .035em; text-align: center; background-image: none; transition: background .2s ease, color .2s ease; }
.menu ul li:hover, .menu ul li.submenu-open { color: #073e6a; background: #fff; }
.menu li div.submenu { top: 54px; z-index: 100; margin-left: -10px; width: 245px; border-radius: 0 0 12px 12px; box-shadow: 0 18px 30px rgba(0,0,0,.2); }
.menu > ul > li[aria-haspopup='true']::after { content: '⌄'; display: inline-block; margin-left: 6px; font-size: 13px; line-height: 1; opacity: .8; transition: transform .2s ease; }
.menu > ul > li[aria-expanded='true']::after { transform: rotate(180deg); }
div.submenu ul { display: block; padding: 6px; }
div.submenu ul li { padding: 4px 12px; color: var(--cn-ink); border-radius: 7px; text-align: left; font-size: 13px; line-height: 28px; background-image: none; }
div.submenu ul li:hover { color: var(--cn-blue); background: var(--cn-soft); }
#content { width: 100%; box-sizing: border-box; padding: 24px 0 34px; color: var(--cn-ink); background: transparent; }
.content_header { overflow: hidden; }
.content_header { width: 100% !important; max-width: 960px; box-sizing: border-box; margin: 10px auto 22px; border-radius: 18px; background-color: #eaf4fb; background-size: cover; box-shadow: 0 8px 20px rgba(20, 63, 94, .12); }
.content_text, .content_text.promociones, .content_text.wide { color: var(--cn-ink); }
.content_text { font-size: 14px; }
.content_text .title { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.content_header.internet_service { height: auto; min-height: 150px; padding: 22px 42px; background-image: linear-gradient(135deg, #eef6fc, #ffffff); }
.content_header.internet_service .title { position: static; max-width: calc(100% - 220px); margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; overflow-wrap: anywhere; }
.content_header.internet_service .subtitle { position: static; max-width: calc(100% - 220px); margin: 0; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.2; overflow-wrap: anywhere; }
.content_header.internet_service .internet_price_box { position: absolute; top: 18px; right: 24px; width: 186px; height: 120px; background: transparent none no-repeat center / contain; }
.content_header.internet_service .internet_price_box .price { position: absolute; top: 62px; left: 0; width: 100%; font-size: 29pt; font-weight: bold; color: #868686; text-align: center; white-space: nowrap; }
.content_header.internet_service .internet_price_box .internet_price_notes { position: relative; top: 120px; left: -10px; width: 206px; font-size: 7pt; font-weight: normal; text-align: right; }
.content_text.promociones .service_title { font-size: clamp(22px, 2.8vw, 28px); line-height: 1.15; }
.content_text.promociones .service_subtitle { font-size: clamp(13px, 1.4vw, 15px); line-height: 1.25; }
.content_text.promociones .promo_box .promo_item .price { font-size: clamp(28px, 3.5vw, 42px); }
.content_text.promociones .promo_box .promo_item .price_note { font-size: clamp(10px, 1vw, 11px); line-height: 1.35; }
.content_text.promociones .service_note { margin: 14px 4px 22px; color: var(--cn-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.content_text.promociones .service_title_box { height: auto; min-height: 112px; padding: 16px 20px; }
.content_text.promociones .service_title_box .service_title,
.content_text.promociones .service_title_box .service_subtitle { margin: 0 0 8px; }
.content_text p { margin: 0 0 1.15rem; }
.content_text .box_content, .box_forms_center, .inscription_form, .contact_form, .compliance_form { background: var(--cn-surface); border-color: var(--cn-border); border-radius: 16px; box-shadow: var(--cn-shadow); }
.content_text .box_content { padding: 24px; }
.content_text .box_content, .content_text .service_notes { line-height: 1.45; overflow-wrap: anywhere; }
.content_text .service_notes { font-size: 13px; }
.content_text .button.blue { display: flex; align-items: center; justify-content: center; width: 146px; height: 44px; position: relative; top: auto; left: auto; margin: 24px auto 0; border: 0; border-radius: 10px; background: linear-gradient(135deg, #68b9ee, #1784ce) !important; color: #fff; box-shadow: 0 6px 14px rgba(8, 78, 137, .25); text-align: center; line-height: 1; text-indent: 0; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.content_text .button.blue::after { content: 'Solicitar'; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.content_text .button.blue:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 9px 18px rgba(8, 78, 137, .32); }
.content_text .internet_price_box { top: 8px; right: 0; }
.content_text .internet_price_box + .box_content { padding-top: 126px; }
.inscription_form, .contact_form, .compliance_form { width: 100%; max-width: 100%; padding: 0 16px 24px; }
.box_forms_top, .box_forms_center, .box_forms_bottom { width: min(790px, 100%); margin-left: auto; margin-right: auto; background-image: none; }
.box_forms_top { min-height: 76px; height: auto; padding: 16px 20px; border: 1px solid #b9c9d8; border-bottom: 0; border-radius: 18px 18px 0 0; background: linear-gradient(135deg, var(--cn-blue-dark), var(--cn-blue)); }
.box_forms_top .box_forms_title { padding: 0; color: #fff; font-size: clamp(20px, 2.5vw, 24px); line-height: 1.2; }
.box_forms_center { padding: 20px; border: 1px solid #d5e1eb; border-top: 0; border-radius: 0; box-shadow: none; }
.box_forms_center .form_subtitle { max-width: 665px; margin: 0 auto 14px; padding: 0; color: var(--cn-ink); font-size: 14px; line-height: 1.45; }
/* Shared introductory notice for public forms. */
.box_forms_center .form_subtitle.form-intro, #content .form-intro { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; box-sizing:border-box; max-width:665px; margin:0 auto 22px; padding:14px 16px; border:1px solid #d4eaf4; border-radius:12px; background:#f0f9fd; color:#24415b; font-family:Inter,Arial,Helvetica,sans-serif; font-size:14px; font-weight:400; line-height:1.55; text-align:left; }
.form-intro .service-intro-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#d9f2f7; color:#0878a9; }
.form-intro .service-intro-icon svg { display:block; width:17px; height:17px; }
.form-intro p { margin:0; padding:0; font:inherit; color:inherit; }
.form-intro .service-intro-note { margin-top:5px; color:#58728a; font-size:12px; line-height:1.5; }
@media(max-width:767px) { .box_forms_center .form_subtitle.form-intro, #content .form-intro { margin-bottom:18px; padding:12px; gap:9px; font-size:14px; } }
.box_forms_bottom { height: 18px; border: 1px solid #d5e1eb; border-top: 0; border-radius: 0 0 18px 18px; background: #fff; }
.form_table { width: min(665px, 100%); max-width: 100%; }
.form_success, .service_inscription_success, .requirements_note { width: min(100%, 665px); max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: normal; }
.form_success h3 { font-size: clamp(17px, 2vw, 22px); line-height: 1.4; }
.two_cols_container { display: block; width: 100%; max-width: 960px; margin: 10px auto; overflow: visible; }
.promo_container { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; max-width: 100%; margin: 0 auto; }
.promo_container .promo { float: none; flex: 0 0 295px; margin: 10px; }
.promo.simple_box { position: relative; display: flex; flex-direction: column; width: 295px; height: 430px; overflow: hidden; border: 1px solid rgba(20, 78, 132, .08); border-radius: 24px; background: #f7fbfe; box-shadow: 0 12px 28px rgba(20, 63, 94, .18); }
.promo.simple_box .promo_media { flex: 1 1 auto; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #2f76c5 0 30%, #f7fbfe 30%); }
.promo.simple_box .promo_media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.promo.simple_box .button.green { position: absolute; z-index: 2; left: 50%; bottom: 18px; top: auto; width: 154px; height: 44px; margin: 0; transform: translateX(-50%); border: 0; border-radius: 9px; background: var(--cn-blue) !important; color: #fff; box-shadow: 0 6px 12px rgba(8, 78, 137, .25); text-align: center; line-height: 44px; font-size: 17px; font-weight: 800; letter-spacing: .01em; text-indent: 0; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.promo.simple_box .button.green span { display: block; }
.promo.simple_box .button.green:hover { background: var(--cn-blue-dark) !important; transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 16px rgba(8, 78, 137, .3); }
.banners_container { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 950px; margin: 10px auto; }
.banners_container .banner { float: none; flex: 0 0 291px; }
.content_text h3 { color: var(--cn-blue-dark); font-size: 1.15rem; }
.promo, .banner { filter: drop-shadow(0 9px 15px rgba(20, 63, 94, .12)); transition: transform .2s ease, filter .2s ease; }
.promo:hover, .banner:hover { transform: translateY(-3px); filter: drop-shadow(0 13px 20px rgba(20, 63, 94, .18)); }
.banners_container { margin-top: 24px; }
.bottom_links_container { width: 100%; height: auto; min-height: 160px; border-radius: 18px 18px 0 0; background: linear-gradient(135deg, #e9f4fb, #f8fbfd); }
.bottom_links_container ul li { color: var(--cn-ink); }
.bottom_links_container ul ul li a, .bottom_links_container ul ul li { color: var(--cn-muted); }
.footer { width: 100%; height: auto; min-height: 110px; border-radius: 0 0 18px 18px; background: linear-gradient(135deg, #07518c, #0b78bd); }
.footer_social_links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; padding: 18px 12px 10px; }
.footer_social_links .social { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border: 2px solid #8de5f5; border-radius: 50%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 25px 25px; box-shadow: 0 4px 10px rgba(0, 31, 66, .28); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.footer_social_links .social:hover { transform: translateY(-3px); border-color: #ffd65a; box-shadow: 0 7px 14px rgba(0, 31, 66, .38); }
.footer_social_links .social a { display: block; width: 100%; height: 100%; border-radius: 50%; }
.footer_social_links .social.twitter { background-image: url('../images/twitter_icon.png'); }
.footer_social_links .social.fb { background-image: url('../images/fb_icon.png'); }
.footer_social_links .social.instagram { background-image: url('../images/instagram_icon.png'); }
.footer_social_links .social.whatsapp { background-image: url('../images/whatsapp_icon.png'); }
.footer_social_links .social.telegram { background-image: url('../images/telegram_icon.png'); }
.footer .note, .footer .copy { color: rgba(255,255,255,.88); font-size: 10px; }
input, select, textarea { border: 1px solid #c9d9e6 !important; border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(8,120,201,.18); border-color: var(--cn-blue) !important; }
.form_button.submit { border-radius: 999px; }
.content_text .intext_form .form_row .radio_box { max-width: 100%; border-color: var(--cn-border); background: #fbfdff; }
.content_text .intext_form .form_row .radio_box label.box_label { color: var(--cn-blue-dark); background: var(--cn-surface); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cn-blue); }
button, .form_button { min-height: 40px; }

/* Fluid desktop/tablet layer: legacy page modules keep their markup, while the
   public shell can breathe on laptops and tablets without changing AJAX routes. */
@media screen and (max-width: 1100px) and (min-width: 768px) {
  #wrapper { width: min(960px, 100%); max-width: 960px; }
  .header { border-radius: 0 0 var(--cn-radius) var(--cn-radius); }
  .header .menu { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  .menu ul li { padding-left: clamp(8px, 1.8vw, 18px); padding-right: clamp(8px, 1.8vw, 18px); font-size: clamp(10px, 1.2vw, 12px); }
  #content { padding-left: 14px; padding-right: 14px; }
  .content_header { width: 100% !important; max-width: 100%; background-size: cover; }
  .content_text, .content_text.promociones, .content_text.wide { max-width: 100%; }
  .bottom_links_container, .footer { width: 100% !important; }
}

/* Shared public controls */
button, input, select, textarea { font: inherit; }
a { color: var(--cn-blue-dark); }
a:hover { color: var(--cn-blue); }
::selection { color: #fff; background: var(--cn-blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Small screens */
@media screen and (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
  #loadingDiv { width: calc(100% - 32px); max-width: 320px; padding: 18px 14px; font-size: 20px; }
  img, video, iframe { max-width: 100%; }
  #wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .header { width: 100%; min-height: 0; padding: 6px 8px 0; overflow: visible; background-position: center top, center top; background-size: cover, 100% 116px; }
  .header::before { z-index: 1; width: 100%; height: 112px; opacity: 1; }
  .header #header_link { position: relative; display: block; top: auto; left: auto; width: min(46vw, 180px); height: 54px; margin: 0; }
  .header #header_link img { width: 100%; max-width: 180px; max-height: 54px; }
  .header .payment_link { top: 6px; right: 8px; max-width: 40%; padding: 6px 8px; font-size: 13px; text-align: center; }
  .header .social_links { top: 40px; right: 7px; width: auto; height: 26px; display: flex; gap: 3px; justify-content: flex-end; padding: 1px 4px; }
  .social_links .social,
  .social_links .social.twitter,
  .social_links .social.fb,
  .social_links .social.instagram,
  .social_links .social.whatsapp,
  .social_links .social.telegram { float: none; flex: 0 0 27px; width: 27px; height: 27px; margin: 0; background-size: 27px 27px; }
  .menu_toggle { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 18px; border: 0; border-radius: 12px; background: #fff; color: #07518c !important; font-size: 14px; font-family: inherit; font-weight: 800; letter-spacing: .04em; cursor: pointer; opacity: 1; box-shadow: 0 6px 16px rgba(4, 52, 87, .2); }
  .menu_toggle_icon { display: inline-flex; flex-direction: column; gap: 4px; }
  .menu_toggle_icon i { display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor; }
  .header .menu { display: none; position: relative; z-index: 1001; width: 100% !important; height: auto !important; margin: 8px 0 0; overflow: visible; background: #f6f7f8; border-radius: 12px; box-shadow: 0 12px 24px rgba(8, 61, 101, .15); }
  .header .menu.is-open { display: block; animation: cnMenuReveal .22s ease-out both; transform-origin: left top; }
  @keyframes cnMenuReveal {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
  }
  .menu > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; }
  .menu > ul > li { display: block; min-width: 0; padding: 9px 2px; line-height: 1.25; text-align: center; font-size: 10px; overflow-wrap: anywhere; color: #073e6a !important; background: #fff; border: 1px solid #cddbe7; }
  .menu > ul > li.submenu-open { grid-column: 1 / -1; }
  .menu > ul > li[rel], .menu > ul > li[id] { min-height: 42px; display: flex; align-items: center; justify-content: center; }
  .menu > ul > li[aria-haspopup='true']::after { margin-left: 4px; font-size: 11px; }
  .menu > ul > li > div.submenu { position: static; display: none !important; width: 100%; max-width: none; max-height: none; margin: 6px 0 0; overflow: visible; border-radius: 10px; box-shadow: none; }
  .menu > ul > li.submenu-open > div.submenu { display: block !important; }
  .menu > ul > li.submenu-open > div.submenu ul { display: block; width: 100%; padding: 4px; }
  .menu > ul > li.submenu-open > div.submenu li { display: block; width: 100%; padding: 9px 12px; color: #17344d !important; font-size: 13px; line-height: 1.35; text-align: left; white-space: normal; }
  #content { width: 100% !important; max-width: 100%; padding: 8px 0 0; }
  .content_header { width: calc(100% - 24px) !important; max-width: 100%; height: auto; min-height: 76px; margin: 12px; background-size: 100% auto; background-position: center top; }
  .content_header.internet_service { height: auto; min-height: 90px; margin-bottom: 8px; background-size: 100% 100%; }
  .content_header.internet_service { min-height: 126px; padding: 14px 12px; background-image: linear-gradient(135deg, #eef6fc, #ffffff); }
  .content_header.internet_service .title { max-width: calc(100% - 158px); margin: 0 0 6px; font-size: clamp(16px, 4.5vw, 22px); line-height: 1.15; overflow-wrap: anywhere; }
  .content_header.internet_service .subtitle { max-width: calc(100% - 158px); margin: 0; font-size: clamp(12px, 3.2vw, 16px); line-height: 1.2; overflow-wrap: anywhere; }
  .content_header.internet_service .internet_price_box { top: 12px; right: 10px; width: 150px; height: 97px; }
  .content_header.internet_service .internet_price_box .price { top: 50px; left: 0; width: 100%; font-size: 21pt; text-align: center; }
  .content_header.internet_service .internet_price_box .internet_price_notes { top: 96px; left: -8px; width: 166px; font-size: 6pt; }
  .content_text, .content_text.promociones, .content_text.wide { float: none; width: auto !important; max-width: 100%; margin: 0 12px; padding: 0 0 16px; }
  .content_text .intext_form { width: 100% !important; max-width: 100%; }
  .content_text .intext_form .form_row { display: flex; flex-direction: column; align-items: stretch; width: 100% !important; min-height: 0; padding: 7px 0; }
  .content_text .intext_form .form_row label { float: none; width: 100%; margin: 0 0 4px; text-align: left; line-height: 1.35; }
  .content_text .intext_form .form_row input[type='text'],
  .content_text .intext_form .form_row input[type='email'],
  .content_text .intext_form .form_row input[type='number'],
  .content_text .intext_form .form_row select,
  .content_text .intext_form .form_row textarea { float: none; width: 100%; max-width: 100%; min-width: 0; }
  .form_table { display: block; width: 100% !important; max-width: 100%; overflow: visible; }
  .form_table tbody, .form_table tr, .form_table th, .form_table td { display: block; width: 100% !important; max-width: 100%; }
  .form_table td { padding: 6px 0; }
  .form_table label { float: none; display: block; margin-bottom: 4px; }
  .form_table input[type='text'], .form_table input[type='password'], .form_table input[type='number'], .form_table select, .form_table textarea { float: none; display: block; width: 100% !important; max-width: 100%; min-height: 42px; font-size: 16px; }
  .form_table textarea { min-height: 100px; }
  .box_forms_top, .box_forms_center, .box_forms_bottom { width: calc(100% - 24px); max-width: 100%; background-image: none; }
  .box_forms_top { height: auto; min-height: 70px; padding: 14px 18px; background: linear-gradient(135deg, var(--cn-blue-dark), var(--cn-blue)); border-radius: 16px 16px 0 0; }
  .box_forms_top .box_forms_title { padding: 0; color: #fff; font-size: 20px; }
  .box_forms_center { padding: 12px; }
  .box_forms_bottom { height: 12px; background: var(--cn-surface); border-radius: 0 0 16px 16px; }
  .form_success, .service_inscription_success, .requirements_note { width: 100%; max-width: 100%; padding: 16px 12px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
  .form_success h3 { margin: 12px 0 0; font-size: clamp(16px, 4.4vw, 20px); line-height: 1.4; overflow-wrap: anywhere; }
  .content_text.promociones .service_title_box { width: 100%; height: auto; min-height: 90px; background-size: 100% 100%; }
  .content_text.promociones .service_title { margin: 0 0 8px; padding: 0; font-size: clamp(19px, 5.5vw, 26px); overflow-wrap: anywhere; }
  .content_text.promociones .service_subtitle { margin: 0; padding: 0; font-size: clamp(13px, 3.8vw, 17px); overflow-wrap: anywhere; }
  .content_text.promociones .service_note { margin: 12px 0 18px; font-size: 12px; line-height: 1.5; }
  .content_text.promociones .promo_box { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
  .content_text.promociones .promo_box .promo_item,
  .content_text.promociones .promo_box .promo_item.odd,
  .content_text.promociones .promo_box .promo_item.even { float: none; width: 100%; max-width: 100%; margin: 0; background-size: 100% 100%; }
  .two_cols_container { display: block; width: 100% !important; max-width: 100%; margin: 8px 0; overflow: visible; }
  .two_cols_container .left_col, .two_cols_container .right_col { display: block; float: none; width: 100% !important; max-width: 100%; }
  .promo_container { display: flex; flex-direction: column; gap: 10px; width: 100%; overflow: visible; padding: 0 10px; }
  .promo { float: none; width: 100%; max-width: 100%; height: 370px; margin: 0 auto; }
  .promo_container .promo { flex: 0 0 auto; }
  .promo .button { left: 50%; transform: translateX(-50%); }
  .promo.simple_box { width: min(100%, 360px); max-width: 100%; height: 440px; min-height: 0; margin: 0 auto; border-radius: 22px; }
  .promo.simple_box .promo_media { min-height: 0; }
  .promo.simple_box .promo_media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .promo.simple_box .button.green { bottom: 16px; width: 148px; height: 42px; line-height: 42px; font-size: 16px; }
  .banners_container { display: flex; flex-direction: column; gap: 8px; width: 100% !important; height: auto !important; margin: 10px auto !important; padding: 0 8px; }
  .banners_container .banner { float: none; display: block; width: 100% !important; max-width: 100%; min-height: 70px; margin: 0; background-position: center; background-size: contain; background-repeat: no-repeat; }
  .banners_container .banner { flex: 0 0 auto; }
  .bottom_links_container { width: 100% !important; height: auto !important; padding: 10px 8px; background-size: auto 100%; }
  .bottom_menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto !important; }
  .footer { width: 100% !important; height: auto !important; min-height: 0; padding: 8px 0; }
  .footer_social_links { gap: 10px; padding: 16px 10px 10px; }
  .footer_social_links .social { width: 42px; height: 42px; flex-basis: 42px; background-size: 24px 24px; }
  .footer .note, .footer .copy { font-size: 10px; line-height: 1.4; padding: 5px 8px; overflow-wrap: anywhere; }
  .footer .design { position: static; margin: 6px 8px; }
  .content_text .internet_price_box { position: relative; top: auto; right: auto; margin: 8px auto; max-width: 100%; }
  .content_text .internet_price_box + .box_content { padding-top: 18px; }
  .content_text .internet_price_notes { position: static; top: auto; left: auto; margin: 8px; text-align: left; }
  .content_text .button.blue { left: auto; display: flex; width: 142px; height: 42px; margin: 18px auto; }
  .content_text .button.blue::after { font-size: 17px; }
  .content_text table { display: block; width: 100% !important; max-width: 100%; overflow-x: auto; }
  .content_text .box_content { padding: 18px 14px; }
}

/* Approved commercial home direction */
.home_hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; min-height: 300px; margin: 8px 0 30px; padding: 38px 48px; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 85% 20%, rgba(84,212,227,.45), transparent 28%), linear-gradient(125deg, #073e6a, #0878c9); color: #fff; box-shadow: 0 18px 40px rgba(7,62,106,.2); }
.home_hero_copy { position: relative; z-index: 1; }
.home_eyebrow { display: inline-block; margin-bottom: 8px; color: #16a4b6; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.home_hero .home_eyebrow { color: #b7f5fa; }
.home_hero h1 { max-width: 590px; margin: 0 0 14px; color: #fff; font-size: clamp(30px, 5vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
.home_hero p { max-width: 520px; margin: 0 0 24px; color: rgba(255,255,255,.88); font-size: 18px; line-height: 1.45; }
.home_hero_cta { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; padding: 13px 22px; border-radius: 10px; background: #fff; color: #07518c; font-weight: 900; text-decoration: none; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.home_hero_visual { position: relative; min-height: 240px; }
.home_hero_orb { position: absolute; width: 220px; height: 220px; right: 8%; top: 8px; border: 24px solid rgba(84,212,227,.5); border-radius: 50%; box-shadow: 0 0 0 28px rgba(84,212,227,.12), 0 0 0 54px rgba(84,212,227,.08); }
.home_hero_waves { position: absolute; right: 5%; bottom: 20px; width: 220px; height: 100px; border-top: 16px solid #54d4e3; border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 -28px 0 -1px #54d4e3, 0 -56px 0 -1px #54d4e3; }
.home_section_heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 0 12px; }
.home_section_heading h2 { margin: 0; color: #073e6a; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; }
.home_section_heading p { margin: 3px 0 0; color: #6b8295; }
.promo_container { gap: 18px; }
.promo_container .promo.simple_box { flex: 1 1 0; width: auto; min-width: 0; height: 430px; margin: 0; border-radius: 24px; }
.promo.simple_box .promo_media { flex: 1 1 auto; height: auto; }
.promo.simple_box .promo_media img { object-fit: cover; object-position: center top; }
.promo.simple_box .promo_card_footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 78px; padding: 12px 16px; background: #fff; }
.promo.simple_box .promo_card_label { color: #245b86; font-size: 14px; font-weight: 800; }
.promo.simple_box .button.green { position: static; flex: 0 0 auto; width: auto; min-width: 132px; height: 40px; margin: 0; padding: 0 15px; transform: none; border-radius: 9px; line-height: 40px; font-size: 14px; }
.promo.simple_box .button.green:hover { transform: translateY(-2px); }
.home_benefits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 30px 12px 10px; }
.home_benefit { padding: 22px; border: 1px solid #dce8f2; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px rgba(20,63,94,.07); }
.home_benefit_icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 14px; background: #d8f7fa; color: #0878c9; font-size: 22px; }
.home_benefit h3 { margin: 0 0 5px; color: #07518c; font-size: 17px; }
.home_benefit p { margin: 0; color: #6b8295; font-size: 13px; line-height: 1.45; }

@media screen and (max-width: 767px) {
  .home_hero { grid-template-columns: 1fr; min-height: 0; margin: 0 12px 24px; padding: 28px 22px; border-radius: 22px; }
  .home_hero p { font-size: 16px; }
  .home_hero_visual { min-height: 120px; margin-top: 12px; transform: scale(.72); transform-origin: center top; }
  .home_section_heading { display: block; margin: 0 12px 12px; padding: 0; }
  .home_section_heading p { margin-top: 5px; }
  .promo_container { gap: 12px; padding: 0 12px; }
  .promo_container .promo.simple_box { flex: 0 0 auto; width: min(100%, 360px); height: 440px; margin: 0 auto; }
  .promo.simple_box .promo_card_footer { min-height: 76px; padding: 10px 13px; }
  .promo.simple_box .promo_card_label { font-size: 13px; }
  .promo.simple_box .button.green { min-width: 125px; height: 40px; line-height: 40px; font-size: 13px; }
  .home_benefits { grid-template-columns: 1fr; gap: 12px; margin: 24px 12px 10px; }
}
@media screen and (max-width: 380px) {
  .menu > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header #header_link { width: 54vw; }
  .header .payment_link { font-size: 11px; padding: 5px 6px; }
  .header .social_links { gap: 2px; }
  .social_links .social,
  .social_links .social.twitter,
  .social_links .social.fb,
  .social_links .social.instagram,
  .social_links .social.whatsapp,
  .social_links .social.telegram { flex-basis: 24px; width: 24px; height: 24px; background-size: 24px 24px; }
}

/* Modern public visual system: keeps the existing PHP, routes, forms and
   database-driven content while giving every public section one visual language. */
body { background: linear-gradient(180deg, #edf5fb 0, #ffffff 34rem); color: #18334d; }
#wrapper { background: transparent; }
.header { border: 1px solid rgba(255,255,255,.28); border-top: 0; background-image: linear-gradient(120deg, rgba(4,61,108,.9), rgba(8,125,201,.68)), url('../images/header_background.png'); box-shadow: 0 16px 34px rgba(15,68,106,.2); }
.header .menu { border: 1px solid rgba(141,229,245,.16); background: rgba(4,48,82,.78); box-shadow: 0 8px 18px rgba(2,37,64,.2); }
.menu ul li { text-shadow: none; }
.menu ul li:hover, .menu ul li.submenu-open { color: #07518c; background: #f8fcff; }
#content { padding-top: 28px; }
.content_header { border: 1px solid rgba(20,78,132,.08); box-shadow: 0 12px 26px rgba(20,63,94,.12); }
.content_text { color: #24415b; }
.content_text p, .content_text li { line-height: 1.55; }
.content_text a { font-weight: 600; }
.content_text .box_content { border: 1px solid #e0ebf3; background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(20,63,94,.08); }
.content_text.promociones .service_box { margin: 0 0 26px; padding: 0 0 4px; }
.content_text.promociones .service_title_box { border: 1px solid #dce8f2; border-radius: 18px; background: linear-gradient(135deg, #eaf5fc, #ffffff) !important; box-shadow: 0 8px 20px rgba(20,63,94,.08); }
.content_text.promociones .service_title { color: #245b86; letter-spacing: .01em; }
.content_text.promociones .service_subtitle { color: #6b8295; }
.content_text.promociones .promo_box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow: visible; }
.content_text.promociones .promo_box .promo_item,
.content_text.promociones .promo_box .promo_item.odd,
.content_text.promociones .promo_box .promo_item.even { float: none; display: block; width: auto; height: 188px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: linear-gradient(135deg, #bc2f83 0 43%, #4d6df1 43% 100%) !important; box-shadow: 0 12px 24px rgba(20,63,94,.14); transition: transform .2s ease, box-shadow .2s ease; }
.content_text.promociones .promo_box .promo_item:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(20,63,94,.2); }
.content_text.promociones .promo_box .promo_item .title { top: 17px; padding: 0 16px; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.15; }
.content_text.promociones .promo_box .promo_item .price { top: 78px; left: 0; width: 100%; min-width: 0; color: #173f70; font-size: clamp(30px, 3.4vw, 42px); text-shadow: none; }
.content_text.promociones .promo_box .promo_item .price_note { top: 86px; right: 14px; min-width: 0; color: #46647b; font-size: 11px; line-height: 1.25; }
.banners_container .banner { border-radius: 14px; box-shadow: 0 8px 18px rgba(20,63,94,.1); }
.box_forms_top, .box_forms_center, .box_forms_bottom, .inscription_form, .contact_form, .compliance_form { border-color: #dce8f2; box-shadow: 0 14px 30px rgba(20,63,94,.1); }
.box_forms_top { background: linear-gradient(135deg, #07518c, #1784ce); }
.box_forms_center { background: rgba(255,255,255,.97); }
input, select, textarea { border-color: #c9dce9 !important; box-shadow: inset 0 1px 2px rgba(20,63,94,.04); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(8,120,201,.12); }
.form_button.submit, .content_text .button.blue { background: linear-gradient(135deg, #1784ce, #07518c) !important; }
.bottom_links_container { border: 1px solid #deebf4; box-shadow: 0 -8px 22px rgba(20,63,94,.05); }
.bottom_menu > li { color: #123c61; }
.bottom_links_container ul ul li a, .bottom_links_container ul ul li { color: #58728a; }
.footer { box-shadow: 0 12px 28px rgba(8,65,111,.18); }

/* Service request form: aligned email fields and an aesthetic requirements notice. */
.inscription_form .form_table td { vertical-align: top; }
.inscription_form .form_table input[type='email'] { display: block; box-sizing: border-box; width: 100% !important; max-width: 100%; min-height: 42px; }
.inscription_form .requirements_note { margin: 8px auto 14px; padding: 16px 22px; border: 1px solid #bdeaf1; border-radius: 16px; background: linear-gradient(135deg, #e8fbfd, #f6fcff); color: #245b86; font-size: 13px; font-weight: 600; line-height: 1.55; text-align: center; box-shadow: 0 8px 20px rgba(8,120,201,.1); }
.inscription_form .requirements_note::before { display: block; margin: 0 auto 8px; color: #10a8c2; content: 'Requisitos de instalación'; font-size: 15px; font-weight: 900; }
.inscription_form .requirements_note p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(8,120,201,.16); }

@media screen and (max-width: 767px) {
  #content { padding-top: 16px; }
  .content_text.promociones .promo_box { grid-template-columns: 1fr; gap: 12px; }
  .content_text.promociones .promo_box .promo_item,
  .content_text.promociones .promo_box .promo_item.odd,
  .content_text.promociones .promo_box .promo_item.even { height: 178px; }
  .content_text.promociones .promo_box .promo_item .title { font-size: clamp(17px, 5vw, 22px); }
  .content_text.promociones .promo_box .promo_item .price { font-size: clamp(28px, 9vw, 36px); }
  .content_text .box_content { box-shadow: 0 8px 20px rgba(20,63,94,.08); }
  .bottom_links_container { border-radius: 16px 16px 0 0; }
  .inscription_form .requirements_note { margin: 8px 0 14px; padding: 14px 13px; font-size: 12px; line-height: 1.45; }
  .inscription_form .requirements_note::before { font-size: 14px; }
  .inscription_form .requirements_note p { margin-top: 10px; padding-top: 10px; }
  .inscription_form { box-sizing: border-box; width: 100% !important; max-width: 100%; padding-right: 8px; padding-left: 8px; overflow-x: hidden; }
  .inscription_form .box_forms_top,
  .inscription_form .box_forms_center,
  .inscription_form .box_forms_bottom { box-sizing: border-box; width: 100% !important; max-width: 100%; }
  .inscription_form .form_table { box-sizing: border-box; width: 100% !important; max-width: 100%; table-layout: fixed; }
  .inscription_form .form_table td { box-sizing: border-box; width: 100% !important; max-width: 100%; min-width: 0; overflow: visible; }
  .inscription_form .form_table input,
  .inscription_form .form_table select,
  .inscription_form .form_table textarea { box-sizing: border-box; width: 100% !important; max-width: 100%; min-width: 0; }
  .inscription_form .form_table label { box-sizing: border-box; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

/* Home plan cards: database-driven services presented in the new commercial style. */
.home_plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 960px; margin: 0 auto 34px; align-items: stretch; }
.home_plan_card { position: relative; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; border: 1px solid #dce8f2; border-radius: 24px; background: #fff; box-shadow: 0 14px 30px rgba(20,63,94,.12); transition: transform .2s ease, box-shadow .2s ease; }
.home_plan_card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(20,63,94,.18); }
.home_plan_card.is_featured { border: 2px solid #0878c9; transform: translateY(-8px); box-shadow: 0 18px 38px rgba(8,120,201,.2); }
.home_plan_card.is_featured:hover { transform: translateY(-12px); }
.home_plan_badge { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 7px 11px; border-radius: 999px; background: #c9f7ff; color: #0878c9; font-size: 11px; font-weight: 900; white-space: nowrap; }
.home_plan_top { min-height: 104px; padding: 27px 24px 20px; background: linear-gradient(135deg, #eaf7fd, #d7edf8); }
.home_plan_top h3 { margin: 0 0 9px; color: #07518c; font-size: 24px; line-height: 1.08; letter-spacing: -.02em; }
.home_plan_top p { min-height: 19px; margin: 0; color: #52718d; font-size: 13px; line-height: 1.35; }
.home_plan_body { display: flex; flex: 1; flex-direction: column; padding: 25px 24px 23px; }
.home_plan_label { color: #6a8298; font-size: 12px; }
.home_plan_price { margin: 10px 0 28px; color: #07518c; font-size: clamp(34px, 3.2vw, 45px); font-weight: 900; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.home_plan_price small { color: #07518c; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.home_plan_features { display: grid; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none; color: #456987; font-size: 13px; line-height: 1.3; }
.home_plan_features li { position: relative; padding-left: 19px; }
.home_plan_features li::before { position: absolute; left: 0; top: 0; content: '✓'; color: #10a8c2; font-size: 16px; font-weight: 900; }
.home_plan_cta { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; border-radius: 10px; background: linear-gradient(135deg, #1784ce, #07518c); color: #fff !important; font-size: 13px; font-weight: 900; text-decoration: none; box-shadow: 0 8px 16px rgba(7,81,140,.2); transition: filter .2s ease, transform .2s ease; }
.home_plan_cta:hover { filter: brightness(1.08); transform: translateY(-2px); }

@media screen and (max-width: 900px) and (min-width: 768px) {
  .home_plans { padding: 0 14px; }
  .home_plan_top, .home_plan_body { padding-left: 18px; padding-right: 18px; }
  .home_plan_top h3 { font-size: 21px; }
  .home_plan_price { font-size: 35px; }
}

@media screen and (max-width: 767px) {
  .home_plans { grid-template-columns: 1fr; gap: 16px; width: auto; margin: 0 12px 28px; }
  .home_plan_card, .home_plan_card.is_featured { min-height: 0; transform: none; border-radius: 20px; }
  .home_plan_card:hover, .home_plan_card.is_featured:hover { transform: none; }
  .home_plan_top { min-height: 94px; padding: 22px 20px 17px; }
  .home_plan_top h3 { font-size: 22px; }
  .home_plan_body { padding: 21px 20px 20px; }
  .home_plan_price { margin-bottom: 22px; font-size: 39px; }
  .home_plan_features { margin-bottom: 20px; }
  .home_plan_cta { min-height: 46px; font-size: 14px; }
}

/* Aesthetic public subpages: one calm visual system around the legacy content. */
.header #header_link { left: 24px; width: 198px; height: 66px; padding: 2px 0 12px; }
.header #header_link img { max-width: 198px; max-height: 54px; filter: drop-shadow(0 3px 2px rgba(0,28,56,.28)); }
.header #header_link .brand_location { position: absolute; right: 2px; bottom: 0; color: #b7f5fa; font-size: 9px; font-weight: 900; letter-spacing: .28em; line-height: 1; }
.header #header_link { display: block; width: 240px; height: 60px; padding: 0; }
/* Frame the transparent canvas without stretching the logo or shrinking it twice. */
.header #header_link img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; filter: none; }
.content_header:not(.internet_service) { position: relative; display: flex; align-items: flex-end; min-height: 116px; padding: 22px 28px; background: linear-gradient(135deg, #eaf7fd 0%, #ffffff 58%, #d9f4f7 100%) !important; border: 1px solid #dbeaf4; }
.content_header:not(.internet_service)::before { position: absolute; right: 28px; top: 18px; width: 110px; height: 110px; border: 15px solid rgba(8,120,201,.12); border-radius: 50%; content: ''; }
.content_header:not(.internet_service)::after { position: relative; z-index: 1; color: #07518c; font-size: clamp(22px, 3.1vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.content_header.company::after { content: 'Coopenet Luján'; }
.content_header.press::after { content: 'Noticias y prensa'; }
.content_header.medios_pago::after { content: 'Medios de pago'; }
.content_header.medios_atencion::after { content: 'Medios de atención'; }
.content_header.soluciones::after { content: 'Soluciones prácticas'; }
.content_text:not(.promociones):not(.wide) { position: relative; z-index: 1; width: calc(100% - 340px); min-height: 220px; margin: 0 0 24px 18px; padding: 26px 28px; border: 1px solid #e0ebf3; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 12px 28px rgba(20,63,94,.09); }
.content_text:not(.promociones):not(.wide) .title { color: #07518c; font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; letter-spacing: -.025em; }
.content_text:not(.promociones):not(.wide) .head_title { color: #6b8295; font-size: 12px; font-weight: 700; }
.content_text:not(.promociones):not(.wide) p.intro { color: #52718d; font-size: 15px; line-height: 1.55; }
.content_text:not(.promociones):not(.wide) h3 { margin: 22px 0 8px; color: #07518c; font-size: 18px; }
.content_text:not(.promociones):not(.wide) ul { padding-left: 20px; }
.content_text:not(.promociones):not(.wide) li::marker { color: #10a8c2; }
.content_right_barr { margin-right: 18px; padding: 4px 0 24px; }
.content_right_barr .promo, .content_right_barr .banner { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px rgba(20,63,94,.14); }
.content_text.promociones { padding-left: 0; padding-right: 0; }
.content_text.promociones .service_box { padding: 0 0 8px; }
.content_text.promociones .service_title_box { min-height: 104px; padding: 24px 26px; }
.content_text.promociones .service_title { font-size: clamp(21px, 2.6vw, 30px); font-weight: 800; }

@media screen and (max-width: 767px) {
  .header #header_link { left: auto; width: min(48vw, 182px); height: 60px; padding-bottom: 10px; }
  .header #header_link img { max-width: 182px; max-height: 52px; }
  .header #header_link .brand_location { right: 0; font-size: 8px; }
  .header #header_link { width: min(48vw, 184px); height: 46px; padding: 0; }
  .header #header_link img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
  .content_header:not(.internet_service) { min-height: 92px; margin: 10px 12px 16px; padding: 18px 20px; border-radius: 16px; }
  .content_header:not(.internet_service)::before { right: 15px; top: 12px; width: 76px; height: 76px; border-width: 10px; }
  .content_header:not(.internet_service)::after { font-size: clamp(20px, 6vw, 28px); }
  .content_text:not(.promociones):not(.wide) { width: auto; min-height: 0; margin: 0 12px 18px; padding: 20px 18px; border-radius: 16px; }
  .content_text:not(.promociones):not(.wide) .title { font-size: clamp(20px, 6vw, 28px); }
  .content_right_barr { float: none; width: auto; margin: 0 12px 18px; padding: 0; }
  .content_right_barr .promo, .content_right_barr .banner { max-width: 100%; margin: 0 auto 12px; }
}
/* Internal pages aligned with the home visual language. */
.content_header.internet_service { position: relative; min-height: 154px; padding: 28px 42px; border-radius: 22px; background: linear-gradient(135deg, #eaf7fd 0%, #ffffff 62%, #dff7fa 100%) !important; }
.content_header.internet_service .title { color: #07518c; font-size: clamp(25px, 3.3vw, 36px); font-weight: 850; letter-spacing: -.035em; }
.content_header.internet_service .subtitle { color: #6b8295; font-size: clamp(15px, 1.8vw, 21px); }
.content_header.internet_service .internet_price_box { top: 18px; right: 28px; width: 190px; height: 116px; background: linear-gradient(180deg, #0878c9 0 43%, #ffffff 43% 100%) !important; border: 1px solid #c8dce9; border-radius: 14px; box-shadow: 0 10px 20px rgba(20,63,94,.12); }
.content_header.internet_service .internet_price_box::before { position: absolute; top: 7px; left: 0; width: 100%; content: 'DESDE'; color: #fff; font-size: 28px; font-weight: 900; line-height: 1; text-align: center; }
.content_header.internet_service .internet_price_box .price { top: 57px; color: #07518c; font-size: 27px; line-height: 1; }
.content_header.internet_service .internet_price_box .internet_price_notes { top: 113px; left: -6px; width: 202px; color: #6b8295; font-size: 7px; }
.content_right_barr .promo.box_ftth, .content_right_barr .promo.box_adsl, .content_right_barr .promo.box_novedades { position: relative; width: 300px; min-height: 285px; border: 0; border-radius: 20px; background: linear-gradient(145deg, #07518c, #0878c9 62%, #54d4e3) !important; box-shadow: 0 14px 28px rgba(20,63,94,.18); }
.content_right_barr .promo.box_ftth::before, .content_right_barr .promo.box_adsl::before, .content_right_barr .promo.box_novedades::before { display: block; padding: 42px 24px 92px; content: 'Conectividad para tu hogar'; color: #fff; font-size: 25px; font-weight: 850; line-height: 1.1; text-align: center; }
.content_right_barr .promo .button { position: absolute; bottom: 24px; left: 50%; width: 158px; height: 44px; margin: 0; transform: translateX(-50%); border: 0; border-radius: 10px; background: #ffd65a !important; color: #17344d; box-shadow: 0 8px 16px rgba(0,0,0,.15); }
.content_right_barr .promo .button::after { content: 'Conocer más'; font-size: 15px; font-weight: 900; line-height: 44px; }
.content_right_barr .promo .button:hover { transform: translateX(-50%) translateY(-2px); }
.content_text.promociones .promo_box .promo_item,
.content_text.promociones .promo_box .promo_item.odd,
.content_text.promociones .promo_box .promo_item.even { height: 196px; border: 1px solid #dce8f2; border-radius: 20px; background: linear-gradient(180deg, #e6f5fb 0 45%, #ffffff 45% 100%) !important; box-shadow: 0 12px 24px rgba(20,63,94,.1); }
.content_text.promociones .promo_box .promo_item .title { top: 18px; color: #07518c; font-size: clamp(17px, 2vw, 23px); }
.content_text.promociones .promo_box .promo_item .price { top: 91px; color: #07518c; font-size: clamp(30px, 3.4vw, 42px); font-weight: 900; }
.content_text.promociones .promo_box .promo_item .price_note { top: 99px; color: #6b8295; }

@media screen and (max-width: 767px) {
  .content_header.internet_service { min-height: 126px; padding: 18px 14px; border-radius: 17px; }
  .content_header.internet_service .internet_price_box { top: 14px; right: 10px; width: 148px; height: 94px; }
  .content_header.internet_service .internet_price_box::before { top: 6px; font-size: 21px; }
  .content_header.internet_service .internet_price_box .price { top: 49px; font-size: 21px; }
  .content_header.internet_service .internet_price_box .internet_price_notes { top: 93px; width: 160px; }
  .content_right_barr .promo.box_ftth, .content_right_barr .promo.box_adsl, .content_right_barr .promo.box_novedades { width: min(300px, 100%); min-height: 230px; }
  .content_right_barr .promo.box_ftth::before, .content_right_barr .promo.box_adsl::before, .content_right_barr .promo.box_novedades::before { padding: 34px 18px 72px; font-size: 22px; }
  .content_text.promociones .promo_box .promo_item,
  .content_text.promociones .promo_box .promo_item.odd,
  .content_text.promociones .promo_box .promo_item.even { height: 178px; }
}

/* Subpages use the full content width; promotional side images are removed. */
.content_right_barr { display: none !important; }
.content_text:not(.promociones):not(.wide) { float: none; width: calc(100% - 36px); max-width: 960px; margin: 0 auto 24px; }
.content_text.wide { float: none; width: calc(100% - 36px); max-width: 960px; margin: 0 auto 24px; }

@media screen and (max-width: 767px) {
  .content_text:not(.promociones):not(.wide), .content_text.wide { width: auto; margin: 0 12px 18px; }
}

/* Legacy submit buttons are empty elements with their label hidden by sprite CSS. */
.form_button.submit { display: inline-flex; align-items: center; justify-content: center; width: 142px; height: 44px; padding: 0; border: 0; border-radius: 999px; color: #fff !important; font-size: 0; font-weight: 900; line-height: 1; text-indent: 0 !important; background: linear-gradient(135deg, #1784ce, #07518c) !important; box-shadow: 0 7px 16px rgba(8,78,137,.24); }
.form_button.submit::after { content: 'Enviar'; font-size: 15px; }
.form_button.submit:hover { filter: brightness(1.06); transform: translateY(-2px); }

/* Unified success messages for submitted and processed forms. */
div.success { width: min(100%, 900px); margin: 0 auto 14px; padding: 12px 18px; border: 1px solid #8de5f5 !important; border-radius: 14px; background: linear-gradient(135deg, #e8fbfd, #f6fcff) !important; color: #07518c !important; font-size: 15px; font-weight: 800; line-height: 1.4; text-align: center; box-shadow: 0 8px 20px rgba(8,120,201,.1); }
.form_success { position: relative; width: min(100%, 665px); margin: 0 auto; padding: 20px 24px 20px 58px !important; border: 1px solid #8de5f5 !important; border-radius: 16px !important; background: linear-gradient(135deg, #e8fbfd, #f6fcff) !important; color: #07518c !important; font-size: 15px !important; font-weight: 600; line-height: 1.55 !important; text-align: left; box-shadow: 0 10px 24px rgba(8,120,201,.1); }
.form_success::before { position: absolute; left: 20px; top: 21px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #10b6c9; color: #fff; content: '✓'; font-size: 17px; font-weight: 900; }
.form_success h3 { margin: 8px 0 0; color: #245b86; font-size: 16px; line-height: 1.5; }

@media screen and (max-width: 767px) {
  div.success { width: calc(100% - 24px); margin: 0 12px 12px; padding: 11px 12px; font-size: 14px; }
  .form_success { width: calc(100% - 24px); margin: 0 12px; padding: 18px 16px 18px 52px !important; font-size: 14px !important; }
  .form_success::before { left: 17px; top: 19px; }
  .form_success h3 { font-size: 15px; }
}

/* Mobile navigation: section labels followed by all their options. */
@media screen and (max-width: 767px) {
  .content_text:not(.promociones):not(.wide) .box_content ul {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
    list-style: none !important;
  }
  .content_text:not(.promociones):not(.wide) .box_content ul li {
    position: relative;
    margin-left: 0 !important;
    padding: 3px 0 3px 18px !important;
    background-image: none !important;
    list-style: none !important;
  }
  .content_text:not(.promociones):not(.wide) .box_content ul li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: calc(.725em + 1px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #10a8c2;
  }
}

@media screen and (max-width: 767px) {
  #site-navigation { margin-top:6px; background:#fff; border:1px solid #dce8f2; border-radius:12px; }
  #site-navigation > ul { display: flex; flex-direction: column; gap:0; margin:0; padding:2px 4px; }
  #site-navigation > ul > li#clientes { order: 2; }
  #site-navigation > ul > li#internet { order: 1; }
  #site-navigation > ul > li#info_util { order: 3; }
  #site-navigation > ul > li[rel='promociones'] { order: 4; }
  #site-navigation > ul > li[rel='contacto'] { order: 5; }
  #site-navigation > ul > li#institucional { order: 6; }
  #site-navigation > ul > li,
  #site-navigation > ul > li[id] { display: block; width: 100%; min-height: 0; padding: 5px 8px 2px; border: 0; border-bottom:1px solid #e7f0f6; border-radius: 0; background: #fff; color: #58768b !important; font-family:Inter,Arial,Helvetica,sans-serif; font-size: 11px; font-weight:700; line-height: 1.15; letter-spacing:.025em; text-align: left; cursor: default; }
  #site-navigation > ul > li::after { content: none !important; display: none !important; }
  #site-navigation > ul > li > div.submenu { display: block !important; position: static; width: 100%; max-width: none; max-height: none; height: auto !important; margin: 1px 0 0; padding: 0; overflow: visible; opacity: 1 !important; visibility: visible; border: 0; border-radius: 0; box-shadow: none; }
  #site-navigation .submenu ul { display: block; width: 100%; margin: 0; padding: 0; }
  #site-navigation .submenu ul li { display: flex; align-items:center; float: none; width: 100%; min-height: 28px; margin: 0; padding: 4px 10px; border: 0; border-radius: 6px; background: #fff; color: #07518c !important; font-family:Inter,Arial,Helvetica,sans-serif; font-size: 14px; font-weight:400; line-height: 1.2; letter-spacing:0; text-align: left; white-space: normal; cursor: pointer; }
  #site-navigation > ul > li[rel] { display: flex; align-items:center; justify-content:flex-start; padding: 4px 18px; min-height: 28px; color: #07518c !important; font-size: 14px; font-weight:600; line-height:1.2; letter-spacing:0; text-align:left; cursor: pointer; }
  #site-navigation .submenu ul li:hover,
  #site-navigation > ul > li[rel]:hover { background: #edf8fc; }
}