.popular-domains .plans-title{
    font-size: 28px;
}
.free-services li span::after{
    background: #FF5757;
}
.availability, .btnentrarlogin{
    background: #FF5757;
    border: 2px solid #FF5757;
}
.hero-banner{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar-nav > li:hover > a, 
.navbar-nav > li.active > a, 
.menu-lavel-1 > li > a:hover,
a:hover{
    color: #FF5757;
}
.carousel-indicators {
    top: -20px;
}
.carousel-indicators li{
    background-color: #e4e2e1;
    border: 1px solid #e4e2e1;
}
.carousel-indicators .active{
    background-color: #FF5757;
}

/* ── Barra rapida movil (Productos + Panel Revendedores + hamburguesa) ────── */
.mobile-quick-nav{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}
.mobile-quick-nav .mobile-quick-link{
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    font-size: 14px;
}
.mobile-quick-nav .btn{
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 12px;
}
.mobile-hamburger{
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 6px 8px;
    margin: 0;
}
.mobile-hamburger .icon-bar{
    display: block;
    width: 18px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 1px;
}
.mobile-hamburger .icon-bar + .icon-bar{
    margin-top: 3px;
}
#mobile-menu-extra{
    margin-top: 12px;
}
/* #mobile-menu-extra-wrap solo debe existir/mostrarse en movil y tablet
   (<992px, mismo rango que .mobile-quick-nav); a diferencia de la utilidad
   "visible-xs-block"/"visible-sm-block" de Bootstrap (que usa !important y
   pisaria el display:none de .collapse), esta regla normal conserva el
   collapse/expand del boton hamburguesa en esas pantallas. */
@media (min-width: 992px){
    #mobile-menu-extra-wrap{ display: none; }
}
.mobile-extra-list{
    list-style: none;
    padding: 8px 0 4px;
    margin: 0;
    border-top: 1px solid #eee;
}
.mobile-extra-list > li > a{
    display: block;
    padding: 10px 5px;
    color: #1a1a1a;
    font-weight: 600;
}
.mobile-extra-productos .mobile-extra-label{
    display: block;
    padding: 10px 5px 2px;
    font-weight: 700;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
}
.mobile-extra-productos ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-extra-productos ul li a{
    display: block;
    padding: 6px 15px;
    color: #1a1a1a;
}

