/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
    position: relative; height: 280px;
    background: var(--navy-dark) center/cover no-repeat;
    display: flex; align-items: center;
}
.page-hero__overlay { position: absolute; inset: 0; background: rgba(10,25,50,.7); }
.page-hero__content { position: relative; z-index: 1; }
.page-hero__content h1 { color: var(--white); font-size: 2.2rem; margin-bottom: .6rem; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; color: rgba(255,255,255,.7); font-size: .82rem; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .5rem; }
.breadcrumb a { color: var(--sky); }

/* Variante clara: caja translúcida en vez de overlay oscuro + breadcrumb */
.page-hero--light { height: 220px; }
.page-hero__overlay--light { background: rgba(255,255,255,.35); }
.page-hero__box {
    background: rgba(255,255,255,.9);
    padding: 1.2rem 2.5rem;
    border-radius: var(--radius);
}
.page-hero--light .page-hero__box h1 { color: var(--navy); margin-bottom: 0; font-weight: 300; }

/* =============================================
   PAGINA NOSOTROS — medidas de mydsac.com/nosotros
     foto de cabecera 370px, sin overlay ni titulo
     2 columnas de 550px con filete vertical al medio
     titulo  Oswald 26px/26px w300 #222 + linea a la derecha
     texto   Oswald 20px/22px w300 #222 justificado
     guion   55x1px #0d4772 en un bloque de 40px
   ============================================= */
/* La foto real mide 1500x1012 pero el tercio inferior esta en blanco,
   por eso se ancla arriba (el original tambien usa 50% 0%). */
.page-photo {
    height: 370px;
    background: var(--gray-light) center top/cover no-repeat;
}

/* 25px arriba + 25px abajo, mas la franja vacia de 71px que el original
   deja antes del footer (total 96px de aire inferior). */
.about-section { padding: 25px 0 96px; background: var(--white); }

.about-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
/* filete vertical entre las dos columnas */
.about-grid::after {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: #e8e8e8;
}

.about-head { overflow: hidden; padding-bottom: 20px; }
.about-title {
    display: inline-block;
    position: relative;
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 26px;
    font-weight: 300;
    color: #222;
    margin-bottom: 10px;
}
.about-title::after {
    content: '';
    position: absolute;
    left: 100%; top: 13px;
    margin-left: 20px;
    width: 1300px; height: 5px;
    border-top: 1px solid #e8e8e8;
}

.about-text {
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 22px;
    font-weight: 300;
    color: #222;
    text-align: justify;
    margin-bottom: 15px;
}

.about-dash { position: relative; height: 40px; }
.about-dash::after {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 55px; height: 1px;
    background: var(--navy);
}

/* =============================================
   PAGINA SERVICIOS — medidas de mydsac.com/servicios
     cabecera 349px con la foto anclada arriba a la derecha
       y el titulo en caja blanca al 50% (Oswald 44px)
     intro y "por que" con padding de 25px
     banda gris #f4f4f4 con padding de 60px
     fichas: imagen 400x270 + titulo Oswald 26px centrado
   ============================================= */
/* Cabecera con foto y titulo en caja (Servicios, Clientes, Companias).
   El original monta la foto en una capa parallax de 483px de alto sobre
   una banda visible de 349px, desplazada -134px (483 - 349). Por eso el
   encuadre no arranca arriba del todo: sin parallax se reproduce con
   background-position: 100% -134px. Es igual en las tres paginas. */
.photo-hero {
    background-color: var(--gray-light);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% -134px;
    padding: 100px 0 140px;
    text-align: center;
}
.photo-hero__inner { text-align: center; padding-bottom: 20px; }
.photo-hero__title {
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,.5);
    border-radius: 15px;   /* el original redondea la caja del titulo */
    padding: 10px;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 59.4px;
    font-weight: 300;
    color: #222;
    text-align: center;
}
.photo-hero__title::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    margin-left: -50px;
    width: 100px; height: 1px;
    background: var(--navy);
}

