/* ============================================================
   IMPLATEC - Distribuidoras
   ============================================================
   Implatec no fabrica: representa. Esta página existe porque la marca es
   la primera decisión del visitante —un ortodoncista y un periodoncista
   no comparten ni una categoría— y en la portada solo cabía un resumen.

   Cada tarjeta se pinta con el color de SU marca, que viene de la base
   en la variable --marca. No hay ni un hexadecimal por marca escrito
   aquí: si lo hubiera, una distribuidora nueva saldría en gris. */

/* ---- Portada -------------------------------------------------- */
.dhero {
    position: relative;
    padding: 118px 0 56px;
    background:
        radial-gradient(110% 90% at 88% 8%, #E6EFFD 0%, transparent 58%),
        linear-gradient(170deg, #FBFDFF 0%, #EFF5FF 100%);
    overflow: hidden;
}

.dhero__row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.6rem;
    align-items: center;
}

.dhero__txt h1 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--secondary);
}
/* El nombre de la sección en azul y en su propia línea, como el titular
   de la pantalla de acceso: la misma familia visual en todo el sitio. */
.dhero__txt h1 em { display: block; font-style: normal; color: var(--primary); }

.dhero__txt > p {
    margin-top: 1rem;
    max-width: 27rem;
    color: var(--text-medium);
    font-size: 0.94rem;
    line-height: 1.7;
}

.dhero__feats {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.9rem;
    max-width: 25rem;
}
.dfeat { display: flex; align-items: flex-start; gap: 0.85rem; }
.dfeat > i {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff;
    color: var(--primary);
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(20, 62, 140, 0.10);
}
.dfeat b { display: block; font-size: 0.9rem; color: var(--secondary); }
.dfeat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-medium);
}

.dhero__shot {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    /* La proporción del archivo, para reservar el alto antes de que cargue
       y que el titular no dé un salto. */
    aspect-ratio: 1120 / 747;
}
.dhero__shot::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 4%;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 62, 140, 0.16), transparent 74%);
    filter: blur(8px);
}
.dhero__shot img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* ---- Cabecera de sección --------------------------------------- */
.dmarcas { padding: 68px 0 20px; background: #fff; }

.dhead { max-width: 44rem; margin: 0 auto 2.6rem; text-align: center; }
.dhead h2 {
    position: relative;
    padding-bottom: 0.9rem;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--secondary);
}
/* Subrayado corto centrado bajo el título */
.dhead h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 54px;
    height: 3px;
    border-radius: 100px;
    background: var(--primary);
}
.dhead p {
    margin-top: 0.9rem;
    color: var(--text-medium);
    font-size: 0.93rem;
    line-height: 1.7;
}

/* ---- Tarjeta de marca ------------------------------------------- */
.dmarcas__lista { display: grid; gap: 1.6rem; }

