de las landing pages de producto (traslados compartidos, traslados privados, mercadillo de Teguise). El header (hero) y el footer reutilizan las clases de index.css/styles.css; aquí solo va el contenido propio de estas páginas. TEMA: el sitio es OSCURO con una imagen de fondo FIJA (.fondo-web) que se transparenta a través de las secciones. Por eso aquí NO se usan fondos claros: los paneles van en negro/translúcido (var(--negro) / var(--transparente)), texto blanco, encabezados en dorado (var(--primario)) y borde dorado con outline-offset, igual que .ventajas / .zonas / .presentacion de la home. =========================================================================== */ /* HERO de las landing: 60vh en lugar del 90vh de la home (que se reserva para la página principal). Como producto.css solo se carga en las páginas de producto, esto NO afecta al index. Forzamos position:relative para que el contenido absoluto (.hero-texto) se centre DENTRO de esta altura y no se desborde sobre el contenido; el min-height evita que se corte en móvil. */ header { position: relative; height: 75dvh; min-height: 30rem; } /* Imagen de hero propia por producto (la clase va en el de cada landing). Mantiene el degradado oscuro de la home y solo cambia la foto de fondo. */ .hero-compartido header { background-image: linear-gradient(120deg, transparent, transparent, var(--negro)), url(/images/nuevas/compartido1.webp); } .hero-privado header { background-image: linear-gradient(120deg, transparent, transparent, var(--negro)), url(/images/nuevas/privado1.webp); } .hero-mercado header { background-image: linear-gradient(120deg, transparent, transparent, var(--negro)), url(/images/nuevas/teguise1.webp); } .hero-pmr header { background-image: linear-gradient(120deg, transparent, transparent, var(--negro)), url(/images/nuevas/pmr3.webp); } /* Tabla de tarifas diurno/nocturno (solo la usa la landing PMR adaptada) */ .tarifas-pmr { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; } .tarifas-pmr th, .tarifas-pmr td { border: 1px solid var(--primario); padding: 0.5rem; text-align: center; } .tarifas-pmr th { background-color: var(--primario); color: var(--negro); font-weight: 400; } .producto-main { background-color: var(--transparente); color: var(--blanco); padding: 3rem 1.5rem; } /* Intro de la página: párrafo orientado a la keyword, justo bajo el hero */ .producto-intro { max-width: 70ch; margin: 0 auto 3rem; text-align: center; line-height: 1.7; & h2 { font-size: clamp(1.4rem, 4vw, 2rem); color: var(--primario); margin-bottom: 1rem; } } /* Bloque por zona/servicio: panel negro con borde dorado (como .ventajas) */ .zona-producto { max-width: 1100px; margin: 0 auto 2.5rem; background-color: var(--negro); color: var(--blanco); border-radius: var(--border-radius); outline: 1px solid var(--primario); outline-offset: -0.6rem; overflow: hidden; .zona-cabecera { padding: 2rem 2.5rem 0.5rem; & h2 { /* Estilo unificado de títulos de sección (como .producto-intro h2) */ font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 200; color: var(--primario); } & p { color: var(--secundario); font-weight: 600; margin-top: 0.3rem; } } .zona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; padding: 1.5rem 2.5rem 2.5rem; @media (width < 768px) { grid-template-columns: 1fr; } } .zona-imagen { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; border-radius: var(--border-radius); } .zona-detalle { & h3 { margin: 1.4rem 0 0.5rem; font-size: 1.1rem; color: var(--primario); } & h3:first-child { margin-top: 0; } & ul { padding-left: 1.2rem; line-height: 1.6; & li { list-style: disc; margin-bottom: 0.3rem; } } & p { line-height: 1.6; } } } /* Chips de datos rápidos (distancia / punto de encuentro / grupo) */ .datos-rapidos { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.4rem 0; & div { flex: 1 1 8rem; background-color: var(--transparente); border: 1px solid var(--primario); border-radius: var(--border-radius); padding: 0.7rem 1rem; & span { display: block; } & .dato-titulo { font-size: 0.8rem; text-transform: uppercase; color: var(--secundario); font-weight: 600; } } } /* Bloque de reserva: precio + botón que abre FareHarbor */ .reservar-bloque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid #ffffff22; & .precio { font-size: 1.3rem; font-weight: 700; color: var(--secundario); & span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--blanco); } } & .boton { margin-top: 0; color: var(--blanco); font-weight: 600; text-transform: uppercase; transition: var(--transition); &:hover { background-color: var(--secundario); color: var(--negro); } } } /* Condiciones comunes (cancelación) */ .condiciones { max-width: 1100px; margin: 0 auto 3rem; padding: 2rem 2.5rem; background-color: var(--negro); color: var(--blanco); border-radius: var(--border-radius); outline: 1px solid var(--primario); outline-offset: -0.6rem; & h2 { /* Estilo unificado de títulos de sección (como .producto-intro h2) */ font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 200; color: var(--primario); margin-bottom: 0.8rem; } & p { line-height: 1.7; } } /* NOTA: los estilos del FAQ (.faq) y su animación (@keyframes faqAbrir) se movieron a index.css para que tanto las landings como la home (que no carga producto.css) compartan el mismo diseño de FAQ. */ /* Panel + borde dorado del FAQ SOLO en las landings (la home lo pone con .faq-home). Así el FAQ queda consistente con .zona-producto / .condiciones. */ .producto-main .faq { max-width: 1100px; /* mismo ancho que .condiciones / .zona-producto (el home usa 1180) */ padding: 2rem 1.25rem; /* padding lateral pequeño: preguntas cerca del borde, como el home */ background-color: var(--transparente); border-radius: var(--border-radius); outline: 1px solid var(--primario); outline-offset: -0.6rem; } /* Enlaces internos a las otras páginas de producto (cross-linking SEO) */ .otros-servicios { max-width: 1100px; margin: 0 auto; text-align: center; & > h2 { font-size: clamp(1.4rem, 4vw, 2rem); color: var(--primario); margin-bottom: 1.5rem; } .otros-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; & a { flex: 1 1 14rem; max-width: 20rem; padding: 1.2rem; background-color: var(--negro); color: var(--blanco); border-radius: var(--border-radius); font-weight: 600; outline: 1px solid var(--primario); outline-offset: -0.3rem; transition: var(--transition); &:hover { background-color: var(--primario); } } } } /* Sección "vehículo accesible" (exclusiva de la landing PMR): su lista de equipamiento es corta, así que limitamos el alto de la foto (vertical) para que la imagen no quede mucho más alta que el texto y no deje hueco. */ #vehiculo .zona-imagen { max-height: 22rem; }