/* --- Intro --- */
.serv-intro { padding: 25px 0; background: var(--white); }
.page-text {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}
.page-text--lead { margin-bottom: 20px; }
.page-text strong { color: #666; font-weight: 700; }

/* --- ¿Por que trabajar con nosotros? --- */
.serv-why { padding: 25px 0; background: var(--white); }
.serv-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.serv-why__media img { width: 100%; height: auto; display: block; }

.serv-subtitle {
    position: relative;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 300;
    color: #222;
    margin-bottom: 30px;   /* 10px de margen + 20px del wrapper original */
    padding-bottom: 10px;
}
.serv-subtitle::after {
    content: '';
    position: absolute;
    left: 0; top: 35px;
    width: 55px; height: 1px;
    background: var(--navy);
}

.serv-list { padding-left: 20px; list-style: disc; }
.serv-list li {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

/* --- Banda gris: soluciones + seguros --- */
.serv-solutions {
    background: #f4f4f4;
    padding: 60px 0;
}
.serv-band-title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 400;
    color: #222;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.serv-band-title::after {
    content: '';
    position: absolute;
    left: 0; top: 35px;
    width: 113px; height: 1px;
    background: var(--navy);
}
.serv-band-title--next { margin-top: 76px; }

.serv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.serv-card { text-align: center; margin: 0; }
.serv-card img { max-width: 100%; height: auto; margin: 0 auto; display: block; }
.serv-card figcaption {
    margin-top: 15px;
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 28.6px;
    font-weight: 300;
    color: #222;
}
.serv-card--wide { margin-top: 30px; }

/* =============================================
   PAGINA CLIENTES — medidas de mydsac.com/clientes
     mapa 550x728 a la izquierda, listado a la derecha,
     filete vertical al medio, banda con padding de 25px
   ============================================= */
.clients-section { padding: 25px 0; background: var(--white); }
.clients-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.clients-grid::after {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: #e8e8e8;
}
.clients-map img { width: 100%; height: auto; display: block; }

/* =============================================
   PAGINA COMPANIAS — medidas de mydsac.com/companias
     intro, titulo y una rejilla de logos de 300px
     centrados en celdas de 550px con 25px de aire
   ============================================= */
.comp-intro { padding: 25px 0; background: var(--white); }
.comp-heading { padding: 25px 0; background: var(--white); }
.comp-logos { background: var(--white); }
.comp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;   /* 5 en una sola fila, dentro de los 1130px del container */
    row-gap: 24px;   /* opcional, además del padding de .comp-cell */
}
.comp-cell {
    padding: 25px 0;
    text-align: center;
}
.comp-cell img { /*dimesiones de logos */
    width: 200px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- Subtitulo compartido (Clientes / Companias) --- */
.page-subtitle {
    position: relative;
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 24.2px;
    font-weight: 300;
    color: #222;
    margin-bottom: 30px;   /* 10px propios + 20px del wrapper del original */
    padding-bottom: 10px;
}
.page-subtitle::after {
    content: '';
    position: absolute;
    left: 0; top: 33px;
    width: 55px; height: 1px;
    background: var(--navy);
}
.page-subtitle--plain { margin-bottom: 0; padding-bottom: 0; }
.page-subtitle--plain::after { display: none; }

.page-list { padding-left: 20px; list-style: disc; }
.page-list li {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

/* =============================================
   PAGINA SOCIOS — medidas de mydsac.com/socios
     foto de cabecera de 270px sin titulo encima
     titulo centrado Oswald 44px con guion de 100px
     filas con dos columnas centradas de 260px
   ============================================= */
.photo-hero--bare {
    padding: 0;
    height: 270px;
    /* Medido en el original: la capa del parallax mide 355px y esta subida
       85px, asi que la foto se ve desde su pixel 85, no desde el 0. */
    background-position: 100% -85px;
}

.socios-head {
    background: var(--white);
    padding: 25px 0 45px;   /* 25 + los 20px del wrapper del subtitulo */
    text-align: center;
}
.socios-title {
    display: inline-block;
    position: relative;
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 59.4px;
    font-weight: 300;
    color: #222;
    padding: 10px;
    margin-bottom: 10px;
}
.socios-title::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    margin-left: -50px;
    width: 100px; height: 1px;
    background: var(--navy);
}
/* el subtitulo va alineado a la izquierda dentro de la banda centrada */
.socios-head .serv-band-title { text-align: left; margin-top: 20px; }
.serv-band-title--sentence { text-transform: none; font-weight: 300; }

.socios-row {
    background: var(--white);
    padding: 25px 0;
}
/* El original usa dos columnas de 290px (contenido 260 + 15px de padding
   a cada lado) y dibuja un filete de 1px #e8e8e8 en el borde izquierdo de
   cada columna, mas otro al cerrar la ultima. Quedan tres lineas: antes
   del logo, entre logo y texto, y despues del texto. */
.socios-grid {
    display: grid;
    grid-template-columns: 290px 290px;
    justify-content: center;
}
.socios-grid > div {
    padding: 0 15px;
    border-left: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
}
.socios-grid > div:last-child { border-right: 1px solid #e8e8e8; }

.socios-logo { justify-content: center; }
.socios-logo img { height: auto; display: block; }
/* el original deja aire despues de la ultima fila (dos bandas vacias) */
.socios-row:last-of-type { padding-bottom: 147px; }
.socios-text p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #666;
    text-align: justify;
}

/* =============================================
   PAGINA CONTACTO — medidas de mydsac.com/contacto
     sin foto de cabecera; banda con padding de 25px
     formulario de 357px + oficina de 743px (canal 30px)
     etiquetas centradas en negrita, campos de 42px
     mapa de 743x350 y datos con icono de 32px
   ============================================= */
.contacto-section {
    background: var(--white);
    /* 25px arriba; abajo se suma el aire que el original deja antes del
       footer (su banda termina en 913 y el footer arranca en 964). */
    padding: 25px 0 128px;
}
.contacto-grid {
    display: grid;
    grid-template-columns: 357px 1fr;
    gap: 30px;
    align-items: start;
}

/* --- Titulo con linea al costado (22px) --- */
.headline-line {
    display: inline-block;
    position: relative;
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 29.7px;
    font-weight: 300;
    color: #222;
    margin-bottom: 30px;   /* 10px propios + 20px del wrapper del original */
}
.headline-line::after {
    content: '';
    position: absolute;
    left: 100%; top: 15px;
    margin-left: 20px;
    width: 1300px; height: 5px;
    border-top: 1px solid #e8e8e8;
}
/* el recorte va en el envoltorio del titulo, no en la columna:
   si se recorta la columna se come el filete vertical de al lado */
.headline-wrap { overflow: hidden; }
/* El original separa las dos columnas con un filete de 1px #e8e8e8
   colocado en x=758, con la altura de la columna de la oficina. */
.contacto-oficina { position: relative; }
.contacto-oficina::before {
    content: '';
    position: absolute;
    left: -17px; top: 0; bottom: 0;
    width: 1px;
    background: #e8e8e8;
}

/* --- Formulario --- */
.form-mydsac label {
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 30.8px;
    font-weight: 700;
    color: #666;
    margin-bottom: 14px;   /* algo mas de aire que el original (4px) */
}
.form-mydsac input[type="text"],
.form-mydsac input[type="email"],
.form-mydsac input[type="tel"],
.form-mydsac textarea {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: #666;
    background: rgba(0,0,0,.02);
    border: 1px solid #e8e8e8;
    border-radius: 0;
    text-align: left;
}
.form-mydsac input[type="text"],
.form-mydsac input[type="email"],
.form-mydsac input[type="tel"] { height: 42px; padding: 12px 10px; }
.form-mydsac textarea { height: 220px; padding: 11px 10px; resize: vertical; }
.form-mydsac input:focus,
.form-mydsac textarea:focus { outline: none; border-color: var(--sky); }

.btn-enviar {
    margin-top: 10px;
    padding: 12px 20px;
    background: #bbbbbb;
    color: #000;
    border: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-enviar:hover { background: var(--sky); color: var(--white); }

/* --- Oficinas --- */
.contacto-oficina__maps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.contacto-map { height: 220px; }
.contacto-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contacto-datos { margin-top: 15px; }
.contacto-datos li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;   /* 46 + 18 = 64px de paso, como el original */
}
.contacto-datos i {
    width: 45px;
    flex-shrink: 0;
    text-align: center;
    /* Los iconos del original son de contorno y finos; los de Font Awesome
       son solidos, asi que a 32px pesaban demasiado. */
    font-size: 26px;
    line-height: 46px;
    color: #666;
}
.contacto-datos span {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 24.2px;
    font-weight: 300;
    color: #222;
}
.contacto-datos a { color: inherit; }
.contacto-datos a:hover { color: var(--sky); }

/* =============================================
   SUBCABECERA DE NOTICIAS — medidas de mydsac.com/noticias
     banda de 196px sobre el gris del body:
       barra de breadcrumb de 36px (#fafafa, 1180px de ancho)
       + bloque de titulo con padding 50/70 y H1 Oswald 34px
   ============================================= */
.subheader { background: var(--body-bg); }

/* La banda de contenido de noticias usa 25px, no los 60px de .section */
.news-section { padding: 25px 0; }

.breadcrumb-bar {
    background: #fafafa;
    padding: 15px 25px 10px;
    margin: 0 -25px;          /* la barra desborda 25px a cada lado (1180px) */
}
.breadcrumb-list {
    list-style: none;   /* es un <ol>: sin la numeracion */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    line-height: 11px;
    color: #999;
}
.breadcrumb-list li:not(:last-child)::after {
    content: '\203A';        /* chevron simple, como el separador del original */
    margin: 0 7px;
    color: #bbb;
}
.breadcrumb-list a { color: #777; }
.breadcrumb-list a:hover { color: var(--sky); }

/* El original declara padding 50/70, pero la banda de contenido que sigue
   monta 40px encima con fondo blanco: lo que se ve son 156px de banda gris.
   Aqui se consigue lo mismo sin solapamiento, con 23px abajo. */
.page-title { padding: 50px 0 23px; }
.page-title h1 {
    font-family: var(--font-heading);
    font-size: 34px;
    line-height: 37.4px;
    font-weight: 300;
    color: #212121;
    margin-bottom: 10px;
}

/* =============================================
   FICHA DE SERVICIO / SEGURO
     barra de migas + foto con titulo + texto + logos
   ============================================= */
.subheader--bar { padding-bottom: 0; }

/* Estas cabeceras no llevan parallax: el original las declara con
   rt_bg_position="center center". */
.photo-hero--center { background-position: center center; }

.serv-cuerpo .page-text { margin-bottom: 20px; }
.serv-cuerpo .page-text:last-child { margin-bottom: 0; }
.serv-cuerpo ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 10px;
}
.serv-cuerpo li { font-size: 14px; line-height: 20px; color: #666; }

.serv-logos {
    background: var(--white);
    padding: 25px 0 60px;
}
.serv-logos__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 50px;
    border-top: 1px solid #e8e8e8;
    padding-top: 45px;
}
.serv-logos__cell { flex: 0 0 auto; }
.serv-logos__cell img {
    max-width: 180px;
    max-height: 90px;
    width: auto; height: auto;
    display: block;
}

/* =============================================
   SPLIT COLS (bloques de texto de 2 columnas — Nosotros, etc.)
   ============================================= */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.text-block { margin-bottom: 2.2rem; }
.text-block:last-child { margin-bottom: 0; }
.text-block h2 {
    font-size: 1.4rem; font-weight: 300; color: var(--heading-color);
    margin-bottom: .8rem; padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}
.text-block p { color: var(--text); }
.mvv__card h3 { font-size: 1.2rem; margin-bottom: .8rem; color: var(--navy); }
.mvv__card p { font-size: .9rem; color: var(--text); }
.mvv__card ul { text-align: left; font-size: .9rem; color: var(--text); }
.mvv__card ul li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.mvv__card ul li:last-child { border: none; }

.timeline { max-width: 800px; margin: 0 auto; position: relative; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--border); transform:translateX(-50%); }
.timeline__item { display: flex; gap: 2rem; margin-bottom: 2.5rem; }
.timeline__item--right { flex-direction: row-reverse; }
.timeline__year { flex-shrink: 0; width: 80px; height: 80px; background: var(--navy); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: .9rem; position: relative; z-index: 1; align-self: flex-start; }
.timeline__body { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); flex: 1; }
.timeline__body h4 { color: var(--navy); margin-bottom: .5rem; }
.timeline__body p { font-size: .9rem; color: var(--text); }