.dmarca {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    /* El fondo se tiñe con el color de la marca, muy diluido. Con dos
       líneas que no se parecen en nada, el color es lo que separa una
       tarjeta de la otra antes de leer una sola palabra. */
    background: color-mix(in srgb, var(--marca, #0b5fae) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--marca, #0b5fae) 14%, #fff);
}

.dmarca__media {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 2rem;
    background: color-mix(in srgb, var(--marca, #0b5fae) 9%, #fff);
}
.dmarca__media img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
}
/* Respaldo cuando no hay ni composición ni logo subido: el icono de la
   marca, grande y en su color. Nunca queda un hueco en blanco. */
.dmarca__icono { font-size: 4.6rem; color: color-mix(in srgb, var(--marca, #0b5fae) 45%, #fff); }

.dmarca__txt { padding: 2.2rem 2.4rem; align-self: center; }

.dmarca__cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.dmarca__cab h3 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--marca, var(--secondary));
}
.dmarca__pill {
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    background: color-mix(in srgb, var(--marca, #0b5fae) 13%, #fff);
    color: var(--marca, var(--primary));
    font-size: 0.76rem;
    font-weight: 600;
}

.dmarca__claim {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.45;
}
.dmarca__desc {
    margin-top: 0.6rem;
    font-size: 0.89rem;
    line-height: 1.7;
    color: var(--text-medium);
}

.dmarca__lista {
    display: grid;
    gap: 0.6rem;
    margin: 1.3rem 0 1.6rem;
    list-style: none;
    padding: 0;
}
.dmarca__lista li { display: flex; align-items: flex-start; gap: 0.6rem; }
.dmarca__lista i { margin-top: 3px; color: var(--marca, var(--primary)); font-size: 0.86rem; }
.dmarca__lista b {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--secondary);
}
.dmarca__lista small {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-medium);
}

.dmarca__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.dmarca__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 1.4rem;
    border: 1.5px solid var(--marca, var(--primary));
    border-radius: 100px;
    background: #fff;
    color: var(--marca, var(--primary));
    font-size: 0.88rem;
    font-weight: 600;
    transition: var(--transition);
}
.dmarca__btn:hover { background: var(--marca, var(--primary)); color: #fff; }
.dmarca__btn i { font-size: 0.78rem; transition: var(--transition); }
.dmarca__btn:hover i { transform: translateX(3px); }

.dmarca__web {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-medium);
}
.dmarca__web:hover { color: var(--marca, var(--primary)); }
.dmarca__web i { font-size: 0.72rem; }

.dmarcas__vacio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-medium);
}

/* Esqueleto de carga. Reserva la altura de una tarjeta real para que la
   página no salte cuando llegan los datos. */
.dmarca--sk { pointer-events: none; --marca: #dbe6f7; }
.dmarca--sk .gsk { display: block; border-radius: 8px; }
.dmarca--sk .dmarca__media .gsk { width: 60%; height: 200px; }

/* ---- Compromiso -------------------------------------------------- */
.dcomp { padding: 44px 0 0; background: #fff; }
.dcomp__caja {
    padding: 2.4rem 2rem;
    border-radius: 22px;
    background: linear-gradient(150deg, #F5F9FF, #EDF3FE);
}
.dcomp__caja h2 {
    margin-bottom: 2rem;
    text-align: center;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--secondary);
}
.dcomp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.6rem;
}
.dcomp-item { text-align: center; }
.dcomp-item > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 0.85rem;
    border-radius: 15px;
    background: #fff;
    color: var(--primary);
    font-size: 1.15rem;
    box-shadow: 0 5px 16px rgba(20, 62, 140, 0.10);
}
.dcomp-item b {
    display: block;
    font-size: 0.89rem;
    font-weight: 700;
    color: var(--secondary);
}
.dcomp-item small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-medium);
}

/* ---- Contacto ----------------------------------------------------- */
.dcta { padding: 24px 0 72px; background: #fff; }
.dcta__caja {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.4rem;
    align-items: center;
    padding: 2.3rem 2.2rem;
    border-radius: 22px;
    background: linear-gradient(150deg, #F5F9FF, #EDF3FE);
}
.dcta__izq h2 {
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--secondary);
}
.dcta__izq p {
    margin: 0.8rem 0 1.4rem;
    font-size: 0.89rem;
    line-height: 1.7;
    color: var(--text-medium);
}
.dcta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.82rem 1.6rem;
    border-radius: 100px;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(27, 95, 217, 0.28);
    transition: var(--transition);
}
.dcta__btn:hover { background: var(--primary-dark); color: #fff; }

.dcta__der {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 1.6rem;
}
.dcta-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.dcta-item > i {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff;
    color: var(--primary);
    font-size: 0.88rem;
}
.dcta-item b { display: block; font-size: 0.85rem; font-weight: 700; color: var(--secondary); }
.dcta-item small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-medium);
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 1020px) {
    .dhero__row { grid-template-columns: 1fr; gap: 2rem; }
    .dhero__shot { margin-inline: auto; }
    /* La media pasa arriba y la ficha debajo: en una columna, una imagen
       de 300 px de alto a media pantalla deja el texto fuera de la vista. */
    .dmarca { grid-template-columns: 1fr; }
    .dmarca__media { min-height: 220px; }
    .dcta__caja { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .dhero { padding-top: 104px; }
    .dmarca__txt { padding: 1.6rem 1.4rem; }
    .dcta__der { grid-template-columns: 1fr; }
    .dcomp__caja, .dcta__caja { padding: 1.6rem 1.2rem; }
}