/* ======================================================================
   FULLTENT - Visual system
   Shared refinements for the public site.
   ====================================================================== */

:root {
    --primary: #123653;
    --primary-light: #1e567e;
    --primary-dark: #0b2439;
    --accent: #e29a32;
    --accent-dark: #bd7620;
    --ink: #172b3a;
    --muted: #607384;
    --surface: #ffffff;
    --surface-soft: #f3f6f8;
    --line: #dce5eb;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max-w: 1240px;
    --pad: clamp(1.25rem, 3vw, 2rem);
    --r-md: 0.625rem;
    --r-lg: 1rem;
    --r-xl: 1.25rem;
    --sh-card: 0 12px 34px rgba(15, 39, 61, 0.09);
    --sh-card-hover: 0 20px 42px rgba(15, 39, 61, 0.16);
}

html { background: var(--surface-soft); }

body {
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -0.025em; }
p { color: var(--muted); }

.header-spacer { height: 90px; }

.header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(220, 229, 235, 0.9);
    box-shadow: 0 8px 28px rgba(15, 39, 61, 0.08);
    backdrop-filter: blur(14px);
}

.header__container { max-width: 1320px; height: 90px; padding: 0 var(--pad); gap: 1.25rem; }
.header__logo { flex: 0 0 auto; margin-right: auto; }
.header__logo img { width: 156px; height: auto; max-height: 58px; object-fit: contain; }
.header__nav > ul { gap: 0.1rem; }
.header__nav a {
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    padding: 0.65rem 0.6rem;
    border-radius: 0.45rem;
}
.header__nav a:hover, .header__nav a.active { background: #edf4f8; color: var(--primary); }
.header__nav .has-dropdown > .header__dropdown {
    top: calc(100% + 0.55rem);
    min-width: 250px;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: var(--sh-card-hover);
}
.header__nav .has-dropdown > .header__dropdown::before {
    content: '';
    position: absolute;
    top: -0.55rem;
    left: 1.5rem;
    width: 1rem;
    height: 1rem;
    background: var(--surface);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.header__nav .has-dropdown > .header__dropdown a { padding: 0.7rem 0.85rem; font-size: 0.78rem; letter-spacing: 0; }
.header__nav .has-dropdown > .header__dropdown a:hover { background: #edf4f8 !important; color: var(--primary) !important; }
.header__dropdown-heading {
    padding: 0.55rem 0.85rem 0.25rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}
.header__cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.header__cta:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

.hero { min-height: min(720px, 78vh); background: var(--primary-dark); }
.hero.hero--sm { min-height: 430px; padding-top: 0; }
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 29, 47, 0.82) 0%, rgba(8, 29, 47, 0.55) 48%, rgba(8, 29, 47, 0.28) 100%);
}
.hero__overlay { display: none; }
.hero__bg { opacity: 1; filter: saturate(0.86) contrast(1.04); }
.hero__content { max-width: var(--max-w); padding: 5rem var(--pad); }
.hero__title { max-width: 820px; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -0.045em; }
.hero--sm .hero__title { max-width: 760px; font-size: clamp(2.2rem, 4vw, 3.65rem); }
.hero__text, .hero__subtitle { max-width: 680px; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7; }

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--gray { background: var(--surface-soft); }
.section__header { max-width: 740px; margin: 0 auto clamp(2.25rem, 5vw, 3.75rem); }
.section__title { font-size: clamp(1.85rem, 3.5vw, 2.9rem); line-height: 1.1; color: var(--primary); }
.section__subtitle { color: var(--muted); }

.cards-grid { gap: clamp(1.25rem, 2.5vw, 2rem); }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover); }
.card__icon { margin: 0; border-radius: 0; }
.card:has(.card__icon img) .card__icon { width: 100%; height: 220px; background: var(--surface-soft); }
.card__icon img { width: 100%; height: 100%; object-fit: cover; }
.card__content { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 1.5rem 1.5rem 1.75rem; }
.card__title { width: 100%; font-size: 1.08rem; line-height: 1.25; }
.card__text { width: 100%; line-height: 1.65; }
.card__content .btn { margin-top: auto; }