/* =============================================
   SERVICES PAGE
   ============================================= */
/* ¿Por qué trabajar con nosotros? */
.why-us { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.why-us__image { border-radius: var(--radius-lg); overflow: hidden; height: 380px; background: var(--gray-light); }
.why-us__image img { width: 100%; height: 100%; object-fit: cover; }
.why-us__content h2 { font-size: 1.6rem; font-weight: 300; color: var(--heading-color); margin-bottom: 1.2rem; }
.why-us__list li { position: relative; padding: .5rem 0 .5rem 1.4rem; font-size: .95rem; color: var(--text); }
.why-us__list li::before { content: ''; position: absolute; left: 0; top: 1.1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }

/* Tarjetas de servicios (foto + título) */
.service-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.service-card { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card__img { height: 180px; background: var(--gray-light) center/cover no-repeat; }
.service-card h3 { font-size: .95rem; font-weight: 400; color: var(--navy); padding: 1rem 1.2rem; background: var(--white); }

/* Listas simples reutilizables */
.plain-list li { position: relative; padding: .45rem 0 .45rem 1.2rem; font-size: .92rem; color: var(--text); border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: none; }
.plain-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--sky); }
.plain-list--cols { column-count: 2; column-gap: 2rem; }
.plain-list--cols li { break-inside: avoid; }

