{"id":1899,"date":"2025-10-06T19:15:02","date_gmt":"2025-10-06T17:15:02","guid":{"rendered":"https:\/\/oroi.design\/?page_id=1899"},"modified":"2025-12-11T15:32:22","modified_gmt":"2025-12-11T14:32:22","slug":"letsurf-together","status":"publish","type":"page","link":"https:\/\/oroi.design\/index.php\/letsurf-together\/","title":{"rendered":"LET\u00b4SURF TOGETHER"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1899\" class=\"elementor elementor-1899\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee7c75d e-flex e-con-boxed e-con e-parent\" data-id=\"ee7c75d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36ead61 elementor-absolute elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"36ead61\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:43}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1664\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04.jpg\" class=\"attachment-full size-full wp-image-3743\" alt=\"\" srcset=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04.jpg 1920w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04-600x520.jpg 600w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04-300x260.jpg 300w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04-1024x887.jpg 1024w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04-768x666.jpg 768w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/lst_04-1536x1331.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75ef495 elementor-widget elementor-widget-image\" data-id=\"75ef495\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_direction&quot;:&quot;negative&quot;,&quot;motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.1,&quot;sizes&quot;:[]},&quot;motion_fx_tilt_effect&quot;:&quot;yes&quot;,&quot;motion_fx_tilt_direction&quot;:&quot;negative&quot;,&quot;motion_fx_tilt_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:3,&quot;sizes&quot;:[]}}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450-1024x683.png\" class=\"attachment-large size-large wp-image-1934\" alt=\"\" srcset=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450-1024x683.png 1024w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450-600x400.png 600w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450-300x200.png 300w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450-768x512.png 768w, https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/lst-logo-inicio-e1759925915450.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-694c2b3 flecha-botando elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"694c2b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-down\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca70024 elementor-absolute elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-image\" data-id=\"ca70024\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:50}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Fondo-inicio-vertical-LST.png\" title=\"Fondo inicio vertical LST\" alt=\"Fondo inicio vertical LST\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abaa676 e-con-full e-flex e-con e-parent\" data-id=\"abaa676\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-62cd9fe e-flex e-con-boxed e-con e-child\" data-id=\"62cd9fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-000bedd elementor-headline--style-highlight elementor-widget elementor-widget-animated-headline\" data-id=\"000bedd\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;marker&quot;:&quot;underline&quot;,&quot;highlighted_text&quot;:&quot;Let&#039;s Surf Together&quot;,&quot;headline_style&quot;:&quot;highlight&quot;,&quot;highlight_animation_duration&quot;:1200}\" data-widget_type=\"animated-headline.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3 class=\"elementor-headline\">\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">Introducci\u00f3n Proyecto \u2013<\/span>\n\t\t\t\t<span class=\"elementor-headline-dynamic-wrapper elementor-headline-text-wrapper\">\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text elementor-headline-text-active\">Let's Surf Together<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t<\/h3>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-290a643 elementor-widget elementor-widget-text-editor\" data-id=\"290a643\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Direcci\u00f3n creativa, identidad de marca, dise\u00f1o web, fotograf\u00eda y estrategia digital<\/strong> para Let\u2019s Surf Together, empresa de viajes de surf con experiencias por todo el mundo. Durante un a\u00f1o colabor\u00e9 en construir una identidad y presencia online que transmiten su esp\u00edritu relajado y aventurero.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c99b2f3 e-grid e-con-boxed e-con e-parent\" data-id=\"c99b2f3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8e4059 elementor-widget elementor-widget-text-editor\" data-id=\"f8e4059\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>(TIPO DE PROYECTO)<\/strong><br \/>Identidad de Marca<br \/>Dise\u00f1o y Desarrollo Web<br \/>Direcci\u00f3n de Arte<br \/>Fotograf\u00eda<br \/>Dise\u00f1o y Gesti\u00f3n de Redes Sociales<br \/>Material Promocional<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ddfbd1 elementor-widget elementor-widget-text-editor\" data-id=\"5ddfbd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>(CR\u00c9DITOS)<\/strong><br \/>Cliente: Let\u2019s Surf Together<br \/>Direcci\u00f3n Creativa y Dise\u00f1o: Eduardo Garc\u00eda<br \/>Fotograf\u00eda: Eduardo Garc\u00eda<br \/>Desarrollo Web: Eduardo Garc\u00eda<br \/>Estrategia en Redes Sociales:\u00a0Eduardo Garc\u00eda<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcf5b4d elementor-widget elementor-widget-text-editor\" data-id=\"fcf5b4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Desde mi incorporaci\u00f3n al proyecto, he contribuido a convertir\u00a0<em>Let\u2019s Surf Together<\/em>\u00a0en una marca visualmente consistente y emocionalmente atractiva \u2014definiendo su tono y estilo, y capturando la esencia de sus viajes de surf a trav\u00e9s de la fotograf\u00eda y la narrativa digital.<br \/>El trabajo abarca web, redes y materiales impresos, unificando todos los elementos visuales bajo una identidad reconocible que celebra la comunidad, la libertad y el estilo de vida del surf.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d5ec29 e-flex e-con-boxed e-con e-parent\" data-id=\"1d5ec29\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb9283e elementor-widget elementor-widget-video\" data-id=\"cb9283e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Anuncio-Rutina_LST_Baja.mov\" autoplay=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c4ce34c e-flex e-con-boxed e-con e-parent\" data-id=\"c4ce34c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad04ae6 elementor-widget elementor-widget-html\" data-id=\"ad04ae6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =============================================\n     SECCI\u00d3N - LET'S SURF TOGETHER\n============================================== -->\n\n<div class=\"surf-section\">\n\n    <!-- =======================\n         T\u00cdTULO EDITORIAL\n    ======================== -->\n    <div class=\"surf-title-block\">\n\n        <div class=\"surf-title-num\">\n            <span>01<\/span>\n        <\/div>\n\n        <div class=\"surf-title-content\">\n            <h2 class=\"surf-title-main\">LET'S SURF TOGETHER \u2014 BRANDING & WEB<\/h2>\n            <p class=\"surf-title-sub\">\n                Identidad visual \u00b7 Dise\u00f1o web \u00b7 Direcci\u00f3n de arte digital\n            <\/p>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"surf-title-line\"><\/div>\n\n\n\n    <!-- =================================================\n         GALER\u00cdA EDITORIAL\n    ================================================= -->\n    <div class=\"surf-gallery-wrapper\">\n\n        <div class=\"surf-gallery\">\n\n            <!-- IM\u00c1GENES PRINCIPALES -->\n            <div class=\"s-item wide\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/LST_01.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/11\/LST_01.jpg\">\n            <\/div>\n\n            <div class=\"s-item\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/letsurftogether.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/letsurftogether.jpg\">\n            <\/div>\n\n            <div class=\"s-item tall\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/Laga-2024_10-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/Laga-2024_10-scaled.jpg\">\n            <\/div>\n\n            <div class=\"s-item\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01_02-scaled.png\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01_02-scaled.png\">\n            <\/div>\n\n            <!-- IM\u00c1GENES OCULTAS EN M\u00d3VIL -->\n            <div class=\"s-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_01.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_01.jpg\">\n            <\/div>\n\n            <div class=\"s-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_13-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_13-scaled.jpg\">\n            <\/div>\n\n        <\/div>\n\n\n        <!-- LIGHTBOX -->\n        <div class=\"s-lightbox\">\n            <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"Imagen ampliada\">\n            <div class=\"lightbox-close\">\u00d7<\/div>\n        <\/div>\n\n    <\/div>\n\n\n\n    <!-- =============================================\n         BOTONES - ESTILO ID\u00c9NTICO AL C\u00d3DIGO PROPORCIONADO\n    ============================================== -->\n    <div class=\"surf-buttons\">\n        <a href=\"https:\/\/www.letsurftogether.com\/\" target=\"_blank\" class=\"cta-button\">\n            <span>letsurftogether<\/span>\n            <div class=\"cta-arrow\">\u2192<\/div>\n        <\/a>\n        <a href=\"https:\/\/www.instagram.com\/letsurftogether\/\" target=\"_blank\" class=\"cta-button\">\n            <span>instagram<\/span>\n            <div class=\"cta-arrow\">\u2192<\/div>\n        <\/a>\n    <\/div>\n\n\n\n    <!-- =============================================\n         NOTA CURATORIAL\n    ============================================== -->\n    <div class=\"surf-explanation\">\n\n        <div class=\"explanation-line\"><\/div>\n\n        <div class=\"explanation-number\">nota curatorial \u2014 01<\/div>\n\n        <p class=\"explanation-text\">\n            Let's Surf Together nace como marca y plataforma de surf trips que combina comunidad, viaje y aprendizaje de surf. Este m\u00f3dulo recoge el trabajo de direcci\u00f3n de arte digital y narrativa visual.\n        <\/p>\n\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   TIPOGRAF\u00cdA Y VARIABLES GLOBALES\n========================================================= *\/\n.surf-section * {\n    font-family: \"PP Supply Mono\", monospace;\n    color: #000000 !important;\n}\n\n:root {\n    --color-foreground: rgb(10, 10, 10);\n    --color-background: rgb(255, 255, 255);\n    --color-accent: rgb(255, 223, 0);\n    --color-accent-dark: rgb(220, 190, 0);\n    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\/* =========================================================\n   T\u00cdTULAR\n========================================================= *\/\n.surf-title-block {\n    display: flex;\n    align-items: center;\n    gap: 40px;\n    margin-bottom: 25px;\n}\n.surf-title-num { \n    writing-mode: vertical-rl; \n    transform: rotate(180deg); \n    opacity: 0.4; \n}\n.surf-title-num span { \n    font-size: 34px; \n    font-weight: 350; \n}\n.surf-title-main { \n    margin: 0; \n    font-size: 32px; \n    font-weight: 400; \n    letter-spacing: -0.02em;\n}\n.surf-title-sub { \n    margin: 8px 0 0 0; \n    font-size: 14px; \n    opacity: 0.6; \n    letter-spacing: 0.02em;\n}\n.surf-title-line { \n    height: 1px; \n    background: rgba(0,0,0,0.1); \n    margin-bottom: 55px; \n}\n\n\n\n\/* =========================================================\n   GALER\u00cdA (DESKTOP)\n========================================================= *\/\n.surf-gallery {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 280px;\n    gap: 22px;\n}\n.surf-gallery .s-item {\n    overflow: hidden;\n    cursor: pointer;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity .6s ease, transform .6s ease;\n    position: relative;\n}\n.surf-gallery .s-item.visible { opacity: 1; transform: translateY(0); }\n\n.surf-gallery img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.8s var(--transition-smooth);\n    will-change: transform;\n}\n\n.surf-gallery .s-item:hover img { \n    transform: scale(1.03); \n}\n\n.tall { grid-row: span 2; }\n.wide { grid-column: span 2; }\n\n\n\n\/* =========================================================\n   BOTONES - ID\u00c9NTICOS AL C\u00d3DIGO PROPORCIONADO\n========================================================= *\/\n.surf-buttons {\n    display: flex;\n    gap: 16px;\n    margin-top: 60px;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: slideUpFade 1s ease 0.9s forwards;\n}\n\n\/* CTA Button - COPIA EXACTA DEL C\u00d3DIGO PROPORCIONADO *\/\n.cta-button {\n    display: inline-flex;\n    align-items: center;\n    padding: 1rem 2.2rem;\n    background: transparent;\n    color: var(--color-foreground);\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    font-size: 0.85rem;\n    font-weight: 500;\n    transition: all 0.4s var(--transition-smooth);\n    position: relative;\n    overflow: hidden;\n    border: 1px solid rgba(10, 10, 10, 0.3);\n    font-family: \"PP Supply Mono\", monospace;\n}\n\n.cta-button::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--color-accent);\n    transform: translateX(-100%);\n    transition: transform 0.6s var(--transition-smooth);\n    z-index: -1;\n}\n\n.cta-button:hover {\n    color: var(--color-background);\n    border-color: var(--color-accent);\n    transform: translateY(-3px);\n    box-shadow: 0 10px 25px rgba(255, 223, 0, 0.15);\n}\n\n.cta-button:hover::before {\n    transform: translateX(0);\n}\n\n.cta-button span {\n    position: relative;\n    z-index: 1;\n    transition: color 0.3s ease;\n}\n\n.cta-arrow {\n    margin-left: 0.7rem;\n    transition: transform 0.4s var(--transition-smooth);\n    position: relative;\n    z-index: 1;\n    font-size: 1rem;\n}\n\n.cta-button:hover .cta-arrow {\n    transform: translateX(5px);\n}\n\n\/* Animaci\u00f3n de entrada *\/\n@keyframes slideUpFade {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n}\n\n\n\n\/* =========================================================\n   M\u00d3VIL\n========================================================= *\/\n\n@media (max-width: 768px) {\n\n    .surf-title-block {\n        gap: 24px;\n    }\n    \n    .surf-title-main {\n        font-size: 24px;\n    }\n    \n    .surf-title-sub {\n        font-size: 13px;\n    }\n\n    .surf-gallery {\n        grid-template-columns: 1fr !important;\n        grid-auto-rows: auto !important;\n        gap: 16px !important;\n    }\n\n    .surf-gallery img {\n        width: 100%;\n        height: auto;\n        object-fit: cover;\n    }\n\n    .mobile-hidden {\n        display: none !important;\n    }\n    \n    \/* Botones en m\u00f3vil - RESPONSIVE COMO EL C\u00d3DIGO ORIGINAL *\/\n    .surf-buttons {\n        flex-direction: column;\n        gap: 16px;\n        margin-top: 40px;\n    }\n    \n    .cta-button {\n        width: 100%;\n        justify-content: center;\n        padding: 0.9rem 2rem;\n        font-size: 0.85rem;\n    }\n    \n    .cta-arrow {\n        margin-left: 0.7rem;\n    }\n    \n    \/* Ajustes espec\u00edficos para m\u00f3vil como en el c\u00f3digo original *\/\n    @media (max-width: 900px) {\n        .cta-button {\n            padding: 0.9rem 2rem;\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .cta-button {\n            padding: 0.8rem 1.8rem;\n            font-size: 0.8rem;\n        }\n    }\n    \n    @media (max-width: 480px) {\n        .cta-button {\n            padding: 0.7rem 1.5rem;\n            font-size: 0.75rem;\n        }\n        \n        .cta-arrow {\n            font-size: 0.9rem;\n            margin-left: 0.5rem;\n        }\n    }\n}\n\n\n\n\/* =========================================================\n   NOTA CURATORIAL\n========================================================= *\/\n.surf-explanation {\n    max-width: 480px;\n    margin-left: auto;\n    margin-top: 80px;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity .7s ease, transform .7s ease .1s;\n}\n.explanation-line { \n    height: 1px; \n    background: rgba(0,0,0,0.1); \n    margin-bottom: 16px; \n}\n.explanation-number { \n    font-size: 12px; \n    opacity: 0.5; \n    margin-bottom: 16px; \n    letter-spacing: 0.1em;\n}\n.explanation-text { \n    font-size: 14px; \n    opacity: 0.8; \n    line-height: 1.5;\n}\n.surf-explanation.visible { opacity: 1; transform: translateY(0); }\n\n\n\n\/* =========================================================\n   LIGHTBOX - ARREGLADO\n========================================================= *\/\n.s-lightbox {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.95);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 99999;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.s-lightbox.show {\n    display: flex;\n    opacity: 1;\n}\n\n#lightbox-img {\n    max-width: 90%;\n    max-height: 90%;\n    object-fit: contain;\n    border-radius: 1px;\n    transform: scale(0.95);\n    transition: transform 0.3s ease;\n    display: block;\n}\n\n.s-lightbox.show #lightbox-img {\n    transform: scale(1);\n}\n\n\/* Bot\u00f3n de cerrar *\/\n.lightbox-close {\n    position: absolute;\n    top: 30px;\n    right: 30px;\n    color: white;\n    font-size: 40px;\n    cursor: pointer;\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.7;\n    transition: opacity 0.3s ease;\n    z-index: 100000;\n}\n\n.lightbox-close:hover {\n    opacity: 1;\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* LIGHTBOX - ARREGLADO *\/\ndocument.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ Configurar clic en im\u00e1genes\n    document.querySelectorAll('.surf-gallery img').forEach(img => {\n        img.addEventListener('click', function(e) {\n            e.stopPropagation();\n            \n            const lightbox = document.querySelector('.s-lightbox');\n            const lightboxImg = document.getElementById('lightbox-img');\n            const fullImageUrl = this.dataset.full;\n            \n            \/\/ Mostrar lightbox primero\n            lightbox.classList.add('show');\n            document.body.style.overflow = \"hidden\";\n            \n            \/\/ Precargar la imagen antes de asignarla al lightbox\n            const tempImage = new Image();\n            tempImage.onload = function() {\n                lightboxImg.src = fullImageUrl;\n                lightboxImg.style.opacity = '1';\n            };\n            \n            tempImage.onerror = function() {\n                \/\/ Si falla, intentar con la imagen miniatura\n                lightboxImg.src = img.src;\n                lightboxImg.style.opacity = '1';\n                console.error('Error cargando imagen:', fullImageUrl);\n            };\n            \n            tempImage.src = fullImageUrl;\n        });\n    });\n    \n    \/\/ Cerrar lightbox al hacer clic en el fondo\n    document.querySelector('.s-lightbox').addEventListener('click', function(e) {\n        if (e.target === this || e.target.classList.contains('lightbox-close')) {\n            this.classList.remove('show');\n            document.body.style.overflow = \"auto\";\n            \n            \/\/ Limpiar la imagen despu\u00e9s de la transici\u00f3n\n            setTimeout(() => {\n                document.getElementById('lightbox-img').src = \"\";\n            }, 300);\n        }\n    });\n    \n    \/\/ Cerrar con tecla ESC\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            const lightbox = document.querySelector('.s-lightbox');\n            if (lightbox.classList.contains('show')) {\n                lightbox.classList.remove('show');\n                document.body.style.overflow = \"auto\";\n                \n                setTimeout(() => {\n                    document.getElementById('lightbox-img').src = \"\";\n                }, 300);\n            }\n        }\n    });\n    \n    \n    \/* SCROLL REVEAL *\/\n    const items = document.querySelectorAll('.surf-gallery .s-item');\n    const explanation = document.querySelector('.surf-explanation');\n    const surfButtons = document.querySelector('.surf-buttons');\n    \n    function revealOnScroll() {\n        const trigger = window.innerHeight * 0.85;\n        \n        items.forEach(item => {\n            if (item.getBoundingClientRect().top < trigger) {\n                item.classList.add('visible');\n            }\n        });\n        \n        if (explanation && explanation.getBoundingClientRect().top < trigger) {\n            explanation.classList.add('visible');\n        }\n        \n        if (surfButtons && surfButtons.getBoundingClientRect().top < trigger) {\n            surfButtons.style.animationPlayState = 'running';\n        }\n    }\n    \n    window.addEventListener('scroll', revealOnScroll);\n    window.addEventListener('load', revealOnScroll);\n    revealOnScroll(); \/\/ Ejecutar al cargar\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdd054f e-flex e-con-boxed e-con e-parent\" data-id=\"fdd054f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c14ec36 elementor-widget elementor-widget-html\" data-id=\"c14ec36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =============================================\n     SECCI\u00d3N - APPAREL & MERCH\n============================================== -->\n\n<div class=\"apparel-section\">\n\n    <!-- =======================\n         T\u00cdTULO EDITORIAL\n    ======================== -->\n    <div class=\"apparel-title-block\">\n\n        <div class=\"apparel-title-num\">\n            <span>02<\/span>\n        <\/div>\n\n        <div class=\"apparel-title-content\">\n            <h2 class=\"apparel-title-main\">APPAREL \u2014 CAMISETAS & MERCH<\/h2>\n            <p class=\"apparel-title-sub\">\n                Dise\u00f1o de prenda \u00b7 Fotograf\u00eda de producto \u00b7 Concepto gr\u00e1fico\n            <\/p>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"apparel-title-line\"><\/div>\n\n\n\n    <!-- =================================================\n         CAMISETA 01 - \"K\u0100NAKA\"\n    ================================================= -->\n    <div class=\"tshirt-section\">\n\n        <div class=\"tshirt-header\">\n            <div class=\"tshirt-number\">01<\/div>\n            <div class=\"tshirt-title\">\"k\u0101naka\" \u2014 s\u00edmbolo polinesio<\/div>\n        <\/div>\n\n        <div class=\"tshirt-description\">\n            <p>\n                Este s\u00edmbolo surge de la uni\u00f3n de formas inspiradas en el koru polinesio, \n                motivo que representa crecimiento, conexi\u00f3n y nuevos comienzos. Reinterpretado \n                en una estructura circular din\u00e1mica, transmite la esencia de Let's Surf Together: \n                personas que se encuentran, comparten camino y avanzan juntas hacia la misma ola. \n                Un emblema de comunidad y movimiento aplicado como elemento central en la espalda.\n            <\/p>\n        <\/div>\n\n        <!-- GALER\u00cdA CAMISETA 01 -->\n        <div class=\"tshirt-gallery\">\n\n            <div class=\"t-item wide\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_08.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_08.jpg\"\n                     alt=\"K\u0101naka - Vista frontal\">\n            <\/div>\n\n            <div class=\"t-item\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01_01-scaled.png\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01_01-scaled.png\"\n                     alt=\"K\u0101naka - Dise\u00f1o gr\u00e1fico\">\n            <\/div>\n\n            <div class=\"t-item tall\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/LST.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/06\/LST.jpg\"\n                     alt=\"K\u0101naka - En contexto playa\">\n            <\/div>\n\n            <div class=\"t-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_06.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_06.jpg\"\n                     alt=\"K\u0101naka - Vista detalle\">\n            <\/div>\n\n            <div class=\"t-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_14-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Laga-2024_14-scaled.jpg\"\n                     alt=\"K\u0101naka - En uso surf\">\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n\n    <!-- =================================================\n         CAMISETA 02 - \"TAKE THE RISK\"\n    ================================================= -->\n    <div class=\"tshirt-section\">\n\n        <div class=\"tshirt-header\">\n            <div class=\"tshirt-number\">02<\/div>\n            <div class=\"tshirt-title\">\"take the risk\" \u2014 mensaje motivacional<\/div>\n        <\/div>\n\n        <div class=\"tshirt-description\">\n            <p>\n                Tomando como referencia la frase \"Take the risk or lose the chance\", \n                la reinterpretamos como \"Take the risk or lose the wave\" vincul\u00e1ndola al surf. \n                Resume la esencia de los surftrips: si no remas, no mejoras. Si no te atreves, \n                la ola pasa. Un mensaje que encapsula la filosof\u00eda de progresar y aprovechar \n                cada oportunidad dentro y fuera del agua.\n            <\/p>\n        <\/div>\n\n        <!-- GALER\u00cdA CAMISETA 02 -->\n        <div class=\"tshirt-gallery\">\n\n            <div class=\"t-item tall\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_69-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_69-scaled.jpg\"\n                     alt=\"Take the Risk - En contexto viaje\">\n            <\/div>\n\n            <div class=\"t-item\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_04-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_04-scaled.jpg\"\n                     alt=\"Take the Risk - Dise\u00f1o frontal\">\n            <\/div>\n\n            <div class=\"t-item wide\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_02.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_02.jpg\"\n                     alt=\"Take the Risk - Vista detalle\">\n            <\/div>\n\n            <div class=\"t-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_03-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_03-scaled.jpg\"\n                     alt=\"Take the Risk - Fotograf\u00eda producto\">\n            <\/div>\n\n            <div class=\"t-item mobile-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01.2-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Camiseta_01.2-scaled.jpg\"\n                     alt=\"Take the Risk - En uso\">\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n\n    <!-- =================================================\n         L\u00cdNEA HORIZONTAL DE SEPARACI\u00d3N\n    ================================================= -->\n    <div class=\"apparel-divider-line\"><\/div>\n\n\n\n    <!-- =================================================\n         NOTA CURATORIAL - AL FINAL A LA DERECHA\n    ================================================= -->\n    <div class=\"apparel-curatorial\">\n        <div class=\"curatorial-content\">\n            <div class=\"curatorial-line\"><\/div>\n            <div class=\"curatorial-number\">nota curatorial \u2014 02<\/div>\n            <p class=\"curatorial-text\">\n                Las camisetas son un soporte clave: pieza gr\u00e1fica, elemento de comunidad y recuerdo del surftrip.\n            <\/p>\n        <\/div>\n    <\/div>\n\n\n\n    <!-- =============================================\n         LIGHTBOX (CORREGIDO)\n    ============================================== -->\n    <div class=\"a-lightbox\" id=\"apparel-lightbox\">\n        <div class=\"lightbox-content\">\n            <img decoding=\"async\" id=\"apparel-lightbox-img\" src=\"\" alt=\"\">\n            <button class=\"lightbox-close\">&times;<\/button>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   TIPOGRAF\u00cdA Y VARIABLES GLOBALES\n========================================================= *\/\n.apparel-section * {\n    font-family: \"PP Supply Mono\", monospace;\n    color: #000000 !important;\n}\n\n:root {\n    --color-foreground: rgb(10, 10, 10);\n    --color-background: rgb(255, 255, 255);\n    --color-accent: rgb(255, 107, 53);\n    --color-accent-dark: rgb(220, 90, 40);\n    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\/* =========================================================\n   T\u00cdTULAR\n========================================================= *\/\n.apparel-title-block {\n    display: flex;\n    align-items: center;\n    gap: 40px;\n    margin-bottom: 25px;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: slideUpFade 1s ease 0.3s forwards;\n}\n.apparel-title-num { \n    writing-mode: vertical-rl; \n    transform: rotate(180deg); \n    opacity: 0.4; \n}\n.apparel-title-num span { \n    font-size: 34px; \n    font-weight: 350; \n}\n.apparel-title-main { \n    margin: 0; \n    font-size: 32px; \n    font-weight: 400; \n    letter-spacing: -0.02em;\n}\n.apparel-title-sub { \n    margin: 8px 0 0 0; \n    font-size: 14px; \n    opacity: 0.6; \n    letter-spacing: 0.02em;\n}\n\n\/* L\u00cdNEA HORIZONTAL DEBAJO DEL T\u00cdTULO *\/\n.apparel-title-line { \n    height: 1px; \n    background: rgba(0,0,0,0.1); \n    margin-bottom: 60px; \n    opacity: 0;\n    animation: widthGrow 0.8s ease 0.5s forwards;\n}\n\n@keyframes widthGrow {\n    from { width: 0%; }\n    to { width: 100%; }\n}\n\n\n\n\/* =========================================================\n   SECCI\u00d3N DE CAMISETA\n========================================================= *\/\n.tshirt-section {\n    margin-bottom: 120px;\n    opacity: 0;\n    transform: translateY(30px);\n    animation: slideUpFade 1s ease forwards;\n}\n\n.tshirt-section:nth-child(1) { animation-delay: 0.7s; }\n.tshirt-section:nth-child(2) { animation-delay: 0.9s; }\n\n.tshirt-header {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 16px;\n}\n\n.tshirt-number {\n    font-size: 20px;\n    font-weight: 400;\n    opacity: 0.5;\n}\n\n.tshirt-title {\n    font-size: 20px;\n    font-weight: 400;\n    letter-spacing: -0.01em;\n}\n\n.tshirt-description {\n    max-width: 560px;\n    margin-bottom: 40px;\n}\n\n.tshirt-description p {\n    font-size: 15px;\n    line-height: 1.6;\n    opacity: 0.8;\n}\n\n\n\n\/* =========================================================\n   GALER\u00cdA DE CAMISETAS\n========================================================= *\/\n.tshirt-gallery {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 260px;\n    gap: 18px;\n}\n\n.tshirt-gallery .t-item {\n    overflow: hidden;\n    cursor: pointer;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity .6s ease, transform .6s ease;\n    position: relative;\n}\n\n.tshirt-gallery .t-item.visible { \n    opacity: 1; \n    transform: translateY(0); \n}\n\n.tshirt-gallery img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.8s var(--transition-smooth);\n    will-change: transform;\n}\n\n.tshirt-gallery .t-item:hover img { \n    transform: scale(1.03); \n}\n\n.tall { grid-row: span 2; }\n.wide { grid-column: span 2; }\n\n\/* Efecto hover espec\u00edfico *\/\n.tshirt-gallery .t-item::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, \n        rgba(255,107,53,0) 0%, \n        rgba(255,107,53,0.03) 100%);\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n    opacity: 0;\n}\n\n.tshirt-gallery .t-item:hover::after {\n    opacity: 1;\n}\n\n\n\n\/* =========================================================\n   L\u00cdNEA DE SEPARACI\u00d3N ANTES DE LA NOTA CURATORIAL\n========================================================= *\/\n.apparel-divider-line {\n    height: 1px;\n    background: rgba(0,0,0,0.1);\n    margin: 40px 0 60px 0;\n    opacity: 0;\n    animation: widthGrow 0.8s ease 1s forwards;\n}\n\n\n\n\/* =========================================================\n   NOTA CURATORIAL - AL FINAL A LA DERECHA\n========================================================= *\/\n.apparel-curatorial {\n    margin-top: 0;\n    display: flex;\n    justify-content: flex-end;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: slideUpFade 1s ease 1.2s forwards;\n}\n\n.curatorial-content {\n    max-width: 460px;\n    width: 100%;\n    margin-left: auto;\n}\n\n.curatorial-line { \n    height: 1px; \n    background: rgba(0,0,0,0.1); \n    margin-bottom: 16px; \n}\n\n.curatorial-number { \n    font-size: 12px; \n    opacity: 0.5; \n    margin-bottom: 16px; \n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n}\n\n.curatorial-text { \n    font-size: 14px; \n    opacity: 0.8; \n    line-height: 1.5;\n}\n\n\n\n\/* =========================================================\n   LIGHTBOX - CORREGIDO\n========================================================= *\/\n.a-lightbox {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.95);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 99999;\n    padding: 20px;\n    box-sizing: border-box;\n}\n\n.a-lightbox.show { \n    display: flex; \n}\n\n.lightbox-content {\n    position: relative;\n    max-width: 90%;\n    max-height: 90%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.a-lightbox img {\n    max-width: 100%;\n    max-height: 85vh;\n    object-fit: contain;\n    border-radius: 2px;\n    display: block;\n}\n\n.lightbox-close {\n    position: absolute;\n    top: -40px;\n    right: 0;\n    background: none;\n    border: none;\n    color: white;\n    font-size: 32px;\n    cursor: pointer;\n    padding: 0;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.7;\n    transition: opacity 0.3s ease;\n}\n\n.lightbox-close:hover {\n    opacity: 1;\n}\n\n\n\n\/* =========================================================\n   M\u00d3VIL\n========================================================= *\/\n@media (max-width: 768px) {\n\n    .apparel-title-block {\n        gap: 24px;\n        flex-direction: column;\n        align-items: flex-start;\n    }\n    \n    .apparel-title-num {\n        writing-mode: horizontal-tb;\n        transform: none;\n    }\n    \n    .apparel-title-main {\n        font-size: 24px;\n    }\n    \n    .apparel-title-sub {\n        font-size: 13px;\n    }\n    \n    .apparel-title-line {\n        margin-bottom: 40px;\n    }\n    \n    .apparel-divider-line {\n        margin: 30px 0 40px 0;\n    }\n    \n    .tshirt-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        margin-bottom: 20px;\n    }\n    \n    .tshirt-number {\n        font-size: 18px;\n    }\n    \n    .tshirt-title {\n        font-size: 18px;\n    }\n    \n    .tshirt-description {\n        margin-bottom: 30px;\n    }\n    \n    .tshirt-description p {\n        font-size: 14px;\n    }\n\n    .tshirt-gallery {\n        grid-template-columns: 1fr !important;\n        grid-auto-rows: auto !important;\n        gap: 14px !important;\n    }\n\n    .tshirt-gallery img {\n        width: 100%;\n        height: auto;\n        object-fit: cover;\n    }\n\n    .mobile-hidden {\n        display: none !important;\n    }\n    \n    .tshirt-section {\n        margin-bottom: 80px;\n    }\n    \n    \/* NOTA CURATORIAL EN M\u00d3VIL *\/\n    .apparel-curatorial {\n        margin-top: 0;\n        justify-content: flex-start;\n    }\n    \n    .curatorial-content {\n        max-width: 100%;\n        margin-left: 0;\n    }\n    \n    \/* LIGHTBOX EN M\u00d3VIL *\/\n    .a-lightbox {\n        padding: 10px;\n    }\n    \n    .lightbox-close {\n        top: -35px;\n        right: -10px;\n        font-size: 28px;\n    }\n}\n\n\n\n\/* =========================================================\n   ANIMACIONES\n========================================================= *\/\n@keyframes slideUpFade {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* LIGHTBOX CORREGIDO *\/\ndocument.addEventListener('DOMContentLoaded', function() {\n    const lightbox = document.getElementById('apparel-lightbox');\n    const lightboxImg = document.getElementById('apparel-lightbox-img');\n    const lightboxClose = document.querySelector('.lightbox-close');\n    \n    if (!lightbox || !lightboxImg) {\n        console.error('No se encontraron elementos del lightbox');\n        return;\n    }\n    \n    \/\/ Asignar eventos a todas las im\u00e1genes de la galer\u00eda\n    document.querySelectorAll('.tshirt-gallery img').forEach(img => {\n        img.addEventListener('click', function() {\n            const fullSizeSrc = this.getAttribute('data-full');\n            \n            if (fullSizeSrc) {\n                \/\/ Cargar la imagen antes de mostrarla\n                lightboxImg.src = fullSizeSrc;\n                lightboxImg.alt = this.alt || 'Imagen ampliada';\n                \n                \/\/ Esperar a que la imagen se cargue\n                lightboxImg.onload = function() {\n                    lightbox.classList.add('show');\n                    document.body.style.overflow = \"hidden\";\n                    document.documentElement.style.overflow = \"hidden\";\n                };\n                \n                \/\/ Si hay error de carga\n                lightboxImg.onerror = function() {\n                    console.error('Error al cargar la imagen:', fullSizeSrc);\n                    lightboxImg.src = this.src; \/\/ Usar la imagen peque\u00f1a como fallback\n                    lightbox.classList.add('show');\n                    document.body.style.overflow = \"hidden\";\n                    document.documentElement.style.overflow = \"hidden\";\n                };\n            } else {\n                console.error('No se encontr\u00f3 atributo data-full en la imagen');\n            }\n        });\n    });\n    \n    \/\/ Cerrar lightbox al hacer clic en el bot\u00f3n de cerrar\n    if (lightboxClose) {\n        lightboxClose.addEventListener('click', function(e) {\n            e.stopPropagation();\n            lightbox.classList.remove('show');\n            document.body.style.overflow = \"auto\";\n            document.documentElement.style.overflow = \"auto\";\n        });\n    }\n    \n    \/\/ Cerrar lightbox al hacer clic en el fondo\n    lightbox.addEventListener('click', function(e) {\n        if (e.target === lightbox) {\n            lightbox.classList.remove('show');\n            document.body.style.overflow = \"auto\";\n            document.documentElement.style.overflow = \"auto\";\n        }\n    });\n    \n    \/\/ Cerrar lightbox con tecla ESC\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' && lightbox.classList.contains('show')) {\n            lightbox.classList.remove('show');\n            document.body.style.overflow = \"auto\";\n            document.documentElement.style.overflow = \"auto\";\n        }\n    });\n});\n\n\n\/* SCROLL REVEAL - Galer\u00edas independientes por camiseta *\/\nconst tshirtGalleries = document.querySelectorAll('.tshirt-gallery');\n\nfunction revealOnScroll() {\n    const trigger = window.innerHeight * 0.85;\n    \n    \/\/ Para cada galer\u00eda de camiseta\n    tshirtGalleries.forEach(gallery => {\n        const items = gallery.querySelectorAll('.t-item');\n        \n        items.forEach(item => {\n            if (item.getBoundingClientRect().top < trigger) {\n                item.classList.add('visible');\n            }\n        });\n    });\n    \n    \/\/ L\u00ednea divisoria\n    const dividerLine = document.querySelector('.apparel-divider-line');\n    if (dividerLine && dividerLine.getBoundingClientRect().top < trigger) {\n        dividerLine.style.animationPlayState = 'running';\n    }\n    \n    \/\/ Nota curatorial\n    const curatorial = document.querySelector('.apparel-curatorial');\n    if (curatorial && curatorial.getBoundingClientRect().top < trigger) {\n        curatorial.style.animationPlayState = 'running';\n    }\n}\n\n\/\/ Inicializar animaciones\nwindow.addEventListener('scroll', revealOnScroll);\nwindow.addEventListener('load', revealOnScroll);\n\n\/\/ Aplicar animaciones al cargar\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ T\u00edtulo\n    const titleBlock = document.querySelector('.apparel-title-block');\n    if (titleBlock) {\n        setTimeout(() => {\n            titleBlock.style.animationPlayState = 'running';\n        }, 300);\n    }\n    \n    \/\/ L\u00ednea del t\u00edtulo\n    const titleLine = document.querySelector('.apparel-title-line');\n    if (titleLine) {\n        setTimeout(() => {\n            titleLine.style.animationPlayState = 'running';\n        }, 500);\n    }\n    \n    \/\/ L\u00ednea divisoria y nota curatorial (se activar\u00e1n por scroll)\n    const dividerLine = document.querySelector('.apparel-divider-line');\n    const curatorial = document.querySelector('.apparel-curatorial');\n    \n    if (dividerLine) {\n        dividerLine.style.animationPlayState = 'paused';\n    }\n    if (curatorial) {\n        curatorial.style.animationPlayState = 'paused';\n    }\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f9b347 e-flex e-con-boxed e-con e-parent\" data-id=\"4f9b347\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7178523 elementor-widget elementor-widget-html\" data-id=\"7178523\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =============================================\n     SECCI\u00d3N - SURFTRIPS LIFESTYLE\n============================================== -->\n\n<div class=\"surftrip-section\">\n\n    <!-- =======================\n         T\u00cdTULO EDITORIAL\n    ======================== -->\n    <div class=\"surftrip-title-block\">\n\n        <div class=\"surftrip-title-num\">\n            <span>03<\/span>\n        <\/div>\n\n        <div class=\"surftrip-title-content\">\n            <h2 class=\"surftrip-title-main\">SURFTRIPS \u2014 LIFESTYLE & FOTOGRAF\u00cdA<\/h2>\n            <p class=\"surftrip-title-sub\">\n                Cobertura fotogr\u00e1fica \u00b7 Documentaci\u00f3n del viaje\n            <\/p>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"surftrip-title-line\"><\/div>\n\n\n\n    <!-- =================================================\n         NOTA CURATORIAL\n    ================================================= -->\n    <div class=\"surftrip-intro\">\n        <div class=\"intro-line\"><\/div>\n        <div class=\"intro-number\">nota curatorial \u2014 03<\/div>\n        <p class=\"intro-text\">\n            La fotograf\u00eda captura la esencia del surftrip: picos, viajes en furgo, paisajes y la energ\u00eda compartida del grupo.\n        <\/p>\n    <\/div>\n\n\n\n    <!-- =================================================\n         GALER\u00cdA ORGANIZADA POR PALETA DE COLORES\n    ================================================= -->\n    <div class=\"surftrip-gallery-wrapper\">\n\n        <div class=\"surftrip-gallery\">\n\n            <!-- SECCI\u00d3N 1: TONOS C\u00c1LIDOS -->\n            <div class=\"st-item wide warm-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_14-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_14-scaled.jpg\"\n                     alt=\"Surftrip - Atardecer dorado Marruecos\">\n            <\/div>\n\n            <div class=\"st-item warm-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Peniche_2025_62.1-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Peniche_2025_62.1-scaled.jpg\"\n                     alt=\"Surftrip - Luz c\u00e1lida de tarde Peniche\">\n            <\/div>\n\n            <div class=\"st-item tall warm-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_09-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_09-scaled.jpg\"\n                     alt=\"Surftrip - Amanecer des\u00e9rtico\">\n            <\/div>\n\n            <div class=\"st-item warm-to-cool\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Peniche_2025_63.1-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Peniche_2025_63.1-scaled.jpg\"\n                     alt=\"Surftrip - Ocaso oce\u00e1nico\">\n            <\/div>\n\n            <!-- SECCI\u00d3N 2: TONOS AZULES\/VERDES -->\n            <div class=\"st-item tall cool-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Asturias_2024_53-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Asturias_2024_53-scaled.jpg\"\n                     alt=\"Surftrip - Azul profundo Asturias\">\n            <\/div>\n\n            <div class=\"st-item wide cool-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_172-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_172-scaled.jpg\"\n                     alt=\"Surftrip - Agua cristalina C\u00e1diz\">\n            <\/div>\n\n            <div class=\"st-item cool-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_180-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/12\/Cadiz_2024_180-scaled.jpg\"\n                     alt=\"Surftrip - Ola azul verdosa\">\n            <\/div>\n\n            <div class=\"st-item mobile-hidden cool-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Asturias_2024_58.png\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Asturias_2024_58.png\"\n                     alt=\"Surftrip - Verde paisaje asturiano\">\n            <\/div>\n\n            <div class=\"st-item mobile-hidden cool-to-muted\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/09\/Euskadi_2025_Hover-Flex-scaled-1.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/09\/Euskadi_2025_Hover-Flex-scaled-1.jpg\"\n                     alt=\"Surftrip - Niebla costera Euskadi\">\n            <\/div>\n\n            <!-- SECCI\u00d3N 3: TONOS GRISES\/ATMOSF\u00c9RICOS -->\n            <div class=\"st-item wide muted-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Francia_2024_11.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Francia_2024_11.jpg\"\n                     alt=\"Surftrip - Gris atmosf\u00e9rico Francia\">\n            <\/div>\n\n            <div class=\"st-item muted-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Francia_2024_14.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Francia_2024_14.jpg\"\n                     alt=\"Surftrip - Bruma ma\u00f1anera\">\n            <\/div>\n\n            <div class=\"st-item tall muted-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_08-scaled.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/10\/Marruecos_2025_08-scaled.jpg\"\n                     alt=\"Surftrip - Nubes des\u00e9rticas\">\n            <\/div>\n\n            <div class=\"st-item mobile-hidden muted-tone\">\n                <img decoding=\"async\" src=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/09\/Galicia_2025_Hover-Flex.jpg\"\n                     data-full=\"https:\/\/oroi.design\/wp-content\/uploads\/2025\/09\/Galicia_2025_Hover-Flex.jpg\"\n                     alt=\"Surftrip - Galicia brumosa\">\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   TIPOGRAF\u00cdA Y VARIABLES GLOBALES\n========================================================= *\/\n.surftrip-section * {\n    font-family: \"PP Supply Mono\", monospace;\n    color: #000000 !important;\n}\n\n:root {\n    --color-foreground: rgb(10, 10, 10);\n    --color-background: rgb(255, 255, 255);\n    --color-accent: rgb(255, 107, 53);\n    --color-warm: #FF8C42;\n    --color-cool: #2D82B5;\n    --color-muted: #4A4A4A;\n    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\/* =========================================================\n   T\u00cdTULAR\n========================================================= *\/\n.surftrip-title-block {\n    display: flex;\n    align-items: flex-start;\n    gap: 30px;\n    margin-bottom: 20px;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: slideUpFade 1s ease 0.3s forwards;\n}\n\n.surftrip-title-num { \n    writing-mode: vertical-rl; \n    transform: rotate(180deg); \n    opacity: 0.4; \n    margin-top: 8px;\n}\n\n.surftrip-title-num span { \n    font-size: 32px; \n    font-weight: 350; \n    letter-spacing: 0.1em;\n}\n\n.surftrip-title-main { \n    margin: 0 0 8px 0; \n    font-size: 28px; \n    font-weight: 400; \n    letter-spacing: -0.02em;\n    line-height: 1.1;\n}\n\n.surftrip-title-sub { \n    margin: 0; \n    font-size: 13px; \n    opacity: 0.6; \n    letter-spacing: 0.04em;\n    font-weight: 350;\n    text-transform: uppercase;\n}\n\n.surftrip-title-line { \n    height: 1px; \n    background: rgba(0,0,0,0.08); \n    margin-bottom: 50px; \n    opacity: 0;\n    animation: widthGrow 0.8s ease 0.5s forwards;\n}\n\n\n\n\/* =========================================================\n   NOTA CURATORIAL\n========================================================= *\/\n.surftrip-intro {\n    max-width: 480px;\n    margin-bottom: 60px;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: slideUpFade 1s ease 0.7s forwards;\n}\n\n.surftrip-intro .intro-line { \n    height: 1px; \n    background: rgba(0,0,0,0.08); \n    margin-bottom: 14px; \n}\n\n.surftrip-intro .intro-number { \n    font-size: 11px; \n    opacity: 0.5; \n    margin-bottom: 14px; \n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    font-weight: 400;\n}\n\n.surftrip-intro .intro-text { \n    font-size: 14px; \n    opacity: 0.75; \n    line-height: 1.5;\n    font-weight: 350;\n}\n\n\n\n\/* =========================================================\n   GALER\u00cdA UNIFICADA - DESKTOP\n========================================================= *\/\n.surftrip-gallery {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 260px;\n    gap: 16px;\n}\n\n.surftrip-gallery .st-item {\n    overflow: hidden;\n    cursor: pointer;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity .6s ease, transform .6s ease;\n    position: relative;\n    border-radius: 1px;\n}\n\n.surftrip-gallery .st-item.visible { \n    opacity: 1; \n    transform: translateY(0); \n}\n\n.surftrip-gallery .st-item:nth-child(1) { animation-delay: 0.8s; }\n.surftrip-gallery .st-item:nth-child(2) { animation-delay: 0.9s; }\n.surftrip-gallery .st-item:nth-child(3) { animation-delay: 1.0s; }\n.surftrip-gallery .st-item:nth-child(4) { animation-delay: 1.1s; }\n.surftrip-gallery .st-item:nth-child(5) { animation-delay: 1.2s; }\n.surftrip-gallery .st-item:nth-child(6) { animation-delay: 1.3s; }\n.surftrip-gallery .st-item:nth-child(7) { animation-delay: 1.4s; }\n.surftrip-gallery .st-item:nth-child(8) { animation-delay: 1.5s; }\n.surftrip-gallery .st-item:nth-child(9) { animation-delay: 1.6s; }\n.surftrip-gallery .st-item:nth-child(10) { animation-delay: 1.7s; }\n.surftrip-gallery .st-item:nth-child(11) { animation-delay: 1.8s; }\n.surftrip-gallery .st-item:nth-child(12) { animation-delay: 1.9s; }\n.surftrip-gallery .st-item:nth-child(13) { animation-delay: 2.0s; }\n\n.surftrip-gallery img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.7s var(--transition-smooth);\n    will-change: transform;\n}\n\n.surftrip-gallery .st-item:hover img { \n    transform: scale(1.03); \n}\n\n.tall { grid-row: span 2; }\n.wide { grid-column: span 2; }\n\n\n\n\/* =========================================================\n   EFECTOS DE COLOR POR TONALIDAD\n========================================================= *\/\n.warm-tone::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, \n        rgba(255,140,66,0) 0%, \n        rgba(255,140,66,0.04) 100%);\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n    opacity: 0;\n}\n\n.warm-tone::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: linear-gradient(90deg, \n        var(--color-warm) 0%, \n        rgba(255,140,66,0.7) 100%);\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.5s var(--transition-smooth);\n    z-index: 2;\n}\n\n.cool-tone::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, \n        rgba(45,130,181,0) 0%, \n        rgba(45,130,181,0.04) 100%);\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n    opacity: 0;\n}\n\n.cool-tone::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: linear-gradient(90deg, \n        var(--color-cool) 0%, \n        rgba(45,130,181,0.7) 100%);\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.5s var(--transition-smooth);\n    z-index: 2;\n}\n\n.muted-tone::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, \n        rgba(74,74,74,0) 0%, \n        rgba(74,74,74,0.04) 100%);\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n    opacity: 0;\n}\n\n.muted-tone::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: linear-gradient(90deg, \n        var(--color-muted) 0%, \n        rgba(74,74,74,0.7) 100%);\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.5s var(--transition-smooth);\n    z-index: 2;\n}\n\n.warm-to-cool::after,\n.cool-to-muted::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, \n        rgba(255,140,66,0.02) 0%, \n        rgba(45,130,181,0.02) 100%);\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n    opacity: 0;\n}\n\n.surftrip-gallery .st-item:hover::after {\n    opacity: 1;\n}\n\n.surftrip-gallery .st-item:hover::before {\n    transform: scaleX(1);\n}\n\n\n\n\/* =========================================================\n   M\u00d3VIL - MEJORADO\n========================================================= *\/\n@media (max-width: 768px) {\n    .surftrip-section {\n        padding: 0 15px;\n    }\n\n    .surftrip-title-block {\n        flex-direction: row;\n        align-items: flex-start;\n        gap: 20px;\n        margin-bottom: 15px;\n    }\n    \n    .surftrip-title-num {\n        writing-mode: vertical-rl;\n        transform: rotate(180deg);\n        margin-top: 4px;\n    }\n    \n    .surftrip-title-num span {\n        font-size: 26px;\n    }\n    \n    .surftrip-title-main {\n        font-size: 22px;\n        margin-bottom: 6px;\n        line-height: 1.15;\n    }\n    \n    .surftrip-title-sub {\n        font-size: 11px;\n        letter-spacing: 0.03em;\n    }\n    \n    .surftrip-title-line {\n        margin-bottom: 40px;\n    }\n    \n    .surftrip-intro {\n        margin-bottom: 40px;\n        max-width: 100%;\n    }\n    \n    .surftrip-intro .intro-text {\n        font-size: 13px;\n        line-height: 1.5;\n    }\n    \n    \/* GALER\u00cdA M\u00d3VIL MEJORADA *\/\n    .surftrip-gallery {\n        grid-template-columns: 1fr;\n        grid-auto-rows: auto;\n        gap: 8px; \/* Espaciado reducido *\/\n        margin: 0 -5px; \/* Compensa padding interno *\/\n    }\n\n    .surftrip-gallery .st-item {\n        margin: 0;\n        transform: translateY(0);\n        opacity: 1; \/* Mostrar todas en m\u00f3vil *\/\n        animation: none;\n        border-radius: 0;\n    }\n    \n    .surftrip-gallery img {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 4\/3;\n        object-fit: cover;\n        display: block;\n    }\n    \n    \/* Ajustes espec\u00edficos para diferentes tipos de im\u00e1genes *\/\n    .tall, .wide {\n        height: auto !important;\n        grid-column: span 1 !important;\n        grid-row: span 1 !important;\n    }\n    \n    .tall img {\n        aspect-ratio: 3\/4;\n    }\n    \n    .wide img {\n        aspect-ratio: 16\/9;\n    }\n    \n    .mobile-hidden {\n        display: block !important; \/* Mostrar todas en m\u00f3vil *\/\n    }\n    \n    \/* Eliminar efectos hover en m\u00f3vil para mejor rendimiento *\/\n    .surftrip-gallery .st-item::before,\n    .surftrip-gallery .st-item::after {\n        display: none;\n    }\n    \n    .surftrip-gallery .st-item:hover img {\n        transform: none;\n    }\n    \n    \/* Optimizar animaciones para m\u00f3vil *\/\n    .surftrip-title-block,\n    .surftrip-intro {\n        animation: none;\n        opacity: 1;\n        transform: none;\n    }\n}\n\n\/* Ajustes espec\u00edficos para pantallas muy peque\u00f1as *\/\n@media (max-width: 480px) {\n    .surftrip-section {\n        padding: 0 12px;\n    }\n    \n    .surftrip-title-block {\n        gap: 15px;\n    }\n    \n    .surftrip-title-num span {\n        font-size: 22px;\n    }\n    \n    .surftrip-title-main {\n        font-size: 19px;\n    }\n    \n    .surftrip-title-sub {\n        font-size: 10px;\n    }\n    \n    .surftrip-gallery {\n        gap: 6px;\n    }\n    \n    .surftrip-intro .intro-text {\n        font-size: 12px;\n    }\n    \n    .surftrip-gallery img {\n        aspect-ratio: 1\/1;\n    }\n    \n    .tall img {\n        aspect-ratio: 3\/4;\n    }\n    \n    .wide img {\n        aspect-ratio: 16\/9;\n    }\n}\n\n\/* Ajustes para tablets *\/\n@media (min-width: 769px) and (max-width: 1024px) {\n    .surftrip-gallery {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 14px;\n    }\n    \n    .wide {\n        grid-column: span 2;\n    }\n    \n    .surftrip-title-main {\n        font-size: 26px;\n    }\n}\n\n\n\n\/* =========================================================\n   ANIMACIONES\n========================================================= *\/\n@keyframes slideUpFade {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n}\n\n@keyframes widthGrow {\n    from { width: 0%; }\n    to { width: 100%; }\n}\n\n<\/style>\n\n\n\n<script>\n\n\/\/ SCROLL REVEAL - OPTIMIZADO\nconst galleryItems = document.querySelectorAll('.surftrip-gallery .st-item');\n\nfunction revealOnScroll() {\n    const trigger = window.innerHeight * 0.85;\n    \n    galleryItems.forEach((item, index) => {\n        if (item.getBoundingClientRect().top < trigger) {\n            setTimeout(() => {\n                item.classList.add('visible');\n            }, Math.min(index * 50, 300)); \/\/ Limitar delay m\u00e1ximo\n        }\n    });\n}\n\n\/\/ Inicializaci\u00f3n optimizada\nfunction initSurftripModule() {\n    \/\/ Configurar animaciones solo en desktop\n    if (window.innerWidth > 768) {\n        const titleBlock = document.querySelector('.surftrip-title-block');\n        const intro = document.querySelector('.surftrip-intro');\n        \n        if (titleBlock) {\n            setTimeout(() => {\n                titleBlock.style.animationPlayState = 'running';\n            }, 300);\n        }\n        \n        if (intro) {\n            setTimeout(() => {\n                intro.style.animationPlayState = 'running';\n            }, 500);\n        }\n        \n        \/\/ Inicializar scroll reveal solo en desktop\n        revealOnScroll();\n        window.addEventListener('scroll', revealOnScroll);\n    } else {\n        \/\/ En m\u00f3vil, mostrar todo inmediatamente\n        galleryItems.forEach(item => {\n            item.classList.add('visible');\n        });\n    }\n    \n    \/\/ Lightbox simple y eficiente\n    document.querySelectorAll('.surftrip-gallery img').forEach(img => {\n        img.addEventListener('click', function(e) {\n            e.stopPropagation();\n            \n            \/\/ Detectar si es m\u00f3vil\n            const isMobile = window.innerWidth <= 768;\n            \n            \/\/ Crear lightbox\n            const lightbox = document.createElement('div');\n            lightbox.className = 'lst-lightbox-temp';\n            lightbox.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0,0,0,0.98);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                z-index: 999999;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.3s ease;\n            `;\n            \n            const lightboxImg = document.createElement('img');\n            lightboxImg.src = this.getAttribute('data-full') || this.src;\n            lightboxImg.alt = this.alt;\n            lightboxImg.style.cssText = `\n                max-width: ${isMobile ? '95%' : '90%'};\n                max-height: ${isMobile ? '85%' : '90%'};\n                object-fit: contain;\n                border-radius: 1px;\n                transform: scale(0.95);\n                transition: transform 0.3s ease;\n            `;\n            \n            const closeBtn = document.createElement('div');\n            closeBtn.textContent = '\u00d7';\n            closeBtn.style.cssText = `\n                position: absolute;\n                top: ${isMobile ? '20px' : '25px'};\n                right: ${isMobile ? '20px' : '25px'};\n                color: white;\n                font-size: ${isMobile ? '24px' : '28px'};\n                cursor: pointer;\n                background: rgba(255,255,255,0.15);\n                width: ${isMobile ? '36px' : '42px'};\n                height: ${isMobile ? '36px' : '42px'};\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                transition: all 0.3s ease;\n                font-family: \"PP Supply Mono\", monospace;\n                z-index: 2;\n            `;\n            \n            lightbox.appendChild(lightboxImg);\n            lightbox.appendChild(closeBtn);\n            document.body.appendChild(lightbox);\n            \n            \/\/ Animar entrada\n            setTimeout(() => {\n                lightbox.style.opacity = '1';\n                lightboxImg.style.transform = 'scale(1)';\n            }, 10);\n            \n            \/\/ Cerrar lightbox\n            function closeLightbox() {\n                lightbox.style.opacity = '0';\n                lightboxImg.style.transform = 'scale(0.95)';\n                \n                setTimeout(() => {\n                    if (lightbox.parentNode) {\n                        lightbox.parentNode.removeChild(lightbox);\n                    }\n                    document.body.style.overflow = 'auto';\n                    document.removeEventListener('keydown', handleKeyDown);\n                }, 300);\n            }\n            \n            closeBtn.addEventListener('click', function(e) {\n                e.stopPropagation();\n                closeLightbox();\n            });\n            \n            lightbox.addEventListener('click', function(e) {\n                if (e.target === lightbox) {\n                    closeLightbox();\n                }\n            });\n            \n            \/\/ Cerrar con ESC\n            function handleKeyDown(e) {\n                if (e.key === 'Escape') {\n                    closeLightbox();\n                }\n            }\n            \n            document.addEventListener('keydown', handleKeyDown);\n            \n            \/\/ Bloquear scroll\n            document.body.style.overflow = 'hidden';\n        });\n    });\n}\n\n\/\/ Inicializar cuando el DOM est\u00e9 listo\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initSurftripModule);\n} else {\n    initSurftripModule();\n}\n\n\/\/ Re-inicializar en resize\nlet resizeTimeout;\nwindow.addEventListener('resize', function() {\n    clearTimeout(resizeTimeout);\n    resizeTimeout = setTimeout(initSurftripModule, 250);\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n Proyecto \u2013 Let&#8217;s Surf Together Direcci\u00f3n creativa, identidad de marca, dise\u00f1o web, fotograf\u00eda y estrategia digital para Let\u2019s Surf Together, empresa de viajes de surf con experiencias por todo el mundo. Durante un a\u00f1o colabor\u00e9 en construir una identidad y presencia online que transmiten su esp\u00edritu relajado y aventurero. (TIPO DE PROYECTO)Identidad de MarcaDise\u00f1o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1899","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/1899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/comments?post=1899"}],"version-history":[{"count":958,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/1899\/revisions"}],"predecessor-version":[{"id":4803,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/1899\/revisions\/4803"}],"wp:attachment":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/media?parent=1899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}