/* ========================================================= FICHA DE OFERTA Bloque 1 narrativa · Bloque 2 detalles · Bloque 3 condiciones ========================================================= */ :root { /* Canalón lateral único: texto, foto, fichas y condiciones usan el mismo. En escritorio coincide con el del módulo neo-text-item. */ --offer-gutter: 50px; --offer-gutter-mobile: 20px; --offer-card-1: var(--button-color); --offer-card-1-ink: #7C9A5E; --offer-card-2: #B79A56; --offer-card-2-ink: #9A7F3E; --offer-rule: #D7DADD; --offer-panel: #F4F5F5; } /* ---------- BLOQUE 1: NARRATIVA ---------- Texto a la izquierda, imagen al otro lado. Se respeta el formato que venga del editor: párrafos, listas, negritas y encabezados. La especificidad sube a .offer-intro.neo-text-item porque neo-text-item.css se carga después en el documento y centraría el texto. ------------------------------------------ */ .offer-intro.neo-text-item .content { align-items: flex-start; justify-content: center; text-align: left; padding: 0 var(--offer-gutter); } /* El modulo dejo de dar padding a .image, asi que la foto se quedaba en los 15px de su columna mientras el texto iba a 50. Se igualan. */ .offer-intro.neo-text-item .image { padding: 0 var(--offer-gutter); } .offer-intro.neo-text-item h1 { text-align: left; text-wrap: pretty; } .offer-intro.neo-text-item h1.underscore:after { margin: 30px 0; } .offer-intro.neo-text-item .description { width: 100%; } .offer-intro.neo-text-item .description p { margin: 0 0 18px 0; font-size: var(--font-size-text); color: var(--text-color); font-weight: 300; text-align: left; line-height: 26px; letter-spacing: 0.7px; } .offer-intro.neo-text-item .description p:last-child { margin-bottom: 0; } /* Unico punto en el que la ficha necesita ganar al modulo y no lo consigue por la via normal: `.neo-text-item .content .description p` son 3 clases + 1 elemento y empata con `.offer-intro.neo-text-item .description p`, asi que manda el orden de carga, que aqui juega en contra (offer.css va en el de offer.xsl y offer-intro.xsl enlaza neo-text-item.css ya dentro del ). Se anade `.content` para subir a 4 clases y se declara SOLO el padding: el tamano, el peso, el interlineado y el color del parrafo siguen saliendo del modulo, igual que en el resto del sitio. Los 40px del modulo estrechan el texto corrido respecto a los titulares cuando todo va centrado; en la ficha el texto va alineado a la izquierda, asi que ese padding mete los parrafos 40px hacia dentro y los descuadra del h1 y del boton, que arrancan a 0. */ .offer-intro.neo-text-item .content .description p { padding: 0; } .offer-intro.neo-text-item .description ul, .offer-intro.neo-text-item .description ol { margin: 0 0 18px 0; padding: 0; text-align: left; } .offer-intro.neo-text-item .description ul { list-style: none; } .offer-intro.neo-text-item .description ol { padding-left: 20px; } .offer-intro.neo-text-item .description li { position: relative; margin-bottom: 10px; font-size: var(--font-size-text); line-height: 26px; letter-spacing: 0.7px; color: var(--text-color); } .offer-intro.neo-text-item .description ul li { padding-left: 18px; } .offer-intro.neo-text-item .description ul li:before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background-color: var(--button-color); } .offer-intro.neo-text-item .description li:last-child { margin-bottom: 0; } .offer-intro.neo-text-item .description h1, .offer-intro.neo-text-item .description h2, .offer-intro.neo-text-item .description h3, .offer-intro.neo-text-item .description h4, .offer-intro.neo-text-item .description h5, .offer-intro.neo-text-item .description h6 { font-family: var(--font-family-1); font-size: 17px; font-weight: 400; line-height: 26px; letter-spacing: 0.04em; text-align: left; color: var(--title-color); margin: 22px 0 10px 0; } .offer-intro.neo-text-item .description h1:first-child, .offer-intro.neo-text-item .description h2:first-child, .offer-intro.neo-text-item .description h3:first-child { margin-top: 0; } .offer-intro.neo-text-item .description strong, .offer-intro.neo-text-item .description b { font-weight: 500; color: var(--title-color); } .offer-intro__actions { margin-top: 32px; text-align: left; width: 100%; } .offer-intro__cta { display: inline-block; } /* ---------- CARRIL COMÚN DE LA FICHA ---------- Los tres bloques comparten el mismo ancho útil que el bloque 1, para que fichas, nota y condiciones queden a plomo con el texto y la foto del intro. El intro es .neo-text-item (max-width 1460) con 50px de padding en cada columna, así que el área visible es 1460 - 100. Se replica aquí en lugar de usar el .container del tema, cuyo ancho varía por breakpoint (1640/1340/1240) y desalinea en un sentido u otro según la pantalla. ----------------------------------------------- */ .offer-detail > .container, .offer-terms > .container, .offer-options > .container { /* Sin max-width propio: lo gobierna .container del tema, igual que el bloque 1. El padding replica el de la columna de texto del intro, para que fichas, opciones y condiciones queden a plomo con titular y foto. */ padding-left: var(--offer-gutter); padding-right: var(--offer-gutter); } /* ---------- BLOQUE 2: DETALLES ---------- */ .offer-detail { background-color: var(--tertiary-color); padding: var(--space-between-sections) 0; margin-bottom: var(--space-between-sections); } .offer-detail__heading { margin-bottom: 0; } .offer-detail__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border: 1px solid var(--offer-rule); background-color: #ffffff; } .offer-card { padding: 34px 30px 38px; text-align: center; } .offer-card + .offer-card { border-left: 1px solid var(--offer-rule); } .offer-card__label { display: inline-block; font-family: var(--font-family-1); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #ffffff; background-color: var(--secondary-color); padding: 6px 14px; margin-bottom: 20px; } .offer-detail__cards .offer-card:nth-child(odd) .offer-card__label { background-color: var(--offer-card-1); } .offer-detail__cards .offer-card:nth-child(even) .offer-card__label { background-color: var(--offer-card-2); } .offer-card__figure { font-family: var(--font-family-1); font-size: 52px; font-weight: 200; line-height: 1; color: var(--title-color); font-variant-numeric: tabular-nums; } .offer-detail__cards .offer-card:nth-child(odd) .offer-card__figure { color: var(--offer-card-1-ink); } .offer-detail__cards .offer-card:nth-child(even) .offer-card__figure { color: var(--offer-card-2-ink); } .offer-card__caption { font-family: var(--font-family-1); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #7C838A; margin-top: 12px; line-height: 18px; } .offer-card__body { margin-top: 22px; text-align: left; } .offer-card__head + .offer-card__body { margin-top: 26px; } /* ---------- FICHA ÚNICA: lista + panel de precio ---------- Con una sola ficha la rejilla la estira a todo el carril. En vez de centrar el contenido y dejar el resto vacío, se parte en dos: los conceptos a la izquierda y el precio en su propio panel a la derecha. Es la misma hija y los mismos campos, solo cambia la disposición. ----------------------------------------------------------- */ .offer-detail__cards--1 .offer-card { display: grid; grid-template-columns: 1.3fr 0.7fr; align-items: stretch; padding: 0; text-align: left; } .offer-detail__cards--1 .offer-card__body { order: 1; margin-top: 0; padding: 40px 44px 44px; align-self: center; } .offer-detail__cards--1 .offer-card__head { order: 2; background-color: var(--offer-panel); border-left: 1px solid var(--offer-rule); padding: 40px 32px 44px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .offer-detail__cards--1 .offer-card__figure { font-size: 58px; } .offer-detail__cards--1 .offer-card__body ul:has(li:nth-child(4)) { columns: 2; column-gap: 40px; } .offer-detail__cards--1 .offer-card__body li { break-inside: avoid; } .offer-card__body p { margin: 0 0 10px 0; font-size: 15px; line-height: 25px; color: var(--text-color); } .offer-card__body p strong, .offer-card__body p b { font-family: var(--font-family-1); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--title-color); } .offer-card__body ul { list-style: none; margin: 0 0 20px 0; padding: 0; } .offer-card__body ul:last-child { margin-bottom: 0; } .offer-card__body li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 15px; line-height: 24px; } .offer-card__body li:last-child { margin-bottom: 0; } .offer-card__body li:before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background-color: var(--button-color); } /* Encabezados escritos con «Formatos»: cuerpo acotado dentro de la ficha */ .offer-card__body h1, .offer-card__body h2, .offer-card__body h3, .offer-card__body h4, .offer-card__body h5, .offer-card__body h6 { font-family: var(--font-family-1); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: 0.04em; text-align: left; color: var(--title-color); margin: 18px 0 8px 0; } /* Seguro contra tamaños pegados desde Word */ .offer-card__body [style*="font-size"], .offer-terms__body [style*="font-size"], .offer-intro .description [style*="font-size"] { font-size: inherit !important; } .offer-detail__note { margin-top: 26px; } .offer-detail__note p { margin: 0; font-size: 14px; line-height: 23px; color: var(--text-color); text-align: center; } /* ---------- BLOQUE 3: CONDICIONES ---------- */ .offer-terms { margin-bottom: var(--space-between-sections); } .offer-terms__body { max-width: 1000px; margin: 0 auto; columns: 2; column-gap: 56px; } /* El primer encabezado es el rótulo del bloque: cruza las dos columnas. Los siguientes son subapartados —«Niños», «Casas Rurales»— y van dentro. */ .offer-terms__body > h1:first-child, .offer-terms__body > h2:first-child, .offer-terms__body > h3:first-child, .offer-terms__body > h4:first-child { column-span: all; font-family: var(--font-family-1); font-size: var(--font-size-subtitle); font-weight: 300; line-height: 40px; letter-spacing: 0; text-align: center; text-transform: none; color: var(--title-color); margin: 0; } .offer-terms__body > h1:first-child:after, .offer-terms__body > h2:first-child:after, .offer-terms__body > h3:first-child:after, .offer-terms__body > h4:first-child:after { content: ""; display: block; width: 130px; margin: 30px auto; border-top: 1px solid var(--title-color); } /* Subapartados */ .offer-terms__body h1, .offer-terms__body h2, .offer-terms__body h3, .offer-terms__body h4, .offer-terms__body h5, .offer-terms__body h6 { font-family: var(--font-family-1); font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; color: var(--title-color); margin: 26px 0 12px 0; break-after: avoid; page-break-after: avoid; } .offer-terms__body > *:nth-child(2) { margin-top: 0; } .offer-terms__body ul { list-style: none; margin: 0 0 4px 0; padding: 0; /* Las listas de un subapartado no se parten entre columnas... */ break-inside: avoid; page-break-inside: avoid; } /* ...pero la lista principal, la que va justo bajo el rótulo del bloque, sí debe fluir: es la única y si no se reparte deja media caja vacía. */ .offer-terms__body > :first-child + ul { break-inside: auto; page-break-inside: auto; } .offer-terms__body li { break-inside: avoid; page-break-inside: avoid; } .offer-terms__body li { position: relative; padding-left: 18px; margin-bottom: 12px; font-size: 14px; line-height: 23px; } .offer-terms__body li:before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background-color: var(--button-color); } .offer-terms__body p { font-size: 14px; line-height: 23px; margin: 0 0 14px 0; } /* ---------- TABLAS DEL CMS ---------- Reglas genéricas: valen para cualquier tabla, del tamaño que sea. Ni un solo nth-child, porque el número de filas y columnas es libre. ------------------------------------ */ .offer-card__body table, .offer-terms__body table, .offer-intro .description table { width: 100%; border-collapse: collapse; margin: 18px 0; font-variant-numeric: tabular-nums; background-color: #ffffff; } .offer-card__body table tr:first-child > *, .offer-terms__body table tr:first-child > *, .offer-intro .description table tr:first-child > * { font-family: var(--font-family-1); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background-color: var(--secondary-color); padding: 11px 12px; text-align: center; } .offer-card__body table tr:first-child > *:first-child, .offer-terms__body table tr:first-child > *:first-child, .offer-intro .description table tr:first-child > *:first-child { text-align: left; } .offer-card__body table td, .offer-card__body table th, .offer-terms__body table td, .offer-terms__body table th, .offer-intro .description table td, .offer-intro .description table th { border-bottom: 1px solid var(--offer-rule); padding: 13px 12px; text-align: center; font-family: var(--font-family-1); font-size: 17px; font-weight: 300; color: var(--title-color); } .offer-card__body table tr:not(:first-child) > *:first-child, .offer-terms__body table tr:not(:first-child) > *:first-child, .offer-intro .description table tr:not(:first-child) > *:first-child { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .offer-card__body table tr:last-child > *, .offer-terms__body table tr:last-child > *, .offer-intro .description table tr:last-child > * { border-bottom: 0; } /* Contenedor con scroll: una tabla ancha nunca desborda la página */ .cms-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--offer-rule); margin: 18px 0; } .cms-table-scroll > table { margin: 0; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 992px) { /* Un solo canalón: el texto y la foto dejan de ir descuadrados. .image se sobrescribe porque neo-text-item.css no lo baja en móvil y se queda con los 50px del escritorio. */ .offer-intro.neo-text-item .content, .offer-intro.neo-text-item .image { padding: 0 var(--offer-gutter-mobile); } .offer-detail > .container, .offer-terms > .container { padding-left: var(--offer-gutter-mobile); padding-right: var(--offer-gutter-mobile); } .offer-detail__cards--1 .offer-card { grid-template-columns: 1fr; } .offer-detail__cards--1 .offer-card__head { order: 1; border-left: 0; border-bottom: 1px solid var(--offer-rule); padding: 28px 20px 30px; } .offer-detail__cards--1 .offer-card__body { order: 2; padding: 26px 20px 30px; } .offer-detail__cards--1 .offer-card__body ul { columns: 1; } .offer-card + .offer-card { border-left: 0; border-top: 1px solid var(--offer-rule); } .offer-card { padding: 26px 20px 30px; } .offer-card__figure { font-size: 44px; } .offer-terms__body { columns: 1; } } /* Tablas de 4+ columnas convertidas en fichas por cms-table.js */ @media (max-width: 767px) { .cms-table--stacked > table, .cms-table--stacked > table > tbody, .cms-table--stacked > table > tbody > tr, .cms-table--stacked > table > tbody > tr > td, .cms-table--stacked > table > tbody > tr > th { display: block; width: auto; } .cms-table--stacked { overflow-x: visible; border: 0; } .cms-table--stacked > table > thead { display: none; } .cms-table--stacked > table > tbody > tr { border: 1px solid var(--offer-rule); margin-bottom: 14px; background-color: #ffffff; } .cms-table--stacked > table > tbody > tr:last-child { margin-bottom: 0; } /* La primera celda de la fila hace de título de la ficha */ .cms-table--stacked > table > tbody > tr > *:first-child { font-family: var(--font-family-1); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background-color: var(--secondary-color); padding: 11px 14px; text-align: left; border-bottom: 0; } .cms-table--stacked > table > tbody > tr > *:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; text-align: right; border-bottom: 1px solid #EDEFF0; font-size: 19px; } .cms-table--stacked > table > tbody > tr > *:last-child { border-bottom: 0; } .cms-table--stacked > table > tbody > tr > *[data-label]:not(:first-child):before { content: attr(data-label); font-family: var(--font-family-2); font-size: 13px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--text-color); text-align: left; } } /* ---------- BLOQUE DE OPCIONES ---------- Acordeón para contenidos largos que el visitante elige. Reutiliza el componente .faqs-item del tema, así que aquí solo va el encuadre. ----------------------------------------- */ .offer-options { margin-bottom: var(--space-between-sections); } .offer-options__list { max-width: 1000px; margin: 0 auto; } .offer-options__lead { font-family: var(--font-family-1); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #7C838A; margin: 0 0 14px 0; } .offer-options__body p { font-size: 15px; line-height: 26px; margin: 0 0 14px 0; } .offer-options__body p:last-child { margin-bottom: 0; } @media (max-width: 992px) { .offer-options > .container { padding-left: var(--offer-gutter-mobile); padding-right: var(--offer-gutter-mobile); } } /* Página suelta de una opción */ .offer-option { padding: var(--space-between-sections) 0; } .offer-option > .container { max-width: 1000px; } .offer-option__body { margin-top: 10px; } .offer-option__body p { font-size: 15px; line-height: 27px; margin: 0 0 16px 0; } .offer-option__back { margin-top: 40px; text-align: center; }