/* =============================================
   CLIENTS PAGE
   ============================================= */
.coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.coverage__content h2 { font-size: 1.8rem; color: var(--navy); margin: .5rem 0 1rem; }
.coverage__content p { color: var(--text); margin-bottom: 1rem; }
.coverage__regions-list { column-count: 2; column-gap: 2rem; margin-top: 1rem; }
.coverage__regions-list li { font-size: .95rem; color: var(--text); padding: .3rem 0; list-style: disc; margin-left: 1.2rem; }
.map-placeholder { background: var(--white); border: 2px dashed var(--border); border-radius: var(--radius-lg); height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); }
.map-placeholder i { font-size: 4rem; color: var(--navy); margin-bottom: 1rem; }
.map-placeholder small { color: var(--sky); font-weight: 700; }


/* =============================================
   PARTNERS / COMPANIES PAGE
   ============================================= */
.partners-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem 3rem; align-items: center; }
.partner-card { text-align: center; padding: 1rem 0; }
.partner-card img { max-height: 70px; width: auto; object-fit: contain; margin: 0 auto; }
.partner-card__name { display: none; font-size: .85rem; color: var(--text); }

/* =============================================
   TEAM
   ============================================= */
.partner-rows { display: flex; flex-direction: column; gap: 2.5rem; }
.partner-row { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; align-items: center; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.partner-row:last-child { border-bottom: none; padding-bottom: 0; }
.partner-row__logo { display: flex; align-items: center; justify-content: center; }
.partner-row__logo img { max-height: 90px; width: auto; object-fit: contain; }
.partner-row__initial { width: 90px; height: 90px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-heading); font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.partner-row__body h3 { font-size: 1.1rem; font-weight: 400; color: var(--navy); margin-bottom: .5rem; }
.partner-row__body p { font-size: .92rem; color: var(--text); }

/* =============================================
   NEWS PAGE — medidas tomadas del sitio original
   (mydsac.com, tema rttheme19) con getBoundingClientRect
   + getComputedStyle sobre article.loop:
     columna 1130px  ·  separacion entre posts 60px
     imagen 800x350 pegada a la izquierda
     badge de video 50x50, circulo blanco, margin -35px 0 0 50px
     texto sangrado 50px (padding lateral del bloque)
     fecha   Roboto 11px/15.7px  letter-spacing 3px  #666
     titulo  Oswald 26px/28.6px  w300  #222  (30px/33px en el detalle)
     resumen Roboto 14px/20px  #666
     meta    border-top 1px #e8e8e8, pt 10px, mt 20px, 11px #999
   ============================================= */
.post-list { display: flex; flex-direction: column; gap: 60px; }

.post { max-width: 1130px; }

/* --- Imagen destacada con badge de video --- */
.post__media {
    display: block;
    position: relative;
    width: 100%;
    max-width: 800px;          /* tamano natural del thumbnail original */
    aspect-ratio: 800 / 350;
    background: var(--gray-light) center/cover no-repeat;
    margin-bottom: 41px;       /* 10px + el badge que sobresale */
}
.post__media::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(13,71,114,0);
    transition: var(--transition);
}
.post__media:hover::after { background: rgba(13,71,114,.18); }

