/* ============================================================================ SEGURATIS · FICHA DE COMPAÑÍA POR RAMO static/mobile-landing-compania.html + static/desktop-landing-compania.html Aquí el orden de secciones sí coincide en los dos anchos, así que no hace falta reordenar nada: solo cambian la rejilla, las alturas y los tamaños. Esta plantilla lleva subnav sticky, así que el va con `has-subnav` y las anclas usan 125/150 px de scroll-margin-top (tokens.css). ============================================================================ */ /* ---- 1 · Hero ------------------------------------------------------------ */ .ficha-hero { padding: 22px 0 28px; } /* Mismo caso que la home: la franja de cifras sobresale del hero, así que el recorte va en .ficha-hero__motas y no en la sección. */ .ficha-hero { overflow: visible; } .ficha-hero__inner{ position: relative; z-index: 1; } .ficha-hero__motas{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ficha-hero__migas{ margin-bottom: 16px; } .ficha-hero__marca { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ficha-hero__logo { display: flex; align-items: center; justify-content: center; width: 84px; height: 40px; border-radius: var(--r-mark); background: var(--c-white); border: var(--bd) solid var(--c-border-soft); overflow: hidden; } .ficha-hero__logo img { max-width: 76%; max-height: 76%; object-fit: contain; } .ficha-hero__h1 { margin-top: 16px; } .ficha-hero__lead { margin-top: 12px; } .ficha-hero__aviso{ margin-top: 18px; } /* Promoción */ .ficha-hero__promo { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 18px 20px; border-radius: var(--r); background: var(--c-white); border: var(--bd) solid var(--c-border-soft); box-shadow: 0 16px 32px -26px rgba(16,24,32,.45); transition: var(--t-lift), border-color .16s ease-out; } .ficha-hero__promo:hover { border-color: var(--c-action); transform: var(--lift); } .ficha-hero__promo-txt { flex: 1 1 auto; display: block; } .ficha-hero__promo-titulo { display: block; margin-top: 10px; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--c-ink); } .ficha-hero__promo-txt .meta { display: block; margin-top: 8px; } .ficha-hero__promo-img { flex: 0 0 96px; align-items: center; justify-content: center; width: 96px; height: 72px; padding: 0; } .ficha-hero__aside { margin-top: 22px; } .ficha-stats { display: none; } @media (min-width: 1024px) { .ficha-hero { padding: 40px 0 0; } .ficha-hero__migas { margin-bottom: 28px; } .ficha-hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 64px; align-items: start; padding-bottom: 56px; } .ficha-hero__marca { gap: 14px; } .ficha-hero__logo { width: 100px; height: 46px; } .ficha-hero__h1 { margin-top: 26px; max-width: 19ch; } .ficha-hero__lead { margin-top: 24px; max-width: 52ch; } .ficha-hero__promo { gap: 24px; margin-top: 32px; padding: 22px 26px; } .ficha-hero__promo-titulo { margin-top: 12px; max-width: 28ch; font-size: 23px; } .ficha-hero__promo-img { flex-basis: 140px; width: 140px; height: 96px; } .ficha-hero__aside { margin-top: 0; } /* Franja de cifras montada sobre el borde del hero */ .ficha-stats { display: flex; justify-content: center; position: relative; z-index: 1; margin-bottom: -52px; } .ficha-stats .stats { width: 100%; max-width: 1232px; margin: 0 var(--pad-x-d); box-shadow: 0 18px 34px -26px rgba(16,24,32,.45); } .ficha-stats .stats > div { padding: 28px 30px; } .ficha-stats__bar { display: block; width: 32px; height: 3px; border-radius: 3px; background: var(--c-action); } .ficha-stats .stats__num { margin-top: 16px; font-size: 32px; letter-spacing: -.035em; white-space: nowrap; } .ficha-stats .stats__label { margin-top: 6px; font-size: 14.5px; } } /* Móvil: la franja de cifras se ve como rejilla de 2 (mockup móvil) */ @media (max-width: 1023px) { .ficha-stats { display: block; margin: 22px var(--pad-x-m) 0; } .ficha-stats__bar { display: none; } } /* ---- Formulario multipaso ------------------------------------------------ */ .form-pasos { scroll-margin-top: calc(var(--h-header-m) + 8px); } .form-pasos__steps { margin-top: 4px; } .form-pasos__paso { margin-top: 22px; } .form-pasos__titulo { font-size: 22px; line-height: 1.18; font-weight: 800; letter-spacing: -.028em; } .form-pasos__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; padding: 0; border: 0; } .form-pasos__chips .chip { display: flex; align-items: center; justify-content: center; text-align: center; } .form-pasos__campo { margin-top: 14px; } .form-pasos__legal { margin-top: 16px; } .form-pasos__pie { display: flex; align-items: center; gap: 10px; margin-top: 22px; } .form-pasos__atras { flex: 0 0 auto; } .form-pasos__seguir { flex: 1 1 auto; height: var(--h-btn-hero-m); } .form-pasos__trust { margin-top: 14px; padding-top: 16px; border-top: var(--bd) solid var(--c-divider); } .form-pasos__legal-pie { margin-top: 12px; text-align: center; } .form-pasos__hecho { text-align: center; } .form-pasos__hecho-ico { width: 56px; height: 56px; flex-basis: 56px; margin: 0 auto 14px; } .form-pasos__hecho-txt { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-2); } @media (min-width: 1024px) { .form-pasos { padding: 32px; scroll-margin-top: 96px; } .form-pasos__titulo { font-size: 25px; } .form-pasos__seguir { height: 62px; } } /* ---- CTA neutral · compañías no autorizadas ------------------------------ */ .cta-neutral { text-align: center; } .cta-neutral__ico { margin: 0 auto; } .cta-neutral__titulo { margin-top: 16px; font-size: 22px; line-height: 1.18; font-weight: 800; letter-spacing: -.028em; } .cta-neutral__texto { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-2); } .cta-neutral__cta { width: 100%; margin-top: 20px; } .cta-neutral__tel { width: 100%; margin-top: 10px; gap: 10px; } .cta-neutral__legal { margin-top: 14px; } @media (min-width: 1024px) { .cta-neutral { padding: 32px; } .cta-neutral__titulo { font-size: 25px; } } /* ---- 2 · Por qué con Seguratis ------------------------------------------- */ .ficha-porque { padding: 26px 0 0; } .ficha-porque__h2 { margin-top: 10px; } .ficha-porque__lead { margin-top: 12px; } .ficha-porque .eyebrow__bar { display: none; } .ficha-porque__acciones { display: grid; gap: 10px; margin-top: 20px; } .ficha-porque__acciones .btn--raised { background: var(--c-white); color: var(--c-primary); box-shadow: var(--sh-neutral); } .ficha-porque__quote { margin-top: 22px; border: var(--bd) solid #EBDDD2; box-shadow: var(--sh-neutral); } .ficha-porque__quote-pie { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .ficha-porque__quote-quien { flex: 1 1 auto; display: block; line-height: 1.3; } .ficha-porque__quote-quien strong { display: block; font-size: 15px; font-weight: 800; } .ficha-porque__quote-quien .meta { display: block; } .ficha-porque__quote .avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 13px; } .ficha-porque__rating { margin-top: 16px; padding-top: 16px; border-top: var(--bd) solid #E9DDD3; } .ficha-porque__rating .rating__num { font-size: 30px; letter-spacing: -.04em; } /* Los dos disenos de este bloque son distintos, no el mismo reordenado: movil = filas planas separadas por linea, check verde, una sola frase desktop= tarjetas con numero, titular y cuerpo Mismo marcado; aqui se decide cual se ve. */ .ficha-porque__lista { display: grid; gap: 0; margin-top: 14px; } .ficha-motivo { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-radius: 0; box-shadow: none; background: none; border: 0; border-top: var(--bd) solid var(--c-border-soft); } .ficha-motivo__num { display: none; } .ficha-motivo__check { flex: 0 0 auto; color: var(--c-positive); font-weight: 800; } .ficha-motivo__txt { display: block; } .ficha-motivo__titulo{ display: none; } .ficha-motivo__cuerpo{ display: block; font-size: 15.5px; line-height: 1.45; color: var(--c-ink-article); } @media (min-width: 1024px) { .ficha-porque { padding: 112px 0 104px; } .ficha-porque .eyebrow__bar { display: block; } .ficha-porque__inner { display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 64px; align-items: start; } .ficha-porque__h2 { margin-top: 14px; max-width: 22ch; } .ficha-porque__lead { margin-top: 22px; max-width: 44ch; font-size: 17.5px; line-height: 1.65; } .ficha-porque__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .ficha-porque__acciones .btn { height: 58px; padding: 0 28px; } .ficha-porque__quote { margin-top: 26px; padding: 22px 24px 20px; } .ficha-porque__lista { gap: 12px; margin-top: 0; } /* Se deshace lo del movil: aqui vuelven a ser tarjetas. Sin esto, el border-top y el fondo transparente sobreviven al cambio de layout. */ .ficha-motivo { gap: 18px; padding: 26px 28px; background: var(--c-white); border-radius: var(--r); border: var(--bd) solid var(--c-border); box-shadow: none; /* .card--flat */ } .ficha-motivo__num { display: flex; width: 40px; height: 40px; flex-basis: 40px; background: var(--c-cta-bg); color: var(--c-action-ink); } .ficha-motivo__check { display: none; } .ficha-motivo__titulo{ display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--c-ink); } .ficha-motivo__cuerpo{ margin-top: 6px; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-2); } } /* ---- 3 · Subnav ---------------------------------------------------------- */ .subnav__link { flex: 0 0 auto; padding: 9px 14px; border-radius: var(--r-pill); background: var(--c-surface-1); font-size: 14px; font-weight: 700; color: var(--c-ink-article); white-space: nowrap; transition: var(--t-color); } .subnav__link:hover { background: var(--c-cta-bg); color: var(--c-action-ink); } @media (min-width: 1024px) { .subnav__link { font-size: 14.5px; } } /* ---- 4 · Coberturas ------------------------------------------------------ */ .ficha-coberturas { padding: 26px 0; } .ficha-coberturas__h2 { margin-top: 10px; } /* Se ve tambien en movil: la maqueta lo lleva bajo el H2. Estaba oculto, y esconder contenido en movil es perderlo, no recolocarlo. */ .ficha-coberturas__intro { display: block; margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-article); } .ficha-coberturas .eyebrow__bar { display: none; } .ficha-coberturas__grid { display: grid; gap: 10px; margin-top: 18px; } .ficha-cobertura { padding: 16px; } .ficha-cobertura__cab { display: flex; align-items: center; gap: 12px; } /* El icono SI se ve en movil: la maqueta lo lleva a 40 px. Estaba oculto. */ .ficha-cobertura__ico { display: flex; width: 40px; height: 40px; flex-basis: 40px; border-radius: var(--r); } .ficha-cobertura__ico svg { width: 20px; height: 20px; } .ficha-cobertura__titulo{ flex: 1 1 auto; font-size: 16.5px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--c-ink); } .ficha-cobertura__texto { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--c-ink-2); } @media (min-width: 1024px) { .ficha-coberturas { padding: 104px 0; } .ficha-coberturas .eyebrow__bar { display: block; } .ficha-coberturas__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 48px; } .ficha-coberturas__h2 { margin-top: 14px; } .ficha-coberturas__intro { display: block; flex: 0 0 420px; margin: 0; font-size: 17px; line-height: 1.65; } .ficha-coberturas__grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; } .ficha-cobertura { padding: 26px; box-shadow: 0 14px 30px -26px rgba(16,24,32,.45); } .ficha-cobertura__cab { gap: 14px; } .ficha-cobertura__ico { width: 46px; height: 46px; flex-basis: 46px; } .ficha-cobertura__ico svg { width: 23px; height: 23px; } .ficha-cobertura__titulo{ font-size: 20px; } .ficha-cobertura__texto { margin: 12px 0 0 60px; font-size: 16.5px; line-height: 1.6; } } /* ---- 5 · Comparativa cara a cara ----------------------------------------- */ .ficha-comparativa { padding: 28px 0 0; } .ficha-comparativa .eyebrow__bar { display: none; } .ficha-comparativa__h2 { margin-top: 10px; } /* Móvil: MISMA tabla que en escritorio, pero con un solo rival a la vez. Cuál se ve lo eligen los chips (interfaz.js), que ocultan las demás columnas con `hidden`. Antes esto era una lista de tarjetas apiladas, que no es lo que enseña la maqueta. */ .ficha-vs__elige-texto { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--c-ink-2); } .ficha-vs__elige { display: flex; gap: 8px; margin-top: 14px; } .ficha-vs__chip { flex: 1 1 0; min-height: var(--h-tap); font-size: 14.5px; } .ficha-vs { display: block; margin-top: 14px; border: var(--bd) solid var(--c-border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-card); } /* Sin JS se ven TODAS las columnas, así que la rejilla se declara para todas: sale apretado pero es una tabla correcta y no se pierde ni un dato. Cuando interfaz.js entra y empieza a ocultar rivales, marca `is-una-col` y pasamos a las tres de la maqueta. */ .ficha-vs__fila { display: grid; grid-template-columns: 1.5fr repeat(calc(var(--vs-cols) + 1), 1fr); border-top: var(--bd) solid var(--c-divider); background: var(--c-white); } .ficha-vs.is-una-col .ficha-vs__fila { grid-template-columns: 1.5fr 1fr 1fr; } .ficha-vs__fila:nth-of-type(even) { background: var(--c-row-alt); } .ficha-vs__cab { display: grid; border-top: 0; background: var(--c-primary); color: var(--c-white); font-size: 13px; font-weight: 700; } .ficha-vs__cab .ficha-vs__concepto { padding: 12px 14px; color: var(--c-white); font-size: 13px; } .ficha-vs__cab .ficha-vs__col { padding: 12px 8px; color: var(--c-white); font-size: 13px; } .ficha-vs__concepto { padding: 12px 14px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--c-ink); } .ficha-vs__col { padding: 12px 8px; font-size: 13.5px; text-align: center; color: var(--c-ink-2); } .ficha-vs__col--propia { font-weight: 700; color: var(--c-positive); } @media (min-width: 1024px) { .ficha-comparativa { padding: 88px 0; } .ficha-comparativa .eyebrow__bar { display: block; } /* La medida va en el contenedor, no en el h2: ver el comentario de .ficha-opiniones__cab. */ .ficha-comparativa__cab { max-width: 44ch; } .ficha-comparativa__h2 { margin-top: 14px; } /* Aquí caben todos los rivales, así que no hay nada que elegir. */ .ficha-vs__elige, .ficha-vs__elige-texto { display: none; } .ficha-vs { margin-top: 40px; box-shadow: none; } .ficha-vs__fila { grid-template-columns: 1.8fr repeat(calc(var(--vs-cols) + 1), 1fr); border-top: var(--bd) solid var(--c-divider); } .ficha-vs__fila:nth-of-type(even) { background: var(--c-row-alt); } .ficha-vs__cab { display: grid; border-top: 0; background: var(--c-primary); color: var(--c-white); font-size: 15px; font-weight: 700; } .ficha-vs__cab .ficha-vs__concepto { padding: 18px 22px; color: var(--c-white); } .ficha-vs__cab .ficha-vs__col { padding: 18px 12px; margin: 0; border: 0; color: var(--c-white); } .ficha-vs__cab .ficha-vs__col--propia { background: var(--c-primary-strong); } .ficha-vs__concepto { padding: 18px 22px; font-size: 16.5px; font-weight: 600; } .ficha-vs__col { padding: 18px 12px; font-size: 16px; } .ficha-vs__col--propia { font-weight: 700; color: var(--c-positive); background: #F6FBF8; } } /* ---- 6 · Todas las aseguradoras ------------------------------------------ */ .ficha-todas { padding: 26px 0; } .ficha-todas .eyebrow__bar { display: none; } .ficha-todas__h2 { margin-top: 10px; } .ficha-todas__intro { display: none; } .ficha-todas__link { margin-top: 16px; } @media (min-width: 1024px) { .ficha-todas { padding: 88px 0; } .ficha-todas .eyebrow__bar { display: block; } .ficha-todas__cab-txt { max-width: 52ch; } .ficha-todas__h2 { margin-top: 14px; } .ficha-todas__intro { display: block; margin-top: 18px; font-size: 17.5px; line-height: 1.6; } .ficha-todas__link { margin-top: 24px; font-size: 16.5px; } } /* ---- 7 · Planes ---------------------------------------------------------- */ .ficha-planes { padding: 26px 0; } .ficha-planes .eyebrow__bar { display: none; } .ficha-planes__h2 { margin-top: 10px; } /* Móvil: CARRUSEL horizontal, no apilado. Los márgenes negativos sacan el carril hasta el borde de la pantalla y el padding devuelve el margen, para que la tarjeta siguiente asome y se vea que hay más. */ .ficha-planes__grid { display: flex; gap: 12px; margin: 18px calc(var(--pad-x-m) * -1) 0; padding: 4px var(--pad-x-m) 6px; overflow-x: auto; } .ficha-plan { flex: 0 0 282px; /* ancho de la maqueta; hace el carril */ display: flex; flex-direction: column; border-radius: var(--r); background: var(--c-white); border: var(--bd) solid var(--c-border); overflow: hidden; box-shadow: var(--sh-neutral); } .ficha-plan--rec { border-color: #BBD0DE; } .ficha-plan__cinta { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 11px 20px; background: var(--c-surface-1); } .ficha-plan--rec .ficha-plan__cinta { background: var(--c-primary); } .ficha-plan__cinta-txt { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } /* Dos textos para la cinta del plan recomendado: el corto en móvil, el largo en escritorio. Ver el porqué en single-compania.php. */ .ficha-plan__rec-largo { display: none; } .ficha-plan--rec .ficha-plan__cinta-txt { color: var(--c-white); } .ficha-plan__estrella { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.22); color: var(--c-star); font-size: 12px; } .ficha-plan__cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; } .ficha-plan__titulo { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.028em; } .ficha-plan__sub { margin-top: 6px; font-size: 15.5px; font-weight: 700; color: var(--c-primary); } .ficha-plan__texto { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-2); } .ficha-plan__linea { height: 1px; margin: 18px 0; background: var(--c-divider); } .ficha-plan__incluye { display: grid; gap: 12px; } .ficha-plan__item { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--c-ink-article); } .ficha-plan__item .check { width: 21px; height: 21px; flex-basis: 21px; margin-top: 1px; } .ficha-plan__check { flex: 0 0 auto; margin-top: 1px; color: var(--c-positive); font-size: 14px; font-weight: 800; } .ficha-plan__ideal-tit { margin: 20px 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; } .ficha-plan__ideal { display: grid; gap: 11px; } .ficha-plan__cta { margin-top: auto; padding-top: 0; margin-top: 22px; height: var(--h-btn); } @media (min-width: 1024px) { .ficha-planes { padding: 88px 0; } .ficha-planes .eyebrow__bar { display: block; } .ficha-planes__cab { max-width: 44ch; } /* la medida, en el contenedor */ .ficha-planes__h2 { margin-top: 14px; } /* Aquí caben las tres, así que se deshace el carril del móvil: rejilla otra vez, sin márgenes negativos ni scroll horizontal. */ /* `auto-fit`, no `repeat(3, 1fr)`: la maqueta trae tres planes, pero el número lo pone cada compañía. Con dos, tres columnas fijas dejaban un hueco vacío a la derecha. El mínimo es el ancho de tarjeta de la maqueta. */ .ficha-planes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; overflow: visible; align-items: stretch; } /* Fuera el ancho fijo del carril: aquí manda la rejilla. */ .ficha-plan { flex: 1 1 auto; } /* Aquí cabe el texto largo de la cinta. */ .ficha-plan__rec-corto { display: none; } .ficha-plan__rec-largo { display: inline; } .ficha-plan__cinta { min-height: 44px; padding: 13px 26px; } .ficha-plan__cinta-txt { font-size: 13px; } .ficha-plan__cuerpo { padding: 28px 28px 30px; } .ficha-plan__titulo { font-size: 26px; } .ficha-plan__sub { font-size: 16.5px; } .ficha-plan__texto { margin-top: 16px; font-size: 16px; } .ficha-plan__linea { margin: 22px 0; } .ficha-plan__incluye{ gap: 13px; } .ficha-plan__cta { margin-top: 26px; height: 56px; } } /* ---- 8 · Precio ---------------------------------------------------------- */ .ficha-precio { padding: 28px 0 0; } .ficha-precio .eyebrow__bar { display: none; } .ficha-precio__h2 { margin-top: 10px; } /* Móvil: fila compacta —edad y concepto a la izquierda, precio a la derecha— sobre fondo crema. Sin tarjeta, sin pastilla y sin botón redondo: eso es de escritorio. El párrafo de entrada estaba oculto y la maqueta lo lleva. */ .ficha-precio__intro { display: block; margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-2); } .ficha-precio__grid { display: grid; gap: 8px; margin-top: 14px; } .ficha-precio__card { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: var(--r); background: var(--c-surface-2); border: 0; box-shadow: none; } .ficha-precio__texto { flex: 1 1 auto; display: block; min-width: 0; } .ficha-precio__edad { display: block; font-size: 16.5px; font-weight: 700; color: var(--c-ink); } .ficha-precio__que { display: block; margin-top: 2px; font-size: 13.5px; color: var(--c-ink-3); } .ficha-precio__fila { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; } .ficha-precio__fila .btn-circle { display: none; } .ficha-precio__num { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--c-primary); } .ficha-precio__nota { margin-top: 14px; } .ficha-precio__cta { margin-top: 16px; width: 100%; } @media (min-width: 1024px) { .ficha-precio { padding: 88px 0; } .ficha-precio .eyebrow__bar { display: block; } .ficha-precio__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 48px; } .ficha-precio__h2 { margin-top: 14px; } .ficha-precio__intro { flex: 0 0 420px; margin: 0; font-size: 17px; line-height: 1.65; } .ficha-precio__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; } /* Se deshace la fila del móvil: aquí vuelve a ser tarjeta, con el contenido apilado y el botón redondo. Sin esto sobreviven el flex y el fondo crema. */ .ficha-precio__card { display: block; padding: 30px; background: var(--c-white); border: var(--bd) solid var(--c-border-soft); box-shadow: var(--sh-card); } .ficha-precio__texto { display: block; } /* Aquí la edad SÍ va en pastilla; en móvil es texto a secas. */ .ficha-precio__edad { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 15px; font-weight: 700; color: var(--c-ink); } .ficha-precio__que { margin-top: 12px; font-size: 15px; } .ficha-precio__fila { display: flex; justify-content: space-between; margin-top: 18px; } .ficha-precio__fila .btn-circle { display: flex; } .ficha-precio__cta { display: none; } /* solo está en la maqueta de móvil */ .ficha-precio__num { font-size: 34px; } .ficha-precio__fila .btn-circle { width: 52px; height: 52px; flex-basis: 52px; } .ficha-precio__nota { margin-top: 16px; max-width: 76ch; } } /* ---- 9 · Opiniones ------------------------------------------------------- Cuatro piezas: panel de nota con distribución, «lo que más valoran», «lo mejorable» y la cita. En escritorio el panel va a la izquierda en una columna fija de 320 px; en móvil, encima y con nota y barras en dos columnas dentro de la misma tarjeta. El verde de «lo que más valoran» NO es igual en las dos maquetas: en móvil el panel entero va sobre tinte verde, y en escritorio sobre el tinte cálido de aviso con el ✓ verde. Está copiado así de cada maqueta, no es un olvido. --------------------------------------------------------------------------- */ /* En móvil la sección va sobre BLANCO: si hereda el crema de `.sec--cream`, «lo mejorable» —que es crema— desaparece contra el fondo. El crema y sus bordes solo están en la maqueta de escritorio. */ .ficha-opiniones { padding: 28px 0; background: var(--c-white); border: 0; } .ficha-opiniones .eyebrow__bar { display: none; } .ficha-opiniones__h2 { margin-top: 10px; } .ficha-opiniones__grid { display: grid; gap: 10px; margin-top: 16px; } .ficha-opiniones__texto { display: grid; gap: 10px; min-width: 0; } .ficha-opiniones__listas { display: grid; gap: 10px; } /* Panel de nota · en móvil, resumen a la izquierda y barras a la derecha */ .ficha-nota { display: flex; align-items: center; gap: 16px; padding: 18px; } .ficha-nota__resumen { flex: 0 0 auto; text-align: center; } .ficha-nota__num { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--c-action-ink); } .ficha-nota .rating__stars { display: block; font-size: 12px; } .ficha-nota__cuantas { margin-top: 4px; font-size: 12px; color: var(--c-ink-3); } .ficha-dist { flex: 1 1 auto; display: grid; gap: 6px; min-width: 0; } .ficha-dist__fila { display: flex; align-items: center; gap: 8px; } .ficha-dist__etiqueta { flex: 0 0 14px; font-size: 12px; font-weight: 700; color: var(--c-ink-3); } .ficha-dist__barra { flex: 1 1 auto; display: block; height: 6px; border-radius: 6px; background: var(--c-divider); overflow: hidden; } .ficha-dist__barra > span { display: block; height: 6px; border-radius: 6px; background: var(--c-star); } .ficha-dist__pct { flex: 0 0 30px; font-size: 12px; font-weight: 700; text-align: right; color: var(--c-ink-2); } /* Lo que más valoran · en móvil, panel verde */ .ficha-valoran { padding: 18px; border-radius: var(--r); background: var(--c-tag-soft); } .ficha-valoran__titulo { font-size: 16px; font-weight: 800; color: var(--c-positive-ink); } .ficha-valoran__items { display: grid; gap: 8px; margin-top: 10px; } .ficha-valoran__item { display: flex; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--c-positive-body); } .ficha-valoran__marca { color: var(--c-positive); font-weight: 800; } /* Lo mejorable */ .ficha-mejorable { padding: 18px; border-radius: var(--r); background: var(--c-surface-2); } .ficha-mejorable__titulo { font-size: 16px; font-weight: 800; } .ficha-mejorable__items { display: grid; gap: 8px; margin-top: 10px; } .ficha-mejorable__item { display: flex; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--c-ink-2); } .ficha-mejorable__marca { color: var(--c-negative); font-weight: 800; } /* Cita destacada */ .ficha-cita { margin: 0; padding: 18px; border-radius: var(--r); background: var(--c-surface-2); } .ficha-cita__mark { display: none; } /* la comilla grande es solo de escritorio */ .ficha-cita__texto { margin: 0; font-size: 16.5px; line-height: 1.55; font-weight: 600; color: var(--c-primary); } /* El pie no está en la maqueta de móvil, pero se pinta igual: un testimonio sin autor ni contexto no es citable. Ver ESTADO.md. */ .ficha-cita__pie { margin-top: 12px; font-size: 13px; color: var(--c-ink-3); } .ficha-cita__pie strong { color: var(--c-ink); } @media (min-width: 1024px) { /* Aquí sí vuelve el crema de `.sec--cream`, que arriba se quita para móvil. */ .ficha-opiniones { padding: 88px 0; background: var(--c-surface-2); border-top: var(--bd) solid var(--c-divider); border-bottom: var(--bd) solid var(--c-divider); } .ficha-opiniones .eyebrow__bar { display: block; } /* LA MEDIDA VA EN EL CONTENEDOR, NO EN EL h2. En la maqueta el `max-width: 44ch` está en el div que envuelve el eyebrow y el titular, así que 1ch se calcula con la fuente del BODY (16 px) y salen ~392 px: el titular parte en dos líneas. Puesto en el h2, 1ch se calcula con sus ~40 px y el tope se va a ~970 px, o sea que no parte nunca. Los demás topes en `ch` del theme sí van en el h2, porque así están en las maquetas; el de 44ch es el único que va fuera (comparativa, planes y esta). */ .ficha-opiniones__cab { max-width: 44ch; } .ficha-opiniones__h2 { margin-top: 14px; } /* Panel fijo a la izquierda. minmax(0,1fr) y no 1fr: si no, una lista larga estira la columna y el panel se come el ancho. */ .ficha-opiniones__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 16px; margin-top: 44px; align-items: start; } .ficha-opiniones__grid--sin-panel { grid-template-columns: minmax(0, 1fr); } .ficha-opiniones__texto { gap: 16px; } .ficha-opiniones__listas { grid-template-columns: 1fr 1fr; gap: 16px; } /* En escritorio el panel se apila entero: resumen arriba, barras debajo. */ .ficha-nota { display: block; padding: 32px; } .ficha-nota__resumen { text-align: left; } .ficha-nota__num { font-size: 62px; line-height: 1; letter-spacing: -.04em; } .ficha-nota .rating__stars { margin-top: 8px; font-size: 16px; } .ficha-nota__cuantas { margin-top: 6px; font-size: 14px; } .ficha-dist { gap: 9px; margin-top: 22px; } .ficha-dist__etiqueta { flex-basis: 18px; font-size: 13px; } .ficha-dist__barra { height: 7px; border-radius: 7px; background: var(--c-border-soft); } .ficha-dist__barra > span { height: 7px; border-radius: 7px; } .ficha-dist__pct { flex-basis: 34px; font-size: 13px; } /* En escritorio el panel de «más valoran» va sobre el tinte cálido de aviso, no sobre el verde de móvil. */ .ficha-valoran { padding: 26px; background: var(--c-note-bg); border: var(--bd) solid var(--c-note-border); } .ficha-valoran__titulo { font-size: 19px; color: var(--c-ink); } .ficha-valoran__items { gap: 11px; margin-top: 16px; } .ficha-valoran__item { gap: 10px; font-size: 16.5px; line-height: 1.55; color: #414F58; } .ficha-mejorable { padding: 26px; } .ficha-mejorable__titulo { font-size: 19px; } .ficha-mejorable__items { gap: 11px; margin-top: 16px; } .ficha-mejorable__item { gap: 10px; font-size: 16.5px; line-height: 1.55; } .ficha-cita { padding: 30px; } .ficha-cita__mark { display: block; font-family: Georgia, serif; font-size: 34px; line-height: .7; color: var(--c-quote); } .ficha-cita__texto { margin-top: 18px; max-width: 62ch; font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--c-quote-ink); } .ficha-cita__pie { margin-top: 16px; font-size: 14px; } } /* ---- 10 · FAQ ------------------------------------------------------------ */ .ficha-faq { padding: 28px 0 0; } .ficha-faq .eyebrow__bar { display: none; } .ficha-faq__h2 { font-size: 25px; line-height: 1.14; letter-spacing: -.025em; } .ficha-faq__lead { display: none; } .ficha-faq__acc { margin-top: 18px; } @media (min-width: 1024px) { .ficha-faq { padding: 88px 0; } .ficha-faq .eyebrow__bar { display: block; } .ficha-faq__inner { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; } .ficha-faq__h2 { display: block; margin-top: 14px; font-size: 40px; line-height: 1.06; letter-spacing: -.035em; } .ficha-faq__lead { display: block; margin-top: 20px; font-size: 16.5px; line-height: 1.65; } .ficha-faq__acc { display: grid; gap: 0; margin-top: 0; } .ficha-faq__item { border-radius: 0; background: transparent; border-top: var(--bd) solid var(--c-border-soft); } .ficha-faq__btn { min-height: 66px; padding: 22px 4px; font-size: 19px; } .ficha-faq__body { padding: 0 4px 24px; max-width: 74ch; font-size: 17px; line-height: 1.65; } } /* ---- 11 · Autoría, fuentes y cierre -------------------------------------- */ /* El bloque de cierre (.cta-cierre) sale en trece plantillas: sus reglas estan en componentes.css. Aqui solo la franja de la ficha. */ .ficha-eeat { padding: 28px 0 0; } .ficha-eeat__cierre { margin-top: 22px; } @media (min-width: 1024px) { .ficha-eeat { padding: 88px 0; } .ficha-eeat__inner { display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 64px; align-items: start; } .ficha-eeat__cierre { margin-top: 0; } }