/* Venta: iconografía y alineación de las secciones comerciales */
.venta-process-grid .process-item,
.venta-benefits-grid .card {
    text-align: center;
}
.venta-process-grid .process-item__icon,
.venta-benefit__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 8px 20px rgba(226, 154, 50, .28);
}
.venta-benefits-grid .card__content {
    text-align: center;
}
.venta-benefits-grid .card__title,
.venta-benefits-grid .card__text {
    text-align: center;
}
.venta-markets-row {
    justify-content: center;
}
.btn { border-radius: 999px; padding: 0.78rem 1.35rem; font-weight: 700; }
.btn--outline { border-width: 1px; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.info-block { gap: clamp(2rem, 6vw, 5.5rem); }
.info-block__content { max-width: 580px; }
.info-block__title { font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.12; }
.info-block__text { font-size: 1.05rem; line-height: 1.8; }
.info-block__image { min-width: 0; }
.info-block__image img { width: 100%; max-width: none; height: clamp(280px, 32vw, 430px); object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-card); }

.gallery-grid { gap: 1rem; }
.gallery-grid .gallery-item {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: var(--r-lg);
    overflow: hidden !important;
    box-shadow: var(--sh-card);
    cursor: zoom-in;
}
.gallery-grid .gallery-item img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center;
}
.gallery-item::after {
    content: '🔍  Ver en grande';
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(8, 29, 47, 0.82);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(0.35rem);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.gallery-item:hover::after,
.gallery-item:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}
.gallery-item:hover img,
.gallery-item:focus-within img { transform: scale(1.04); }
.markets-row { gap: 0.75rem; justify-content: space-between; }
.market-item { min-width: 115px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.market-item:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.market-item img { width: 58px; height: 58px; }

.cta-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.cta-section__title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }

.footer { background: #0b2237; }
.footer__main { padding: clamp(3.5rem, 7vw, 5.5rem) 0 3rem; }
.footer__inner { width: min(100% - 2 * var(--pad), 1240px); padding: 0; }
.footer__bar { background: #071a2a; }

@media (max-width: 1180px) {
    .header__nav a { padding-inline: 0.42rem; font-size: 0.64rem; }
    .header__cta { padding-inline: 0.8rem; font-size: 0.7rem; }
}

@media (max-width: 900px) {
    .header-spacer { height: 65px; }
    .header__container { height: 65px; }
    .header__logo img { width: 125px; max-height: 42px; }
    .header__cta { display: none; }
    .mobile-nav { top: 65px; border-top: 1px solid var(--line); }
    .mobile-nav a { color: var(--primary); padding: 0.95rem var(--pad); letter-spacing: .04em; }
    .mobile-nav .header__dropdown { background: var(--surface-soft); }
    .mobile-nav .header__dropdown-heading { padding: 0.8rem var(--pad) 0.3rem; }
    .hero { min-height: 650px; }
    .hero.hero--sm { min-height: 360px; }
    .hero__content { padding: 4rem var(--pad); }
}

@media (max-width: 768px) {
    .hero__title, .hero--sm .hero__title { font-size: clamp(2rem, 10vw, 3rem); }
    .hero::after { background: linear-gradient(90deg, rgba(8, 29, 47, .84), rgba(8, 29, 47, .55)); }
    .cards-grid { grid-template-columns: 1fr !important; }
    .card:has(.card__icon img) .card__icon { height: 205px; }
    .info-block, .info-block--reverse { gap: 2rem; }
    .info-block__image { width: 100%; }
    .info-block__image img { height: 260px; }
    .markets-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-item { min-width: 0; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .footer__inner { grid-template-columns: 1fr !important; gap: 2rem; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr !important; }
    .hero.hero--sm { min-height: 330px; }
}