.post__badge {
    position: absolute;
    left: 50px; bottom: -31px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--white);
    color: #666;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    z-index: 2;
    transition: var(--transition);
}
.post__media:hover .post__badge { background: var(--sky); color: var(--white); }

/* --- Bloque de texto: sangrado de 50px como el original --- */
.post__date,
.post__title,
.post__excerpt,
.post__body { padding: 0 50px; }

.post__date {
    font-size: 11px;
    line-height: 15.7px;
    letter-spacing: 3px;
    color: #666;
    margin-bottom: 0;
}

.post__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 26px;
    line-height: 28.6px;
    color: #222;
    margin-bottom: 10px;
}
.post__title a { color: inherit; transition: var(--transition); }
.post__title a:hover { color: var(--sky); }

.post__excerpt,
.post__body {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}
.post__body { line-height: 22px; }
.post__body p { margin-bottom: 20px; }
.post__body h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 300;
    color: #222;
    margin-bottom: 12px;
}

/* --- Linea de meta --- */
.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* margen (no padding) para que el filete quede sangrado igual que el texto */
    margin: 20px 50px 0;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
    font-size: 11px;
    line-height: 15.7px;
    color: #999;
}
.post__meta span { display: inline-flex; align-items: center; gap: 4px; }
.post__meta i { font-size: 11px; color: #999; }

/* --- Detalle: el original NO sangra el texto y usa titulo de 30px --- */
.post--single .post__date,
.post--single .post__title,
.post--single .post__body { padding: 0; }
.post--single .post__meta { margin-left: 0; margin-right: 0; }
.post--single .post__title { font-size: 30px; line-height: 33px; }
.post--single .post__badge { left: 26px; }
.post__back { margin-top: 30px; }

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 4rem; align-items: start; }
.contact-form-wrap h2 { font-size: 1.8rem; color: var(--navy); margin: .5rem 0 .8rem; }
.contact-form-wrap p { color: var(--text); margin-bottom: 2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .85rem; font-weight: 400; color: var(--text-dark); }
.form-group input,
.form-group select,
.form-group textarea {
    padding: .6rem 0; border: none; border-bottom: 1px solid var(--border);
    border-radius: 0; font-family: var(--font-body); font-size: .95rem;
    color: var(--text); background: transparent;
    transition: var(--transition); outline: none; width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-bottom-color: var(--sky); box-shadow: none; }
.form-group textarea { resize: vertical; }

.alert { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .9rem; font-weight: 600; }
.alert--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert--error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-info__card { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.contact-info__card > i { font-size: 1.4rem; color: var(--sky); flex-shrink: 0; margin-top: .2rem; }
.contact-info__card h4 { font-size: .85rem; color: var(--navy); margin-bottom: .2rem; }
.contact-info__card p { font-size: .9rem; color: var(--text); }
.contact-info__card a { color: var(--navy); transition: var(--transition); }
.contact-info__card a:hover { color: var(--sky); }
.contact-map { border-radius: var(--radius); overflow: hidden; margin-top: .5rem; }


/* Aviso de error debajo de un campo del formulario de contacto */
.form-mydsac .campo-error {
    display: block;
    margin-top: 4px;
    font: 400 12px/16px 'Roboto', sans-serif;
    color: #b41e18;
}
.form-mydsac .campo-error + input,
.form-mydsac input.error,
.form-mydsac textarea.error { border-color: #b41e18; }