/* ── Footer: columnas de enlaces (Legal, Revendedores, etc.) ─────────────── */
.footer h5{
    color: #fff;
    font-weight: 700;
    margin: 20px 0 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.footer-links{
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li a{
    color: #bbb;
    display: inline-block;
    padding: 4px 0;
}
.footer-links li a:hover{
    color: #ffedad;
}

/* ── Migas de pan ──────────────────────────────────────────────────────── */
.breadcrumbs-nav{
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
}
.breadcrumbs-nav .breadcrumb > li + li::before{
    content: "/";
    padding: 0 8px;
    color: #ccc;
}
.breadcrumbs-nav a{
    color: #555;
}
.breadcrumbs-nav .active{
    color: #999;
}

/* ── Imagenes de tarjetas de producto/articulo mas grandes y nitidas ──────── */
.card-media{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}
@media (min-width: 768px){
    .card-media{ height: 220px; }
}

/* ============================================================================
   REDISENO 2026 — capa de estilo profesional sobre el theme Bootstrap 3
   Paleta base tomada del logotipo (coral + negro), con acentos de violeta y
   ambar para dar variedad y "movimiento" a las secciones, en la linea de
   sitios de reventa/hosting como resellerclub.com.
   ============================================================================ */
:root{
    --brand: #FF5757;
    --brand-dark: #E23F3F;
    --accent-violet: #7C5CFF;
    --accent-amber: #FFB020;
    --ink: #191d27;
    --ink-soft: #262626;
    --surface: #f7f8fb;
    --surface-border: #ecedf3;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header{
    background:#fff;
    box-shadow: 0 2px 16px rgba(20,20,35,.07);
    position: relative;
    z-index: 200;
}
.header .navbar-nav > li{
    position: relative;
}
.header .navbar-nav > li > a{
    letter-spacing: .01em;
    position: relative;
}
.header .navbar-nav > li > a::after{
    content:"";
    position:absolute;
    left:16px; right:16px; bottom:8px;
    height:2px;
    background: linear-gradient(90deg, var(--brand), var(--accent-violet));
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .2s ease;
}
.header .navbar-nav > li:hover > a::after,
.header .navbar-nav > li.active > a::after{
    transform: scaleX(1);
}
.header .btn.btn-default{
    background: var(--ink);
    border-color: var(--ink);
    color:#fff;
    font-weight:700;
    border-radius:7px;
    padding:10px 20px;
    letter-spacing:.01em;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.header .btn.btn-default:hover{
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,87,87,.35);
    color:#fff;
}
.menu-lavel-1{
    border-top: 3px solid var(--brand);
}

/* Header en una sola fila: logo | nav | CTA — sin filas apiladas ni
   espacio vertical desperdiciado. Solo se recorta el padding original
   (25px/20px) en sm+ para no dejarlo apretado en movil, donde el propio
   boton hamburguesa (36px) ya necesita algo de aire arriba/abajo. */
.header.padding-top25.padding-bottom20{
    padding-top:18px;
    padding-bottom:16px;
}
@media (min-width: 768px){
    .header.padding-top25.padding-bottom20{
        padding-top:14px;
        padding-bottom:14px;
    }
}
.header .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header-nav-col{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
}
.header-nav-col .navbar{
    float:none;
    margin:0;
}
.header-nav-col .navbar-nav{
    display:flex;
    align-items:center;
    margin:0;
}
.header-nav-col .navbar-nav > li{
    flex-shrink:0;
}
.header .navbar-nav > li > a{
    padding:8px 12px;
    white-space:nowrap;
}
/* La flecha del dropdown "Productos" es un background-image con
   padding-right:22px (style.css); nuestro padding generico de arriba lo
   pisaba y la dejaba pegada al texto. Se restaura solo para ese link. */
.header .navbar-nav > li > a.xs-arrow{
    padding-right:26px;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex:0 0 auto;
}
.header-actions .btn.btn-default{
    padding:9px 18px;
    white-space:nowrap;
}

/* Barra rapida movil y tablet: CTA + hamburguesa grande y evidente, con
   aire real entre ambos y respecto al borde superior. OJO: sin
   display:flex aca el boton y la hamburguesa caen en flujo normal
   (bloque) y se apilan en pantallas angostas — es la causa del bug "se
   ven pegados". Rango <992px: mismo que .mobile-quick-nav/header-nav-col
   (a partir de md el header vuelve al nav completo de escritorio). */
@media (max-width: 991px){
    .header .row > .col-xs-6:not(.mobile-quick-nav){
        flex:0 0 auto;
        width:auto;
        max-width:55%;
    }
    .header .row > .mobile-quick-nav.col-xs-6{
        flex:1 1 auto;
        width:auto;
        max-width:none;
    }
}
/* !important porque Bootstrap's .visible-xs-block/.visible-sm-block (que
   este elemento tambien lleva, para mostrarse en <992px) fuerzan
   "display:block !important" — sin ganarles con !important aca, el flex
   nunca se aplicaba de verdad y el boton + hamburguesa quedaban como
   inline-block sueltos, pasando a la linea de abajo en cuanto no entraban
   uno junto al otro. Esa era la causa real del bug, no un problema de
   cache ni de breakpoint.
   OJO: tiene que ir dentro de max-width:991px. Bootstrap tambien pone
   ".visible-xs-block/.visible-sm-block{display:none !important}" como
   regla BASE (fuera de su media query) para ocultarlo en md+; un
   "!important" nuestro sin acotar le gana a esa regla a CUALQUIER ancho
   y el bloque movil quedaba visible incluso en desktop, superpuesto al
   nav completo (regression ya detectada y corregida). */
@media (max-width: 991px){
    .mobile-quick-nav{
        display:flex !important;
        justify-content:flex-end;
        align-items:center;
        gap:8px;
    }
}
.mobile-quick-nav .btn{
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    color:#fff;
    font-weight:700;
    border-radius:7px;
    padding:7px 10px;
    font-size:12px;
    white-space:nowrap;
    box-shadow: 0 4px 12px rgba(255,87,87,.3);
    line-height:1.4;
}
/* Telefonos angostos: el logo a su ancho nativo (180px) le deja muy poco
   sitio al boton + hamburguesa y el conjunto se sale de la pantalla por
   la derecha (aunque siguieran en la misma fila). Se achica el logo para
   liberar espacio real. */
@media (max-width: 400px){
    .header .logo img{
        max-width:112px;
    }
    .mobile-quick-nav{
        gap:6px;
    }
    .mobile-quick-nav .btn{
        font-size:11px;
        padding:6px 9px;
    }
}
@media (max-width: 340px){
    .header .logo img{
        max-width:106px;
    }
    .mobile-quick-nav{
        gap:6px;
    }
    .mobile-quick-nav .btn{
        font-size:11px;
        padding:7px 10px;
    }
    /* En vez de seguir encogiendo el logo o la letra, en telefonos muy
       angostos el CTA queda como "Panel" a secas (el texto completo sigue
       en el DOM para lectores de pantalla). */
    .mobile-quick-nav .btn .btn-label-full{
        display:none;
    }
}
.mobile-hamburger{
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius:8px;
    width:42px;
    height:36px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    transition: background .2s ease, transform .2s ease;
}
.mobile-hamburger:active{ transform: scale(.94); }
.mobile-hamburger .icon-bar{
    width:20px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition: transform .2s ease, opacity .2s ease;
}
.mobile-hamburger[aria-expanded="true"]{
    background: var(--brand);
    border-color: var(--brand);
}
.mobile-hamburger[aria-expanded="true"] .icon-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mobile-hamburger[aria-expanded="true"] .icon-bar:nth-child(2){ opacity:0; }
.mobile-hamburger[aria-expanded="true"] .icon-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

#mobile-menu-extra-wrap{
    margin-top:10px;
}
#mobile-menu-extra{
    background:#fff;
    border-radius:12px;
    box-shadow: 0 12px 32px rgba(20,20,35,.16);
    border:1px solid var(--surface-border);
    padding:2px 16px;
}
.mobile-extra-list{
    border-top:0;
    padding:6px 0;
}
.mobile-extra-list > li{
    border-bottom:1px solid var(--surface-border);
}
.mobile-extra-list > li:last-child{
    border-bottom:0;
}
.mobile-extra-list > li > a{
    font-size:15px;
    padding:12px 6px;
}
.mobile-extra-productos > a.mobile-extra-label{
    display:block;
    padding:12px 6px 4px;
    font-weight:700;
    color: var(--ink);
    text-transform:none;
}
.mobile-extra-productos ul li a{
    color: var(--ink-soft);
}
.mobile-extra-whatsapp a{
    color: var(--brand) !important;
    font-weight:700;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero-banner{
    position:relative;
    overflow:hidden;
}
.hero-banner::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(60% 50% at 15% 20%, rgba(124,92,255,.35) 0%, rgba(124,92,255,0) 60%),
      radial-gradient(55% 45% at 85% 80%, rgba(255,176,32,.28) 0%, rgba(255,176,32,0) 60%),
      linear-gradient(135deg, rgba(16,18,28,.94) 0%, rgba(20,22,34,.86) 45%, rgba(226,63,63,.55) 130%);
    animation: heroDrift 14s ease-in-out infinite alternate;
}
@keyframes heroDrift{
    from{ transform: scale(1) translate(0,0); }
    to{ transform: scale(1.06) translate(-1%, 1%); }
}
.hero-banner .container{
    position:relative;
    z-index:2;
}
.hero-banner h1{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hero-banner .tag-line{
    display:block;
    text-align:center;
    color:#f2f2f5;
    font-size:18px;
    max-width:640px;
    margin:14px auto 0;
}
.hosting-availability-board{
    background:#fff;
    border-radius:14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    padding:14px;
}
/* El input (68% via style.css) + boton (ancho de contenido) no sumaban
   100%, dejando un hueco vacio a la derecha dentro de la tarjeta blanca.
   Con flex el input ocupa todo el espacio sobrante y el boton queda
   pegado al borde derecho de la tarjeta. */
.hosting-availability-board form{
    display:flex;
}
.hosting-availability-board .form-control{
    border-radius:8px 0 0 8px;
    flex:1 1 auto;
    width:auto;
    float:none;
}
.availability{
    flex:0 0 auto;
    float:none;
    border-radius:0 8px 8px 0 !important;
    font-weight:700;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
    border-color: transparent !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.availability:hover{
    box-shadow: 0 10px 24px rgba(255,87,87,.45);
    transform: translateY(-1px);
}

/* En movil el input (ancho minimo por su placeholder largo) + boton no
   entran en pantallas angostas y se salian de la tarjeta. Mas simple y
   mas usable en movil: un solo boton grande de "Registrate gratis" que
   lleva a /registro; el input de correo se mantiene en tablet/desktop. */
@media (max-width: 767px){
    .hosting-availability-board .form-control{
        display:none;
    }
    .availability{
        width:100%;
        border-radius:8px !important;
        padding:14px 15px;
    }
}

.free-services{
    padding-top:34px;
}
.free-services li span{
    padding:0;
}
.free-services li a{
    display:inline-block;
    color:#fff;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.28);
    border-radius:30px;
    padding:9px 18px;
    font-size:14px;
    font-weight:500;
    transition: background .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.free-services li a:hover{
    background: linear-gradient(90deg, var(--brand), var(--accent-violet));
    border-color: transparent;
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.3);
}
.free-services li span::after{
    display:none;
}

/* ── Video destacado ───────────────────────────────────────────────────── */
.container.margin-bottom30 > div[style*="padding:56.25%"]{
    border-radius:16px;
    overflow:hidden;
    box-shadow: 0 20px 50px rgba(20,20,35,.18);
    background: var(--ink);
}

/* ── Secciones y encabezados ───────────────────────────────────────────── */
.popular-domains h2,
.page-section-heading{
    position:relative;
    font-weight:800;
    color: var(--ink);
    margin-bottom:16px;
}
.popular-domains h2::after,
.page-section-heading::after{
    content:"";
    display:block;
    width:64px;
    height:4px;
    background: linear-gradient(90deg, var(--brand), var(--accent-violet));
    margin:16px auto 0;
    border-radius:4px;
}

/* Tarjetas "3 pasos": circulo de icono con acento de color rotativo */
.popular-domains .plans-details{
    background:#fff;
    border-radius:14px;
    border:1px solid var(--surface-border) !important;
    box-shadow: 0 10px 30px rgba(20,20,35,.06);
    padding:30px 26px 26px;
    height:100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.popular-domains .plans-details:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(20,20,35,.12);
}
.popular-domains .plans-header{
    padding:0;
    margin-bottom:10px;
}
.popular-domains .plans-title .headingBr{
    font-size:19px;
    font-weight:700;
    color: var(--ink);
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.popular-domains .plans-title .fa{
    width:42px;
    height:42px;
    min-width:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:18px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.margin-bottom30:nth-of-type(2) .plans-title .fa{
    background: linear-gradient(135deg, var(--accent-violet), #5b3fe0);
}
.margin-bottom30:nth-of-type(3) .plans-title .fa{
    background: linear-gradient(135deg, var(--accent-amber), #e08e00);
}
.popular-domains .plans-offers p{
    color: var(--ink-soft);
    font-size:15px;
    line-height:1.65;
}

/* Tarjetas de recursos/articulos */
.popular-domains .panel{
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--surface-border);
    box-shadow: 0 10px 30px rgba(20,20,35,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.popular-domains .panel:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(20,20,35,.12);
}
.popular-domains .panel-body h4{
    color: var(--ink);
    font-weight:700;
    font-size:17px;
}
.popular-domains .panel-body p,
.popular-domains .panel-body div{
    color: var(--ink-soft);
}
.popular-domains .panel-body a{
    color: var(--brand);
    font-weight:700;
}

/* Tarjetas de FAQ con acento lateral de color */
.popular-domains .row > div.margin-bottom30:has(> h4){
    background:#fff;
    border:1px solid var(--surface-border);
    border-left:4px solid var(--brand);
    border-radius:10px;
    padding:22px 24px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.popular-domains .row > div.margin-bottom30:has(> h4):hover{
    box-shadow: 0 14px 32px rgba(20,20,35,.08);
    transform: translateY(-3px);
}
.popular-domains .row > div.margin-bottom30:has(> h4):nth-of-type(2n){
    border-left-color: var(--accent-violet);
}
.popular-domains .row > div.margin-bottom30:has(> h4) h4{
    color: var(--ink);
    font-weight:700;
    font-size:17px;
    margin-bottom:8px;
}
.popular-domains .row > div.margin-bottom30:has(> h4) p{
    color: var(--ink-soft);
    margin:0;
}

/* Paises: iconos con acento de color */
.popular-domains .fa-flag{
    color: var(--brand);
    font-size:22px;
}

/* ── Barra de contacto sobre el footer ─────────────────────────────────── */
.toll-free-support{
    background: var(--ink);
    padding:22px 0;
}
.toll-free-support p{
    color:#f2f2f5;
    font-size:15px;
    margin:0;
    text-align:center;
}
.toll-free-support a{
    color: var(--brand);
    font-weight:700;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{
    background: linear-gradient(180deg, #1c1c1e 0%, #141416 100%);
    padding-top:36px;
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--brand), var(--accent-violet), var(--accent-amber)) 1;
}
.footer h5{
    position:relative;
    padding-bottom:10px;
    margin-bottom:14px;
}
.footer h5::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:32px; height:3px;
    background: var(--brand);
    border-radius:3px;
}
.footer-links li a{
    color:#d7d7dc;
    font-size:14px;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-links li a:hover{
    color:#fff;
    padding-left:4px;
}
.footer .copyright-mark{
    color:#9b9ba3;
}
.footer .copyright-mark a{
    color:#d7d7dc;
}

/* ── Paginacion del blog ───────────────────────────────────────────────── */
.blog-pagination{
    display:flex;
    justify-content:center;
    margin-top:10px;
}
.blog-pagination .pagination{
    display:flex;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}
.blog-pagination .pagination li a,
.blog-pagination .pagination li span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 10px;
    border-radius:8px;
    border:1px solid var(--surface-border);
    color: var(--ink);
    font-weight:700;
    background:#fff;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-pagination .pagination li a:hover{
    background: var(--surface);
    border-color: var(--brand);
    color: var(--brand);
}
/* ── "Gana mas del 100%" (pagina Inversion) ───────────────────────────── */
.margin-intro{
    max-width:760px;
    margin:0 auto 30px;
    color: var(--ink-soft);
}
.stat-card{
    text-align:center;
    padding-top:36px;
}
.stat-number{
    font-size:52px;
    font-weight:900;
    line-height:1;
    margin-bottom:14px;
    background: linear-gradient(90deg, var(--brand), var(--accent-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-card p{
    color: var(--ink-soft);
    font-size:15px;
    line-height:1.6;
}

.blog-pagination .pagination li.active span{
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    color:#fff;
}

/* ── Botones primarios (usados en Precios, Nosotros, Registro, etc.) ─────── */
.btn-primary{
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    font-weight:700;
    border-radius:8px;
    box-shadow: 0 8px 20px rgba(255,87,87,.28);
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(255,87,87,.4);
    transform: translateY(-1px);
    color:#fff;
}

/* ── Intro de paginas internas (Precios, Nosotros, Contacto, Productos,
   Registro, ficha de producto...) — mismo tratamiento vivo que el hero de
   inicio, en vez de un bloque de texto plano sobre gris. Se aplica a todas
   sin tocar cada plantilla porque comparten exactamente esta combinacion
   de clases. ─────────────────────────────────────────────────────────── */
.light-bg.padding-120t-100b{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(55% 65% at 12% 20%, rgba(124,92,255,.35) 0%, rgba(124,92,255,0) 60%),
      radial-gradient(50% 55% at 90% 85%, rgba(255,176,32,.3) 0%, rgba(255,176,32,0) 60%),
      linear-gradient(135deg, #14151f 0%, #1b1c2c 45%, rgba(226,63,63,.55) 130%);
    padding-top:84px;
    padding-bottom:64px;
}
.light-bg.padding-120t-100b::before,
.light-bg.padding-120t-100b::after{
    content:"\f005";
    font-family:"FontAwesome";
    position:absolute;
    font-size:170px;
    color:rgba(255,255,255,.06);
    pointer-events:none;
    line-height:1;
}
.light-bg.padding-120t-100b::before{
    top:-36px;
    right:6%;
    transform:rotate(14deg);
}
.light-bg.padding-120t-100b::after{
    content:"\f135";
    bottom:-46px;
    left:4%;
    font-size:150px;
    transform:rotate(-10deg);
}
.light-bg.padding-120t-100b .container{
    position:relative;
    z-index:2;
}
.light-bg.padding-120t-100b h1{
    color:#fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.light-bg.padding-120t-100b p{
    color:#e6e6ee;
}
.light-bg.padding-120t-100b .btn-primary{
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* La barra de migas de pan queda justo encima de este bloque oscuro:
   se oscurece tambien para que la transicion no sea un salto brusco. */
.breadcrumbs-nav{
    background:#fff;
    border-bottom:0;
}
.breadcrumbs-nav a{
    color: var(--ink-soft);
    font-weight:600;
}
.breadcrumbs-nav .active{
    color:#9a9fac;
}

/* ── Inputs del formulario de Registro ────────────────────────────────────
   .form-control del theme viene con border:0 (style.css) — pensado para
   fondos con color donde el input blanco ya resalta solo; acá el formulario
   esta sobre un panel blanco y quedaban practicamente invisibles. */
.form-registro .form-control{
    border:1px solid #d5d7dd;
    border-radius:6px;
    height:46px;
    padding:10px 14px;
    font-size:15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-registro textarea.form-control{
    height:auto;
}
.form-registro .form-control:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(255,87,87,.15);
}

/* ── Campo de clave con icono de ojo (mostrar/ocultar) ───────────────────── */
.password-field{
    position:relative;
}
.password-field .form-control{
    padding-right:40px;
}
.password-field .toggle-password{
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:100%;
    border:0;
    background:transparent;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#999;
    cursor:pointer;
}
.password-field .toggle-password:hover,
.password-field .toggle-password:focus{
    color: var(--brand);
    outline:none;
}

/* ── Checkbox de Terminos y Condiciones (registro) ─────────────────────── */
.checkbox-terms label{
    padding-left:30px;
    font-size:16px;
    line-height:1.5;
}
.checkbox-terms input[type="checkbox"]{
    width:20px;
    height:20px;
    margin-left:-30px;
    margin-top:2px;
}
.checkbox-terms a{
    font-weight:700;
}